kcms/time: Fix layout of time dialog and port date dialog to DatePopup

Some changes in Kirigami.Dialog recently completely broke the dialog, we
apparently now have to manually set dimensions on children. Use
DatePopup from Kirigami Addons in order to reduce the code needed here.

kcms/time/ui/DatePicker.qml

@@ -1,165 +0,0 @@
-/*
-    SPDX-FileCopyrightText: 2011 Marco Martin <mart@kde.org>
-
-    SPDX-License-Identifier: LGPL-2.0-or-later
-*/
-
-import QtQuick
-import QtQuick.Layouts
-import org.kde.kirigami 2.5 as Kirigami
-
-Item {
-    id: root
-
-    //////// API
-    property int day
-    property int month
-    property int year
-
-    property bool userConfiguring: false
-
-    property string isoDate: year + "-" + clockRow.twoDigitString(month) + "-" + clockRow.twoDigitString(day)
-
-    property int fontSize: 14
-    property int _margin: Kirigami.Units.gridUnit
-
-    opacity: enabled ? 1.0 : 0.5
-
-    Rectangle {
-        color: "transparent"
-        border.width: 1
-        border.color: Kirigami.Theme.textColor
-        anchors.fill: parent
-        opacity: 0.3
-    }
-
-    /////// Implementation
-    Connections {
-        target: root
-        function onDayChanged() {
-            clockRow.day = root.day;
-        }
-        function onMonthChanged() {
-            clockRow.month = root.month;
-        }
-        function onYearChanged() {
-            clockRow.year = root.year;
-        }
-    }
-
-    Timer {
-        id: userConfiguringTimer
-        repeat: false
-        interval: 1500
-        running: false
-        onTriggered: {
-            root.day = clockRow.day
-            root.month = clockRow.month
-            root.year = clockRow.year
-            userConfiguring = false
-        }
-    }
-
-    RowLayout {
-        id: clockRow
-        anchors.margins: _margin
-        anchors.fill: parent
-
-        property int day
-        property int month
-        property int year
-
-        function twoDigitString(number)
-        {
-            return number < 10 ? "0"+number : number
-        }
-
-        Digit {
-            id: dayDigit
-            Layout.fillWidth: true
-            model: {
-                var dd = new Date(year, month, 0);
-                return dd.getDate()
-            }
-            currentIndex: ((day - 1) < model) ? day-1 : 1
-            onSelectedIndexChanged: {
-                if (selectedIndex > -1) {
-                    day = selectedIndex+1
-                }
-            }
-            delegate: Text {
-                horizontalAlignment: Text.AlignHCenter
-                width: dayDigit.width
-                property int ownIndex: index
-                text: index+1
-                color: Kirigami.Theme.textColor
-                font.pointSize: root.fontSize
-            }
-        }
-        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: {
-                if (selectedIndex > -1) {
-                    month = selectedIndex + 1
-                }
-            }
-            delegate: Text {
-                horizontalAlignment: Text.AlignHCenter
-                width: monthDigit.width
-                property int ownIndex: index
-                property variant months: Array(i18n("Jan"), i18n("Feb"), i18n("Mar"), i18n("Apr"), i18n("May"),     i18n("Jun"), i18n("Jul"), i18n("Aug"), i18n("Sep"), i18n("Oct"), i18n("Nov"), i18n("Dec"))
-                text: months[index]
-                font.pointSize: root.fontSize
-                color: Kirigami.Theme.textColor
-                opacity: PathView.itemOpacity
-            }
-            width: monthPlaceHolder.width
-            Text {
-                id: monthPlaceHolder
-                visible: false
-                font.pointSize: root.fontSize
-                text: "0000"
-            }
-        }
-        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
-            onSelectedIndexChanged: {
-                if (selectedIndex > -1) {
-                    year = selectedIndex
-                }
-            }
-            width: yearPlaceHolder.width*1.3
-            Text {
-                id: yearPlaceHolder
-                visible: false
-                font.pointSize: root.fontSize
-                text: "0000"
-            }
-        }
-    }
-}

kcms/time/ui/Digit.qml

