diff --git a/components/DatePicker.qml b/components/DatePicker.qml index c51e451c7a..1908e1b3c7 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 + + 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 } + } - 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"; - } - } + 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 - - 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) + 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() + } + + datePicker.dateChanged(); + } } } - } - navigationBar: Rectangle { - color: MoneroComponents.Style.middlePanelBackgroundColor - implicitWidth: calendar.width - implicitHeight: 30 - - MoneroComponents.TextPlain { - anchors.centerIn: parent - font.family: MoneroComponents.Style.fontMonoRegular.name - font.pixelSize: 14 - color: MoneroComponents.Style.dimmedFontColor - themeTransition: false - text: styleData.title - } + dayOfWeekDelegate: Item { + implicitHeight: 20 + implicitWidth: calendar.width / 7 + 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) + } + } + } - Item { - anchors.left: parent.left - anchors.leftMargin: 4 - anchors.top: parent.top - anchors.bottom: parent.bottom - width: height + navigationBar: Rectangle { + color: MoneroComponents.Style.middlePanelBackgroundColor + implicitWidth: calendar.width + implicitHeight: 30 - 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() + } } } } diff --git a/pages/History.qml b/pages/History.qml index f2cb860b4a..d95a6eac9a 100644 --- a/pages/History.qml +++ b/pages/History.qml @@ -181,7 +181,6 @@ Rectangle { Layout.rightMargin: sideMargin columns: 2 columnSpacing: 20 - z: 6 MoneroComponents.DatePicker { id: fromDatePicker