diff --git a/.config/quickshell/ii/modules/background/Background.qml b/.config/quickshell/ii/modules/background/Background.qml index 47962f514..9e39dd275 100644 --- a/.config/quickshell/ii/modules/background/Background.qml +++ b/.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 { @@ -339,6 +340,14 @@ Variants { active: visible sourceComponent: CookieClock {} } + + Loader { + id: cookieQuoteLoader + visible: root.showCookieQuote + active: visible + sourceComponent: CookieQuote {} + anchors.horizontalCenter: cookieClockLoader.horizontalCenter + } } diff --git a/.config/quickshell/ii/modules/background/cookieClock/CookieClock.qml b/.config/quickshell/ii/modules/background/cookieClock/CookieClock.qml index 38d479455..95f2763d7 100644 --- a/.config/quickshell/ii/modules/background/cookieClock/CookieClock.qml +++ b/.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 diff --git a/.config/quickshell/ii/modules/background/cookieClock/CookieQuote.qml b/.config/quickshell/ii/modules/background/cookieClock/CookieQuote.qml new file mode 100644 index 000000000..39afa2004 --- /dev/null +++ b/.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 + } + } + } + } +} \ No newline at end of file diff --git a/.config/quickshell/ii/modules/background/cookieClock/MinuteMarks.qml b/.config/quickshell/ii/modules/background/cookieClock/MinuteMarks.qml index 68629aa70..be831235b 100644 --- a/.config/quickshell/ii/modules/background/cookieClock/MinuteMarks.qml +++ b/.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) + } } } } diff --git a/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/BubbleDate.qml b/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/BubbleDate.qml new file mode 100644 index 000000000..079c9650a --- /dev/null +++ b/.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) + } + } +} \ No newline at end of file diff --git a/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/DateIndicator.qml b/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/DateIndicator.qml new file mode 100644 index 000000000..d2626d751 --- /dev/null +++ b/.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 + } + } +} diff --git a/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RectangleDate.qml b/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RectangleDate.qml new file mode 100644 index 000000000..c2410c81e --- /dev/null +++ b/.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 + } + } +} \ No newline at end of file diff --git a/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RotatingDate.qml b/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RotatingDate.qml new file mode 100644 index 000000000..dc381d332 --- /dev/null +++ b/.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 + + } + } +}