controlcenter: add desktopClock configurations (#1097)

* controlCenter: Added desktopClock configurations

* fix dropdown overlay & animation

---------

Co-authored-by: 2 * r + 2 * t <61896496+soramanew@users.noreply.github.com>

2 files changed, 214 insertions, 4 deletions

diff --git a/modules/controlcenter/appearance/AppearancePane.qml b/modules/controlcenter/appearance/AppearancePane.qml
index 257120b..218433b 100644
--- a/modules/controlcenter/appearance/AppearancePane.qml
+++ b/modules/controlcenter/appearance/AppearancePane.qml
@@ -38,6 +38,15 @@ Item {
     property real borderThickness: Config.border.thickness ?? 1
 
     property bool desktopClockEnabled: Config.background.desktopClock.enabled ?? false
+    property real desktopClockScale: Config.background.desktopClock.scale ?? 1
+    property string desktopClockPosition: Config.background.desktopClock.position ?? "bottom-right"
+    property bool desktopClockShadowEnabled: Config.background.desktopClock.shadow.enabled ?? true
+    property real desktopClockShadowOpacity: Config.background.desktopClock.shadow.opacity ?? 0.7
+    property real desktopClockShadowBlur: Config.background.desktopClock.shadow.blur ?? 0.4
+    property bool desktopClockBackgroundEnabled: Config.background.desktopClock.background.enabled ?? false
+    property real desktopClockBackgroundOpacity: Config.background.desktopClock.background.opacity ?? 0.7
+    property bool desktopClockBackgroundBlur: Config.background.desktopClock.background.blur ?? false
+    property bool desktopClockInvertColors: Config.background.desktopClock.invertColors ?? false
     property bool backgroundEnabled: Config.background.enabled ?? true
     property bool visualiserEnabled: Config.background.visualiser.enabled ?? false
     property bool visualiserAutoHide: Config.background.visualiser.autoHide ?? true
@@ -64,6 +73,15 @@ Item {
 
         Config.background.desktopClock.enabled = root.desktopClockEnabled;
         Config.background.enabled = root.backgroundEnabled;
+        Config.background.desktopClock.scale = root.desktopClockScale
+        Config.background.desktopClock.position = root.desktopClockPosition
+        Config.background.desktopClock.shadow.enabled = root.desktopClockShadowEnabled
+        Config.background.desktopClock.shadow.opacity = root.desktopClockShadowOpacity
+        Config.background.desktopClock.shadow.blur = root.desktopClockShadowBlur
+        Config.background.desktopClock.background.enabled = root.desktopClockBackgroundEnabled
+        Config.background.desktopClock.background.opacity = root.desktopClockBackgroundOpacity
+        Config.background.desktopClock.background.blur = root.desktopClockBackgroundBlur
+        Config.background.desktopClock.invertColors = root.desktopClockInvertColors
 
         Config.background.visualiser.enabled = root.visualiserEnabled;
         Config.background.visualiser.autoHide = root.visualiserAutoHide;
diff --git a/modules/controlcenter/appearance/sections/BackgroundSection.qml b/modules/controlcenter/appearance/sections/BackgroundSection.qml
index 8754e73..d5c16d4 100644
--- a/modules/controlcenter/appearance/sections/BackgroundSection.qml
+++ b/modules/controlcenter/appearance/sections/BackgroundSection.qml
@@ -19,7 +19,23 @@ CollapsibleSection {
     showBackground: true
 
     SwitchRow {
-        label: qsTr("Desktop clock")
+        label: qsTr("Background enabled")
+        checked: rootPane.backgroundEnabled
+        onToggled: checked => {
+            rootPane.backgroundEnabled = checked;
+            rootPane.saveConfig();
+        }
+    }
+
+    StyledText {
+        Layout.topMargin: Appearance.spacing.normal
+        text: qsTr("Desktop Clock")
+        font.pointSize: Appearance.font.size.larger
+        font.weight: 500
+    }
+
+    SwitchRow {
+        label: qsTr("Desktop Clock enabled")
         checked: rootPane.desktopClockEnabled
         onToggled: checked => {
             rootPane.desktopClockEnabled = checked;
@@ -27,15 +43,191 @@ CollapsibleSection {
         }
     }
 
+    SectionContainer {
+        id: posContainer
+        
+        contentSpacing: Appearance.spacing.small
+        z: 1
+
+        readonly property var pos: (rootPane.desktopClockPosition || "top-left").split('-')
+        readonly property string currentV: pos[0]
+        readonly property string currentH: pos[1]
+
+        function updateClockPos(v, h) {
+            rootPane.desktopClockPosition = v + "-" + h;
+            rootPane.saveConfig();
+        }
+
+        StyledText {
+            text: qsTr("Positioning")
+            font.pointSize: Appearance.font.size.larger
+            font.weight: 500
+        }
+
+        SplitButtonRow {
+            label: qsTr("Vertical Position")
+            enabled: rootPane.desktopClockEnabled
+            
+            menuItems: [
+                MenuItem { text: qsTr("Top"); icon: "vertical_align_top"; property string val: "top" },
+                MenuItem { text: qsTr("Middle"); icon: "vertical_align_center"; property string val: "middle" },
+                MenuItem { text: qsTr("Bottom"); icon: "vertical_align_bottom"; property string val: "bottom" }
+            ]
+
+            Component.onCompleted: {
+                for(let i=0; i < menuItems.length; i++) {
+                    if(menuItems[i].val === posContainer.currentV) active = menuItems[i];
+                }
+            }
+
+            // The signal from SplitButtonRow
+            onSelected: item => posContainer.updateClockPos(item.val, posContainer.currentH)
+        }
+
+        SplitButtonRow {
+            label: qsTr("Horizontal Position")
+            enabled: rootPane.desktopClockEnabled
+            expandedZ: 99
+            
+            menuItems: [
+                MenuItem { text: qsTr("Left"); icon: "align_horizontal_left"; property string val: "left" },
+                MenuItem { text: qsTr("Center"); icon: "align_horizontal_center"; property string val: "center" },
+                MenuItem { text: qsTr("Right"); icon: "align_horizontal_right"; property string val: "right" }
+            ]
+
+            Component.onCompleted: {
+                for(let i=0; i < menuItems.length; i++) {
+                    if(menuItems[i].val === posContainer.currentH) active = menuItems[i];
+                }
+            }
+
+            onSelected: item => posContainer.updateClockPos(posContainer.currentV, item.val)
+        }
+    }
+
     SwitchRow {
-        label: qsTr("Background enabled")
-        checked: rootPane.backgroundEnabled
+        label: qsTr("Invert colors")
+        checked: rootPane.desktopClockInvertColors
         onToggled: checked => {
-            rootPane.backgroundEnabled = checked;
+            rootPane.desktopClockInvertColors = checked;
             rootPane.saveConfig();
         }
     }
 
+    SectionContainer {
+        contentSpacing: Appearance.spacing.small
+
+        StyledText {
+            text: qsTr("Shadow")
+            font.pointSize: Appearance.font.size.larger
+            font.weight: 500
+        }
+
+        SwitchRow {
+            label: qsTr("Enabled")
+            checked: rootPane.desktopClockShadowEnabled
+            onToggled: checked => {
+                rootPane.desktopClockShadowEnabled = checked;
+                rootPane.saveConfig();
+            }
+        }
+
+        SectionContainer {
+            contentSpacing: Appearance.spacing.normal
+
+            SliderInput {
+                Layout.fillWidth: true
+                
+                label: qsTr("Opacity")
+                value: rootPane.desktopClockShadowOpacity * 100
+                from: 0
+                to: 100
+                suffix: "%"
+                validator: IntValidator { bottom: 0; top: 100 }
+                formatValueFunction: (val) => Math.round(val).toString()
+                parseValueFunction: (text) => parseInt(text)
+                
+                onValueModified: (newValue) => {
+                    rootPane.desktopClockShadowOpacity = newValue / 100;
+                    rootPane.saveConfig();
+                }
+            }
+        }
+
+        SectionContainer {
+            contentSpacing: Appearance.spacing.normal
+
+            SliderInput {
+                Layout.fillWidth: true
+                
+                label: qsTr("Blur")
+                value: rootPane.desktopClockShadowBlur * 100
+                from: 0
+                to: 100
+                suffix: "%"
+                validator: IntValidator { bottom: 0; top: 100 }
+                formatValueFunction: (val) => Math.round(val).toString()
+                parseValueFunction: (text) => parseInt(text)
+                
+                onValueModified: (newValue) => {
+                    rootPane.desktopClockShadowBlur = newValue / 100;
+                    rootPane.saveConfig();
+                }
+            }
+        }
+    }
+
+    SectionContainer {
+        contentSpacing: Appearance.spacing.small
+
+        StyledText {
+            text: qsTr("Background")
+            font.pointSize: Appearance.font.size.larger
+            font.weight: 500
+        }
+
+        SwitchRow {
+            label: qsTr("Enabled")
+            checked: rootPane.desktopClockBackgroundEnabled
+            onToggled: checked => {
+                rootPane.desktopClockBackgroundEnabled = checked;
+                rootPane.saveConfig();
+            }
+        }
+
+        SwitchRow {
+            label: qsTr("Blur enabled")
+            checked: rootPane.desktopClockBackgroundBlur
+            onToggled: checked => {
+                rootPane.desktopClockBackgroundBlur = checked;
+                rootPane.saveConfig();
+            }
+        }
+
+        SectionContainer {
+            contentSpacing: Appearance.spacing.normal
+
+            SliderInput {
+                Layout.fillWidth: true
+                
+                label: qsTr("Opacity")
+                value: rootPane.desktopClockBackgroundOpacity * 100
+                from: 0
+                to: 100
+                suffix: "%"
+                validator: IntValidator { bottom: 0; top: 100 }
+                formatValueFunction: (val) => Math.round(val).toString()
+                parseValueFunction: (text) => parseInt(text)
+                
+                onValueModified: (newValue) => {
+                    rootPane.desktopClockBackgroundOpacity = newValue / 100;
+                    rootPane.saveConfig();
+                }
+            }
+        }
+    }
+
+
     StyledText {
         Layout.topMargin: Appearance.spacing.normal
         text: qsTr("Visualiser")