Merge pull request #2542

32f7666 DatePicker: don't propagate mouse events to underlying controls (xiphon)

1 files changed, 173 insertions, 177 deletions

diff --git a/components/DatePicker.qml b/components/DatePicker.qml
index c51e451c..1908e1b3 100644
--- a/components/DatePicker.qml
+++ b/components/DatePicker.qml
@@ -28,6 +28,7 @@
 
 import QtQuick 2.9
 import QtQuick.Controls 1.2
+import QtQuick.Controls 2.2 as QtQuickControls2
 import QtQuick.Layouts 1.2
 import QtGraphicalEffects 1.0
 import QtQuick.Controls.Styles 1.2
@@ -37,8 +38,7 @@ import "effects/" as MoneroEffects
 
 Item {
     id: datePicker
-    z: parent.z + 1
-    property bool expanded: false
+    readonly property alias expanded: popup.visible
     property date currentDate
     property bool showCurrentDate: true
     property color backgroundColor : MoneroComponents.Style.appWindowBorderColor
@@ -52,19 +52,6 @@ Item {
 
     onExpandedChanged: if(expanded) appWindow.currentItem = datePicker
 
-    function hide() { datePicker.expanded = false }
-    function containsPoint(px, py) {
-        if(px < 0)
-            return false
-        if(px > width)
-            return false
-        if(py < 0)
-            return false
-        if(py > height + calendarRect.height)
-            return false
-        return true
-    }
-
     Rectangle {
         id: inputLabelRect
         color: "transparent"
@@ -253,7 +240,7 @@ Item {
 
                 MouseArea {
                     anchors.fill: parent
-                    onClicked: datePicker.expanded = !datePicker.expanded
+                    onClicked: datePicker.expanded ? popup.close() : popup.open()
                     hoverEnabled: true
                     cursorShape: Qt.PointingHandCursor
                 }
@@ -261,195 +248,204 @@ Item {
         }
     }
 
-    Rectangle {
-        id: calendarRect
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.top: head.bottom
-        anchors.topMargin: 10
-        color: MoneroComponents.Style.middlePanelBackgroundColor
-        border.width: 1
-        border.color: MoneroComponents.Style.appWindowBorderColor
-        height: datePicker.expanded ? calendar.height + 2 : 0
-        clip: true
-
-        Behavior on height {
-            NumberAnimation { duration: 100; easing.type: Easing.InQuad }
-        }
+    QtQuickControls2.Popup {
+        id: popup
+        padding: 0
 
         Rectangle {
-            anchors.left: parent.left
-            anchors.right: parent.right
-            anchors.leftMargin: 1
-            anchors.rightMargin: 1
-            anchors.top: parent.top
-            color: MoneroComponents.Style.appWindowBorderColor
-            height: 1
-        }
+            id: calendarRect
+            width: head.width
+            x: head.x
+            y: head.y + head.height + 10
 
-        Calendar {
-            id: calendar
-            anchors.left: parent.left
-            anchors.right: parent.right
-            anchors.top: parent.top
-            anchors.margins: 1
-            anchors.bottomMargin: 10
-            height: 220
-            frameVisible: false
+            color: MoneroComponents.Style.middlePanelBackgroundColor
+            border.width: 1
+            border.color: MoneroComponents.Style.appWindowBorderColor
+            height: datePicker.expanded ? calendar.height + 2 : 0
+            clip: true
 
-            style: CalendarStyle {
-                gridVisible: false
-                background: Rectangle { color: MoneroComponents.Style.middlePanelBackgroundColor }
-                dayDelegate: Item {
-                    z: parent.z + 1
-                    implicitHeight: implicitWidth
-                    implicitWidth: calendar.width / 7
+            Behavior on height {
+                NumberAnimation { duration: 100; easing.type: Easing.InQuad }
+            }
 
-                    Rectangle {
-                        id: dayRect
-                        anchors.fill: parent
-                        radius: parent.implicitHeight / 2
-                        color: {
-                            if(dayArea.pressed && styleData.visibleMonth)
-                                return MoneroComponents.Style.blackTheme ? "#20FFFFFF" : "#10000000"
-                            return "transparent";
-                        }
-                    }
+            MouseArea {
+                anchors.fill: parent
+            }
 
-                    MoneroComponents.TextPlain {
-                        id: dayText
-                        anchors.centerIn: parent
-                        font.family: MoneroComponents.Style.fontMonoRegular.name
-                        font.pixelSize: {
-                            if(!styleData.visibleMonth) return 12
-                            return 14
-                        }
-                        font.bold: {
-                            if(dayArea.pressed || styleData.visibleMonth) return true;
-                            return false;
-                        }
-                        text: styleData.date.getDate()
-                        themeTransition: false
-                        color: {
-                            if(!styleData.visibleMonth) return MoneroComponents.Style.lightGreyFontColor
-                            if(dayArea.pressed) return MoneroComponents.Style.defaultFontColor
-                            if(styleData.today) return MoneroComponents.Style.orange
-                            return MoneroComponents.Style.defaultFontColor
-                        }
-                    }
+            Rectangle {
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.leftMargin: 1
+                anchors.rightMargin: 1
+                anchors.top: parent.top
+                color: MoneroComponents.Style.appWindowBorderColor
+                height: 1
+            }
 
-                    MouseArea {
-                        id: dayArea
-                        anchors.fill: parent
-                        hoverEnabled: true
-                        onEntered: dayRect.color = MoneroComponents.Style.blackTheme ? "#20FFFFFF" : "#10000000"
-                        onExited: dayRect.color = "transparent"
-                        cursorShape: Qt.PointingHandCursor
-                        onClicked: {
-                            if(styleData.visibleMonth) {
-                                currentDate = styleData.date
-                                datePicker.expanded = false
-                            } else {
-                                var date = styleData.date
-                                if(date.getMonth() > calendar.visibleMonth)
-                                    calendar.showNextMonth()
-                                else calendar.showPreviousMonth()
+            Calendar {
+                id: calendar
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.top: parent.top
+                anchors.margins: 1
+                anchors.bottomMargin: 10
+                height: 220
+                frameVisible: false
+
+                style: CalendarStyle {
+                    gridVisible: false
+                    background: Rectangle { color: MoneroComponents.Style.middlePanelBackgroundColor }
+                    dayDelegate: Item {
+                        z: parent.z + 1
+                        implicitHeight: implicitWidth
+                        implicitWidth: calendar.width / 7
+
+                        Rectangle {
+                            id: dayRect
+                            anchors.fill: parent
+                            radius: parent.implicitHeight / 2
+                            color: {
+                                if(dayArea.pressed && styleData.visibleMonth)
+                                    return MoneroComponents.Style.blackTheme ? "#20FFFFFF" : "#10000000"
+                                return "transparent";
                             }
+                        }
 
-                            datePicker.dateChanged();
+                        MoneroComponents.TextPlain {
+                            id: dayText
+                            anchors.centerIn: parent
+                            font.family: MoneroComponents.Style.fontMonoRegular.name
+                            font.pixelSize: {
+                                if(!styleData.visibleMonth) return 12
+                                return 14
+                            }
+                            font.bold: {
+                                if(dayArea.pressed || styleData.visibleMonth) return true;
+                                return false;
+                            }
+                            text: styleData.date.getDate()
+                            themeTransition: false
+                            color: {
+                                if(!styleData.visibleMonth) return MoneroComponents.Style.lightGreyFontColor
+                                if(dayArea.pressed) return MoneroComponents.Style.defaultFontColor
+                                if(styleData.today) return MoneroComponents.Style.orange
+                                return MoneroComponents.Style.defaultFontColor
+                            }
                         }
-                    }
-                }
 
-                dayOfWeekDelegate: Item {
-                    implicitHeight: 20
-                    implicitWidth: calendar.width / 7
+                        MouseArea {
+                            id: dayArea
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            onEntered: dayRect.color = MoneroComponents.Style.blackTheme ? "#20FFFFFF" : "#10000000"
+                            onExited: dayRect.color = "transparent"
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: {
+                                if(styleData.visibleMonth) {
+                                    currentDate = styleData.date
+                                    popup.close()
+                                } else {
+                                    var date = styleData.date
+                                    if(date.getMonth() > calendar.visibleMonth)
+                                        calendar.showNextMonth()
+                                    else calendar.showPreviousMonth()
+                                }
 
-                    MoneroComponents.TextPlain {
-                        anchors.centerIn: parent
-                        elide: Text.ElideRight
-                        font.family: MoneroComponents.Style.fontMonoRegular.name
-                        font.pixelSize: 12
-                        color: MoneroComponents.Style.lightGreyFontColor
-                        themeTransition: false
-                        text: {
-                            var locale = Qt.locale()
-                            return locale.dayName(styleData.dayOfWeek, Locale.ShortFormat)
+                                datePicker.dateChanged();
+                            }
                         }
                     }
-                }
 
-                navigationBar: Rectangle {
-                    color: MoneroComponents.Style.middlePanelBackgroundColor
-                    implicitWidth: calendar.width
-                    implicitHeight: 30
+                    dayOfWeekDelegate: Item {
+                        implicitHeight: 20
+                        implicitWidth: calendar.width / 7
 
-                    MoneroComponents.TextPlain {
-                        anchors.centerIn: parent
-                        font.family: MoneroComponents.Style.fontMonoRegular.name
-                        font.pixelSize: 14
-                        color: MoneroComponents.Style.dimmedFontColor
-                        themeTransition: false
-                        text: styleData.title
+                        MoneroComponents.TextPlain {
+                            anchors.centerIn: parent
+                            elide: Text.ElideRight
+                            font.family: MoneroComponents.Style.fontMonoRegular.name
+                            font.pixelSize: 12
+                            color: MoneroComponents.Style.lightGreyFontColor
+                            themeTransition: false
+                            text: {
+                                var locale = Qt.locale()
+                                return locale.dayName(styleData.dayOfWeek, Locale.ShortFormat)
+                            }
+                        }
                     }
 
+                    navigationBar: Rectangle {
+                        color: MoneroComponents.Style.middlePanelBackgroundColor
+                        implicitWidth: calendar.width
+                        implicitHeight: 30
 
-                    Item {
-                        anchors.left: parent.left
-                        anchors.leftMargin: 4
-                        anchors.top: parent.top
-                        anchors.bottom: parent.bottom
-                        width: height
-
-                        Image {
-                            id: prevMonthIcon
+                        MoneroComponents.TextPlain {
                             anchors.centerIn: parent
-                            source: "qrc:///images/prevMonth.png"
-                            visible: false
+                            font.family: MoneroComponents.Style.fontMonoRegular.name
+                            font.pixelSize: 14
+                            color: MoneroComponents.Style.dimmedFontColor
+                            themeTransition: false
+                            text: styleData.title
                         }
 
-                        ColorOverlay {
-                            source: prevMonthIcon
-                            anchors.fill: prevMonthIcon
-                            color: MoneroComponents.Style.defaultFontColor
-                            opacity: 0.5
-                        }
 
-                        MouseArea {
-                            hoverEnabled: true
-                            cursorShape: Qt.PointingHandCursor
-                            anchors.fill: parent
-                            onClicked: calendar.showPreviousMonth()
-                        }
-                    }
+                        Item {
+                            anchors.left: parent.left
+                            anchors.leftMargin: 4
+                            anchors.top: parent.top
+                            anchors.bottom: parent.bottom
+                            width: height
 
-                    Item {
-                        anchors.right: parent.right
-                        anchors.rightMargin: 4
-                        anchors.top: parent.top
-                        anchors.bottom: parent.bottom
-                        width: height
+                            Image {
+                                id: prevMonthIcon
+                                anchors.centerIn: parent
+                                source: "qrc:///images/prevMonth.png"
+                                visible: false
+                            }
 
-                        Image {
-                            id: nextMonthIcon
-                            anchors.centerIn: parent
-                            source: "qrc:///images/prevMonth.png"
-                            visible: false
-                        }
+                            ColorOverlay {
+                                source: prevMonthIcon
+                                anchors.fill: prevMonthIcon
+                                color: MoneroComponents.Style.defaultFontColor
+                                opacity: 0.5
+                            }
 
-                        ColorOverlay {
-                            source: nextMonthIcon
-                            anchors.fill: nextMonthIcon
-                            color: MoneroComponents.Style.defaultFontColor
-                            opacity: 0.5
-                            rotation: 180
+                            MouseArea {
+                                hoverEnabled: true
+                                cursorShape: Qt.PointingHandCursor
+                                anchors.fill: parent
+                                onClicked: calendar.showPreviousMonth()
+                            }
                         }
 
-                        MouseArea {
-                            hoverEnabled: true
-                            cursorShape: Qt.PointingHandCursor
-                            anchors.fill: parent
-                            onClicked: calendar.showNextMonth()
+                        Item {
+                            anchors.right: parent.right
+                            anchors.rightMargin: 4
+                            anchors.top: parent.top
+                            anchors.bottom: parent.bottom
+                            width: height
+
+                            Image {
+                                id: nextMonthIcon
+                                anchors.centerIn: parent
+                                source: "qrc:///images/prevMonth.png"
+                                visible: false
+                            }
+
+                            ColorOverlay {
+                                source: nextMonthIcon
+                                anchors.fill: nextMonthIcon
+                                color: MoneroComponents.Style.defaultFontColor
+                                opacity: 0.5
+                                rotation: 180
+                            }
+
+                            MouseArea {
+                                hoverEnabled: true
+                                cursorShape: Qt.PointingHandCursor
+                                anchors.fill: parent
+                                onClicked: calendar.showNextMonth()
+                            }
                         }
                     }
                 }