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>

components/controls/SplitButtonRow.qml

@@ -0,0 +1,62 @@
+pragma ComponentBehavior: Bound
+
+import ".."
+import qs.components
+import qs.components.effects
+import qs.services
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+
+StyledRect {
+    id: root
+
+    required property string label
+    property int expandedZ: 100
+    property bool enabled: true
+    
+    property alias menuItems: splitButton.menuItems
+    property alias active: splitButton.active
+    property alias expanded: splitButton.expanded
+    property alias type: splitButton.type
+    
+    signal selected(item: MenuItem)
+
+    Layout.fillWidth: true
+    implicitHeight: row.implicitHeight + Appearance.padding.large * 2
+    radius: Appearance.rounding.normal
+    color: Colours.layer(Colours.palette.m3surfaceContainer, 2)
+    
+    clip: false 
+    z: splitButton.menu.implicitHeight > 0 ? expandedZ : 1
+    opacity: enabled ? 1.0 : 0.5
+
+    RowLayout {
+        id: row
+        anchors.fill: parent
+        anchors.margins: Appearance.padding.large
+        spacing: Appearance.spacing.normal
+
+        StyledText {
+            Layout.fillWidth: true
+            text: root.label
+            color: root.enabled ? Colours.palette.m3onSurface : Colours.palette.m3onSurfaceVariant
+        }
+
+        SplitButton {
+            id: splitButton
+            enabled: root.enabled
+            type: SplitButton.Filled
+            
+            menu.z: 1
+            
+            stateLayer.onClicked: {
+                splitButton.expanded = !splitButton.expanded
+            }
+            
+            menu.onItemSelected: (item) => {
+                root.selected(item);
+            }
+        }
+    }
+}

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;

modules/controlcenter/appearance/sections/BackgroundSection.qml

@@ -18,15 +18,6 @@ CollapsibleSection {
     title: qsTr("Background")
     showBackground: true
 
-    SwitchRow {
-        label: qsTr("Desktop clock")
-        checked: rootPane.desktopClockEnabled
-        onToggled: checked => {
-            rootPane.desktopClockEnabled = checked;
-            rootPane.saveConfig();
-        }
-    }
-
     SwitchRow {
         label: qsTr("Background enabled")
         checked: rootPane.backgroundEnabled
@@ -36,6 +27,207 @@ CollapsibleSection {
         }
     }
 
+    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;
+            rootPane.saveConfig();
+        }
+    }
+
+    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("Invert colors")
+        checked: rootPane.desktopClockInvertColors
+        onToggled: 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")