Port digital clock settings to QQc2 and Kirigami

Summary:
use QQC2 and FormLayout for alignment

also, qqc2 combobox doesn't suffer from 390801 anymore

BUG: 390801

Test Plan: tried to set all the options

Reviewers: #plasma, #vdg, ngraham

Reviewed By: #vdg, ngraham

Subscribers: ngraham, plasma-devel

Tags: #plasma

Differential Revision: https://phabricator.kde.org/D17333

applets/digital-clock/package/contents/ui/configAppearance.qml

@@ -21,11 +21,12 @@
  */
 
 import QtQuick 2.0
-import QtQuick.Controls 1.0 as QtControls
+import QtQuick.Controls 2.3 as QtControls
 import QtQuick.Layouts 1.0 as QtLayouts
 import org.kde.plasma.calendar 2.0 as PlasmaCalendar
+import org.kde.kirigami 2.5 as Kirigami
 
-Item {
+QtLayouts.ColumnLayout {
     id: appearancePage
     width: childrenRect.width
     height: childrenRect.height
@@ -43,7 +44,7 @@ Item {
 
     property alias cfg_showDate: showDate.checked
     property string cfg_dateFormat: "shortDate"
-    property alias cfg_use24hFormat: use24hFormat.checkedState
+    property alias cfg_use24hFormat: use24hFormat.checked
 
     onCfg_fontFamilyChanged: {
         // HACK by the time we populate our model and/or the ComboBox is finished the value is still undefined
@@ -72,107 +73,92 @@ Item {
         }
     }
 
-    QtLayouts.ColumnLayout {
-        anchors.left: parent.left
+    Kirigami.FormLayout {
+        QtLayouts.Layout.fillWidth: true
 
-        QtControls.GroupBox {
-            QtLayouts.Layout.fillWidth: true
-            title: i18n("Information")
-            flat: true
-
-            QtLayouts.ColumnLayout {
-                QtControls.CheckBox {
-                    id: showDate
-                    text: i18n("Show date")
-                }
+        QtControls.CheckBox {
+            id: showDate
+            Kirigami.FormData.label: i18n("Information:")
+            text: i18n("Show date")
+        }
 
-                QtControls.CheckBox {
-                    id: showSeconds
-                    text: i18n("Show seconds")
-                }
+        QtControls.CheckBox {
+            id: showSeconds
+            text: i18n("Show seconds")
+        }
 
-                QtControls.CheckBox {
-                    id: use24hFormat
-                    text: i18nc("Checkbox label; means 24h clock format, without am/pm", "Use 24-hour Clock")
-                }
+        QtControls.CheckBox {
+            id: use24hFormat
+            text: i18nc("Checkbox label; means 24h clock format, without am/pm", "Use 24-hour Clock")
+        }
 
-                QtControls.CheckBox {
-                    id: showLocalTimezone
-                    text: i18n("Show local time zone")
-                }
+        QtControls.CheckBox {
+            id: showLocalTimezone
+            text: i18n("Show local time zone")
+        }
 
-                QtControls.Label {
-                    text: i18n("Display time zone as:")
-                }
+        QtLayouts.ColumnLayout {
+            Kirigami.FormData.label: i18n("Display time zone as:")
+            Kirigami.FormData.buddyFor: timezoneCityRadio
 
-                QtControls.GroupBox {
-                    QtLayouts.Layout.fillWidth: true
-                    flat: true
-                    QtLayouts.ColumnLayout {
+            QtControls.RadioButton {
+                id: timezoneCityRadio
+                text: i18n("Time zone city")
+            }
 
-                        QtControls.ExclusiveGroup { id: timezoneDisplayType }
+            QtControls.RadioButton {
+                id: timezoneCodeRadio
+                text: i18n("Time zone code")
+            }
+        }
 
-                        QtControls.RadioButton {
-                            id: timezoneCityRadio
-                            text: i18n("Time zone city")
-                            exclusiveGroup: timezoneDisplayType
-                        }
+        Item {
+            Kirigami.FormData.isSection: true
+        }
 
-                        QtControls.RadioButton {
-                            id: timezoneCodeRadio
-                            text: i18n("Time zone code")
-                            exclusiveGroup: timezoneDisplayType
-                        }
-                    }
+        QtControls.ComboBox {
+            id: dateFormat
+            Kirigami.FormData.label: i18n("Date format:")
+            enabled: showDate.checked
+            textRole: "label"
+            model: [
+                {
+                    'label': i18n("Long Date"),
+                    'name': "longDate"
+                },
+                {
+                    'label': i18n("Short Date"),
+                    'name': "shortDate"
+                },
+                {
+                    'label': i18n("ISO Date"),
+                    'name': "isoDate"
                 }
+            ]
+            onCurrentIndexChanged: cfg_dateFormat = model[currentIndex]["name"]
 
-                QtLayouts.RowLayout {
-                    QtControls.Label {
-                        text: i18n("Date format:")
-                    }
-
-                    QtControls.ComboBox {
-                        id: dateFormat
-                        enabled: showDate.checked
-                        textRole: "label"
-                        model: [
-                            {
-                                'label': i18n("Long Date"),
-                                'name': "longDate"
-                            },
-                            {
-                                'label': i18n("Short Date"),
-                                'name': "shortDate"
-                            },
-                            {
-                                'label': i18n("ISO Date"),
-                                'name': "isoDate"
-                            }
-                        ]
-                        onCurrentIndexChanged: cfg_dateFormat = model[currentIndex]["name"]
-
-                        Component.onCompleted: {
-                            for (var i = 0; i < model.length; i++) {
-                                if (model[i]["name"] == plasmoid.configuration.dateFormat) {
-                                    dateFormat.currentIndex = i;
-                                }
-                            }
-                        }
+            Component.onCompleted: {
+                for (var i = 0; i < model.length; i++) {
+                    if (model[i]["name"] == plasmoid.configuration.dateFormat) {
+                        dateFormat.currentIndex = i;
                     }
                 }
             }
         }
 
+        Item {
+            Kirigami.FormData.isSection: true
+        }
+
         QtLayouts.RowLayout {
             QtLayouts.Layout.fillWidth: true
 
-            QtControls.Label {
-                text: i18n("Font style:")
-            }
+            Kirigami.FormData.label: i18n("Font style:")
 
             QtControls.ComboBox {
                 id: fontFamilyComboBox
                 QtLayouts.Layout.fillWidth: true
+                currentIndex: 0
                 // ComboBox's sizing is just utterly broken
                 QtLayouts.Layout.minimumWidth: units.gridUnit * 10
                 model: fontsModel
@@ -190,21 +176,28 @@ Item {
 
             QtControls.Button {
                 id: boldCheckBox
-                tooltip: i18n("Bold text")
-                iconName: "format-text-bold"
+                QtControls.ToolTip {
+                    text: i18n("Bold text")
+                }
+                icon.name: "format-text-bold"
                 checkable: true
                 Accessible.name: tooltip
             }
 
             QtControls.Button {
                 id: italicCheckBox
-                tooltip: i18n("Italic text")
-                iconName: "format-text-italic"
+                QtControls.ToolTip {
+                    text: i18n("Italic text")
+                }
+                icon.name: "format-text-italic"
                 checkable: true
                 Accessible.name: tooltip
             }
         }
     }
+    Item {
+        QtLayouts.Layout.fillHeight: true
+    }
 
     Component.onCompleted: {
         if (plasmoid.configuration.displayTimezoneAsCode) {