Merge pull request #307

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

2 files changed, 92 insertions, 33 deletions

diff --git a/LeftPanel.qml b/LeftPanel.qml
index c8d696da..ffdbd760 100644
--- a/LeftPanel.qml
+++ b/LeftPanel.qml
@@ -246,20 +246,23 @@ Rectangle {
                 height: 1
             }
 
-            // ------------- Receive tab ---------------
+            // ------------- AddressBook tab ---------------
+
             MenuButton {
-                id: receiveButton
+                id: addressBookButton
                 anchors.left: parent.left
                 anchors.right: parent.right
-                text: qsTr("Receive") + translationManager.emptyString
-                symbol: qsTr("R") + translationManager.emptyString
-                dotColor: "#AAFFBB"
+                text: qsTr("Address book") + translationManager.emptyString
+                symbol: qsTr("B") + translationManager.emptyString
+                dotColor: "#FF4F41"
+                under: transferButton
                 onClicked: {
                     parent.previousButton.checked = false
-                    parent.previousButton = receiveButton
-                    panel.receiveClicked()
+                    parent.previousButton = addressBookButton
+                    panel.addressBookClicked()
                 }
             }
+
             Rectangle {
                 anchors.left: parent.left
                 anchors.right: parent.right
@@ -267,18 +270,19 @@ Rectangle {
                 color: "#505050"
                 height: 1
             }
-            // ------------- TxKey tab ---------------
+
+            // ------------- Receive tab ---------------
             MenuButton {
-                id: txkeyButton
+                id: receiveButton
                 anchors.left: parent.left
                 anchors.right: parent.right
-                text: qsTr("Verify payment") + translationManager.emptyString
-                symbol: qsTr("K") + translationManager.emptyString
+                text: qsTr("Receive") + translationManager.emptyString
+                symbol: qsTr("R") + translationManager.emptyString
                 dotColor: "#AAFFBB"
                 onClicked: {
                     parent.previousButton.checked = false
-                    parent.previousButton = txkeyButton
-                    panel.txkeyClicked()
+                    parent.previousButton = receiveButton
+                    panel.receiveClicked()
                 }
             }
             Rectangle {
@@ -312,19 +316,18 @@ Rectangle {
                 height: 1
             }
 
-            // ------------- AddressBook tab ---------------
-
+          /*  // ------------- Mining tab ---------------
             MenuButton {
-                id: addressBookButton
+                id: miningButton
                 anchors.left: parent.left
                 anchors.right: parent.right
-                text: qsTr("Address book") + translationManager.emptyString
-                symbol: qsTr("B") + translationManager.emptyString
-                dotColor: "#FF4F41"
+                text: qsTr("Mining") + translationManager.emptyString
+                symbol: qsTr("M") + translationManager.emptyString
+                dotColor: "#FFD781"
                 onClicked: {
                     parent.previousButton.checked = false
-                    parent.previousButton = addressBookButton
-                    panel.addressBookClicked()
+                    parent.previousButton = miningButton
+                    panel.miningClicked()
                 }
             }
 
@@ -332,33 +335,54 @@ Rectangle {
                 anchors.left: parent.left
                 anchors.right: parent.right
                 anchors.leftMargin: 16
+                color: miningButton.checked || settingsButton.checked ? "#1C1C1C" : "#505050"
+                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
             }
 
-          /*  // ------------- Mining tab ---------------
+            // ------------- TxKey tab ---------------
             MenuButton {
-                id: miningButton
+                id: txkeyButton
                 anchors.left: parent.left
                 anchors.right: parent.right
-                text: qsTr("Mining") + translationManager.emptyString
-                symbol: qsTr("M") + translationManager.emptyString
-                dotColor: "#FFD781"
+                text: qsTr("Verify payment") + translationManager.emptyString
+                symbol: qsTr("K") + translationManager.emptyString
+                dotColor: "#AAFFBB"
+                under: advancedButton
                 onClicked: {
                     parent.previousButton.checked = false
-                    parent.previousButton = miningButton
-                    panel.miningClicked()
+                    parent.previousButton = txkeyButton
+                    panel.txkeyClicked()
                 }
             }
-
             Rectangle {
                 anchors.left: parent.left
                 anchors.right: parent.right
                 anchors.leftMargin: 16
-                color: miningButton.checked || settingsButton.checked ? "#1C1C1C" : "#505050"
+                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
diff --git a/components/MenuButton.qml b/components/MenuButton.qml
index 1d0b00e1..9d4bbdc6 100644
--- a/components/MenuButton.qml
+++ b/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"