Merge branch 'main' of https://github.com/darksignal7/dots-hyprland

.config/quickshell/ii/modules/background/Background.qml

@@ -24,6 +24,7 @@ Variants {
     readonly property real clockSizePadding: 20
     readonly property real screenSizePadding: 50
     readonly property string clockStyle: Config.options.background.clock.style
+    readonly property bool showCookieQuote: Config.options.background.showQuote && Config.options.background.quote !== "" && !GlobalStates.screenLocked && Config.options.background.clock.style === "cookie"
     model: Quickshell.screens
 
     PanelWindow {
@@ -340,6 +341,14 @@ Variants {
                         sourceComponent: CookieClock {}
                     }
 
+                    Loader {
+                        id: cookieQuoteLoader
+                        visible: root.showCookieQuote
+                        active: visible
+                        sourceComponent: CookieQuote {}
+                        anchors.horizontalCenter: cookieClockLoader.horizontalCenter
+                    }
+                    
                 }
 
                 Item {

.config/quickshell/ii/modules/background/cookieClock/CookieClock.qml

@@ -9,6 +9,8 @@ import QtQuick
 import QtQuick.Layouts
 import Qt5Compat.GraphicalEffects
 
+import "./dateIndicators"
+
 Item {
     id: root
 
@@ -119,6 +121,7 @@ Item {
         id: secondHandLoader
         active: Config.options.time.secondPrecision && Config.options.background.clock.cookie.secondHandStyle !== "none"
         anchors.fill: parent
+        z: 2
         sourceComponent: SecondHand {
             id: secondHand
             handWidth: root.secondHandWidth

.config/quickshell/ii/modules/background/cookieClock/CookieQuote.qml

@@ -0,0 +1,62 @@
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import QtQuick
+import QtQuick.Layouts
+import Qt5Compat.GraphicalEffects
+
+
+Item {
+    id: root
+
+    readonly property string quoteText: Config.options.background.quote
+
+    implicitWidth: quoteBox.implicitWidth
+    implicitHeight: quoteBox.implicitHeight
+
+    anchors.bottom: parent.bottom
+    anchors.bottomMargin: -24
+
+    DropShadow {
+        source: quoteBox 
+        anchors.fill: quoteBox
+        horizontalOffset: 0
+        verticalOffset: 2
+        radius: 12
+        samples: radius * 2 + 1
+        color: Appearance.colors.colShadow
+        transparentBorder: true
+    }
+    
+    Rectangle {
+        id: quoteBox
+
+        implicitWidth: quoteStyledText.width + quoteIcon.width + 16 // for spacing on both sides
+        implicitHeight: quoteStyledText.height + 8 
+        radius: Appearance.rounding.small
+        color: Appearance.colors.colSecondaryContainer
+        RowLayout {
+            anchors.centerIn: parent
+            spacing: 4
+            MaterialSymbol {
+                id: quoteIcon
+                iconSize: Appearance.font.pixelSize.huge
+                text: "comic_bubble"
+                color: Appearance.colors.colOnSecondaryContainer
+            }
+            StyledText {
+                id: quoteStyledText
+                Layout.fillWidth: true
+                horizontalAlignment: Text.AlignHCenter
+                text: Config.options.background.quote
+                font {
+                    family: Appearance.font.family.main
+                    pixelSize: Appearance.font.pixelSize.large
+                    weight: Font.Normal
+                    italic: true
+                }
+            }
+        }
+    }
+}

.config/quickshell/ii/modules/background/cookieClock/MinuteMarks.qml

@@ -13,6 +13,7 @@ Item {
     property int minuteLineSize: 4
     property color color: Appearance.colors.colOnSecondaryContainer
     property string style: Config.options.background.clock.cookie.dialNumberStyle // "dots", "numbers", "full", "hide"
+    property string dateStyle : Config.options.background.clock.cookie.dateStyle 
 
     Repeater {
         model: 12
@@ -61,7 +62,7 @@ Item {
                 anchors {
                     left: parent.left
                     verticalCenter: parent.verticalCenter
-                    leftMargin: root.style === "numbers" ? 32 : 96
+                    leftMargin: root.style === "numbers" ? root.dateStyle === "rotating" ? 48 : 32 : 96
                 }
                 Behavior on anchors.leftMargin {
                     animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
@@ -75,9 +76,12 @@ Item {
                     rotation: numberItem.index % 2 === 0 ? numberItem.index * 90 : -numberItem.index * 90 //A better way can be found to show texts on right angle
                     font {
                         family: Appearance.font.family.reading
-                        pixelSize: 80
+                        pixelSize: root.dateStyle === "rotating" ? 70 : 80
                         weight: 1000
                     }
+                    Behavior on font.pixelSize {
+                        animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
+                    }
                 }
             }
         }

.config/quickshell/ii/modules/background/cookieClock/dateIndicators/BubbleDate.qml

@@ -0,0 +1,36 @@
+pragma ComponentBehavior: Bound
+
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import QtQuick
+
+Item {
+    property int bubbleIndex: 0
+    property real targetSize: 0
+
+    MaterialCookie {
+        z: 5
+        sides: bubbleIndex === 0 ? 4 : 1
+        anchors.centerIn: parent
+        color: bubbleIndex === 0.0 ? Appearance.colors.colPrimaryContainer : Appearance.colors.colTertiaryContainer
+        implicitSize: targetSize
+        constantlyRotate: Config.options.background.clock.cookie.constantlyRotate
+    }
+    StyledText {
+        z: 6
+        anchors.centerIn: parent
+        text: bubbleIndex === 0.0 ? DateTime.date.substring(5, 7) : DateTime.date.substring(8, 10)
+        color: bubbleIndex === 0.0 ? Appearance.colors.colPrimary : Appearance.colors.colTertiary
+        opacity: root.style === "bubble" ? 1.0 : 0
+        font {
+            family: Appearance.font.family.expressive
+            pixelSize: 30
+            weight: 1000
+        }
+        Behavior on opacity {
+            animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+        }
+    }
+}

.config/quickshell/ii/modules/background/cookieClock/dateIndicators/DateIndicator.qml

@@ -0,0 +1,93 @@
+pragma ComponentBehavior: Bound
+
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.modules.common.functions
+import QtQuick
+
+Item {
+    id: root
+    readonly property string dialStyle: Config.options.background.clock.cookie.dialNumberStyle
+    property string style: "rotating"
+    property color colOnBackground: Appearance.colors.colOnSecondaryContainer
+    property color colBackground: Appearance.colors.colOnSecondaryContainer
+    property real dateSquareSize: 64
+
+    // Rotating date
+    Loader {
+        anchors.fill: parent
+        active: opacity > 0
+        sourceComponent: RotatingDate {
+            style: root.style
+        }
+    }
+
+    // Rectangle date (only today's number) in right side of the clock
+    Loader {
+        id: rectLoader
+
+        property real animIndex: root.style === "rect" ? 1.0 : 0.0
+        Behavior on animIndex {
+            animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
+        }
+
+        active: animIndex > 0
+
+        anchors.right: parent.right
+        anchors.verticalCenter: parent.verticalCenter
+
+        sourceComponent: RectangleDate {
+            color: Appearance.colors.colSecondaryContainerHover
+            radius: Appearance.rounding.small
+            animIndex: rectLoader.animIndex
+        }
+    }
+
+    // Date bubble / day
+    Loader {
+        id: dayBubbleLoader
+        property real targetSize: root.style === "bubble" ? root.dateSquareSize : 0
+        Behavior on targetSize {
+            animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
+        }
+
+        active: targetSize > 0
+        width: targetSize
+        height: targetSize
+        
+        anchors {
+            left: parent.left
+            bottom: parent.bottom
+            topMargin: 50
+        }
+        sourceComponent: BubbleDate {
+            bubbleIndex: 0
+            targetSize: dayBubbleLoader.targetSize
+        }
+    }
+
+    // Date bubble / month
+    Loader {
+        id: monthBubbleLoader
+        property real targetSize: root.style === "bubble" ? root.dateSquareSize : 0
+        Behavior on targetSize {
+            animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
+        }
+
+        width: targetSize
+        height: targetSize
+        active: targetSize > 0
+        
+        anchors {
+            right: parent.right
+            top: parent.top
+            bottomMargin: 50
+        }
+        sourceComponent: BubbleDate {
+            bubbleIndex: 1
+            targetSize: monthBubbleLoader.targetSize
+        }
+    }
+}

.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RectangleDate.qml

@@ -0,0 +1,41 @@
+
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import QtQuick
+
+Rectangle {
+    id: rect
+    readonly property string dialStyle: Config.options.background.clock.cookie.dialNumberStyle
+    property real animIndex: 0
+    opacity: animIndex
+
+    width: 45 * animIndex
+    height: 30 * animIndex
+    
+    x: root.dialStyle === "numbers" ? -40 : -10
+    y: root.dialStyle === "numbers" ? 55 : 0
+
+    Behavior on x {
+        animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+    }
+    Behavior on y {
+        animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+    }
+
+    StyledText {
+        opacity: root.style === "rect" ? 1.0 : 0
+        Behavior on opacity {
+            animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+        }
+        anchors.centerIn: parent
+        color: Appearance.colors.colSecondaryHover
+        text: DateTime.date.substring(5, 7)
+        font {
+            family: Appearance.font.family.expressive
+            pixelSize: 20
+            weight: 1000
+        }
+    }
+}

.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RotatingDate.qml

@@ -0,0 +1,59 @@
+pragma ComponentBehavior: Bound
+
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import QtQuick
+
+Item {
+    id: root
+
+    property string style: Config.options.background.clock.cookie.dateStyle
+    readonly property string dialStyle: Config.options.background.clock.cookie.dialNumberStyle
+    readonly property bool timeIndicators: Config.options.background.clock.cookie.timeIndicators
+
+    property real radius: style === "rotating" ? dialStyle === "numbers" || timeIndicators ? 90 : 75 : 0
+    Behavior on radius {
+        animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
+    }
+
+    property string dateText: Qt.locale().toString(DateTime.clock.date, "ddd dd")
+    property real angleStep: Math.PI / 2.35 / dateText.length
+
+    property color dayColor: Appearance.colors.colSecondary
+    property color monthColor: Appearance.colors.colSecondaryHover
+
+    opacity: style === "rotating" ? 1.0 : 0.0
+    Behavior on opacity {
+        animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+    }
+
+    rotation: {
+        if (!Config.options.time.secondPrecision) return 0
+        else return secondHandLoader.item.rotation + 45 // +45 to center the text
+    }
+
+    Repeater {
+        model: root.dateText.length 
+
+        delegate: Text {
+            required property int index
+            property real angle: index * root.angleStep - Math.PI / 2
+
+            x: root.width / 2 + root.radius * Math.cos(angle) - width / 2
+            y: root.height / 2 + root.radius * Math.sin(angle) - height / 2
+
+            text: root.dateText.charAt(index)
+
+            font.family: Appearance.font.family.title
+            font.pixelSize: 30
+            font.weight: Font.DemiBold 
+
+            color: index < 3 ? root.dayColor : root.monthColor
+
+            rotation: angle * 180 / Math.PI + 90
+
+        }
+    }
+}