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,105 +1,79 @@
 import QtQuick 2.2
 import QtQuick.Window 2.0
 
-Row {
 Rectangle {
-        width: 25
+    id: titleBar
-        height: 25
+    height: 30
-        radius: 5
+    color: "#000000"
-        clip: true
+    y: -height
-        color: helpArea.containsMouse ? "#DBDBDB" : "#FFFFFF"
+    property int mouseX: 0
+    property int mouseY: 0
+    
+    Behavior on y {
+        NumberAnimation { duration: 100; easing.type: Easing.InQuad }
+    }
+    
+    Row {
+        id: row
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
         
         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: helpArea.containsMouse
+            color: appWindow.whatIsEnable || containsMouse ? "#6B0072" : "#000000"
-            x: 1; y: 2
-        }
             
             Image {
                 anchors.centerIn: parent
-            source: {
+                source: "../images/helpIcon.png"
-                if(appWindow.whatIsEnable)
-                    return "../images/whatIsIcon.png"
-                return helpArea.containsMouse ? "../images/helpIconHovered.png" :
-                                                "../images/helpIcon.png"
-            }
             }
             
             MouseArea {
-            id: helpArea
+                id: whatIsArea
                 anchors.fill: parent
-            hoverEnabled: true
                 onClicked: appWindow.whatIsEnable = !appWindow.whatIsEnable
             }
         }
         
         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
-        clip: true
+            width: height
-        color: minimizeArea.containsMouse ? "#DBDBDB" : "#FFFFFF"
+            color: containsMouse ? "#3665B3" : "#000000"
-
-        Rectangle {
-            width: 25
-            height: 25
-            radius: 5
-            color: "#FFFFFF"
-            visible: minimizeArea.containsMouse
-            x: 1; y: 2
-        }
             
             Image {
                 anchors.centerIn: parent
-            source: minimizeArea.containsMouse ? "../images/minimizeIconHovered.png" :
+                source: "../images/minimizeIcon.png"
-                                                 "../images/minimizeIcon.png"
             }
             
             MouseArea {
                 id: minimizeArea
                 anchors.fill: parent
-            hoverEnabled: true
+                onClicked: appWindow.visibility = Window.Minimized
-            onClicked: {
-                appWindow.visible = false
-                appWindow.visibility = Window.Minimized
-            }
             }
         }
         
         Rectangle {
+            property bool containsMouse: titleBar.mouseX >= x + row.x && titleBar.mouseX <= x + row.x + width
+            anchors.top: parent.top
+            anchors.bottom: parent.bottom
+            width: height
+            color: containsMouse ? "#FF6C3C" : "#000000"
             property bool checked: false
-        width: 25
-        height: 25
-        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: {
+                source: parent.checked ?  "../images/backToWindowIcon.png" :
-                if(parent.checked)
-                    return  maximizeArea.containsMouse ? "../images/backToWindowIconHovered.png" :
-                                                         "../images/backToWindowIcon.png"
-                return maximizeArea.containsMouse ? "../images/maximizeIconHovered.png" :
                                           "../images/maximizeIcon.png"
-            }
+
             }
             
             MouseArea {
                 id: maximizeArea
-            anchors.fill: parent
                 hoverEnabled: true
                 onClicked: {
                     parent.checked = !parent.checked
@@ -110,20 +84,11 @@ Row {
         }
         
         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
-        clip: true
+            width: height
-        color: closeArea.containsMouse ? "#DBDBDB" : "#FFFFFF"
+            color: containsMouse ? "#E04343" : "#000000"
-
-        Rectangle {
-            width: 25
-            height: 25
-            radius: 5
-            color: "#FFFFFF"
-            visible: closeArea.containsMouse
-            x: 1; y: 2
-        }
             
             Image {
                 anchors.centerIn: parent
@@ -131,10 +96,9 @@ Row {
             }
             
             MouseArea {
-            id: closeArea
                 anchors.fill: parent
-            hoverEnabled: true
                 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,19 +119,25 @@ 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 {
-            width: parent.width - (checkBox.width + sendButton.width + 2 * parent.spacing)
     }
 
+    Row {
+        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
             width: 60

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>