Make configuration use Kirigami FormLayout

package/contents/ui/config/configAppearance.qml

@@ -11,10 +11,9 @@ import QtQuick.Dialogs
 import org.kde.kirigami 2.3 as Kirigami
 import org.kde.kcmutils as KCM
 
-
 import "../lib"
 
-KCM.ScrollViewKCM {
+KCM.SimpleKCM {
     id: appearancePage
     width: childrenRect.width
     height: childrenRect.height
@@ -81,54 +80,48 @@ KCM.ScrollViewKCM {
         }
     }
 
-    QtLayouts.ColumnLayout {
+    Kirigami.FormLayout {
         id: layout
         anchors.fill: parent
-        spacing: 30
 
-        QtLayouts.ColumnLayout {
-            QtLayouts.Layout.fillWidth: true
-            spacing: 10
 
-            QtControls.Label {
+        Kirigami.Separator {
-                text: i18n("Clock Display Settings")
+            Kirigami.FormData.isSection: true
-                font.bold: true
+            Kirigami.FormData.label: "Clock Display Settings"
-                font.pixelSize: 17
         }
 
         QtControls.CheckBox {
+            Kirigami.FormData.label: "Use 24-hour clock"
             id: use24hFormat
-                text: i18n("Use 24-hour clock")
             tristate: false
             checked: cfg_clockUse24hFormat
         }
 
         QtControls.CheckBox {
+            Kirigami.FormData.label: "Show seconds"
             id: showSeconds
-                text: i18n("Show seconds")
             tristate: false
             checked: cfg_clockShowSeconds
         }
 
-            QtLayouts.RowLayout {
-                QtControls.Label {
-                    text: i18n("Separator:")
-                }
-
         QtControls.TextField {
+            Kirigami.FormData.label: "Separator"
             id: clockSeparatorTextField
             maximumLength: 1
         }
+
+        ColorButton {
+            Kirigami.FormData.label: "Color"
+
+            onValueChanged: {
+                cfg_clockFontColor = value
+            }
         }
 
         FontConfig {
+            Kirigami.FormData.label: "Font"
             fontModel: fontsModel
 
-                colorValue: cfg_clockFontColor
-                onColorValueChanged: {
-                    cfg_clockFontColor = colorValue
-                }
-
             fontValue: cfg_clockFontFamily
             onFontValueChanged: {
                 cfg_clockFontFamily = fontValue
@@ -158,6 +151,7 @@ KCM.ScrollViewKCM {
         }
 
         ShadowConfig {
+            Kirigami.FormData.label: "Shadow"
             enabled: clockShadowCheckBox.checked
 
             colorValue: cfg_clockShadowColor
@@ -180,32 +174,31 @@ KCM.ScrollViewKCM {
                 cfg_clockShadowYOffset = offsetYValue
             }
         }
-        }
 
-        QtLayouts.ColumnLayout {
-            QtLayouts.Layout.fillWidth: true
-            spacing: 10
 
-            QtControls.Label {
+        Kirigami.Separator {
-                text: i18n("Day Display Settings")
+            Kirigami.FormData.isSection: true
-                font.bold: true
+            Kirigami.FormData.label: "Day Display Settings"
-                font.pixelSize: 17
         }
 
         QtControls.CheckBox {
+            Kirigami.FormData.label: "Show day display"
             id: showDayDisplayCheckBox
-                text: i18n("Show day display")
+        }
+
+        ColorButton {
+            Kirigami.FormData.label: "Color"
+
+            onValueChanged: {
+                cfg_dayFontColor = value
+            }
         }
 
         FontConfig {
+            Kirigami.FormData.label: "Font"
             fontModel: fontsModel
             enabled: showDayDisplayCheckBox.checked
 
-                colorValue: cfg_dayFontColor
-                onColorValueChanged: {
-                    cfg_dayFontColor = colorValue
-                }
-
             fontValue: cfg_dayFontFamily
             onFontValueChanged: {
                 cfg_dayFontFamily = fontValue
@@ -235,6 +228,7 @@ KCM.ScrollViewKCM {
         }
 
         ShadowConfig {
+            Kirigami.FormData.label: "Shadow"
             enabled: dayShadowCheckBox.checked
 
             colorValue: cfg_dayShadowColor
@@ -257,33 +251,22 @@ KCM.ScrollViewKCM {
                 cfg_dayShadowYOffset = offsetYValue
             }
         }
-        }
 
-        QtLayouts.ColumnLayout {
-            QtLayouts.Layout.fillWidth: true
-            spacing: 10
 
-            QtControls.Label {
+        Kirigami.Separator {
-                text: i18n("Date Display Settings")
+            Kirigami.FormData.isSection: true
-                font.bold: true
+            Kirigami.FormData.label: "Date Display Settings"
-                font.pixelSize: 17
         }
 
         QtControls.CheckBox {
+            Kirigami.FormData.label: "Show date display"
             id: showDateDisplayCheckBox
-                text: i18n("Show date display")
         }
 
         QtLayouts.RowLayout {
+            Kirigami.FormData.label: "Date format"
             enabled: showDateDisplayCheckBox.checked
 
-                QtControls.Label {
-                    text: i18n("Date format:")
-                    opacity: if (enabled) 1
-                                else 0.4
-                }
-
-                QtLayouts.RowLayout {
             QtControls.TextField {
                 id: customDateFormat
                 QtLayouts.Layout.fillWidth: true
@@ -294,17 +277,20 @@ KCM.ScrollViewKCM {
                 onClicked: Qt.openUrlExternally("https://doc.qt.io/qt-5/qml-qtqml-qt.html#formatDateTime-method")
             }
         }
+
+        ColorButton {
+            Kirigami.FormData.label: "Color"
+
+            onValueChanged: {
+                cfg_dateFontColor = value
+            }
         }
 
         FontConfig {
+            Kirigami.FormData.label: "Font"
             fontModel: fontsModel
             enabled: showDateDisplayCheckBox.checked
 
-                colorValue: cfg_dateFontColor
-                onColorValueChanged: {
-                    cfg_dateFontColor = colorValue
-                }
-
             fontValue: cfg_dateFontFamily
             onFontValueChanged: {
                 cfg_dateFontFamily = fontValue
@@ -334,6 +320,7 @@ KCM.ScrollViewKCM {
         }
 
         ShadowConfig {
+            Kirigami.FormData.label: "Shadow"
             enabled: dateShadowCheckBox.checked
 
             colorValue: cfg_dateShadowColor
@@ -357,12 +344,5 @@ KCM.ScrollViewKCM {
             }
         }
     }
-    }
 }
 
-/*##^##
-Designer {
-    D{i:0;autoSize:true;height:480;width:640}D{i:1}D{i:3}D{i:2}
-}
-##^##*/
-

package/contents/ui/lib/ColorButton.qml

@@ -1,17 +1,16 @@
-import QtQuick 2.4
-import QtQuick.Controls 2.12 as QtControls
-import QtQuick.Layouts 1.12 as QtLayouts
 /*
     SPDX-FileCopyrightText: 2022 qewer33
     SPDX-License-Identifier: GPL-3.0-or-later
 */
 
+import QtQuick 2.4
+import QtQuick.Controls 2.12 as QtControls
+import QtQuick.Layouts 1.12 as QtLayouts
 import QtQuick.Dialogs
 
 QtControls.Button {
     id: clockFontColorButton
     implicitWidth: 50
-    implicitHeight: parent.height
 
     property color value
 
@@ -21,8 +20,7 @@ QtControls.Button {
         anchors.margins: 5
         radius: 3
         color: value
-        opacity: if (enabled) 1
+        opacity: enabled ? 1 : 0.4
-                 else 0.4
     }
 
     MouseArea {

package/contents/ui/lib/FontConfig.qml

@@ -16,41 +16,22 @@ QtLayouts.RowLayout {
 
     property var fontModel
 
-    property color colorValue
     property string fontValue
     property bool boldValue
     property bool italicValue
     property int pxSizeValue
 
 
-    QtControls.Label {
-        text: i18n("Font style:")
-        opacity: if (enabled) 1
-                 else 0.4
-    }
-
-    ColorButton {
-        id: fontColorButton
-        value: colorValue
-
-        onValueChanged: {
-            colorValue = value
-        }
-    }
-
     QtControls.ComboBox {
         id: fontFamilyComboBox
-        QtLayouts.Layout.fillWidth: true
+        QtLayouts.Layout.maximumWidth: Kirigami.Units.gridUnit * 10
-        QtLayouts.Layout.minimumWidth: Kirigami.Units.gridUnit * 10
         model: fontModel
         textRole: "text"
         currentIndex: getIdFromModel()
 
-        function getIdFromModel(){
+        function getIdFromModel() {
-            for(var i = 0; i < model.count; i++){
+            for (var i = 0; i < model.count; i++) {
-                if(model.get(i).value === fontValue){
+                if (model.get(i).value === fontValue) return i;
-                    return i;
-                }
             }
             return 0;
         }

package/contents/ui/lib/ShadowConfig.qml

@@ -18,12 +18,6 @@ QtLayouts.RowLayout {
     property int offsetYValue
 
 
-    QtControls.Label {
-        text: i18n("Shadow style:")
-        opacity: if (enabled) 1
-                 else 0.4
-    }
-
     ColorButton {
         id: shadowColorButton
         value: colorValue
@@ -35,8 +29,7 @@ QtLayouts.RowLayout {
 
     QtControls.Label {
         text: i18n("Radius")
-        opacity: if (enabled) 1
+        opacity: enabled ? 1 : 0.4
-                 else 0.4
     }
 
     QtControls.SpinBox {
@@ -52,8 +45,7 @@ QtLayouts.RowLayout {
 
     QtControls.Label {
         text: i18n("Offset")
-        opacity: if (enabled) 1
+        opacity: enabled ? 1 : 0.4
-                 else 0.4
     }
 
     QtControls.SpinBox {