Merge pull request #307

d760232 LeftPanel: rejig some options to second level (moneromooo.monero)
67a7646 MenuButton: add submenus (moneromooo.monero)

LeftPanel.qml

@@ -246,6 +246,31 @@ Rectangle {
                 height: 1
             }
 
+            // ------------- AddressBook tab ---------------
+
+            MenuButton {
+                id: addressBookButton
+                anchors.left: parent.left
+                anchors.right: parent.right
+                text: qsTr("Address book") + translationManager.emptyString
+                symbol: qsTr("B") + translationManager.emptyString
+                dotColor: "#FF4F41"
+                under: transferButton
+                onClicked: {
+                    parent.previousButton.checked = false
+                    parent.previousButton = addressBookButton
+                    panel.addressBookClicked()
+                }
+            }
+
+            Rectangle {
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.leftMargin: 16
+                color: "#505050"
+                height: 1
+            }
+
             // ------------- Receive tab ---------------
             MenuButton {
                 id: receiveButton
@@ -267,27 +292,6 @@ Rectangle {
                 color: "#505050"
                 height: 1
             }
-            // ------------- TxKey tab ---------------
-            MenuButton {
-                id: txkeyButton
-                anchors.left: parent.left
-                anchors.right: parent.right
-                text: qsTr("Verify payment") + translationManager.emptyString
-                symbol: qsTr("K") + translationManager.emptyString
-                dotColor: "#AAFFBB"
-                onClicked: {
-                    parent.previousButton.checked = false
-                    parent.previousButton = txkeyButton
-                    panel.txkeyClicked()
-                }
-            }
-            Rectangle {
-                anchors.left: parent.left
-                anchors.right: parent.right
-                anchors.leftMargin: 16
-                color: "#505050"
-                height: 1
-            }
 
             // ------------- History tab ---------------
 
@@ -312,30 +316,6 @@ Rectangle {
                 height: 1
             }
 
-            // ------------- AddressBook tab ---------------
-
-            MenuButton {
-                id: addressBookButton
-                anchors.left: parent.left
-                anchors.right: parent.right
-                text: qsTr("Address book") + translationManager.emptyString
-                symbol: qsTr("B") + translationManager.emptyString
-                dotColor: "#FF4F41"
-                onClicked: {
-                    parent.previousButton.checked = false
-                    parent.previousButton = addressBookButton
-                    panel.addressBookClicked()
-                }
-            }
-
-            Rectangle {
-                anchors.left: parent.left
-                anchors.right: parent.right
-                anchors.leftMargin: 16
-                color: "#505050"
-                height: 1
-            }
-
           /*  // ------------- Mining tab ---------------
             MenuButton {
                 id: miningButton
@@ -359,6 +339,50 @@ Rectangle {
                 height: 1
             }
             */
+            // ------------- Advanced tab ---------------
+            MenuButton {
+                id: advancedButton
+                anchors.left: parent.left
+                anchors.right: parent.right
+                text: qsTr("Advanced") + translationManager.emptyString
+                symbol: qsTr("A") + translationManager.emptyString
+                dotColor: "#AAFFBB"
+                onClicked: {
+                    parent.previousButton.checked = false
+                    parent.previousButton = advancedButton
+                }
+            }
+            Rectangle {
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.leftMargin: 16
+                color: "#505050"
+                height: 1
+            }
+
+            // ------------- TxKey tab ---------------
+            MenuButton {
+                id: txkeyButton
+                anchors.left: parent.left
+                anchors.right: parent.right
+                text: qsTr("Verify payment") + translationManager.emptyString
+                symbol: qsTr("K") + translationManager.emptyString
+                dotColor: "#AAFFBB"
+                under: advancedButton
+                onClicked: {
+                    parent.previousButton.checked = false
+                    parent.previousButton = txkeyButton
+                    panel.txkeyClicked()
+                }
+            }
+            Rectangle {
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.leftMargin: 16
+                color: "#505050"
+                height: 1
+            }
+
             // ------------- Sign/verify tab ---------------
             MenuButton {
                 id: signButton
@@ -367,6 +391,7 @@ Rectangle {
                 text: qsTr("Sign/verify") + translationManager.emptyString
                 symbol: qsTr("I") + translationManager.emptyString
                 dotColor: "#AAFFBB"
+                under: advancedButton
                 onClicked: {
                     parent.previousButton.checked = false
                     parent.previousButton = signButton

components/MenuButton.qml

@@ -34,15 +34,48 @@ Rectangle {
     property bool checked: false
     property alias dotColor: dot.color
     property alias symbol: symbolText.text
+    property int numSelectedChildren: 0
+    property var under: null
     signal clicked()
 
-    height: (appWindow.height >= 800) ? 64 : 56
+    function getOffset() {
+        var offset = 0
+        var item = button
+        while (item.under) {
+            offset += 20
+            item = item.under
+        }
+        return offset
+    }
+
     color: checked ? "#FFFFFF" : "#1C1C1C"
+    property bool present: !under || under.checked || checked || under.numSelectedChildren > 0
+    height: present ? ((appWindow.height >= 800) ? 64 : 56) : 0
+
+    transform: Scale {
+        yScale: button.present ? 1 : 0
+
+        Behavior on yScale {
+            NumberAnimation { duration: 500; easing.type: Easing.InOutCubic }
+        }
+    }
+
+    Behavior on height {
+        SequentialAnimation {
+            NumberAnimation { duration: 500; easing.type: Easing.InOutCubic }
+        }
+    }
+
+    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
         anchors.left: parent.left
+        anchors.leftMargin: parent.getOffset()
         width: 50
 
         Rectangle {
@@ -85,6 +118,7 @@ Rectangle {
         anchors.verticalCenter: parent.verticalCenter
         anchors.right: parent.right
         anchors.rightMargin: 20
+        anchors.leftMargin: parent.getOffset()
         source: "../images/menuIndicator.png"
     }
 
@@ -92,7 +126,7 @@ Rectangle {
         id: label
         anchors.verticalCenter: parent.verticalCenter
         anchors.left: parent.left
-        anchors.leftMargin: 50
+        anchors.leftMargin: parent.getOffset() + 50
         font.family: "Arial"
         font.pixelSize: 18
         color: parent.checked ? "#000000" : "#FFFFFF"