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

1 files changed, 104 insertions, 11 deletions

diff --git a/modules/background/Background.qml b/modules/background/Background.qml
index f3828bf..69e070b 100644
--- a/modules/background/Background.qml
+++ b/modules/background/Background.qml
@@ -30,24 +30,117 @@ Loader {
             anchors.left: true
             anchors.right: true
 
-            Wallpaper {
-                id: wallpaper
-            }
+            Item {
+                id: behindClock
 
-            Visualiser {
                 anchors.fill: parent
-                screen: win.modelData
-                wallpaper: wallpaper
+
+                Wallpaper {
+                    id: wallpaper
+                }
+
+                Visualiser {
+                    anchors.fill: parent
+                    screen: win.modelData
+                    wallpaper: wallpaper
+                }
             }
 
-            Loader {
-                anchors.right: parent.right
-                anchors.bottom: parent.bottom
-                anchors.margins: Appearance.padding.large
 
+            Loader {
+                id: clockLoader
                 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
+                }
             }
         }
     }