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

1 files changed, 86 insertions, 122 deletions

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()
+            }
         }
     }
 }