new title bar + fixed payment id width on transfer page.

https://trello.com/c/U0nxQ9vy/32-payment-id-field-in-transfer-tab-needs-to-be-much-longer
https://trello.com/c/r755XHXq/36-move-window-control-icons-to-left-hand-side-as-discussed-once-qml-is-all-done-we-will-see-how-everyone-reacts-to-it

RightPanel.qml

@@ -7,13 +7,6 @@ import "components"
 Rectangle {
     width: 330
 
-    TitleBar {
-        anchors.top: parent.top
-        anchors.right: parent.right
-        anchors.topMargin: 5
-        anchors.rightMargin: 5
-    }
-
     TabView {
         id: tabView
         anchors.left: parent.left

bitmonero.pro.user

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE QtCreatorProject>
-<!-- Written by QtCreator 3.1.2, 2014-07-13T17:44:06. -->
+<!-- Written by QtCreator 3.1.2, 2014-07-15T16:02:00. -->
 <qtcreator>
  <data>
   <variable>ProjectExplorer.Project.ActiveTarget</variable>

components/TitleBar.qml

@@ -1,140 +1,104 @@
 import QtQuick 2.2
 import QtQuick.Window 2.0
 
-Row {
+Rectangle {
-    Rectangle {
+    id: titleBar
-        width: 25
+    height: 30
-        height: 25
+    color: "#000000"
-        radius: 5
+    y: -height
-        clip: true
+    property int mouseX: 0
-        color: helpArea.containsMouse ? "#DBDBDB" : "#FFFFFF"
+    property int mouseY: 0
     
-        Rectangle {
+    Behavior on y {
-            width: 25
+        NumberAnimation { duration: 100; easing.type: Easing.InQuad }
-            height: 25
-            radius: 5
-            color: "#FFFFFF"
-            visible: helpArea.containsMouse
-            x: 1; y: 2
-        }
-
-        Image {
-            anchors.centerIn: parent
-            source: {
-                if(appWindow.whatIsEnable)
-                    return "../images/whatIsIcon.png"
-                return helpArea.containsMouse ? "../images/helpIconHovered.png" :
-                                                "../images/helpIcon.png"
-            }
-        }
-
-        MouseArea {
-            id: helpArea
-            anchors.fill: parent
-            hoverEnabled: true
-            onClicked: appWindow.whatIsEnable = !appWindow.whatIsEnable
-        }
     }
     
-    Rectangle {
+    Row {
-        width: 25
+        id: row
-        height: 25
+        anchors.right: parent.right
-        radius: 5
+        anchors.top: parent.top
-        clip: true
+        anchors.bottom: parent.bottom
-        color: minimizeArea.containsMouse ? "#DBDBDB" : "#FFFFFF"
         
         Rectangle {
-            width: 25
+            property bool containsMouse: titleBar.mouseX >= x + row.x && titleBar.mouseX <= x + row.x + width
-            height: 25
+            anchors.top: parent.top
-            radius: 5
+            anchors.bottom: parent.bottom
-            color: "#FFFFFF"
+            width: height
-            visible: minimizeArea.containsMouse
+            color: appWindow.whatIsEnable || containsMouse ? "#6B0072" : "#000000"
-            x: 1; y: 2
-        }
             
-        Image {
+            Image {
-            anchors.centerIn: parent
+                anchors.centerIn: parent
-            source: minimizeArea.containsMouse ? "../images/minimizeIconHovered.png" :
+                source: "../images/helpIcon.png"
-                                                 "../images/minimizeIcon.png"
-        }
-
-        MouseArea {
-            id: minimizeArea
-            anchors.fill: parent
-            hoverEnabled: true
-            onClicked: {
-                appWindow.visible = false
-                appWindow.visibility = Window.Minimized
             }
-        }
-    }
             
-    Rectangle {
+            MouseArea {
-        property bool checked: false
+                id: whatIsArea
-        width: 25
+                anchors.fill: parent
-        height: 25
+                onClicked: appWindow.whatIsEnable = !appWindow.whatIsEnable
-        radius: 5
-        clip: true
-        color: maximizeArea.containsMouse ? "#DBDBDB" : "#FFFFFF"
-
-        Rectangle {
-            width: 25
-            height: 25
-            radius: 5
-            color: "#FFFFFF"
-            visible: maximizeArea.containsMouse
-            x: 1; y: 2
-        }
-
-        Image {
-            anchors.centerIn: parent
-            source: {
-                if(parent.checked)
-                    return  maximizeArea.containsMouse ? "../images/backToWindowIconHovered.png" :
-                                                         "../images/backToWindowIcon.png"
-                return maximizeArea.containsMouse ? "../images/maximizeIconHovered.png" :
-                                                    "../images/maximizeIcon.png"
             }
         }
         
-        MouseArea {
+        Rectangle {
-            id: maximizeArea
+            property bool containsMouse: titleBar.mouseX >= x + row.x && titleBar.mouseX <= x + row.x + width
-            anchors.fill: parent
+            anchors.top: parent.top
-            hoverEnabled: true
+            anchors.bottom: parent.bottom
-            onClicked: {
+            width: height
-                parent.checked = !parent.checked
+            color: containsMouse ? "#3665B3" : "#000000"
-                appWindow.visibility = parent.checked ? Window.FullScreen :
+            
-                                                        Window.Windowed
+            Image {
+                anchors.centerIn: parent
+                source: "../images/minimizeIcon.png"
+            }
+            
+            MouseArea {
+                id: minimizeArea
+                anchors.fill: parent
+                onClicked: appWindow.visibility = Window.Minimized
             }
         }
-    }
-
-    Rectangle {
-        width: 25
-        height: 25
-        radius: 5
-        clip: true
-        color: closeArea.containsMouse ? "#DBDBDB" : "#FFFFFF"
         
         Rectangle {
-            width: 25
+            property bool containsMouse: titleBar.mouseX >= x + row.x && titleBar.mouseX <= x + row.x + width
-            height: 25
+            anchors.top: parent.top
-            radius: 5
+            anchors.bottom: parent.bottom
-            color: "#FFFFFF"
+            width: height
-            visible: closeArea.containsMouse
+            color: containsMouse ? "#FF6C3C" : "#000000"
-            x: 1; y: 2
+            property bool checked: false
+            
+            Image {
+                anchors.centerIn: parent
+                source: parent.checked ?  "../images/backToWindowIcon.png" :
+                                          "../images/maximizeIcon.png"
+
+            }
+            
+            MouseArea {
+                id: maximizeArea
+                hoverEnabled: true
+                onClicked: {
+                    parent.checked = !parent.checked
+                    appWindow.visibility = parent.checked ? Window.FullScreen :
+                                                            Window.Windowed
+                }
+            }
         }
         
-        Image {
+        Rectangle {
-            anchors.centerIn: parent
+            property bool containsMouse: titleBar.mouseX >= x + row.x && titleBar.mouseX <= x + row.x + width
-            source: "../images/closeIcon.png"
+            anchors.top: parent.top
-        }
+            anchors.bottom: parent.bottom
+            width: height
+            color: containsMouse ? "#E04343" : "#000000"
             
-        MouseArea {
+            Image {
-            id: closeArea
+                anchors.centerIn: parent
-            anchors.fill: parent
+                source: "../images/closeIcon.png"
-            hoverEnabled: true
+            }
-            onClicked: Qt.quit()
+            
+            MouseArea {
+                anchors.fill: parent
+                onClicked: Qt.quit()
+            }
         }
     }
 }

main.qml

@@ -140,5 +140,30 @@ ApplicationWindow {
             visible: false
             z: 100
         }
+
+        MouseArea {
+            id: frameArea
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.right: parent.right
+            height: 30
+            z: 1
+            hoverEnabled: true
+            onEntered: titleBar.y = 0
+            onExited: titleBar.y = -titleBar.height
+            propagateComposedEvents: true
+            onPressed: mouse.accepted = false
+            onReleased: mouse.accepted = false
+            onMouseXChanged: {
+                titleBar.mouseX = mouseX
+                titleBar.mouseY = mouseY
+            }
+        }
+
+        TitleBar {
+            id: titleBar
+            anchors.left: parent.left
+            anchors.right: parent.right
+        }
     }
 }

pages/Transfer.qml

@@ -119,18 +119,24 @@ Rectangle {
         text: qsTr("Payment ID <font size='2'>( Optional )</font>")
     }
 
-    Row {
+    LineEdit {
+        id: paymentLine
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.top: paymentLabel.bottom
         anchors.leftMargin: 17
         anchors.rightMargin: 17
         anchors.topMargin: 5
-        spacing: 17
+    }
 
-        LineEdit {
+    Row {
-            width: parent.width - (checkBox.width + sendButton.width + 2 * parent.spacing)
+        anchors.left: parent.left
-        }
+        anchors.right: parent.right
+        anchors.top: paymentLine.bottom
+        anchors.leftMargin: 17
+        anchors.rightMargin: 17
+        anchors.topMargin: 17
+        spacing: 17
 
         StandardButton {
             id: sendButton

qml.qrc

@@ -8,9 +8,6 @@
         <file>images/helpIcon.png</file>
         <file>images/maximizeIcon.png</file>
         <file>images/minimizeIcon.png</file>
-        <file>images/helpIconHovered.png</file>
-        <file>images/maximizeIconHovered.png</file>
-        <file>images/minimizeIconHovered.png</file>
         <file>images/moneroLogo.png</file>
         <file>components/Label.qml</file>
         <file>images/whatIsIcon.png</file>
@@ -41,7 +38,6 @@
         <file>images/descSortIndicatorActived.png</file>
         <file>images/descSortIndicatorPressed.png</file>
         <file>images/backToWindowIcon.png</file>
-        <file>images/backToWindowIconHovered.png</file>
         <file>components/DashboardTable.qml</file>
         <file>components/TableDropdown.qml</file>
         <file>images/tableOptions.png</file>
@@ -69,7 +65,7 @@
         <file>images/datePicker.png</file>
         <file>images/nextMonth.png</file>
         <file>images/prevMonth.png</file>
-        <file>components/TitleBar.qml</file>
         <file>components/TickDelegate.qml</file>
+        <file>components/TitleBar.qml</file>
     </qresource>
 </RCC>