Implement custom ColorConfig button

.gitignore

@@ -7,3 +7,5 @@ ClearClock.files
 ClearClock.config
 ClearClock.includes
 ClearClock.plasmoid
+.kdev4
+ClearClock.kdev4

package/contents/ui/config/configAppearance.qml

@@ -20,7 +20,7 @@ Item {
     signal configurationChanged
 
     property alias cfg_clockUse24hFormat: use24hFormat.checkState
-    property string cfg_clockFontColor: clockFontColor.value
+    property string cfg_clockFontColor: clockFontColorButton.value
     property string cfg_clockFontFamily
     property alias cfg_clockBoldText: clockBoldCheckBox.checked
     property alias cfg_clockItalicText: clockItalicCheckBox.checked
@@ -114,32 +114,12 @@ Item {
                     text: i18n("Font style:")
                 }
 
-                QtControls.Button {
+                ColorButton {
                     id: clockFontColorButton
-                    text: i18n("  ")
+                    value: cfg_clockFontColor
-                    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
+                        cfg_clockFontColor = value
-                    title: "Select Background Color"
-                    currentColor: cfg_clockFontColor
-                    showAlphaChannel: true
-                    onAccepted: {
-                        cfg_clockFontColor = clockFontColorDialog.color
                     }
                 }
 
@@ -150,6 +130,20 @@ Item {
                     model: fontsModel
                     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) {
@@ -213,32 +207,12 @@ Item {
                              else 0.4
                 }
 
-                QtControls.Button {
+                ColorButton {
                     id: dayFontColorButton
-                    text: i18n("  ")
+                    value: cfg_dayFontColor
-                    Rectangle {
-                        id: dayFontColorRect
-                        anchors.fill: parent
-                        border.color: "darkgray"
-                        border.width: 1
-                        radius: 4
-                        color: cfg_dayFontColor
-                        opacity: if (enabled) 1
-                                 else 0.4
-                    }
-                    MouseArea {
-                        anchors.fill: parent
-                        onClicked: dayFontColorDialog.open()
-                    }
-                }
 
-                ColorDialog {
+                    onValueChanged: {
-                    id: dayFontColorDialog
+                        cfg_dayFontColor = value
-                    title: "Select Background Color"
-                    currentColor: cfg_dayFontColor
-                    showAlphaChannel: true
-                    onAccepted: {
-                        cfg_dayFontColor = dayFontColorDialog.color
                     }
                 }
 
@@ -336,32 +310,12 @@ Item {
                              else 0.4
                 }
 
-                QtControls.Button {
+                ColorButton {
                     id: dateFontColorButton
-                    text: i18n("  ")
+                    value: cfg_dateFontColor
-                    Rectangle {
-                        id: dateFontColorRect
-                        anchors.fill: parent
-                        border.color: "darkgray"
-                        border.width: 1
-                        radius: 4
-                        color: cfg_dateFontColor
-                        opacity: if (enabled) 1
-                                 else 0.4
-                    }
-                    MouseArea {
-                        anchors.fill: parent
-                        onClicked: dateFontColorDialog.open()
-                    }
-                }
 
-                ColorDialog {
+                    onValueChanged: {
-                    id: dateFontColorDialog
+                        cfg_dateFontColor = value
-                    title: "Select Background Color"
-                    currentColor: cfg_dateFontColor
-                    showAlphaChannel: true
-                    onAccepted: {
-                        cfg_dateFontColor = dateFontColorDialog.color
                     }
                 }
 

package/contents/ui/lib/ColorButton.qml

@@ -0,0 +1,37 @@
+import QtQuick 2.4
+import QtQuick.Controls 2.12 as QtControls
+import QtQuick.Layouts 1.15 as QtLayouts
+import QtQuick.Dialogs 1.2
+
+QtControls.Button {
+    id: clockFontColorButton
+    implicitWidth: 50
+    implicitHeight: parent.height
+
+    property color value
+
+    Rectangle {
+        id: rect
+        anchors.fill: parent
+        anchors.margins: 5
+        radius: 3
+        color: value
+        opacity: if (enabled) 1
+                 else 0.4
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: dialog.open()
+    }
+
+    ColorDialog {
+        id: dialog
+        title: "Select Background Color"
+        currentColor: value
+        showAlphaChannel: true
+        onAccepted: {
+            value = dialog.color
+        }
+    }
+}

package/contents/ui/lib/FontConfig.qml

@@ -0,0 +1,99 @@
+import QtQuick 2.4
+import QtQuick.Controls 2.12 as QtControls
+import QtQuick.Layouts 1.15 as QtLayouts
+import QtQuick.Dialogs 1.2
+
+
+QtLayouts.RowLayout {
+
+    QtControls.Label {
+        text: i18n("Font style:")
+    }
+
+    QtControls.Button {
+        id: clockFontColorButton
+        text: i18n("  ")
+        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 {
+        id: clockFontColorDialog
+        title: "Select Background Color"
+        currentColor: cfg_clockFontColor
+        showAlphaChannel: true
+        onAccepted: {
+            cfg_clockFontColor = clockFontColorDialog.color
+        }
+    }
+
+    QtControls.ComboBox {
+        id: clockFontFamilyComboBox
+        QtLayouts.Layout.fillWidth: true
+        QtLayouts.Layout.minimumWidth: units.gridUnit * 10
+        model: fontsModel
+        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
+                appearancePage.configurationChanged()
+            }
+        }
+    }
+
+    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 {
+        id: clockFontSizeSpinBox
+
+        from: 10
+        to: 350
+    }
+
+    QtControls.Label {
+        text: "px"
+    }
+}
+}