Start implementing custom FontConfig item

package/contents/ui/config/configAppearance.qml

@@ -155,18 +155,14 @@ Item {
 
                 QtControls.Button {
                     id: clockBoldCheckBox
-                    // ToolTip.text: i18n("Bold text")
                     icon.name: "format-text-bold"
                     checkable: true
-                    // Accessible.name: ToolTip.text
                 }
 
                 QtControls.Button {
                     id: clockItalicCheckBox
-                    // ToolTip.text: i18n("Italic text")
                     icon.name: "format-text-italic"
                     checkable: true
-                    // Accessible.name: ToolTip.text
                 }
 
                 QtControls.SpinBox {
@@ -234,18 +230,14 @@ Item {
 
                 QtControls.Button {
                     id: dayBoldCheckBox
-                    // ToolTip.text: i18n("Bold text")
                     icon.name: "format-text-bold"
                     checkable: true
-                    // Accessible.name: ToolTip.text
                 }
 
                 QtControls.Button {
                     id: dayItalicCheckBox
-                    // ToolTip.text: i18n("Italic text")
                     icon.name: "format-text-italic"
                     checkable: true
-                    // Accessible.name: ToolTip.text
                 }
 
                 QtControls.SpinBox {
@@ -292,10 +284,8 @@ Item {
                     }
 
                     QtControls.Button {
-                        // ToolTip.text: i18n("Time format documentation")
                         icon.name: "exifinfo"
-                        // Accessible.name: ToolTip.text
+                        onClicked: Qt.openUrlExternally("https://doc.qt.io/qt-5/qml-qtqml-qt.html#formatDateTime-method")
-                        onClicked: Qt.openUrlExternally(link)
                     }
                 }
             }
@@ -337,18 +327,14 @@ Item {
 
                 QtControls.Button {
                     id: dateBoldCheckBox
-                    // ToolTip.text: i18n("Bold text")
                     icon.name: "format-text-bold"
                     checkable: true
-                    // Accessible.name: ToolTip.text
                 }
 
                 QtControls.Button {
                     id: dateItalicCheckBox
-                    // ToolTip.text: i18n("Italic text")
                     icon.name: "format-text-italic"
                     checkable: true
-                    // Accessible.name: ToolTip.text
                 }
 
                 QtControls.SpinBox {

package/contents/ui/lib/ColorButton.qml

@@ -28,7 +28,7 @@ QtControls.Button {
     ColorDialog {
         id: dialog
         title: "Select Background Color"
-        currentColor: value
+        color: value
         showAlphaChannel: true
         onAccepted: {
             value = dialog.color

package/contents/ui/lib/FontConfig.qml

@@ -3,39 +3,29 @@ import QtQuick.Controls 2.12 as QtControls
 import QtQuick.Layouts 1.15 as QtLayouts
 import QtQuick.Dialogs 1.2
 
+import "ColorButton.qml"
 
 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:")
     }
 
-    QtControls.Button {
+    ColorButton {
-        id: clockFontColorButton
+        id: dayFontColorButton
-        text: i18n("  ")
+        value: colorValue
-        Rectangle {
-            id: clockFontColorRect
-            anchors.fill: parent
-            border.color: "darkgray"
-            border.width: 1
-            radius: 4
-            color: cfg_clockFontColor
-            opacity: if (enabled) 1
-                     else 0.4
-        }
-        MouseArea {
-            anchors.fill: parent
-            onClicked: clockFontColorDialog.open()
-        }
-    }
 
-    ColorDialog {
+        onValueChanged: {
-        id: clockFontColorDialog
+            colorValue = value
-        title: "Select Background Color"
-        currentColor: cfg_clockFontColor
-        showAlphaChannel: true
-        onAccepted: {
-            cfg_clockFontColor = clockFontColorDialog.color
         }
     }
 
@@ -43,27 +33,13 @@ QtLayouts.RowLayout {
         id: clockFontFamilyComboBox
         QtLayouts.Layout.fillWidth: true
         QtLayouts.Layout.minimumWidth: units.gridUnit * 10
-        model: fontsModel
+        model: fontModel
         textRole: "text"
 
-        function loadComboBoxValue() {
-            if (cgf_clockFontFamily === "ccdefault") {
-                return 0
-            } else {
-                for (i = 0; i < fontsModel.count; i++) {
-                    if (cgf_clockFontFamily === fontsModel.get(i).value) {
-                        return i + 1
-                    }
-                }
-            }
-        }
-
-        currentIndex: loadComboBoxValue()
-
         onCurrentIndexChanged: {
             var current = model.get(currentIndex)
             if (current) {
-                cfg_clockFontFamily = current.value
+                fontValue = current.value
                 appearancePage.configurationChanged()
             }
         }
@@ -96,4 +72,3 @@ QtLayouts.RowLayout {
         text: "px"
     }
 }
-}