StandardDropdown: implement automatic closing

monero-project · Dec 2, 2019 · 10a703b · 10a703b
1 parent 380f218
commit 10a703b
Showing 1 changed file with 103 additions and 109 deletions.
diff --git a/components/StandardDropdown.qml b/components/StandardDropdown.qml
@@ -27,6 +27,7 @@
 // THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
 import QtQuick 2.9
+import QtQuick.Controls 2.2
 import QtGraphicalEffects 1.0
 
 import "../components" as MoneroComponents
@@ -42,7 +43,7 @@ Item {
     property string releasedColor: MoneroComponents.Style.titleBarButtonHoverColor
     property string textColor: MoneroComponents.Style.defaultFontColor
     property alias currentIndex: columnid.currentIndex
-    property bool expanded: false
+    readonly property alias expanded: popup.visible
     property int dropdownHeight: 42
     property int fontHeaderSize: 16
     property int fontItemSize: 14
@@ -56,18 +57,6 @@ Item {
     signal changed();
 
     onExpandedChanged: if(expanded) appWindow.currentItem = dropdown
-    function hide() { dropdown.expanded = false }
-    function containsPoint(px, py) {
-        if(px < 0)
-            return false
-        if(px > width)
-            return false
-        if(py < 0)
-            return false
-        if(py > height + droplist.height)
-            return false
-        return true
-    }
 
     // Workaroud for suspected memory leak in 5.8 causing malloc crash on app exit
     function update() {
@@ -128,118 +117,123 @@ Item {
         MouseArea {
             id: dropArea
             anchors.fill: parent
-            onClicked: dropdown.expanded = !dropdown.expanded
+            onClicked: dropdown.expanded ? popup.close() : popup.open()
             hoverEnabled: true
             cursorShape: Qt.PointingHandCursor
         }
     }
 
-    Rectangle {
-        id: droplist
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.top: head.bottom
-        clip: true
-        height: dropdown.expanded ? columnid.height : 0
-        color: dropdown.pressedColor
+    Popup {
+        id: popup
+        padding: 0
 
         Rectangle {
-            anchors.left: parent.left
-            anchors.top: parent.top
-            width: 3; height: 3
+            id: droplist
+            x: dropdown.x
+            width: dropdown.width
+            y: head.y + head.height
+            clip: true
+            height: dropdown.expanded ? columnid.height : 0
             color: dropdown.pressedColor
-        }
 
-        Rectangle {
-            anchors.right: parent.right
-            anchors.top: parent.top
-            width: 3; height: 3
-            color: dropdown.pressedColor
-        }
+            Rectangle {
+                anchors.left: parent.left
+                anchors.top: parent.top
+                width: 3; height: 3
+                color: dropdown.pressedColor
+            }
 
-        Behavior on height {
-            NumberAnimation { duration: 100; easing.type: Easing.InQuad }
-        }
+            Rectangle {
+                anchors.right: parent.right
+                anchors.top: parent.top
+                width: 3; height: 3
+                color: dropdown.pressedColor
+            }
 
-        Column {
-            id: columnid
-            anchors.left: parent.left
-            anchors.right: parent.right
-            anchors.top: parent.top
-            property int currentIndex: 0
-
-            Repeater {
-                id: repeater
-
-                // Workaround for translations in listElements. All translated strings needs to be listed in this file.
-                property string stringLow: qsTr("Low (x1 fee)") + translationManager.emptyString
-                property string stringMedium:  qsTr("Medium (x20 fee)") + translationManager.emptyString
-                property string stringHigh:  qsTr("High (x166 fee)") + translationManager.emptyString
-                property string stringSlow: qsTr("Slow (x0.25 fee)") + translationManager.emptyString
-                property string stringDefault: qsTr("Default (x1 fee)") + translationManager.emptyString
-                property string stringFast: qsTr("Fast (x5 fee)") + translationManager.emptyString
-                property string stringFastest: qsTr("Fastest (x41.5 fee)") + translationManager.emptyString
-                property string stringAll:  qsTr("All") + translationManager.emptyString
-                property string stringSent:  qsTr("Sent") + translationManager.emptyString
-                property string stringReceived:  qsTr("Received") + translationManager.emptyString
-
-                delegate: Rectangle {
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    height: (dropdown.dropdownHeight * 0.75)
-                    //radius: index === repeater.count - 1 ? 4 : 0
-                    color: itemArea.containsMouse || index === columnid.currentIndex || itemArea.containsMouse ? dropdown.releasedColor : dropdown.pressedColor
-
-                    MoneroComponents.TextPlain {
-                        id: col1Text
-                        anchors.verticalCenter: parent.verticalCenter
-                        anchors.left: parent.left
-                        anchors.right: col2Text.left
-                        anchors.leftMargin: 12
-                        anchors.rightMargin: 0
-                        font.family: MoneroComponents.Style.fontRegular.name
-                        font.bold: true
-                        font.pixelSize: fontItemSize
-                        color: itemArea.containsMouse || index === columnid.currentIndex || itemArea.containsMouse ? "#FA6800" : "#FFFFFF"
-                        text: qsTr(column1) + translationManager.emptyString
-                    }
+            Behavior on height {
+                NumberAnimation { duration: 100; easing.type: Easing.InQuad }
+            }
 
-                    MoneroComponents.TextPlain {
-                        id: col2Text
-                        anchors.verticalCenter: parent.verticalCenter
+            Column {
+                id: columnid
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.top: parent.top
+                property int currentIndex: 0
+
+                Repeater {
+                    id: repeater
+
+                    // Workaround for translations in listElements. All translated strings needs to be listed in this file.
+                    property string stringLow: qsTr("Low (x1 fee)") + translationManager.emptyString
+                    property string stringMedium:  qsTr("Medium (x20 fee)") + translationManager.emptyString
+                    property string stringHigh:  qsTr("High (x166 fee)") + translationManager.emptyString
+                    property string stringSlow: qsTr("Slow (x0.25 fee)") + translationManager.emptyString
+                    property string stringDefault: qsTr("Default (x1 fee)") + translationManager.emptyString
+                    property string stringFast: qsTr("Fast (x5 fee)") + translationManager.emptyString
+                    property string stringFastest: qsTr("Fastest (x41.5 fee)") + translationManager.emptyString
+                    property string stringAll:  qsTr("All") + translationManager.emptyString
+                    property string stringSent:  qsTr("Sent") + translationManager.emptyString
+                    property string stringReceived:  qsTr("Received") + translationManager.emptyString
+
+                    delegate: Rectangle {
+                        anchors.left: parent.left
                         anchors.right: parent.right
-                        anchors.rightMargin: 45
-                        font.family: MoneroComponents.Style.fontRegular.name
-                        font.pixelSize: 14
-                        color: "#FFFFFF"
-                        text: ""
-                    }
+                        height: (dropdown.dropdownHeight * 0.75)
+                        //radius: index === repeater.count - 1 ? 4 : 0
+                        color: itemArea.containsMouse || index === columnid.currentIndex || itemArea.containsMouse ? dropdown.releasedColor : dropdown.pressedColor
+
+                        MoneroComponents.TextPlain {
+                            id: col1Text
+                            anchors.verticalCenter: parent.verticalCenter
+                            anchors.left: parent.left
+                            anchors.right: col2Text.left
+                            anchors.leftMargin: 12
+                            anchors.rightMargin: 0
+                            font.family: MoneroComponents.Style.fontRegular.name
+                            font.bold: true
+                            font.pixelSize: fontItemSize
+                            color: itemArea.containsMouse || index === columnid.currentIndex || itemArea.containsMouse ? "#FA6800" : "#FFFFFF"
+                            text: qsTr(column1) + translationManager.emptyString
+                        }
 
-                    Rectangle {
-                        anchors.left: parent.left
-                        anchors.top: parent.top
-                        width: 3; height: 3
-                        color: parent.color
-                    }
+                        MoneroComponents.TextPlain {
+                            id: col2Text
+                            anchors.verticalCenter: parent.verticalCenter
+                            anchors.right: parent.right
+                            anchors.rightMargin: 45
+                            font.family: MoneroComponents.Style.fontRegular.name
+                            font.pixelSize: 14
+                            color: "#FFFFFF"
+                            text: ""
+                        }
 
-                    Rectangle {
-                        anchors.right: parent.right
-                        anchors.top: parent.top
-                        width: 3; height: 3
-                        color: parent.color
-                    }
+                        Rectangle {
+                            anchors.left: parent.left
+                            anchors.top: parent.top
+                            width: 3; height: 3
+                            color: parent.color
+                        }
+
+                        Rectangle {
+                            anchors.right: parent.right
+                            anchors.top: parent.top
+                            width: 3; height: 3
+                            color: parent.color
+                        }
 
-                    MouseArea {
-                        id: itemArea
-                        anchors.fill: parent
-                        hoverEnabled: true
-                        cursorShape: Qt.PointingHandCursor
-
-                        onClicked: {
-                            dropdown.expanded = false
-                            columnid.currentIndex = index
-                            changed();
-                            dropdown.update()
+                        MouseArea {
+                            id: itemArea
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            cursorShape: Qt.PointingHandCursor
+
+                            onClicked: {
+                                popup.close()
+                                columnid.currentIndex = index
+                                changed();
+                                dropdown.update()
+                            }
                         }
                     }
                 }