bg: clock: fix funny overlapping status row (#2413)

dots/.config/quickshell/ii/modules/ii/background/widgets/clock/ClockWidget.qml

@@ -38,13 +38,14 @@ AbstractBackgroundWidget {
     Column {
         id: contentColumn
         anchors.centerIn: parent
-        spacing: 6
+        spacing: 10
 
         FadeLoader {
             id: cookieClockLoader
             anchors.horizontalCenter: parent.horizontalCenter
             shown: root.clockStyle === "cookie" && (root.shouldShow)
             sourceComponent: Column {
+                spacing: 10
                 CookieClock {
                     anchors.horizontalCenter: parent.horizontalCenter
                 }
@@ -88,61 +89,64 @@ AbstractBackgroundWidget {
                 }
             }
         }
-        Item {
-            id: statusText
+        StatusRow {
             anchors.horizontalCenter: parent.horizontalCenter
-            implicitHeight: statusTextBg.implicitHeight
-            implicitWidth: statusTextBg.implicitWidth
-            StyledRectangularShadow {
-                target: statusTextBg
-                visible: statusTextBg.visible && root.clockStyle === "cookie"
-                opacity: statusTextBg.opacity
+        }
+    }
+
+    component StatusRow: Item {
+        id: statusText
+        implicitHeight: statusTextBg.implicitHeight
+        implicitWidth: statusTextBg.implicitWidth
+        StyledRectangularShadow {
+            target: statusTextBg
+            visible: statusTextBg.visible && root.clockStyle === "cookie"
+            opacity: statusTextBg.opacity
+        }
+        Rectangle {
+            id: statusTextBg
+            anchors.centerIn: parent
+            clip: true
+            opacity: (safetyStatusText.shown || lockStatusText.shown) ? 1 : 0
+            visible: opacity > 0
+            implicitHeight: statusTextRow.implicitHeight + 5 * 2
+            implicitWidth: statusTextRow.implicitWidth + 5 * 2
+            radius: Appearance.rounding.small
+            color: ColorUtils.transparentize(Appearance.colors.colSecondaryContainer, root.clockStyle === "cookie" ? 0 : 1)
+
+            Behavior on implicitWidth {
+                animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
             }
-            Rectangle {
-                id: statusTextBg
+            Behavior on implicitHeight {
+                animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
+            }
+            Behavior on opacity {
+                animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+            }
+
+            RowLayout {
+                id: statusTextRow
                 anchors.centerIn: parent
-                clip: true
-                opacity: (safetyStatusText.shown || lockStatusText.shown) ? 1 : 0
-                visible: opacity > 0
-                implicitHeight: statusTextRow.implicitHeight + 5 * 2
-                implicitWidth: statusTextRow.implicitWidth + 5 * 2
-                radius: Appearance.rounding.small
-                color: ColorUtils.transparentize(Appearance.colors.colSecondaryContainer, root.clockStyle === "cookie" ? 0 : 1)
-
-                Behavior on implicitWidth {
-                    animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
+                spacing: 14
+                Item {
+                    Layout.fillWidth: root.textHorizontalAlignment !== Text.AlignLeft
+                    implicitWidth: 1
                 }
-                Behavior on implicitHeight {
-                    animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
+                ClockStatusText {
+                    id: safetyStatusText
+                    shown: root.wallpaperSafetyTriggered
+                    statusIcon: "hide_image"
+                    statusText: Translation.tr("Wallpaper safety enforced")
                 }
-                Behavior on opacity {
-                    animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+                ClockStatusText {
+                    id: lockStatusText
+                    shown: GlobalStates.screenLocked && Config.options.lock.showLockedText
+                    statusIcon: "lock"
+                    statusText: Translation.tr("Locked")
                 }
-
-                RowLayout {
-                    id: statusTextRow
-                    anchors.centerIn: parent
-                    spacing: 14
-                    Item {
-                        Layout.fillWidth: root.textHorizontalAlignment !== Text.AlignLeft
-                        implicitWidth: 1
-                    }
-                    ClockStatusText {
-                        id: safetyStatusText
-                        shown: root.wallpaperSafetyTriggered
-                        statusIcon: "hide_image"
-                        statusText: Translation.tr("Wallpaper safety enforced")
-                    }
-                    ClockStatusText {
-                        id: lockStatusText
-                        shown: GlobalStates.screenLocked && Config.options.lock.showLockedText
-                        statusIcon: "lock"
-                        statusText: Translation.tr("Locked")
-                    }
-                    Item {
-                        Layout.fillWidth: root.textHorizontalAlignment !== Text.AlignRight
-                        implicitWidth: 1
-                    }
+                Item {
+                    Layout.fillWidth: root.textHorizontalAlignment !== Text.AlignRight
+                    implicitWidth: 1
                 }
             }
         }

dots/.config/quickshell/ii/modules/ii/background/widgets/clock/CookieQuote.qml

@@ -12,9 +12,6 @@ Item {
     implicitWidth: quoteBox.implicitWidth
     implicitHeight: quoteBox.implicitHeight
 
-    anchors.bottom: parent.bottom
-    anchors.bottomMargin: -24
-
     DropShadow {
         source: quoteBox 
         anchors.fill: quoteBox
@@ -29,14 +26,16 @@ Item {
     Rectangle {
         id: quoteBox
 
-        implicitWidth: quoteStyledText.width + quoteIcon.width + 16 // for spacing on both sides
-        implicitHeight: quoteStyledText.height + 8 
+        implicitWidth: quoteRow.implicitWidth + 8 * 2
+        implicitHeight: quoteRow.implicitHeight + 4 * 2
         radius: Appearance.rounding.small
         color: Appearance.colors.colSecondaryContainer
 
         Row {
+            id: quoteRow
             anchors.centerIn: parent
             spacing: 4
+            
             MaterialSymbol {
                 id: quoteIcon
                 anchors.top: parent.top
@@ -57,4 +56,4 @@ Item {
             }
         }
     }
-}
+}