background: redesign desktop clock and allow positioning (#1092)

* background(desktop clock): Redesigned the Desktop Clock and allow positioning and scaling

* desktopClock: initial fix for contrast and added debug tool

* fix properties

* fix BackgroundConfig.qml for desktopClock

* removed debugging tool and applied maintainer suggestions

* added invert colors, opacity, and fix positioning

* added blur, fix layout, allow invert colors

* added implicitWidth behavior and small change

README.md

@@ -303,7 +303,20 @@ default, you must create it manually.
     },
     "background": {
         "desktopClock": {
-            "enabled": false
+            "enabled": false,
+            "scale": 1.0,
+            "position": "bottom-right",
+            "shadow": {
+                "enabled": true,
+                "opacity": 0.7,
+                "blur": 0.4
+            },
+            "background": {
+                "enabled": false,
+                "opacity": 0.7,
+                "blur": true
+            },
+            "invertColors": false
         },
         "enabled": true,
         "visualiser": {

config/BackgroundConfig.qml

@@ -7,6 +7,23 @@ JsonObject {
 
     component DesktopClock: JsonObject {
         property bool enabled: false
+        property real scale: 1.0
+        property string position: "bottom-right"
+        property bool invertColors: false
+        property DesktopClockBackground background: DesktopClockBackground {}
+        property DesktopClockShadow shadow: DesktopClockShadow {}
+    }
+
+    component DesktopClockBackground: JsonObject {
+        property bool enabled: false
+        property real opacity: 0.7
+        property bool blur: true
+    }
+
+    component DesktopClockShadow: JsonObject {
+        property bool enabled: true
+        property real opacity: 0.7
+        property real blur: 0.4
     }
 
     component Visualiser: JsonObject {

modules/background/Background.qml

@@ -30,6 +30,11 @@ Loader {
             anchors.left: true
             anchors.right: true
 
+            Item {
+                id: behindClock
+
+                anchors.fill: parent
+
                 Wallpaper {
                     id: wallpaper
                 }
@@ -39,15 +44,103 @@ Loader {
                     screen: win.modelData
                     wallpaper: wallpaper
                 }
+            }
+
 
             Loader {
-                anchors.right: parent.right
+                id: clockLoader
-                anchors.bottom: parent.bottom
-                anchors.margins: Appearance.padding.large
-
                 active: Config.background.desktopClock.enabled
 
-                source: "DesktopClock.qml"
+                anchors.margins: Appearance.padding.large * 2
+                anchors.leftMargin: Appearance.padding.large * 2 + Config.bar.sizes.innerWidth + Math.max(Appearance.padding.smaller, Config.border.thickness)
+                
+                state: Config.background.desktopClock.position
+                states: [
+                    State {
+                        name: "top-left"
+                        AnchorChanges { 
+                            target: clockLoader 
+                            anchors.top: parent.top 
+                            anchors.left: parent.left 
+                        }
+                    },
+                    State {
+                        name: "top-center"
+                        AnchorChanges { 
+                            target: clockLoader
+                            anchors.top: parent.top 
+                            anchors.horizontalCenter: parent.horizontalCenter 
+                        }
+                    },
+                    State {
+                        name: "top-right"
+                        AnchorChanges { 
+                            target: clockLoader
+                            anchors.top: parent.top 
+                            anchors.right: parent.right }
+                    },
+                    State {
+                        name: "middle-left"
+                        AnchorChanges { 
+                            target: clockLoader
+                            anchors.verticalCenter: parent.verticalCenter
+                            anchors.left: parent.left 
+                        }
+                    },
+                    State {
+                        name: "middle-center"
+                        AnchorChanges { 
+                            target: clockLoader 
+                            anchors.verticalCenter: parent.verticalCenter
+                            anchors.horizontalCenter: parent.horizontalCenter
+                        }
+                    },
+                    State {
+                        name: "middle-right"
+                        AnchorChanges { 
+                            target: clockLoader
+                            anchors.verticalCenter: parent.verticalCenter
+                            anchors.right: parent.right 
+                        }
+                    },
+                    State {
+                        name: "bottom-left"
+                        AnchorChanges { 
+                            target: clockLoader
+                            anchors.bottom: parent.bottom
+                            anchors.left: parent.left 
+                        }
+                    },
+                    State {
+                        name: "bottom-center"
+                        AnchorChanges { 
+                            target: clockLoader
+                            anchors.bottom: parent.bottom 
+                            anchors.horizontalCenter: parent.horizontalCenter
+                        }
+                    },
+                    State {
+                        name: "bottom-right"
+                        AnchorChanges { 
+                            target: clockLoader
+                            anchors.bottom: parent.bottom
+                            anchors.right: parent.right
+                        }
+                    }
+                ]
+
+                transitions: Transition {
+                    AnchorAnimation { 
+                        duration: Appearance.anim.durations.expressiveDefaultSpatial
+                        easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+                    }
+                }
+
+                sourceComponent: DesktopClock {
+                    wallpaper: behindClock
+                    absX: clockLoader.x
+                    absY: clockLoader.y
+                }
             }
         }
     }

modules/background/DesktopClock.qml

@@ -1,19 +1,164 @@
+pragma ComponentBehavior: Bound
+
 import qs.components
 import qs.services
 import qs.config
 import QtQuick
+import QtQuick.Layouts
+import QtQuick.Effects
 
 Item {
-    implicitWidth: timeText.implicitWidth + Appearance.padding.large * 2
+    id: root
-    implicitHeight: timeText.implicitHeight + Appearance.padding.large * 2
 
-    StyledText {
+    required property Item wallpaper
-        id: timeText
+    required property real absX
+    required property real absY
+
+    property real scale: Config.background.desktopClock.scale
+    readonly property bool bgEnabled: Config.background.desktopClock.background.enabled
+    readonly property bool blurEnabled: bgEnabled && Config.background.desktopClock.background.blur
+    readonly property bool invertColors: Config.background.desktopClock.invertColors
+    readonly property bool useLightSet: Colours.light ? !invertColors : invertColors
+    readonly property color safePrimary: useLightSet ? Colours.palette.m3primaryContainer : Colours.palette.m3primary
+    readonly property color safeSecondary: useLightSet ? Colours.palette.m3secondaryContainer : Colours.palette.m3secondary
+    readonly property color safeTertiary: useLightSet ? Colours.palette.m3tertiaryContainer : Colours.palette.m3tertiary
+
+    implicitWidth: layout.implicitWidth + (Appearance.padding.large * 4 * root.scale)
+    implicitHeight: layout.implicitHeight + (Appearance.padding.large * 2 * root.scale)
+
+    Item {
+        id: clockContainer
+
+        anchors.fill: parent
+
+        layer.enabled: Config.background.desktopClock.shadow.enabled
+        layer.effect: MultiEffect {
+            shadowEnabled: true
+            shadowColor: Colours.palette.m3shadow
+            shadowOpacity: Config.background.desktopClock.shadow.opacity
+            shadowBlur: Config.background.desktopClock.shadow.blur
+        }
+
+        Loader {
+            anchors.fill: parent
+            active: root.blurEnabled
+
+            sourceComponent: MultiEffect {
+                source: ShaderEffectSource {
+                    sourceItem: root.wallpaper
+                    sourceRect: Qt.rect(root.absX, root.absY, root.width, root.height)
+                }
+                maskSource: backgroundPlate
+                maskEnabled: true
+                blurEnabled: true
+                blur: 1
+                blurMax: 64
+                autoPaddingEnabled: false
+            }
+        }
+
+        StyledRect {
+            id: backgroundPlate
+
+            visible: root.bgEnabled
+            anchors.fill: parent
+            radius: Appearance.rounding.large * root.scale
+            opacity: Config.background.desktopClock.background.opacity
+            color: Colours.palette.m3surface
+
+            layer.enabled: root.blurEnabled
+        }
+
+        RowLayout {
+            id: layout
 
             anchors.centerIn: parent
-        text: Time.format(Config.services.useTwelveHourClock ? "hh:mm:ss A" : "hh:mm:ss")
+            spacing: Appearance.spacing.larger * root.scale
-        font.family: Appearance.font.family.clock
+
-        font.pointSize: Appearance.font.size.extraLarge
+            RowLayout {
-        font.bold: true
+                spacing: Appearance.spacing.small
+
+                StyledText {
+                    text: Time.format(Config.services.useTwelveHourClock ? "hh" : "HH")
+                    font.pointSize: Appearance.font.size.extraLarge * 3 * root.scale
+                    font.weight: Font.Bold
+                    color: root.safePrimary
+                }
+
+                StyledText {
+                    text: ":"
+                    font.pointSize: Appearance.font.size.extraLarge * 3 * root.scale
+                    color: root.safeTertiary
+                    opacity: 0.8
+                    Layout.topMargin: -Appearance.padding.large * 1.5 * root.scale
+                }
+
+                StyledText {
+                    text: Time.format("mm")
+                    font.pointSize: Appearance.font.size.extraLarge * 3 * root.scale
+                    font.weight: Font.Bold
+                    color: root.safeSecondary
+                }
+
+                StyledText {
+                    visible: Config.services.useTwelveHourClock
+                    text: Time.format("A")
+                    font.pointSize: Appearance.font.size.large * root.scale
+                    color: root.safeSecondary
+                    Layout.alignment: Qt.AlignTop
+                    Layout.topMargin: Appearance.padding.large * 1.4 * root.scale
+                }
+            }
+
+            StyledRect {
+                Layout.fillHeight: true
+                Layout.preferredWidth: 4 * root.scale
+                Layout.topMargin: Appearance.spacing.larger * root.scale
+                Layout.bottomMargin: Appearance.spacing.larger * root.scale
+                radius: Appearance.rounding.full
+                color: root.safePrimary
+                opacity: 0.8
+            }
+
+            ColumnLayout {
+                spacing: 0
+
+                StyledText {
+                    text: Time.format("MMMM").toUpperCase()
+                    font.pointSize: Appearance.font.size.large * root.scale
+                    font.letterSpacing: 4
+                    font.weight: Font.Bold
+                    color: root.safeSecondary
+                }
+
+                StyledText {
+                    text: Time.format("dd")
+                    font.pointSize: Appearance.font.size.extraLarge * root.scale
+                    font.letterSpacing: 2
+                    font.weight: Font.Medium
+                    color: root.safePrimary
+                }
+
+                StyledText {
+                    text: Time.format("dddd")
+                    font.pointSize: Appearance.font.size.larger * root.scale
+                    font.letterSpacing: 2
+                    color: root.safeSecondary
+                }
+            }
+        }
+    }
+
+    Behavior on scale {
+        Anim {
+            duration: Appearance.anim.durations.expressiveDefaultSpatial
+            easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+        }
+    }
+    
+    Behavior on implicitWidth {
+        Anim {
+            duration: Appearance.anim.durations.small
+        }
     }
 }