diff --git a/.config/quickshell/ii/modules/background/cookieClock/CookieClock.qml b/.config/quickshell/ii/modules/background/cookieClock/CookieClock.qml index 1a6c70dea..0cda46fec 100644 --- a/.config/quickshell/ii/modules/background/cookieClock/CookieClock.qml +++ b/.config/quickshell/ii/modules/background/cookieClock/CookieClock.qml @@ -25,8 +25,8 @@ Item { property real hourDotSize: 12 property real centerGlowSize: 135 property real secondDotSize: 20 - property real secondsHandWidth: 2 - property real secondsHandLength: 100 + property real secondHandWidth: 2 + property real secondHandLength: 100 property real hourLineSize: 5 property real minuteLineSize: 2 property real hourNumberSize: 36 @@ -35,11 +35,11 @@ Item { property color colShadow: Appearance.colors.colShadow property color colBackground: Appearance.colors.colSecondaryContainer property color colOnBackground: ColorUtils.mix(Appearance.colors.colPrimary, Appearance.colors.colSecondaryContainer, 0.5) - property color colMinuteHand: Appearance.colors.colSecondary property color colHourHand: Appearance.colors.colPrimary + property color colMinuteHand: Appearance.colors.colSecondary + property color colSecondHand: Appearance.colors.colTertiary property color colOnHourHand: Appearance.colors.colOnPrimary property color colTimeIndicators: Appearance.colors.colSecondaryContainerHover - property color colSeconds: Appearance.colors.colTertiary readonly property list clockNumbers: DateTime.time.split(/[: ]/) readonly property int clockHour: parseInt(clockNumbers[0]) % 12 @@ -181,11 +181,24 @@ Item { // Minute hand MinuteHand { anchors.fill: parent + handWidth: root.minuteHandWidth clockMinute: root.clockMinute style: Config.options.background.clock.cookie.minuteHandStyle color: root.colMinuteHand } + // Second hand + SecondHand { + id: secondHand + anchors.fill: parent + handWidth: root.secondHandWidth + handLength: root.secondHandLength + dotSize: root.secondDotSize + clockSecond: root.clockSecond + style: Config.options.background.clock.cookie.secondHandStyle + color: root.colSecondHand + } + // Center dot Rectangle { visible: Config.options.background.clock.cookie.minuteHandStyle === "hide" && Config.options.background.clock.cookie.hourHandStyle === "hide" ? false : true @@ -221,55 +234,6 @@ Item { } } - - // Second hand/dot - Item { - id: secondHand - z: Config.options.background.clock.cookie.secondHandStyle === "line" ? 2 : 3 - opacity: Config.options.background.clock.cookie.secondHandStyle !== "hide" ? 1.0 : 0 - rotation: (360 / 60 * clockSecond) + 90 // +90 degrees to align with minute hand - anchors.fill: parent - Behavior on opacity { - animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) - } - Behavior on rotation{ - animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) - } - Rectangle { - implicitWidth: Config.options.background.clock.cookie.secondHandStyle === "dot" ? root.secondDotSize : root.secondsHandLength - implicitHeight: Config.options.background.clock.cookie.secondHandStyle === "dot" ? root.secondDotSize : root.secondsHandWidth - radius: Config.options.background.clock.cookie.secondHandStyle === "dot" ? implicitWidth / 2 : root.secondsHandWidth / 2 - color: colSeconds - Behavior on implicitHeight { - animation: Appearance.animation.elementResize.numberAnimation.createObject(this) - } - Behavior on implicitWidth { - animation: Appearance.animation.elementResize.numberAnimation.createObject(this) - } - anchors { - left: parent.left - verticalCenter: parent.verticalCenter - leftMargin: 10 - } - } - Rectangle{ - // Dot on the classic style - opacity: Config.options.background.clock.cookie.secondHandStyle === "classic" ? 1.0 : 0.0 - implicitHeight: 14 - implicitWidth: 14 - color: root.colSeconds - radius: Appearance.rounding.small - anchors { - left: parent.left - verticalCenter: parent.verticalCenter - leftMargin: 40 - } - Behavior on opacity { - animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) - } - } - } - // Date (the rotating one with the second hand) Canvas { z: 0 @@ -313,7 +277,7 @@ Item { Rectangle{ z: 1 implicitWidth: 45 - implicitHeight: Config.options.background.clock.cookie.dateStyle === "square" ? 30 : 0 + implicitHeight: Config.options.background.clock.cookie.dateStyle === "rect" ? 30 : 0 color: root.colOnBackground radius: Appearance.rounding.small anchors{ @@ -325,7 +289,7 @@ Item { animation: Appearance.animation.elementResize.numberAnimation.createObject(this) } StyledText{ - opacity: Config.options.background.clock.cookie.dateStyle === "square" ? 1.0 : 0 + opacity: Config.options.background.clock.cookie.dateStyle === "rect" ? 1.0 : 0 Behavior on opacity{ animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) } diff --git a/.config/quickshell/ii/modules/background/cookieClock/SecondHand.qml b/.config/quickshell/ii/modules/background/cookieClock/SecondHand.qml new file mode 100644 index 000000000..38f574129 --- /dev/null +++ b/.config/quickshell/ii/modules/background/cookieClock/SecondHand.qml @@ -0,0 +1,66 @@ +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 + anchors.fill: parent + + required property int clockSecond + property real handWidth: 2 + property real handLength: 100 + property real dotSize: 20 + property string style: "hide" + property color color: Appearance.colors.colSecondary + + z: root.style === "line" ? 2 : 3 + rotation: (360 / 60 * clockSecond) + 90 // +90 degrees to align with minute hand + opacity: root.style !== "hide" ? 1.0 : 0 + + Behavior on opacity { + animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) + } + Behavior on rotation { + enabled: Config.options.background.clock.cookie.constantlyRotate // Animating every second is expensive... + animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) + } + + Rectangle { + implicitWidth: root.style === "dot" ? root.dotSize : root.handLength + implicitHeight: root.style === "dot" ? root.dotSize : root.handWidth + radius: root.style === "dot" ? implicitWidth / 2 : root.handWidth / 2 + color: root.color + Behavior on implicitHeight { + animation: Appearance.animation.elementResize.numberAnimation.createObject(this) + } + Behavior on implicitWidth { + animation: Appearance.animation.elementResize.numberAnimation.createObject(this) + } + anchors { + left: parent.left + verticalCenter: parent.verticalCenter + leftMargin: 10 + } + } + Rectangle{ + // Dot on the classic style + opacity: root.style === "classic" ? 1.0 : 0.0 + implicitHeight: 14 + implicitWidth: 14 + color: root.color + radius: Appearance.rounding.small + anchors { + left: parent.left + verticalCenter: parent.verticalCenter + leftMargin: 40 + } + Behavior on opacity { + animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) + } + } +} \ No newline at end of file diff --git a/.config/quickshell/ii/modules/common/Config.qml b/.config/quickshell/ii/modules/common/Config.qml index 484f86643..82d080aca 100644 --- a/.config/quickshell/ii/modules/common/Config.qml +++ b/.config/quickshell/ii/modules/common/Config.qml @@ -135,7 +135,7 @@ Singleton { property string hourHandStyle: "fill" // Options: "classic", "fill", "stroke", "hide" property string minuteHandStyle: "medium" // Options: "classic", "thin", "medium", "bold", "hide" property string secondHandStyle: "dot" // Options: "dot", "line" , "none" - property string dateStyle: "rotating" // Options: "rotating", "square", "bubble" , "none" + property string dateStyle: "rotating" // Options: "rotating", "rect", "bubble" , "none" property bool timeIndicators: true property bool centerGlow: true property bool dateInClock: true diff --git a/.config/quickshell/ii/modules/settings/InterfaceConfig.qml b/.config/quickshell/ii/modules/settings/InterfaceConfig.qml index 8d220d8ec..168387c94 100644 --- a/.config/quickshell/ii/modules/settings/InterfaceConfig.qml +++ b/.config/quickshell/ii/modules/settings/InterfaceConfig.qml @@ -233,9 +233,9 @@ ContentPage { value: "rotating" }, { - displayName: Translation.tr("Square"), + displayName: Translation.tr("Rect"), icon: "square", - value: "square" + value: "rect" } ] }