Skip to content

Commit

Permalink
Merge pull request KomodoPlatform#1780 from KomodoPlatform/calendar
Browse files Browse the repository at this point in the history
Change Calendar style
  • Loading branch information
syl authored Jun 6, 2022
2 parents 83a54ca + 5a9032e commit 6649f29
Show file tree
Hide file tree
Showing 5 changed files with 279 additions and 89 deletions.
80 changes: 80 additions & 0 deletions atomic_defi_design/Dex/Components/DatePicker.qml
Original file line number Diff line number Diff line change
@@ -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()}
}
}
}
136 changes: 136 additions & 0 deletions atomic_defi_design/Dex/Components/DefaultCalendar.qml
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
}
}
48 changes: 21 additions & 27 deletions atomic_defi_design/Dex/Exchange/ProView/TradingInfo/OrdersPage.qml
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -120,7 +120,7 @@ Item {
{
color: Dex.CurrentTheme.foregroundColor2
visible: !settings.visible
text: qsTr("Filter") + ": %1 / %2 <br> %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 <br> %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"))
}
}

Expand Down Expand Up @@ -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
}
}
}
Expand Down
51 changes: 21 additions & 30 deletions atomic_defi_design/Dex/Exchange/Trade/SimpleView/SubHistory.qml
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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'
}
}
}
Expand Down
Loading

0 comments on commit 6649f29

Please sign in to comment.