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

15 files changed, 124 insertions, 140 deletions

diff --git a/RightPanel.qml b/RightPanel.qml
index fc05ab8f..618e92e4 100644
--- a/RightPanel.qml
+++ b/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
diff --git a/bitmonero.pro.user b/bitmonero.pro.user
index 65e23426..297eefb7 100644
--- a/bitmonero.pro.user
+++ b/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>
diff --git a/components/TitleBar.qml b/components/TitleBar.qml
index 46171a31..caefff5a 100644
--- a/components/TitleBar.qml
+++ b/components/TitleBar.qml
@@ -1,140 +1,104 @@
 import QtQuick 2.2
 import QtQuick.Window 2.0
 
-Row {
-    Rectangle {
-        width: 25
-        height: 25
-        radius: 5
-        clip: true
-        color: helpArea.containsMouse ? "#DBDBDB" : "#FFFFFF"
-
+Rectangle {
+    id: titleBar
+    height: 30
+    color: "#000000"
+    y: -height
+    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
-            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"
+            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: appWindow.whatIsEnable || containsMouse ? "#6B0072" : "#000000"
+            
+            Image {
+                anchors.centerIn: parent
+                source: "../images/helpIcon.png"
+            }
+            
+            MouseArea {
+                id: whatIsArea
+                anchors.fill: parent
+                onClicked: appWindow.whatIsEnable = !appWindow.whatIsEnable
             }
         }
-
-        MouseArea {
-            id: helpArea
-            anchors.fill: parent
-            hoverEnabled: true
-            onClicked: appWindow.whatIsEnable = !appWindow.whatIsEnable
-        }
-    }
-
-    Rectangle {
-        width: 25
-        height: 25
-        radius: 5
-        clip: true
-        color: minimizeArea.containsMouse ? "#DBDBDB" : "#FFFFFF"
-
+        
         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" :
-                                                 "../images/minimizeIcon.png"
-        }
-
-        MouseArea {
-            id: minimizeArea
-            anchors.fill: parent
-            hoverEnabled: true
-            onClicked: {
-                appWindow.visible = false
-                appWindow.visibility = Window.Minimized
+            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 ? "#3665B3" : "#000000"
+            
+            Image {
+                anchors.centerIn: parent
+                source: "../images/minimizeIcon.png"
+            }
+            
+            MouseArea {
+                id: minimizeArea
+                anchors.fill: parent
+                onClicked: appWindow.visibility = Window.Minimized
             }
         }
-    }
-
-    Rectangle {
-        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
-        }
+            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
+            
+            Image {
+                anchors.centerIn: parent
+                source: parent.checked ?  "../images/backToWindowIcon.png" :
+                                          "../images/maximizeIcon.png"
 
-        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 {
-            id: maximizeArea
-            anchors.fill: parent
-            hoverEnabled: true
-            onClicked: {
-                parent.checked = !parent.checked
-                appWindow.visibility = parent.checked ? Window.FullScreen :
-                                                        Window.Windowed
+            
+            MouseArea {
+                id: maximizeArea
+                hoverEnabled: true
+                onClicked: {
+                    parent.checked = !parent.checked
+                    appWindow.visibility = parent.checked ? Window.FullScreen :
+                                                            Window.Windowed
+                }
             }
         }
-    }
-
-    Rectangle {
-        width: 25
-        height: 25
-        radius: 5
-        clip: true
-        color: closeArea.containsMouse ? "#DBDBDB" : "#FFFFFF"
-
+        
         Rectangle {
-            width: 25
-            height: 25
-            radius: 5
-            color: "#FFFFFF"
-            visible: closeArea.containsMouse
-            x: 1; y: 2
-        }
-
-        Image {
-            anchors.centerIn: parent
-            source: "../images/closeIcon.png"
-        }
-
-        MouseArea {
-            id: closeArea
-            anchors.fill: parent
-            hoverEnabled: true
-            onClicked: Qt.quit()
+            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 ? "#E04343" : "#000000"
+            
+            Image {
+                anchors.centerIn: parent
+                source: "../images/closeIcon.png"
+            }
+            
+            MouseArea {
+                anchors.fill: parent
+                onClicked: Qt.quit()
+            }
         }
     }
 }
diff --git a/images/backToWindowIcon.png b/images/backToWindowIcon.png
index 7d1c3a6e..ed214147 100644
--- a/images/backToWindowIcon.png
+++ b/images/backToWindowIcon.png
diff --git a/images/backToWindowIconHovered.png b/images/backToWindowIconHovered.png
deleted file mode 100644
index 4a27a0c6..00000000
--- a/images/backToWindowIconHovered.png
+++ /dev/null
diff --git a/images/closeIcon.png b/images/closeIcon.png
index c0e65fa0..7e28b912 100644
--- a/images/closeIcon.png
+++ b/images/closeIcon.png
diff --git a/images/helpIcon.png b/images/helpIcon.png
index 373e6cca..51661e33 100644
--- a/images/helpIcon.png
+++ b/images/helpIcon.png
diff --git a/images/helpIconHovered.png b/images/helpIconHovered.png
deleted file mode 100644
index 16476263..00000000
--- a/images/helpIconHovered.png
+++ /dev/null
diff --git a/images/maximizeIcon.png b/images/maximizeIcon.png
index 177c20c5..a8ee06e4 100644
--- a/images/maximizeIcon.png
+++ b/images/maximizeIcon.png
diff --git a/images/maximizeIconHovered.png b/images/maximizeIconHovered.png
deleted file mode 100644
index 92a3a2ab..00000000
--- a/images/maximizeIconHovered.png
+++ /dev/null
diff --git a/images/minimizeIcon.png b/images/minimizeIcon.png
index af10ae7a..18920452 100644
--- a/images/minimizeIcon.png
+++ b/images/minimizeIcon.png
diff --git a/images/minimizeIconHovered.png b/images/minimizeIconHovered.png
deleted file mode 100644
index 8d7ac355..00000000
--- a/images/minimizeIconHovered.png
+++ /dev/null
diff --git a/main.qml b/main.qml
index ef9191ba..47af11ae 100644
--- a/main.qml
+++ b/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
+        }
     }
 }
diff --git a/pages/Transfer.qml b/pages/Transfer.qml
index bc0198c2..8fa3cd57 100644
--- a/pages/Transfer.qml
+++ b/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 {
-            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
diff --git a/qml.qrc b/qml.qrc
index e89c6d49..21a79120 100644
--- a/qml.qrc
+++ b/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>