diff --git a/atomic_defi_design/Dex/Components/DatePicker.qml b/atomic_defi_design/Dex/Components/DatePicker.qml new file mode 100644 index 0000000000..c0ce19742e --- /dev/null +++ b/atomic_defi_design/Dex/Components/DatePicker.qml @@ -0,0 +1,80 @@ +import QtQuick 2.12 +import QtQuick.Layouts 1.12 + +import Qaterial 1.0 as Qaterial + +import Dex.Themes 1.0 as Dex +import "../Constants" + +DefaultMouseArea +{ + id: control + + property alias titleText: title.text + property alias minimumDate: calendar.minimumDate + property alias maximumDate: calendar.maximumDate + property alias selectedDate: calendar.selectedDate + + signal accepted() + + width: 100 + height: column.height + + onClicked: modal.open() + + Column + { + id: column + width: parent.width + + DefaultText + { + id: title + text: qsTr("Date") + font: DexTypo.overLine + color: Dex.CurrentTheme.foregroundColor2 + } + + RowLayout + { + width: parent.width + + DefaultText + { + id: label + text: selectedDate.toLocaleDateString(Locale.ShortFormat, "yyyy-MM-dd") + font: DexTypo.caption + } + Item { Layout.fillWidth: true } + DefaultImage + { + Layout.preferredWidth: 25 + Layout.preferredHeight: 25 + source: Qaterial.Icons.calendarBlank + + DefaultColorOverlay + { + source: parent + anchors.fill: parent + color: Dex.CurrentTheme.foregroundColor2 + } + } + } + } + + DefaultModal + { + id: modal + width: 300 + height: 450 + verticalPadding: 0 + horizontalPadding: 0 + + DefaultCalendar + { + id: calendar + anchors.fill: parent + onSelectedDateChanged: {modal.close(); control.accepted()} + } + } +} diff --git a/atomic_defi_design/Dex/Components/DefaultCalendar.qml b/atomic_defi_design/Dex/Components/DefaultCalendar.qml new file mode 100644 index 0000000000..c366cf1c8c --- /dev/null +++ b/atomic_defi_design/Dex/Components/DefaultCalendar.qml @@ -0,0 +1,136 @@ +import QtQuick 2.0 +import QtQuick.Controls 1.4 +import QtQuick.Controls.Styles 1.4 + +import Qaterial 1.0 as Qaterial + +import Dex.Themes 1.0 as Dex + +Calendar +{ + width: 300 + height: 450 + style: CalendarStyle + { + gridColor: "transparent" + gridVisible: false + + background: DefaultRectangle + { + color: Dex.CurrentTheme.floatingBackgroundColor + radius: 18 + } + + navigationBar: DefaultRectangle + { + height: 50 + color: Dex.CurrentTheme.floatingBackgroundColor + radius: 18 + + DefaultButton + { + id: previousYear + width: previousMonth.width + height: width + anchors.left: parent.left + anchors.leftMargin: 5 + anchors.verticalCenter: parent.verticalCenter + iconSource: Qaterial.Icons.arrowLeft + onClicked: control.showPreviousYear() + } + + DefaultButton + { + id: previousMonth + width: parent.height - 14 + height: width + anchors.left: previousYear.right + anchors.leftMargin: 2 + anchors.verticalCenter: parent.verticalCenter + iconSource: Qaterial.Icons.arrowLeft + onClicked: control.showPreviousMonth() + } + + DefaultText + { + id: dateText + text: styleData.title + elide: Text.ElideRight + horizontalAlignment: Text.AlignHCenter + anchors.verticalCenter: parent.verticalCenter + anchors.left: previousMonth.right + anchors.leftMargin: 2 + anchors.right: nextMonth.left + anchors.rightMargin: 2 + } + + DefaultButton + { + id: nextYear + width: nextMonth.width + height: width + anchors.right: parent.right + anchors.rightMargin: 5 + anchors.verticalCenter: parent.verticalCenter + iconSource: Qaterial.Icons.arrowRight + onClicked: control.showNextYear() + } + + DefaultButton + { + id: nextMonth + width: parent.height - 14 + height: width + anchors.verticalCenter: parent.verticalCenter + anchors.right: nextYear.left + anchors.rightMargin: 2 + iconSource: Qaterial.Icons.arrowRight + onClicked: control.showNextMonth() + } + } + + dayOfWeekDelegate: DefaultRectangle + { + color: "transparent" + implicitHeight: 20 + Label + { + text: control.locale.dayName(styleData.dayOfWeek, control.dayOfWeekFormat) + anchors.centerIn: parent + color: Dex.CurrentTheme.foregroundColor + } + } + + dayDelegate: DefaultRectangle + { + anchors.fill: parent + color: styleData.date !== undefined && styleData.selected ? selectedDateColor : styleData.hovered ? hoveredDateColor : "transparent" + + readonly property bool addExtraMargin: control.frameVisible && styleData.selected + readonly property color sameMonthDateTextColor: Dex.CurrentTheme.foregroundColor + readonly property color hoveredDateColor: Dex.CurrentTheme.buttonColorHovered + readonly property color selectedDateColor: Dex.CurrentTheme.buttonColorPressed + readonly property color selectedDateTextColor: Dex.CurrentTheme.foregroundColor + readonly property color differentMonthDateTextColor: Dex.CurrentTheme.foregroundColor3 + readonly property color invalidDateColor: Dex.CurrentTheme.textDisabledColor + DefaultText + { + id: dayDelegateText + text: styleData.date.getDate() + anchors.centerIn: parent + horizontalAlignment: Text.AlignRight + font.pixelSize: Math.min(parent.height/3, parent.width/3) + color: { + var theColor = invalidDateColor; + if (styleData.valid) { + // Date is within the valid range. + theColor = styleData.visibleMonth ? sameMonthDateTextColor : differentMonthDateTextColor; + if (styleData.selected) + theColor = selectedDateTextColor; + } + theColor; + } + } + } + } +} diff --git a/atomic_defi_design/Dex/Exchange/ProView/TradingInfo/OrdersPage.qml b/atomic_defi_design/Dex/Exchange/ProView/TradingInfo/OrdersPage.qml index ca3f99dc18..b696088b3d 100644 --- a/atomic_defi_design/Dex/Exchange/ProView/TradingInfo/OrdersPage.qml +++ b/atomic_defi_design/Dex/Exchange/ProView/TradingInfo/OrdersPage.qml @@ -52,12 +52,12 @@ Item { } function applyDateFilter() { - list_model_proxy.filter_minimum_date = min_date.date + list_model_proxy.filter_minimum_date = min_date.selectedDate - if (max_date.date < min_date.date) - max_date.date = min_date.date + if (max_date.selectedDate < min_date.selectedDate) + max_date.selectedDate = min_date.selectedDate - list_model_proxy.filter_maximum_date = max_date.date + list_model_proxy.filter_maximum_date = max_date.selectedDate } function applyTickerFilter() { @@ -120,7 +120,7 @@ Item { { color: Dex.CurrentTheme.foregroundColor2 visible: !settings.visible - text: qsTr("Filter") + ": %1 / %2
%3: %4 - %5".arg(combo_base.currentTicker).arg(combo_rel.currentTicker).arg(qsTr("Date")).arg(min_date.date.toLocaleDateString(Locale.ShortFormat, "yyyy-MM-dd")).arg(max_date.date.toLocaleDateString(Locale.ShortFormat, "yyyy-MM-dd")) + text: qsTr("Filter") + ": %1 / %2
%3: %4 - %5".arg(combo_base.currentTicker).arg(combo_rel.currentTicker).arg(qsTr("Date")).arg(min_date.selectedDate.toLocaleDateString(Locale.ShortFormat, "yyyy-MM-dd")).arg(max_date.selectedDate.toLocaleDateString(Locale.ShortFormat, "yyyy-MM-dd")) } } @@ -206,37 +206,31 @@ Item { } } - RowLayout + Row { - Qaterial.TextFieldDatePicker + Layout.fillWidth: true + DatePicker { id: min_date - title: qsTr("From") - from: default_min_date - to: default_max_date - date: default_min_date - font.pixelSize: 13 - opacity: .8 - color: Dex.CurrentTheme.foregroundColor - backgroundColor: DexTheme.portfolioPieGradient ? '#FFFFFF' : 'transparent' + width: parent.width * 0.45 + titleText: qsTr("From") + minimumDate: default_min_date + maximumDate: default_max_date + selectedDate: default_min_date onAccepted: applyDateFilter() - Layout.fillWidth: true } - Qaterial.TextFieldDatePicker + Item { width: parent.width * 0.1; height: 1 } + + DatePicker { id: max_date - enabled: min_date.enabled - title: qsTr("To") - from: min_date.date - to: default_max_date - date: default_max_date - font.pixelSize: 13 - opacity: .8 - color: Dex.CurrentTheme.foregroundColor - backgroundColor: DexTheme.portfolioPieGradient ? '#FFFFFF' : 'transparent' + width: parent.width * 0.45 + titleText: qsTr("To") + minimumDate: default_min_date + maximumDate: default_max_date + selectedDate: default_max_date onAccepted: applyDateFilter() - Layout.fillWidth: true } } } diff --git a/atomic_defi_design/Dex/Exchange/Trade/SimpleView/SubHistory.qml b/atomic_defi_design/Dex/Exchange/Trade/SimpleView/SubHistory.qml index 93481e3786..b6171ada9c 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/SimpleView/SubHistory.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/SimpleView/SubHistory.qml @@ -48,12 +48,12 @@ Item } function applyDateFilter() { - list_model_proxy.filter_minimum_date = min_date.date + list_model_proxy.filter_minimum_date = min_date.selectedDate - if(max_date.date < min_date.date) - max_date.date = min_date.date + if(max_date.selectedDate < min_date.selectedDate) + max_date.selectedDate = min_date.selectedDate - list_model_proxy.filter_maximum_date = max_date.date + list_model_proxy.filter_maximum_date = max_date.selectedDate } function applyFilter() { @@ -105,8 +105,8 @@ Item .arg(combo_base.currentTicker) .arg(combo_rel.currentTicker) .arg(qsTr("Date")) - .arg(min_date.date.toLocaleDateString(Locale.ShortFormat, "yyyy.MM.dd")) - .arg(max_date.date.toLocaleDateString(Locale.ShortFormat, "yyyy.MM.dd")) + .arg(min_date.selectedDate.toLocaleDateString(Locale.ShortFormat, "yyyy.MM.dd")) + .arg(max_date.selectedDate.toLocaleDateString(Locale.ShortFormat, "yyyy.MM.dd")) } DexAppButton @@ -209,42 +209,33 @@ Item spacing: 10 - RowLayout + Row { width: main_order.width - 40 height: 50 anchors.horizontalCenter: parent.horizontalCenter - spacing: 5 - Qaterial.TextFieldDatePicker + DatePicker { id: min_date - title: qsTr("From") - from: default_min_date - to: default_max_date - date: default_min_date + width: parent.width * 0.45 + titleText: qsTr("From") + minimumDate: default_min_date + maximumDate: default_max_date + selectedDate: default_min_date onAccepted: applyDateFilter() - Layout.fillWidth: true - Layout.fillHeight: true - opacity: .8 - color: DexTheme.foregroundColor - backgroundColor: DexTheme.portfolioPieGradient ? '#FFFFFF' : 'transparent' } - Qaterial.TextFieldDatePicker + Item { width: parent.width * 0.1; height: 1 } + + DatePicker { id: max_date - enabled: min_date.enabled - title: qsTr("To") - from: min_date.date - to: default_max_date - date: default_max_date + width: parent.width * 0.45 + titleText: qsTr("To") + minimumDate: default_min_date + maximumDate: default_max_date + selectedDate: default_max_date onAccepted: applyDateFilter() - Layout.fillWidth: true - Layout.fillHeight: true - rightInset: 0 - opacity: .8 - color: DexTheme.foregroundColor - backgroundColor: DexTheme.portfolioPieGradient ? '#FFFFFF' : 'transparent' } } } diff --git a/atomic_defi_design/Dex/Exchange/Trade/SimpleView/SubOrders.qml b/atomic_defi_design/Dex/Exchange/Trade/SimpleView/SubOrders.qml index 4f9520eed2..680331ad66 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/SimpleView/SubOrders.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/SimpleView/SubOrders.qml @@ -49,12 +49,12 @@ Item } function applyDateFilter() { - list_model_proxy.filter_minimum_date = min_date.date + list_model_proxy.filter_minimum_date = min_date.selectedDate - if(max_date.date < min_date.date) - max_date.date = min_date.date + if(max_date.selectedDate < min_date.selectedDate) + max_date.selectedDate = min_date.selectedDate - list_model_proxy.filter_maximum_date = max_date.date + list_model_proxy.filter_maximum_date = max_date.selectedDate } function applyFilter() { @@ -91,15 +91,14 @@ Item width: _subOrdersRoot.width - 40 anchors.topMargin: 12 font.pixelSize: Constants.Style.textSizeSmall4 - //text: _filterApplied? "" : qsTr("Finished orders") DexLabel { opacity: .4 text: qsTr("Filter") + " %1 / %2
%3 %4 - %5" .arg(combo_base.currentTicker) .arg(combo_rel.currentTicker) .arg(qsTr("Date")) - .arg(min_date.date.toLocaleDateString(Locale.ShortFormat, "yyyy.MM.dd")) - .arg(max_date.date.toLocaleDateString(Locale.ShortFormat, "yyyy.MM.dd")) + .arg(min_date.selectedDate.toLocaleDateString(Locale.ShortFormat, "yyyy.MM.dd")) + .arg(max_date.selectedDate.toLocaleDateString(Locale.ShortFormat, "yyyy.MM.dd")) } DexAppButton { @@ -204,44 +203,34 @@ Item } } - RowLayout + Row { width: main_order.width - 40 height: 50 anchors.horizontalCenter: parent.horizontalCenter - spacing: 5 - Qaterial.TextFieldDatePicker + DatePicker { id: min_date - title: qsTr("From") - from: default_min_date - to: default_max_date - date: default_min_date + width: parent.width * 0.45 + titleText: qsTr("From") + minimumDate: default_min_date + maximumDate: default_max_date + selectedDate: default_min_date onAccepted: applyDateFilter() - Layout.fillWidth: true - Layout.fillHeight: true - opacity: .8 - color: DexTheme.foregroundColor - backgroundColor: DexTheme.portfolioPieGradient ? '#FFFFFF' : 'transparent' } - Qaterial.TextFieldDatePicker + Item { width: parent.width * 0.1; height: 1 } + + DatePicker { id: max_date - enabled: min_date.enabled - title: qsTr("To") - from: min_date.date - to: default_max_date - date: default_max_date + width: parent.width * 0.45 + titleText: qsTr("To") + minimumDate: default_min_date + maximumDate: default_max_date + selectedDate: default_max_date onAccepted: applyDateFilter() - Layout.fillWidth: true - Layout.fillHeight: true - rightInset: 0 - opacity: .8 - color: Dex.CurrentTheme.foregroundColor - backgroundColor: DexTheme.portfolioPieGradient ? '#FFFFFF' : 'transparent' } - } spacing: 10 }