ui/delegates/TimePicker.qml

0001 /*
0002  *   SPDX-FileCopyrightText: 2021 Aditya Mehra <aix.m@outlook.com>
0003  *   SPDX-FileCopyrightText: 2011 Marco Martin <mart@kde.org>
0004  *
0005  *   SPDX-License-Identifier: LGPL-2.0-or-later
0006  */
0007
0008 import QtQuick 2.14
0009 import org.kde.kirigami 2.12 as Kirigami
0010
0011 Item {
0012     id: root
0013     clip: true
0014
0015     //////// API
0016     property alias hours: clockRow.hours
0017     property alias minutes: clockRow.minutes
0018     property alias seconds: clockRow.seconds
0019
0020     property bool userConfiguring: visible
0021     property bool twentyFour: true
0022
0023     property int fontSize: 14
0024     property int _margin: Kirigami.Units.gridUnit
0025
0026     property string timeString: clockRow.twoDigitString(hours) + ":" + clockRow.twoDigitString(minutes) + ":" +  clockRow.twoDigitString(seconds)
0027
0028     opacity: enabled ? 1.0 : 0.5
0029
0030     onFocusChanged: {
0031         if(focus) {
0032             hoursDigit.forceActiveFocus()
0033         }
0034     }
0035
0036     Behavior on width {
0037         SequentialAnimation {
0038             PauseAnimation {
0039                 duration: 250
0040             }
0041             NumberAnimation {
0042                 duration: 250
0043                 easing.type: Easing.InOutQuad
0044             }
0045         }
0046     }
0047
0048     Rectangle {
0049         color: "transparent"
0050         border.color: Kirigami.Theme.textColor
0051         border.width: 1
0052         anchors.fill: parent
0053         anchors.margins: Kirigami.Units.largeSpacing
0054
0055         Row {
0056             id: clockRow
0057             anchors.fill: parent
0058             anchors.margins: Kirigami.Units.smallSpacing
0059
0060             property int hours
0061             property int minutes
0062             property int seconds
0063
0064             function twoDigitString(number)
0065             {
0066                 return number < 10 ? "0"+number : number
0067             }
0068
0069             Digit {
0070                 id: hoursDigit
0071                 model: root.twentyFour ? 24 : 12
0072                 currentIndex: root.twentyFour || hours < 12 ? hours : hours - 12
0073                 KeyNavigation.right: minutesDigit
0074                 KeyNavigation.left: backBtnTPItem
0075                 delegate: Text {
0076                     horizontalAlignment: Text.AlignHCenter
0077                     width: hoursDigit.width
0078                     property int ownIndex: index
0079                     text: (!root.twentyFour && index == 0) ? "12" : clockRow.twoDigitString(index)
0080                     font.pointSize: root.fontSize
0081                     color: hoursDigit.focus && hoursDigit.currentIndex == index ? Kirigami.Theme.linkColor : Kirigami.Theme.textColor
0082                     opacity: PathView.itemOpacity
0083                 }
0084                 onSelectedIndexChanged: {
0085                     if (selectedIndex > -1) {
0086                         if (root.twentyFour ||
0087                             meridiaeDigit.isAm) {
0088                             hours = selectedIndex
0089                         } else {
0090                             hours = selectedIndex + 12
0091                         }
0092                     }
0093                 }
0094             }
0095             Kirigami.Separator {
0096                 anchors {
0097                     top: parent.top
0098                     bottom: parent.bottom
0099                 }
0100             }
0101             Digit {
0102                 id: minutesDigit
0103                 model: 60
0104                 currentIndex: minutes
0105                 KeyNavigation.right: secondsDigit
0106                 KeyNavigation.left: hoursDigit
0107                 onSelectedIndexChanged: {
0108                     if (selectedIndex > -1) {
0109                         minutes = selectedIndex
0110                     }
0111                 }
0112             }
0113             Kirigami.Separator {
0114                 anchors {
0115                     top: parent.top
0116                     bottom: parent.bottom
0117                 }
0118             }
0119             Digit {
0120                 id: secondsDigit
0121                 model: 60
0122                 currentIndex: seconds
0123                 KeyNavigation.right: backBtnTPItem
0124                 KeyNavigation.left: minutesDigit
0125                 onSelectedIndexChanged: {
0126                     if (selectedIndex > -1) {
0127                         seconds = selectedIndex
0128                     }
0129                 }
0130             }
0131             Kirigami.Separator {
0132                 opacity: meridiaeDigit.opacity == 0 ? 0 : 1
0133
0134                 anchors {
0135                     top: parent.top
0136                     bottom: parent.bottom
0137                 }
0138                 Behavior on opacity {
0139                     NumberAnimation {
0140                         duration: 250
0141                         easing.type: Easing.InOutQuad
0142                     }
0143                 }
0144             }
0145             Digit {
0146                 id: meridiaeDigit
0147                 visible: opacity != 0
0148                 opacity: root.twentyFour ? 0 : 1
0149                 property bool isAm: (selectedIndex > -1) ? (selectedIndex < 1) : (currentIndex < 1)
0150                 model: ListModel {
0151                     ListElement {
0152                         meridiae: "AM"
0153                     }
0154                     ListElement {
0155                         meridiae: "PM"
0156                     }
0157                 }
0158                 delegate: Text {
0159                     width: meridiaeDigit.width
0160                     horizontalAlignment: Text.AlignLeft
0161                     property int ownIndex: index
0162                     text: meridiae
0163                     color: Kirigami.Theme.textColor
0164                     font.pointSize: root.fontSize
0165                     //opacity: PathView.itemOpacity
0166                 }
0167                 currentIndex: hours > 12 ? 1 : 0
0168                 onSelectedIndexChanged: {
0169                     if (selectedIndex > -1) {
0170                         //AM
0171                         if (selectedIndex == 0) {
0172                             hours -= 12
0173                         //PM
0174                         } else {
0175                             hours += 12
0176                         }
0177                     }
0178                 }
0179                 width: meridiaePlaceHolder.width + root._margin
0180                 Text {
0181                     id: meridiaePlaceHolder
0182                     visible: false
0183                     font.pointSize: root.fontSize
0184                     text: "00"
0185                 }
0186                 Behavior on opacity {
0187                     NumberAnimation {
0188                         duration: 250
0189                         easing.type: Easing.InOutQuad
0190                     }
0191                 }
0192             }
0193         }
0194     }
0195 }