From 2329e0a15d6ff548df9590b6ab516e9cc24a0439 Mon Sep 17 00:00:00 2001 From: Devin Lin Date: Sat, 16 Dec 2023 20:54:06 -0800 Subject: [PATCH] kcms/time: Overhaul UI The old UI was very confusing to use, I changed it so that: - Dialogs are used for the time and date picker, with user confirmation for changes - Tumblers are not used for the time picker, use the time picker component from kclock - Removed seconds selector (since it was always wrong) - Fixed the time zone selector (it didn't work before) - Properly support 24 hour time in the time picker Fixes https://invent.kde.org/plasma/plasma-mobile/-/issues/286 --- kcms/time/ui/DatePicker.qml | 57 +++-- kcms/time/ui/Digit.qml | 1 - kcms/time/ui/TimePicker.qml | 295 ++++++++--------------- kcms/time/ui/TimePickerSpinBox.qml | 158 ++++++++++++ kcms/time/ui/TimePickerSpinBoxButton.qml | 50 ++++ kcms/time/ui/main.qml | 270 +++++++++++---------- 6 files changed, 476 insertions(+), 355 deletions(-) create mode 100644 kcms/time/ui/TimePickerSpinBox.qml create mode 100644 kcms/time/ui/TimePickerSpinBoxButton.qml diff --git a/kcms/time/ui/DatePicker.qml b/kcms/time/ui/DatePicker.qml index 2ecf5dde..315bb9bc 100644 --- a/kcms/time/ui/DatePicker.qml +++ b/kcms/time/ui/DatePicker.qml @@ -4,14 +4,12 @@ SPDX-License-Identifier: LGPL-2.0-or-later */ -import QtQuick 2.1 +import QtQuick +import QtQuick.Layouts import org.kde.kirigami 2.5 as Kirigami -//import "private" -//FIXME: shouldn't be a FrameSvgItem Item { id: root - clip: true //////// API property int day @@ -38,17 +36,17 @@ Item { /////// Implementation Connections { target: root - onDayChanged: clockRow.day = root.day - onMonthChanged: clockRow.month = root.month - onYearChanged: clockRow.year = root.year + function onDayChanged() { + clockRow.day = root.day; + } + function onMonthChanged() { + clockRow.month = root.month; + } + function onYearChanged() { + clockRow.year = root.year; + } } - - //imagePath: "widgets/picker" - width: clockRow.width + root._margin * 2 - height: clockRow.height + root._margin * 2 - - Timer { id: userConfiguringTimer repeat: false @@ -62,11 +60,10 @@ Item { } } - Row { + RowLayout { id: clockRow - spacing: 3 - x: root._margin - y: root._margin + anchors.margins: _margin + anchors.fill: parent property int day property int month @@ -79,6 +76,7 @@ Item { Digit { id: dayDigit + Layout.fillWidth: true model: { var dd = new Date(year, month, 0); return dd.getDate() @@ -96,17 +94,20 @@ Item { text: index+1 color: Kirigami.Theme.textColor font.pointSize: root.fontSize - opacity: PathView.itemOpacity } } - Kirigami.Separator { - anchors { - top: parent.top - bottom: parent.bottom + Item { + Layout.fillHeight: true + Kirigami.Separator { + anchors { + top: parent.top + bottom: parent.bottom + } } } Digit { id: monthDigit + Layout.fillWidth: true model: 12 currentIndex: month -1 onSelectedIndexChanged: { @@ -132,14 +133,18 @@ Item { text: "0000" } } - Kirigami.Separator { - anchors { - top: parent.top - bottom: parent.bottom + Item { + Layout.fillHeight: true + Kirigami.Separator { + anchors { + top: parent.top + bottom: parent.bottom + } } } Digit { id: yearDigit + Layout.fillWidth: true //FIXME: yes, this is a tad lame ;) model: 3000 currentIndex: year diff --git a/kcms/time/ui/Digit.qml b/kcms/time/ui/Digit.qml index cfdf63ac..c7374cda 100644 --- a/kcms/time/ui/Digit.qml +++ b/kcms/time/ui/Digit.qml @@ -44,7 +44,6 @@ Item { text: index < 10 ? "0"+index : index color: Kirigami.Theme.textColor font.pointSize: root.fontSize - opacity: PathView.itemOpacity } onMovingChanged: { diff --git a/kcms/time/ui/TimePicker.qml b/kcms/time/ui/TimePicker.qml index 7d8044ef..9fb741d3 100644 --- a/kcms/time/ui/TimePicker.qml +++ b/kcms/time/ui/TimePicker.qml @@ -1,214 +1,117 @@ -/* - SPDX-FileCopyrightText: 2011 Marco Martin +// SPDX-FileCopyrightText: 2021-2023 Devin Lin +// SPDX-License-Identifier: GPL-2.0-or-later - SPDX-License-Identifier: LGPL-2.0-or-later -*/ +import QtQuick +import QtQuick.Controls +import QtQuick.Layouts -import QtQuick 2.1 +import org.kde.kcmutils +import org.kde.kirigami as Kirigami -import org.kde.kirigami 2.4 as Kirigami - - -//FIXME: shouldn't be a FrameSvgItem -Item { +RowLayout { id: root - clip: true + + property int hours: 0 + property int minutes: 0 + readonly property bool twelveHourTime: !kcm.twentyFour // am/pm + + onHoursChanged: updateHours() + onMinutesChanged: minutesSpinbox.value = minutes + onTwelveHourTimeChanged: updateHours() - //////// API - property alias hours: clockRow.hours - property alias minutes: clockRow.minutes - property alias seconds: clockRow.seconds - - property bool userConfiguring: false - property bool twentyFour: true - - property int fontSize: 14 - property int _margin: Kirigami.Units.gridUnit - - property string timeString: clockRow.twoDigitString(hours) + ":" + clockRow.twoDigitString(minutes) + ":" + clockRow.twoDigitString(seconds) - - opacity: enabled ? 1.0 : 0.5 - - Connections { - target: root -// onHoursChanged: print("H : " + root.hours) -// onMinutesChanged: print("M : " + root.minutes) -// onSecondsChanged: print("S : " + root.seconds) + Component.onCompleted: { + // needs to manually be triggered because onHoursChanged doesn't emit when set to 0 + updateHours(); } - Behavior on width { - SequentialAnimation { - PauseAnimation { - duration: 250 - } - NumberAnimation { - //duration: Kirigami.Units.longDuration - duration: 250 - easing.type: Easing.InOutQuad - } + function updateHours() { + // manually do this instead of a binding so we can set the value without worrying about binding eval order + hoursSpinbox.from = root.twelveHourTime ? 1 : 0; + hoursSpinbox.to = root.twelveHourTime ? 12 : 23; + + if (twelveHourTime) { + hoursSpinbox.value = ((hours % 12) == 0) ? 12 : hours % 12; + } else { + hoursSpinbox.value = hours; } } + + RowLayout { + spacing: Kirigami.Units.largeSpacing + Layout.alignment: Qt.AlignHCenter -// KLocale.Locale { -// id: locale -// } - - //imagePath: "widgets/picker" - width: clockRow.width + root._margin - height: clockRow.height + root._margin * 2 - - Timer { - id: userConfiguringTimer - repeat: false - interval: 1500 - running: false - onTriggered: { - root.hours = clockRow.hours - root.minutes = clockRow.minutes - root.seconds = clockRow.seconds - userConfiguring = false - } - } - - Rectangle { - color: "transparent" - opacity: 0.3 - border.color: Kirigami.Theme.textColor - border.width: 1 - anchors.fill: parent - } - - Row { - id: clockRow - spacing: Kirigami.Units.gridUnit - x: root._margin - y: root._margin - - property int hours - property int minutes - property int seconds - - function twoDigitString(number) - { - return number < 10 ? "0"+number : number - } - - Digit { - id: hoursDigit - model: root.twentyFour ? 24 : 12 - currentIndex: root.twentyFour || hours < 12 ? hours : hours - 12 - delegate: Text { - horizontalAlignment: Text.AlignHCenter - width: hoursDigit.width - property int ownIndex: index - text: (!root.twentyFour && index == 0) ? "12" : clockRow.twoDigitString(index) - font.pointSize: root.fontSize - color: Kirigami.Theme.textColor - opacity: PathView.itemOpacity - } - onSelectedIndexChanged: { - print("Bah"); - if (selectedIndex > -1) { - if (root.twentyFour || - meridiaeDigit.isAm) { - hours = selectedIndex + // note: for 12-hour time, we have hours from 1-12 (0'o clock displays as 12) + // for 24-hour time, we have hours from 0-23 + TimePickerSpinBox { + id: hoursSpinbox + + onValueModified: { + if (root.twelveHourTime) { + if (root.hours >= 12) { + root.hours = value % 12 + 12; } else { - hours = selectedIndex + 12 + root.hours = value % 12; + } + } else { + root.hours = value; + } + } + } + + Kirigami.Heading { + level: 1 + text: ":" + } + + TimePickerSpinBox { + id: minutesSpinbox + from: 0 + to: 59 + + onValueModified: { + root.minutes = value; + } + } + + Button { + id: amPmToggle + visible: root.twelveHourTime + leftPadding: Kirigami.Units.largeSpacing + rightPadding: Kirigami.Units.largeSpacing + topPadding: Kirigami.Units.largeSpacing + bottomPadding: Kirigami.Units.largeSpacing + Layout.alignment: Qt.AlignVCenter + + contentItem: Item { + implicitWidth: label.implicitWidth + implicitHeight: label.implicitHeight + Label { + id: label + anchors.centerIn: parent + font.weight: Font.Light + font.pointSize: Kirigami.Theme.defaultFont.pointSize * 1.3 + text: i18n(hours < 12 ? i18n("AM") : i18n("PM")) + } + } + + background: Rectangle { + radius: Kirigami.Units.smallSpacing + border.color: { + if (amPmToggle.enabled && (amPmToggle.visualFocus || amPmToggle.hovered || amPmToggle.down)) { + return Kirigami.Theme.focusColor + } else { + return Kirigami.ColorUtils.linearInterpolation(Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, 0.15) } } + border.width: 1 + color: amPmToggle.down ? Kirigami.Theme.alternateBackgroundColor : Kirigami.Theme.backgroundColor } - } - Kirigami.Separator { - anchors { - top: parent.top - bottom: parent.bottom - } - } - Digit { - id: minutesDigit - model: 60 - currentIndex: minutes - onSelectedIndexChanged: { - if (selectedIndex > -1) { - minutes = selectedIndex - } - } - } - Kirigami.Separator { - anchors { - top: parent.top - bottom: parent.bottom - } - } - Digit { - id: secondsDigit - model: 60 - currentIndex: seconds - onSelectedIndexChanged: { - if (selectedIndex > -1) { - seconds = selectedIndex - } - } - } - Kirigami.Separator { - opacity: meridiaeDigit.opacity == 0 ? 0 : 1 - anchors { - top: parent.top - bottom: parent.bottom - } - Behavior on opacity { - NumberAnimation { - duration: 250 - easing.type: Easing.InOutQuad - } - } - } - Digit { - id: meridiaeDigit - visible: opacity != 0 - opacity: root.twentyFour ? 0 : 1 - property bool isAm: (selectedIndex > -1) ? (selectedIndex < 1) : (currentIndex < 1) - model: ListModel { - ListElement { - meridiae: "AM" - } - ListElement { - meridiae: "PM" - } - } - delegate: Text { - width: meridiaeDigit.width - horizontalAlignment: Text.AlignLeft - property int ownIndex: index - text: meridiae - color: Kirigami.Theme.textColor - font.pointSize: root.fontSize - //opacity: PathView.itemOpacity - } - currentIndex: hours > 12 ? 1 : 0 - onSelectedIndexChanged: { - if (selectedIndex > -1) { - //AM - if (selectedIndex == 0) { - hours -= 12 - //PM - } else { - hours += 12 - } - } - } - width: meridiaePlaceHolder.width + root._margin - Text { - id: meridiaePlaceHolder - visible: false - font.pointSize: root.fontSize - text: "00" - } - Behavior on opacity { - NumberAnimation { - duration: 250 - easing.type: Easing.InOutQuad + onClicked: { + if (root.hours >= 12) { + root.hours -= 12; + } else { + root.hours += 12; } } } diff --git a/kcms/time/ui/TimePickerSpinBox.qml b/kcms/time/ui/TimePickerSpinBox.qml new file mode 100644 index 00000000..e52b5edd --- /dev/null +++ b/kcms/time/ui/TimePickerSpinBox.qml @@ -0,0 +1,158 @@ +// SPDX-FileCopyrightText: 2021-2023 Devin Lin +// SPDX-License-Identifier: GPL-2.0-or-later + +import QtQuick +import QtQuick.Controls +import QtQuick.Window +import QtQuick.Layouts +import QtQuick.Templates as T + +import org.kde.kirigami as Kirigami + +Item { + id: root + property alias from: spinBox.from + property alias to: spinBox.to + property alias value: spinBox.value + + signal valueModified() + + T.SpinBox { + id: spinBox + visible: false + stepSize: 1 + + onValueModified: root.valueModified() + + validator: IntValidator { + locale: spinBox.locale.name + bottom: Math.min(spinBox.from, spinBox.to) + top: Math.max(spinBox.from, spinBox.to) + } + } + + Kirigami.Theme.colorSet: Kirigami.Theme.Button + Kirigami.Theme.inherit: false + + implicitWidth: Kirigami.Units.gridUnit * 4 + implicitHeight: column.implicitHeight + + readonly property color buttonColor: Kirigami.Theme.backgroundColor + readonly property color buttonHoverColor: Qt.darker(buttonColor, 1.05) + readonly property color buttonPressedColor: Qt.darker(buttonColor, 1.2) + readonly property color buttonBorderColor: Qt.alpha(Kirigami.Theme.textColor, 0.3) + + ColumnLayout { + id: column + spacing: 0 + anchors.top: parent.top + anchors.left: parent.left + anchors.right: parent.right + + TimePickerSpinBoxButton { + Layout.fillWidth: true + onClicked: { + spinBox.increase(); + spinBox.valueModified(); + } + icon.name: 'list-add-symbolic' + isStart: true + isEnd: false + enabled: spinBox.value < spinBox.to + } + + Rectangle { + Layout.fillWidth: true + implicitHeight: textInput.implicitHeight + + Kirigami.Theme.inherit: false + Kirigami.Theme.colorSet: Kirigami.Theme.Button + color: Kirigami.Theme.backgroundColor + + Rectangle { + width: 1 + anchors.left: parent.left + anchors.top: parent.top + anchors.bottom: parent.bottom + color: Kirigami.ColorUtils.linearInterpolation(Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, 0.15) + } + + Rectangle { + width: 1 + anchors.right: parent.right + anchors.top: parent.top + anchors.bottom: parent.bottom + color: Kirigami.ColorUtils.linearInterpolation(Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, 0.15) + } + + + MouseArea { + anchors.fill: parent + propagateComposedEvents: true + property int wheelDelta: 0 + + onExited: wheelDelta = 0 + onWheel: { + wheelDelta += wheel.angleDelta.y; + // magic number 120 for common "one click" + // See: http://qt-project.org/doc/qt-5/qml-qtquick-wheelevent.html#angleDelta-prop + while (wheelDelta >= 120) { + wheelDelta -= 120; + spinBox.increase(); + spinBox.valueModified(); + } + while (wheelDelta <= -120) { + wheelDelta += 120; + spinBox.decrease(); + spinBox.valueModified(); + } + } + + // Normally the TextInput does this automatically, but the MouseArea on + // top of it blocks that behavior, so we need to explicitly do it here + cursorShape: Qt.IBeamCursor + + TextInput { + id: textInput + anchors.top: parent.top + anchors.left: parent.left + anchors.right: parent.right + font.pointSize: Math.round(Kirigami.Theme.defaultFont.pointSize * 2.5) + font.weight: Font.Light + + color: Kirigami.Theme.textColor + selectionColor: Kirigami.Theme.highlightColor + selectedTextColor: Kirigami.Theme.highlightedTextColor + selectByMouse: true + horizontalAlignment: Qt.AlignHCenter + verticalAlignment: Qt.AlignVCenter + + inputMethodHints: Qt.ImhFormattedNumbersOnly + + function applyTextBinding() { + text = Qt.binding(function () { return spinBox.displayText.length == 1 ? '0' + spinBox.displayText : spinBox.displayText }); + } + + Component.onCompleted: applyTextBinding() + onEditingFinished: { + spinBox.value = parseInt(text); + spinBox.valueModified(); + applyTextBinding(); + } + } + } + } + + TimePickerSpinBoxButton { + Layout.fillWidth: true + onClicked: { + spinBox.decrease(); + spinBox.valueModified(); + } + icon.name: 'list-remove-symbolic' + isStart: false + isEnd: true + enabled: spinBox.value > spinBox.from + } + } +} diff --git a/kcms/time/ui/TimePickerSpinBoxButton.qml b/kcms/time/ui/TimePickerSpinBoxButton.qml new file mode 100644 index 00000000..c9792180 --- /dev/null +++ b/kcms/time/ui/TimePickerSpinBoxButton.qml @@ -0,0 +1,50 @@ +// Copyright 2023 Carl Schwan +// SPDX-License-Identifier: LGPL-2.0-or-later + +import QtQuick 2.15 +import QtQuick.Controls 2.15 as QQC2 +import org.kde.kirigami 2.19 as Kirigami + +QQC2.Button { + id: root + autoRepeat: true + + required property bool isEnd + required property bool isStart + + readonly property color borderColor: if (enabled && (visualFocus || hovered || down)) { + return Kirigami.Theme.focusColor + } else { + return Kirigami.ColorUtils.linearInterpolation(Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, 0.15) + } + + topPadding: 0 + bottomPadding: 0 + + contentItem: Item { + implicitHeight: Kirigami.Units.gridUnit * 2 + Kirigami.Icon { + source: root.icon.name + anchors.centerIn: parent + implicitHeight: Kirigami.Units.iconSizes.small + implicitWidth: Kirigami.Units.iconSizes.small + } + } + + background: Kirigami.ShadowedRectangle { + Kirigami.Theme.colorSet: Kirigami.Theme.Button + color: root.down ? Kirigami.Theme.alternateBackgroundColor : Kirigami.Theme.backgroundColor + + corners { + topLeftRadius: root.isStart ? 4 : 0 + topRightRadius: root.isStart ? 4 : 0 + bottomLeftRadius: root.isEnd ? 4 : 0 + bottomRightRadius: root.isEnd ? 4 : 0 + } + + border { + width: 1 + color: root.borderColor + } + } +} diff --git a/kcms/time/ui/main.qml b/kcms/time/ui/main.qml index d1aed363..d75bc6b0 100644 --- a/kcms/time/ui/main.qml +++ b/kcms/time/ui/main.qml @@ -1,6 +1,7 @@ // -*- coding: iso-8859-1 -*- /* * SPDX-FileCopyrightText: 2011 Sebastian Kügler + * SPDX-FileCopyrightText: 2023 Devin Lin * * SPDX-License-Identifier: LGPL-2.0-or-later */ @@ -47,7 +48,7 @@ SimpleKCM { id: timeZoneSelect text: i18n("Timezone") description: kcm.timeZone - onClicked: timeZonePickerSheet.open() + onClicked: timeZonePickerDialog.open() } } @@ -64,8 +65,8 @@ SimpleKCM { onCheckedChanged: { kcm.useNtp = checked if (!checked) { - kcm.ntpServer = "" - kcm.saveTime() + kcm.ntpServer = ""; + kcm.saveTime(); } } } @@ -76,168 +77,173 @@ SimpleKCM { id: timeSelect enabled: !ntpCheckBox.checked icon.name: "clock" - text: i18n("Current Time") - description: Qt.formatTime(kcm.currentTime, Locale.LongFormat) - onClicked: timePickerSheet.open() + text: i18n("System Time") + description: Qt.formatTime(kcm.currentTime, kcm.twentyFour ? 'hh:mm' : 'hh:mm ap') + onClicked: timePickerDialog.open() } FormCard.FormDelegateSeparator { above: timeSelect; below: dateSelect } FormCard.FormButtonDelegate { id: dateSelect - enabled: !ntpCheckBox.checked - icon.name: "view-calendar" - text: i18n("Date") + text: i18n("System Date") description: Qt.formatDate(kcm.currentDate, Locale.LongFormat) - onClicked: datePickerSheet.open() + icon.name: "view-calendar" + enabled: !ntpCheckBox.checked + onClicked: datePickerDialog.open() } } } - data: Kirigami.OverlaySheet { - id: timeZonePickerSheet + data: [ + Kirigami.Dialog { + id: timeZonePickerDialog + title: i18nc("@title:window", "Pick Timezone") + standardButtons: Kirigami.Dialog.Ok | Kirigami.Dialog.Cancel - header: ColumnLayout { - Kirigami.Heading { - text: i18nc("@title:window", "Pick Timezone") - Layout.fillWidth: true + property string selectedTimeZoneId + + onOpened: { + selectedTimeZoneId = kcm.timeZone; } - Kirigami.SearchField { - Layout.fillWidth: true - onTextChanged: kcm.timeZonesModel.filterString = text + onAccepted: { + kcm.saveTimeZone(selectedTimeZoneId) } - } - footer: RowLayout { - Controls.Button { - Layout.alignment: Qt.AlignHCenter + ListView { + id: listView + headerPositioning: ListView.OverlayHeader + implicitWidth: 18 * Kirigami.Units.gridUnit + implicitHeight: 18 * Kirigami.Units.gridUnit - text: i18nc("@action:button", "Close") + header: Controls.Control { + z: 1 - onClicked: timeZonePickerSheet.close() - } - } + topPadding: Kirigami.Units.smallSpacing + bottomPadding: 0 + leftPadding: Kirigami.Units.smallSpacing + rightPadding: Kirigami.Units.smallSpacing + + background: Rectangle { + color: Kirigami.Theme.backgroundColor + } - ListView { - id: listView - - clip: true - implicitWidth: 18 * Kirigami.Units.gridUnit - - topMargin: Math.round(Kirigami.Units.smallSpacing / 2) - bottomMargin: Math.round(Kirigami.Units.smallSpacing / 2) - - model: kcm.timeZonesModel - delegate: Delegates.RoundedItemDelegate { - required property string region - required property string city - - width: ListView.view.width - - text: { - if (region) { - return "%1 / %2".arg(region).arg(city) - } else { - return city + contentItem: ColumnLayout { + spacing: Kirigami.Units.smallSpacing + Kirigami.SearchField { + Layout.fillWidth: true + onTextChanged: kcm.timeZonesModel.filterString = text + } + Kirigami.Separator { Layout.fillWidth: true } } } - onClicked: { - timeZonePickerSheet.close() - kcm.saveTimeZone(model.timeZoneId) + model: kcm.timeZonesModel + delegate: Controls.RadioDelegate { + z: -1 + width: ListView.view.width + checked: timeZonePickerDialog.selectedTimeZoneId == model.timeZoneId + + text: { + if (model.region) { + return "%1 / %2".arg(model.region).arg(model.city); + } else { + return model.city; + } + } + + onClicked: { + timeZonePickerDialog.selectedTimeZoneId = model.timeZoneId; + checked = Qt.binding(() => timeZonePickerDialog.selectedTimeZoneId == model.timeZoneId); + console.log(timeZonePickerDialog.selectedTimeZoneId + ' ' + model.timeZoneId + ' ' + (timeZonePickerDialog.selectedTimeZoneId == model.timeZoneId)); + } } } - } - } + }, - Kirigami.OverlaySheet { - id: timePickerSheet - header: Kirigami.Heading { text: i18n("Pick Time") } - TimePicker { - id: timePicker - enabled: !ntpCheckBox.checked - twentyFour: hourFormatSwitch.checked + Kirigami.PromptDialog { + id: datePickerDialog + title: i18n("Pick System Date") + topPadding: Kirigami.Units.largeSpacing + bottomPadding: Kirigami.Units.largeSpacing + preferredWidth: Kirigami.Units.gridUnit * 15 + preferredHeight: Kirigami.Units.gridUnit * 13 - implicitWidth: Kirigami.Units.gridUnit * 15 + standardButtons: Kirigami.Dialog.Save | Kirigami.Dialog.Cancel - Component.onCompleted: { + onAccepted: { + kcm.currentDate = datePicker.isoDate; + kcm.saveTime(); + } + + onOpened: { + let date = new Date(kcm.currentDate) + datePicker.day = date.getDate(); + datePicker.month = date.getMonth() + 1; + datePicker.year = date.getFullYear(); + } + + DatePicker { + id: datePicker + implicitHeight: Kirigami.Units.gridUnit * 6 + + Connections { + target: kcm + function onCurrentDateChanged() { + if (datePickerDialog.visible) { + return; + } + + let date = new Date(kcm.currentDate); + datePicker.day = date.getDate(); + datePicker.month = date.getMonth() + 1; + datePicker.year = date.getFullYear(); + } + } + } + }, + + Kirigami.PromptDialog { + id: timePickerDialog + title: i18n("Pick System Time") + preferredWidth: Kirigami.Units.gridUnit * 15 + topPadding: Kirigami.Units.largeSpacing + bottomPadding: Kirigami.Units.largeSpacing + + standardButtons: Kirigami.Dialog.Save | Kirigami.Dialog.Cancel + + onAccepted: { + kcm.currentTime = String(timePicker.hours).padStart(2, '0') + + ':' + + String(timePicker.minutes).padStart(2, '0') + + ':00'; + kcm.saveTime(); + } + + onOpened: { var date = new Date(kcm.currentTime); timePicker.hours = date.getHours(); timePicker.minutes = date.getMinutes(); - timePicker.seconds = date.getSeconds(); + console.log(date + ' ' + date.getHours() + date.getMinutes()) } - Connections { - target: kcm - function onCurrentTimeChanged() { - if (timePicker.userConfiguring) { - return; - } - var date = new Date(kcm.currentTime); - timePicker.hours = date.getHours(); - timePicker.minutes = date.getMinutes(); - timePicker.seconds = date.getSeconds(); + TimePicker { + id: timePicker + + Connections { + target: kcm + function onCurrentTimeChanged() { + if (timePicker.userConfiguring) { + return; + } + + var date = new Date(kcm.currentTime); + timePicker.hours = date.getHours(); + timePicker.minutes = date.getMinutes(); + } } } - onUserConfiguringChanged: { - kcm.currentTime = timeString - kcm.saveTime() - } } - footer: RowLayout { - Controls.Button { - Layout.alignment: Qt.AlignRight - - text: i18nc("@action:button", "Close") - - onClicked: timePickerSheet.close() - } - } - } - - Kirigami.OverlaySheet { - id: datePickerSheet - header: Kirigami.Heading { text: i18n("Pick Date") } - DatePicker { - id: datePicker - enabled: !ntpCheckBox.checked - - implicitWidth: width > Kirigami.Units.gridUnit * 15 ? width : Kirigami.Units.gridUnit * 15 - - Component.onCompleted: { - var date = new Date(kcm.currentDate) - datePicker.day = date.getDate() - datePicker.month = date.getMonth()+1 - datePicker.year = date.getFullYear() - } - Connections { - target: kcm - function onCurrentDateChanged() { - if (datePicker.userConfiguring) { - return - } - - var date = new Date(kcm.currentDate) - - datePicker.day = date.getDate() - datePicker.month = date.getMonth()+1 - datePicker.year = date.getFullYear() - } - } - onUserConfiguringChanged: { - kcm.currentDate = isoDate - kcm.saveTime() - } - } - footer: RowLayout { - Controls.Button { - Layout.alignment: Qt.AlignRight - - text: i18nc("@action:button", "Close") - - onClicked: datePickerSheet.close() - } - } - } + ] }