New menu button layout - implemented arrow thingy

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 {

components/MenuButton.qml

@@ -58,21 +58,89 @@ 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 {
+    // Button gradient whilst checked
-        visible: parent.checked ? true : false
+    // @TODO: replace by .png - gradient not available in 2d renderer
-        width: 300
+    LinearGradient {
-        height: 40
+        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" }
+        }
+    }
 
-        LinearGradient {
+    // button decorations that are subject to leftMargin offsets
-            anchors.fill: parent
+    Rectangle {
-            start: Qt.point(0, 0)
+        anchors.left: parent.left
-            end: Qt.point(300, 0)
+        anchors.leftMargin: parent.getOffset() + 20 * scaleRatio
-            gradient: Gradient {
+        height: parent.height
-               GradientStop { position: 1.0; color: "#333333" }
+        width: button.checked ? 20: 10
-               GradientStop { position: 0.0; color: "black" }
+        color: "#00000000"
-            }
+
+        // dot if unchecked
+        Rectangle {
+            id: dot
+            anchors.centerIn: parent
+            width: 8 * scaleRatio
+            height: 8 * scaleRatio
+            radius: 4 * scaleRatio
+            color: button.dotColor
+            visible: !button.checked
+        }
+
+        // arrow if checked
+        Image {
+            anchors.centerIn: parent
+            anchors.left: parent.left
+            source: "../images/menuArrow.png"
+            visible: button.checked
+        }
+
+        // button text
+        Text {
+            id: label
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: parent.right
+            anchors.leftMargin: 8 * scaleRatio
+            font.family: "Arial"
+            font.bold: true
+            font.pixelSize: 16 * scaleRatio
+            color: "#FFFFFF"
+        }
+    }
+
+    // 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
+    }
+
+    Text {
+        id: symbolText
+        anchors.centerIn: parent
+        font.pixelSize: 11 * scaleRatio
+        font.bold: true
+        color: button.checked || buttonArea.containsMouse ? "#FFFFFF" : dot.color
+        visible: appWindow.ctrlPressed
+    }
+
+    MouseArea {
+        id: buttonArea
+        anchors.fill: parent
+        hoverEnabled: true
+        onClicked: {
+            if(parent.checked)
+                return
+            button.doClick()
+            parent.checked = true
         }
     }
 
@@ -94,79 +162,4 @@ Rectangle {
         // 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
-        anchors.left: parent.left
-        anchors.leftMargin: parent.getOffset()
-        width: 46 * scaleRatio
-
-        Rectangle {
-            id: dot
-            anchors.centerIn: parent
-            width: 8 * scaleRatio
-            height: width
-            radius: height / 2
-
-            Rectangle {
-                anchors.centerIn: parent
-                width: 8 * scaleRatio
-                height: width
-                radius: height / 2
-                color: "#1C1C1C"
-                visible: !button.checked && !buttonArea.containsMouse
-            }
-        }
-
-        Text {
-            id: symbolText
-            anchors.centerIn: parent
-            font.pixelSize: 11 * scaleRatio
-            font.bold: true
-            color: button.checked || buttonArea.containsMouse ? "#FFFFFF" : dot.color
-            visible: appWindow.ctrlPressed
-        }
-    }
-
-//    Rectangle {
-//        anchors.left: parent.left
-//        anchors.top: parent.top
-//        anchors.bottom: parent.bottom
-//        width: 1
-//        color: "#DBDBDB"
-//        visible: parent.checked
-//    }
-
-    // menu button arrow
-    Image {
-        anchors.verticalCenter: parent.verticalCenter
-        anchors.right: parent.right
-        anchors.rightMargin: 20 * scaleRatio
-        anchors.leftMargin: parent.getOffset()
-        source: "../images/right.png"
-    }
-
-    // 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"
-    }
-
-    MouseArea {
-        id: buttonArea
-        anchors.fill: parent
-        hoverEnabled: true
-        onClicked: {
-            if(parent.checked)
-                return
-            button.doClick()
-            parent.checked = true
-        }
-    }
 }

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>