time/ui/TimePicker.qml

0001 // SPDX-FileCopyrightText: 2021-2023 Devin Lin <devin@kde.org>
0002 // SPDX-License-Identifier: GPL-2.0-or-later
0003
0004 import QtQuick
0005 import QtQuick.Controls
0006 import QtQuick.Layouts
0007
0008 import org.kde.kcmutils
0009 import org.kde.kirigami as Kirigami
0010
0011 RowLayout {
0012     id: root
0013
0014     property int hours: 0
0015     property int minutes: 0
0016     readonly property bool twelveHourTime: !kcm.twentyFour // am/pm
0017
0018     onHoursChanged: updateHours()
0019     onMinutesChanged: minutesSpinbox.value = minutes
0020     onTwelveHourTimeChanged: updateHours()
0021
0022     Component.onCompleted: {
0023         // needs to manually be triggered because onHoursChanged doesn't emit when set to 0
0024         updateHours();
0025     }
0026
0027     function updateHours() {
0028         // manually do this instead of a binding so we can set the value without worrying about binding eval order
0029         hoursSpinbox.from = root.twelveHourTime ? 1 : 0;
0030         hoursSpinbox.to = root.twelveHourTime ? 12 : 23;
0031
0032         if (twelveHourTime) {
0033             hoursSpinbox.value = ((hours % 12) == 0) ? 12 : hours % 12;
0034         } else {
0035             hoursSpinbox.value = hours;
0036         }
0037     }
0038
0039     RowLayout {
0040         spacing: Kirigami.Units.largeSpacing
0041         Layout.alignment: Qt.AlignHCenter
0042
0043         // note: for 12-hour time, we have hours from 1-12 (0'o clock displays as 12)
0044         //       for 24-hour time, we have hours from 0-23
0045         TimePickerSpinBox {
0046             id: hoursSpinbox
0047
0048             onValueModified: {
0049                 if (root.twelveHourTime) {
0050                     if (root.hours >= 12) {
0051                         root.hours = value % 12 + 12;
0052                     } else {
0053                         root.hours = value % 12;
0054                     }
0055                 } else {
0056                     root.hours = value;
0057                 }
0058             }
0059         }
0060
0061         Kirigami.Heading {
0062             level: 1
0063             text: ":"
0064         }
0065
0066         TimePickerSpinBox {
0067             id: minutesSpinbox
0068             from: 0
0069             to: 59
0070
0071             onValueModified: {
0072                 root.minutes = value;
0073             }
0074         }
0075
0076         Button {
0077             id: amPmToggle
0078             visible: root.twelveHourTime
0079             leftPadding: Kirigami.Units.largeSpacing
0080             rightPadding: Kirigami.Units.largeSpacing
0081             topPadding: Kirigami.Units.largeSpacing
0082             bottomPadding: Kirigami.Units.largeSpacing
0083             Layout.alignment: Qt.AlignVCenter
0084
0085             contentItem: Item {
0086                 implicitWidth: label.implicitWidth
0087                 implicitHeight: label.implicitHeight
0088                 Label {
0089                     id: label
0090                     anchors.centerIn: parent
0091                     font.weight: Font.Light
0092                     font.pointSize: Kirigami.Theme.defaultFont.pointSize * 1.3
0093                     text: i18n(hours < 12 ? i18n("AM") : i18n("PM"))
0094                 }
0095             }
0096
0097             background: Rectangle {
0098                 radius: Kirigami.Units.smallSpacing
0099                 border.color: {
0100                     if (amPmToggle.enabled && (amPmToggle.visualFocus || amPmToggle.hovered || amPmToggle.down)) {
0101                         return Kirigami.Theme.focusColor
0102                     } else {
0103                         return Kirigami.ColorUtils.linearInterpolation(Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, 0.15)
0104                     }
0105                 }
0106                 border.width: 1
0107                 color: amPmToggle.down ? Kirigami.Theme.alternateBackgroundColor : Kirigami.Theme.backgroundColor
0108             }
0109
0110             onClicked: {
0111                 if (root.hours >= 12) {
0112                     root.hours -= 12;
0113                 } else {
0114                     root.hours += 12;
0115                 }
0116             }
0117         }
0118     }
0119 }