diff --git a/.config/quickshell/ii/modules/background/cookieClock/CookieClock.qml b/.config/quickshell/ii/modules/background/cookieClock/CookieClock.qml index 95f2763d7..f376576c3 100644 --- a/.config/quickshell/ii/modules/background/cookieClock/CookieClock.qml +++ b/.config/quickshell/ii/modules/background/cookieClock/CookieClock.qml @@ -10,6 +10,7 @@ import QtQuick.Layouts import Qt5Compat.GraphicalEffects import "./dateIndicators" +import "./minuteMarks" Item { id: root @@ -74,10 +75,8 @@ Item { // Hour/minutes numbers/dots/lines MinuteMarks { anchors.fill: parent - property int hourDotSize: root.hourDotSize - property int hourNumberSize: root.hourNumberSize - property int hourLineSize: root.hourLineSize - property int minuteLineSize: root.minuteLineSize + hourDotSize: root.hourDotSize + hourNumberSize: root.hourNumberSize color: root.colOnBackground } HourMarks { diff --git a/.config/quickshell/ii/modules/background/cookieClock/MinuteMarks.qml b/.config/quickshell/ii/modules/background/cookieClock/MinuteMarks.qml deleted file mode 100644 index be831235b..000000000 --- a/.config/quickshell/ii/modules/background/cookieClock/MinuteMarks.qml +++ /dev/null @@ -1,145 +0,0 @@ -pragma ComponentBehavior: Bound - -import qs.modules.common -import qs.modules.common.widgets -import QtQuick - -Item { - id: root - - property int hourDotSize: 16 - property int hourNumberSize: 80 - property int hourLineSize: 8 - 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 - Item { - required property int index - opacity: root.style === "dots" ? 1.0 : 0 - rotation: 360 / 12 * index - anchors.fill: parent - Behavior on opacity { - animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) - } - Rectangle { - anchors { - left: parent.left - verticalCenter: parent.verticalCenter - leftMargin: root.style === "dots" ? 10 : 50 - } - Behavior on anchors.leftMargin { - animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) - } - implicitWidth: root.hourDotSize - implicitHeight: implicitWidth - radius: implicitWidth / 2 - color: root.color - opacity: 0.5 - } - } - } - - // Hour Indicator numbers (3-6-9-12) - Repeater { - model: 4 - Item { - id: numberItem - required property int index - opacity: root.style === "numbers" ? 1.0 : 0 - rotation: 360 / 4 * index - anchors.fill: parent - Behavior on opacity { - animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) - } - Rectangle { - color: "transparent" - implicitWidth: root.hourNumberSize - implicitHeight: implicitWidth - anchors { - left: parent.left - verticalCenter: parent.verticalCenter - leftMargin: root.style === "numbers" ? root.dateStyle === "rotating" ? 48 : 32 : 96 - } - Behavior on anchors.leftMargin { - animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) - } - StyledText { - color: root.color - anchors.centerIn: parent - text: numberItem.index === 0 ? "9" : - numberItem.index === 1 ? "12" : - numberItem.index === 2 ? "3" : "6" - 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: root.dateStyle === "rotating" ? 70 : 80 - weight: 1000 - } - Behavior on font.pixelSize { - animation: Appearance.animation.elementResize.numberAnimation.createObject(this) - } - } - } - } - } - - // Full dial style hour lines - Repeater { - model: 12 - Item { - required property int index - rotation: 360 / 12 * index - anchors.fill: parent - opacity: root.style === "full" ? 1.0 : 0 - Behavior on opacity { - animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) - } - Rectangle { - implicitWidth: root.hourLineSize * 3.5 - implicitHeight: root.hourLineSize - radius: implicitWidth / 2 - color: root.color - anchors { - left: parent.left - verticalCenter: parent.verticalCenter - leftMargin: root.style === "full" ? 10 : 50 - } - Behavior on anchors.leftMargin { - animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) - } - } - } - } - // Full dial style minute lines - Repeater { - model: 60 - Item { - required property int index - rotation: 360 / 60 * index - anchors.fill: parent - opacity: root.style === "full" ? 1.0 : 0 - Behavior on opacity { - animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) - } - Rectangle { - implicitWidth: root.minuteLineSize * 3.5 - implicitHeight: root.minuteLineSize - radius: implicitWidth / 2 - color: root.color - opacity: 0.5 - anchors { - left: parent.left - verticalCenter: parent.verticalCenter - leftMargin: root.style === "full" ? 10 : 50 - } - Behavior on anchors.leftMargin { - animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) - } - } - } - } -} diff --git a/.config/quickshell/ii/modules/background/cookieClock/minuteMarks/BigHourNumbers.qml b/.config/quickshell/ii/modules/background/cookieClock/minuteMarks/BigHourNumbers.qml new file mode 100644 index 000000000..d0794d1e4 --- /dev/null +++ b/.config/quickshell/ii/modules/background/cookieClock/minuteMarks/BigHourNumbers.qml @@ -0,0 +1,49 @@ +pragma ComponentBehavior: Bound + +import qs.modules.common +import qs.modules.common.widgets +import QtQuick + +Item { + id: root + property real numberSize: 80 + property real margins: 10 + property color color: Appearance.colors.colOnSecondaryContainer + + property int hours: 12 + property int numbers: 4 + property int fontSize: 80 + + Repeater { + model: root.numbers + + Item { + id: numberItem + required property int index + rotation: 360 / root.numbers * (index + 1) + anchors.fill: parent + + Item { + implicitWidth: root.numberSize + implicitHeight: implicitWidth + anchors { + top: parent.top + horizontalCenter: parent.horizontalCenter + topMargin: root.margins + } + StyledText { + color: root.color + anchors.centerIn: parent + text: root.hours / root.numbers * (numberItem.index + 1) + rotation: -numberItem.rotation + + font { + family: Appearance.font.family.reading + pixelSize: root.fontSize + weight: Font.Black + } + } + } + } + } +} diff --git a/.config/quickshell/ii/modules/background/cookieClock/minuteMarks/Dots.qml b/.config/quickshell/ii/modules/background/cookieClock/minuteMarks/Dots.qml new file mode 100644 index 000000000..60bf59474 --- /dev/null +++ b/.config/quickshell/ii/modules/background/cookieClock/minuteMarks/Dots.qml @@ -0,0 +1,34 @@ +pragma ComponentBehavior: Bound + +import qs.modules.common +import qs.modules.common.widgets +import QtQuick + +Item { + id: root + property real implicitSize: 12 + property real margins: 10 + property color color: Appearance.colors.colOnSecondaryContainer + + Repeater { + model: 12 + + Item { + required property int index + anchors.fill: parent // Ensures rotation works properly + rotation: 360 / 12 * index + + Rectangle { + anchors { + left: parent.left + verticalCenter: parent.verticalCenter + leftMargin: root.margins + } + implicitWidth: root.implicitSize + implicitHeight: implicitWidth + radius: implicitWidth / 2 + color: root.color + } + } + } +} diff --git a/.config/quickshell/ii/modules/background/cookieClock/minuteMarks/Lines.qml b/.config/quickshell/ii/modules/background/cookieClock/minuteMarks/Lines.qml new file mode 100644 index 000000000..c4b8d721f --- /dev/null +++ b/.config/quickshell/ii/modules/background/cookieClock/minuteMarks/Lines.qml @@ -0,0 +1,66 @@ +pragma ComponentBehavior: Bound + +import qs.modules.common +import qs.modules.common.widgets +import QtQuick + +Item { + id: root + property real numberSize: 80 + property real margins: 10 + property color color: Appearance.colors.colOnSecondaryContainer + + property real hourLineSize: 4 + property real minuteLineSize: 2 + property real hourLineLength: 18 + property real minuteLineLength: 7 + + property int hours: 12 + property int minutes: 60 + + // Full dial style hour lines + Repeater { + model: root.hours + + Item { + required property int index + rotation: 360 / root.hours * index + anchors.fill: parent + + Rectangle { + anchors { + left: parent.left + verticalCenter: parent.verticalCenter + leftMargin: root.margins + } + implicitWidth: root.hourLineLength + implicitHeight: root.hourLineSize + radius: implicitWidth / 2 + color: root.color + } + } + } + + // Minute lines + Repeater { + model: root.minutes + + Item { + required property int index + rotation: 360 / root.minutes * index + anchors.fill: parent + + Rectangle { + anchors { + left: parent.left + verticalCenter: parent.verticalCenter + leftMargin: root.margins + } + implicitWidth: root.minuteLineLength + implicitHeight: root.minuteLineSize + radius: implicitWidth / 2 + color: root.color + } + } + } +} diff --git a/.config/quickshell/ii/modules/background/cookieClock/minuteMarks/MinuteMarks.qml b/.config/quickshell/ii/modules/background/cookieClock/minuteMarks/MinuteMarks.qml new file mode 100644 index 000000000..a1f28c7bb --- /dev/null +++ b/.config/quickshell/ii/modules/background/cookieClock/minuteMarks/MinuteMarks.qml @@ -0,0 +1,50 @@ +pragma ComponentBehavior: Bound + +import qs.modules.common +import qs.modules.common.widgets +import QtQuick + +Item { + id: root + + property int hourDotSize: 16 + property int hourNumberSize: 80 + 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 + + // 12 Dots + FadeLoader { + id: dotsLoader + anchors.fill: parent + shown: root.style === "dots" + sourceComponent: Dots { + color: root.color + margins: 46 - dotsLoader.opacity * 34 + } + } + + // 3-6-9-12 hour numbers (pls don't realize you can have more than 4 numbers) + FadeLoader { + id: bigHourNumbersLoader + anchors.fill: parent + shown: root.style === "numbers" + sourceComponent: BigHourNumbers { + numberSize: root.hourNumberSize + color: root.color + margins: 70 - bigHourNumbersLoader.opacity * 40 + } + } + + // Lines + FadeLoader { + id: linesLoader + anchors.fill: parent + shown: root.style === "full" + sourceComponent: Lines { + color: root.color + margins: 46 - linesLoader.opacity * 34 + } + } + +} diff --git a/.config/quickshell/ii/modules/common/widgets/FadeLoader.qml b/.config/quickshell/ii/modules/common/widgets/FadeLoader.qml new file mode 100644 index 000000000..aaa2753f8 --- /dev/null +++ b/.config/quickshell/ii/modules/common/widgets/FadeLoader.qml @@ -0,0 +1,16 @@ +import QtQuick + +import qs.modules.common +import qs.modules.common.widgets + +Loader { + id: root + property bool shown: true + opacity: shown ? 1 : 0 + visible: opacity > 0 + active: opacity > 0 + + Behavior on opacity { + animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) + } +}