@@ -1,74 +0,0 @@
-/*
-    SPDX-FileCopyrightText: 2011 Marco Martin <mart@kde.org>
-
-    SPDX-License-Identifier: LGPL-2.0-or-later
-*/
-
-import QtQuick 2.7
-import org.kde.kirigami 2.4 as Kirigami
-
-
-Item {
-    id: root
-
-    property alias model: spinnerView.model
-    property alias currentIndex: spinnerView.currentIndex
-    property alias delegate: spinnerView.delegate
-    property alias moving: spinnerView.moving
-    property int selectedIndex: -1
-    property int fontSize: 14
-
-    width: placeHolder.width*1.3
-    height: placeHolder.height*3
-
-    Text {
-        id: placeHolder
-        visible: false
-        font.pointSize: root.fontSize
-        text: "00"
-    }
-
-    PathView {
-        id: spinnerView
-        anchors.fill: parent
-        model: 60
-        clip: true
-        pathItemCount: 5
-        dragMargin: 800
-        preferredHighlightBegin: 0.5
-        preferredHighlightEnd: 0.5
-        delegate: Text {
-            horizontalAlignment: Text.AlignHCenter
-            width: spinnerView.width
-            property int ownIndex: index
-            text: index < 10 ? "0"+index : index
-            color: Kirigami.Theme.textColor
-            font.pointSize: root.fontSize
-        }
-
-        onMovingChanged: {
-            userConfiguring = true
-            if (!moving) {
-                userConfiguringTimer.restart()
-                selectedIndex = childAt(width/2, height/2).ownIndex
-            }
-        }
-
-        path: Path {
-            startX: spinnerView.width/2
-            startY: spinnerView.height + 1.5*placeHolder.height
-            PathAttribute { name: "itemOpacity"; value: 0 }
-            PathLine {
-                x: spinnerView.width/2
-                y: spinnerView.height/2
-            }
-            PathAttribute { name: "itemOpacity"; value: 1 }
-            PathLine {
-                x: spinnerView.width/2
-                y: -1.5*placeHolder.height
-            }
-            PathAttribute { name: "itemOpacity"; value: 0 }
-        }
-    }
-}
-

kcms/time/ui/TimePicker.qml

@@ -8,8 +8,9 @@ import QtQuick.Layouts
 import org.kde.kcmutils
 import org.kde.kirigami as Kirigami
 
-RowLayout {
+Item {
     id: root
+    implicitHeight: row.implicitHeight + Kirigami.Units.largeSpacing * 2
 
     property int hours: 0
     property int minutes: 0
@@ -37,8 +38,9 @@ RowLayout {
     }
 
     RowLayout {
+        id: row
+        anchors.centerIn: parent
         spacing: Kirigami.Units.largeSpacing
-        Layout.alignment: Qt.AlignHCenter
 
         // 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

kcms/time/ui/TimePickerSpinBox.qml

@@ -55,7 +55,7 @@ Item {
                 spinBox.increase();
                 spinBox.valueModified();
             }
-            icon.name: 'list-add-symbolic'
+            icon.name: 'arrow-up-symbolic'
             isStart: true
             isEnd: false
             enabled: spinBox.value < spinBox.to
@@ -149,7 +149,7 @@ Item {
                 spinBox.decrease();
                 spinBox.valueModified();
             }
-            icon.name: 'list-remove-symbolic'
+            icon.name: 'arrow-down-symbolic'
             isStart: false
             isEnd: true
             enabled: spinBox.value > spinBox.from

kcms/time/ui/main.qml

@@ -15,6 +15,7 @@ import org.kde.kcmutils
 import org.kde.timesettings
 import org.kde.kirigamiaddons.formcard 1 as FormCard
 import org.kde.kirigamiaddons.delegates 1 as Delegates
+import org.kde.kirigamiaddons.dateandtime as DateAndTime
 
 SimpleKCM {
     id: timeModule
@@ -163,45 +164,18 @@ SimpleKCM {
             }
         },
 
-        Kirigami.PromptDialog {
+        DateAndTime.DatePopup {
             id: datePickerDialog
-            title: i18n("Pick System Date")
+            modal: true
-            topPadding: Kirigami.Units.largeSpacing
+            parent: timeModule
-            bottomPadding: Kirigami.Units.largeSpacing
-            preferredWidth: Kirigami.Units.gridUnit * 15
-            preferredHeight: Kirigami.Units.gridUnit * 13
-
-            standardButtons: Kirigami.Dialog.Save | Kirigami.Dialog.Cancel
-
-            onAccepted: {
-                kcm.currentDate = datePicker.isoDate;
-                kcm.saveTime();
-            }
 
             onOpened: {
-                let date = new Date(kcm.currentDate)
+                value = kcm.currentDate;
-                datePicker.day = date.getDate();
-                datePicker.month = date.getMonth() + 1;
-                datePicker.year = date.getFullYear();
             }
 
-            DatePicker {
+            onAccepted: {
-                id: datePicker
+                kcm.currentDate = value;
-                implicitHeight: Kirigami.Units.gridUnit * 6
+                kcm.saveTime();
-
-                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();
-                    }
-                }
             }
         },
 
@@ -209,9 +183,6 @@ SimpleKCM {
             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: {
@@ -231,6 +202,7 @@ SimpleKCM {
 
             TimePicker {
                 id: timePicker
+                width: timePickerDialog.width - timePickerDialog.leftPadding - timePickerDialog.rightPadding
 
                 Connections {
                     target: kcm