New menu button layout - implemented arrow thingy

4 files changed, 73 insertions, 71 deletions

diff --git a/LeftPanel.qml b/LeftPanel.qml
index 678cbef3..faf55a6d 100644
--- a/LeftPanel.qml
+++ b/LeftPanel.qml
@@ -289,6 +289,14 @@ Rectangle {
             }
             */
 
+            // top border
+            Rectangle {
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.leftMargin: 16
+                color: "#313131"
+                height: 1
+            }
 
             // ------------- Transfer tab ---------------
             MenuButton {
diff --git a/components/MenuButton.qml b/components/MenuButton.qml
index 7c7b0426..600bcd51 100644
--- a/components/MenuButton.qml
+++ b/components/MenuButton.qml
@@ -58,104 +58,78 @@ Rectangle {
 
     color: "black"
     property bool present: !under || under.checked || checked || under.numSelectedChildren > 0
-    height: present ? ((appWindow.height >= 800) ? 40 * scaleRatio  : 52 * scaleRatio ) : 0
+    height: present ? ((appWindow.height >= 800) ? 44 * scaleRatio  : 52 * scaleRatio ) : 0
 
-    Item {
-        visible: parent.checked ? true : false
-        width: 300
-        height: 40
-
-        LinearGradient {
-            anchors.fill: parent
-            start: Qt.point(0, 0)
-            end: Qt.point(300, 0)
-            gradient: Gradient {
-               GradientStop { position: 1.0; color: "#333333" }
-               GradientStop { position: 0.0; color: "black" }
-            }
-        }
-    }
-
-    transform: Scale {
-        yScale: button.present ? 1 : 0
-
-        Behavior on yScale {
-            NumberAnimation { duration: 200; easing.type: Easing.OutCubic }
-        }
-    }
-
-    Behavior on height {
-        SequentialAnimation {
-            NumberAnimation { duration: 200; easing.type: Easing.OutCubic }
+    // Button gradient whilst checked
+    // @TODO: replace by .png - gradient not available in 2d renderer
+    LinearGradient {
+        visible: button.checked ? true : false
+        anchors.fill: parent
+        start: Qt.point(0, 0)
+        end: Qt.point(300, 0)
+        gradient: Gradient {
+           GradientStop { position: 1.0; color: "#333333" }
+           GradientStop { position: 0.0; color: "black" }
         }
     }
 
-    Behavior on checked {
-        // we get the value of checked before the change
-        ScriptAction { script: if (under) under.numSelectedChildren += checked > 0 ? -1 : 1 }
-    }
-
-    Item {
-        anchors.top: parent.top
-        anchors.bottom: parent.bottom
+    // button decorations that are subject to leftMargin offsets
+    Rectangle {
         anchors.left: parent.left
-        anchors.leftMargin: parent.getOffset()
-        width: 46 * scaleRatio
+        anchors.leftMargin: parent.getOffset() + 20 * scaleRatio
+        height: parent.height
+        width: button.checked ? 20: 10
+        color: "#00000000"
 
+        // dot if unchecked
         Rectangle {
             id: dot
             anchors.centerIn: parent
             width: 8 * scaleRatio
-            height: width
-            radius: height / 2
+            height: 8 * scaleRatio
+            radius: 4 * scaleRatio
+            color: button.dotColor
+            visible: !button.checked
+        }
 
-            Rectangle {
-                anchors.centerIn: parent
-                width: 8 * scaleRatio
-                height: width
-                radius: height / 2
-                color: "#1C1C1C"
-                visible: !button.checked && !buttonArea.containsMouse
-            }
+        // arrow if checked
+        Image {
+            anchors.centerIn: parent
+            anchors.left: parent.left
+            source: "../images/menuArrow.png"
+            visible: button.checked
         }
 
+        // button text
         Text {
-            id: symbolText
-            anchors.centerIn: parent
-            font.pixelSize: 11 * scaleRatio
+            id: label
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: parent.right
+            anchors.leftMargin: 8 * scaleRatio
+            font.family: "Arial"
             font.bold: true
-            color: button.checked || buttonArea.containsMouse ? "#FFFFFF" : dot.color
-            visible: appWindow.ctrlPressed
+            font.pixelSize: 16 * scaleRatio
+            color: "#FFFFFF"
         }
     }
 
-//    Rectangle {
-//        anchors.left: parent.left
-//        anchors.top: parent.top
-//        anchors.bottom: parent.bottom
-//        width: 1
-//        color: "#DBDBDB"
-//        visible: parent.checked
-//    }
-
-    // menu button arrow
+    // menu button right arrow
     Image {
         anchors.verticalCenter: parent.verticalCenter
         anchors.right: parent.right
         anchors.rightMargin: 20 * scaleRatio
         anchors.leftMargin: parent.getOffset()
         source: "../images/right.png"
+        opacity: button.checked ? 1.0 : 0.4
     }
 
-    // menu button text
     Text {
-        id: label
-        anchors.verticalCenter: parent.verticalCenter
-        anchors.left: parent.left
-        anchors.leftMargin: parent.getOffset() + 38 * scaleRatio
-        font.family: "Arial"
-        font.pixelSize: 16 * scaleRatio
-        color: "#FFFFFF"
+        id: symbolText
+        anchors.centerIn: parent
+        font.pixelSize: 11 * scaleRatio
+        font.bold: true
+        color: button.checked || buttonArea.containsMouse ? "#FFFFFF" : dot.color
+        visible: appWindow.ctrlPressed
     }
 
     MouseArea {
@@ -169,4 +143,23 @@ Rectangle {
             parent.checked = true
         }
     }
+
+    transform: Scale {
+        yScale: button.present ? 1 : 0
+
+        Behavior on yScale {
+            NumberAnimation { duration: 200; easing.type: Easing.OutCubic }
+        }
+    }
+
+    Behavior on height {
+        SequentialAnimation {
+            NumberAnimation { duration: 200; easing.type: Easing.OutCubic }
+        }
+    }
+
+    Behavior on checked {
+        // we get the value of checked before the change
+        ScriptAction { script: if (under) under.numSelectedChildren += checked > 0 ? -1 : 1 }
+    }
 }
diff --git a/images/menuArrow.png b/images/menuArrow.png
new file mode 100755
index 00000000..6443f794
--- /dev/null
+++ b/images/menuArrow.png
diff --git a/qml.qrc b/qml.qrc
index d1358ba3..d1c5431c 100644
--- a/qml.qrc
+++ b/qml.qrc
@@ -177,5 +177,6 @@
         <file>images/balanceGradient.jpg</file>
         <file>images/titlebarGradient.jpg</file>
         <file>images/titlebarLogo.png</file>
+        <file>images/menuArrow.png</file>
     </qresource>
 </RCC>