time/ui/TimePickerSpinBox.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.Window
0007 import QtQuick.Layouts
0008 import QtQuick.Templates as T
0009
0010 import org.kde.kirigami as Kirigami
0011
0012 Item {
0013     id: root
0014     property alias from: spinBox.from
0015     property alias to: spinBox.to
0016     property alias value: spinBox.value
0017
0018     signal valueModified()
0019
0020     T.SpinBox {
0021         id: spinBox
0022         visible: false
0023         stepSize: 1
0024
0025         onValueModified: root.valueModified()
0026
0027         validator: IntValidator {
0028             locale: spinBox.locale.name
0029             bottom: Math.min(spinBox.from, spinBox.to)
0030             top: Math.max(spinBox.from, spinBox.to)
0031         }
0032     }
0033
0034     Kirigami.Theme.colorSet: Kirigami.Theme.Button
0035     Kirigami.Theme.inherit: false
0036
0037     implicitWidth: Kirigami.Units.gridUnit * 4
0038     implicitHeight: column.implicitHeight
0039
0040     readonly property color buttonColor: Kirigami.Theme.backgroundColor
0041     readonly property color buttonHoverColor: Qt.darker(buttonColor, 1.05)
0042     readonly property color buttonPressedColor: Qt.darker(buttonColor, 1.2)
0043     readonly property color buttonBorderColor: Qt.alpha(Kirigami.Theme.textColor, 0.3)
0044
0045     ColumnLayout {
0046         id: column
0047         spacing: 0
0048         anchors.top: parent.top
0049         anchors.left: parent.left
0050         anchors.right: parent.right
0051
0052         TimePickerSpinBoxButton {
0053             Layout.fillWidth: true
0054             onClicked: {
0055                 spinBox.increase();
0056                 spinBox.valueModified();
0057             }
0058             icon.name: 'list-add-symbolic'
0059             isStart: true
0060             isEnd: false
0061             enabled: spinBox.value < spinBox.to
0062         }
0063
0064         Rectangle {
0065             Layout.fillWidth: true
0066             implicitHeight: textInput.implicitHeight
0067
0068             Kirigami.Theme.inherit: false
0069             Kirigami.Theme.colorSet: Kirigami.Theme.Button
0070             color: Kirigami.Theme.backgroundColor
0071
0072             Rectangle {
0073                 width: 1
0074                 anchors.left: parent.left
0075                 anchors.top: parent.top
0076                 anchors.bottom: parent.bottom
0077                 color: Kirigami.ColorUtils.linearInterpolation(Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, 0.15)
0078             }
0079
0080             Rectangle {
0081                 width: 1
0082                 anchors.right: parent.right
0083                 anchors.top: parent.top
0084                 anchors.bottom: parent.bottom
0085                 color: Kirigami.ColorUtils.linearInterpolation(Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, 0.15)
0086             }
0087
0088
0089             MouseArea {
0090                 anchors.fill: parent
0091                 propagateComposedEvents: true
0092                 property int wheelDelta: 0
0093
0094                 onExited: wheelDelta = 0
0095                 onWheel: {
0096                     wheelDelta += wheel.angleDelta.y;
0097                     // magic number 120 for common "one click"
0098                     // See: http://qt-project.org/doc/qt-5/qml-qtquick-wheelevent.html#angleDelta-prop
0099                     while (wheelDelta >= 120) {
0100                         wheelDelta -= 120;
0101                         spinBox.increase();
0102                         spinBox.valueModified();
0103                     }
0104                     while (wheelDelta <= -120) {
0105                         wheelDelta += 120;
0106                         spinBox.decrease();
0107                         spinBox.valueModified();
0108                     }
0109                 }
0110
0111                 // Normally the TextInput does this automatically, but the MouseArea on
0112                 // top of it blocks that behavior, so we need to explicitly do it here
0113                 cursorShape: Qt.IBeamCursor
0114
0115                 TextInput {
0116                     id: textInput
0117                     anchors.top: parent.top
0118                     anchors.left: parent.left
0119                     anchors.right: parent.right
0120                     font.pointSize: Math.round(Kirigami.Theme.defaultFont.pointSize * 2.5)
0121                     font.weight: Font.Light
0122
0123                     color: Kirigami.Theme.textColor
0124                     selectionColor: Kirigami.Theme.highlightColor
0125                     selectedTextColor: Kirigami.Theme.highlightedTextColor
0126                     selectByMouse: true
0127                     horizontalAlignment: Qt.AlignHCenter
0128                     verticalAlignment: Qt.AlignVCenter
0129
0130                     inputMethodHints: Qt.ImhFormattedNumbersOnly
0131
0132                     function applyTextBinding() {
0133                         text = Qt.binding(function () { return spinBox.displayText.length == 1 ? '0' + spinBox.displayText : spinBox.displayText });
0134                     }
0135
0136                     Component.onCompleted: applyTextBinding()
0137                     onEditingFinished: {
0138                         spinBox.value = parseInt(text);
0139                         spinBox.valueModified();
0140                         applyTextBinding();
0141                     }
0142                 }
0143             }
0144         }
0145
0146         TimePickerSpinBoxButton {
0147             Layout.fillWidth: true
0148             onClicked: {
0149                 spinBox.decrease();
0150                 spinBox.valueModified();
0151             }
0152             icon.name: 'list-remove-symbolic'
0153             isStart: false
0154             isEnd: true
0155             enabled: spinBox.value > spinBox.from
0156         }
0157     }
0158 }