diff --git a/.config/quickshell/ii/modules/background/CookieClock.qml b/.config/quickshell/ii/modules/background/CookieClock.qml index c11955ed2..b147f04fc 100644 --- a/.config/quickshell/ii/modules/background/CookieClock.qml +++ b/.config/quickshell/ii/modules/background/CookieClock.qml @@ -24,6 +24,9 @@ Item { property real minuteHandWidth: Config.options.background.clock.cookie.minuteHandSizeAdjust ? hourHandWidth : 12 property real centerDotSize: 10 property real hourDotSize: 12 + property real centerGlowSize: 135 + + property color colShadow: Appearance.colors.colShadow property color colBackground: Appearance.colors.colSecondaryContainer @@ -31,10 +34,11 @@ Item { property color colHourHand: Appearance.colors.colPrimary property color colMinuteHand: Appearance.colors.colSecondaryActive property color colOnHourHand: Appearance.colors.colOnPrimary - + property color colTimeIndicators: Appearance.colors.colSecondaryContainerHover readonly property list clockNumbers: DateTime.time.split(/[: ]/) readonly property int clockHour: parseInt(clockNumbers[0]) % 12 readonly property int clockMinute: parseInt(clockNumbers[1]) + implicitWidth: implicitSize implicitHeight: implicitSize @@ -72,7 +76,10 @@ Item { Repeater { model: 12 Item { - visible: Config.options.background.clock.cookie.hourDots + opacity: Config.options.background.clock.cookie.hourDots ? 1.0 : 0 // Not using visible to allow smooth transition + Behavior on opacity { + animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) + } required property int index rotation: 360 / 12 * index anchors.fill: parent @@ -90,6 +97,41 @@ Item { } } } + + } + + // Center glow behind the cookie + Rectangle { + id: glowLines + z: 1 + anchors.centerIn: cookie + Repeater { + model: 12 + Item { + opacity: Config.options.background.clock.cookie.centerGlow ? 1.0 : 0 // Not using visible to allow smooth transition + Behavior on opacity { + animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) + } + required property int index + rotation: 360 / 12 * index + anchors.fill: parent + Rectangle { + anchors { + left: parent.left + verticalCenter: parent.verticalCenter + leftMargin: 50 + } + implicitWidth: root.hourDotSize + implicitHeight: implicitWidth / 2 + radius: implicitWidth / 2 + color: root.colOnBackground + opacity: Config.options.background.clock.cookie.centerGlow ? 0.5 : 0 + Behavior on opacity { + animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) + } + } + } + } } Column { @@ -97,7 +139,6 @@ Item { z: 1 anchors.centerIn: cookie spacing: -16 - visible: Config.options.background.clock.cookie.timeIndicators // Numbers Repeater { @@ -105,9 +146,19 @@ Item { delegate: StyledText { required property string modelData + opacity: Config.options.background.clock.cookie.timeIndicators ? 1.0 : 0 // Not using visible to allow smooth transition + Behavior on opacity { // LOOK + animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) + } anchors.horizontalCenter: parent?.horizontalCenter font { - pixelSize: modelData.match(/am|pm/i) ? 26 : 68 + // A better way to do this? probably yes, do i know : no + property real numberSizeWithoutGlow: modelData.match(/am|pm/i) ? 26 : 68 + property real numberSizeWithGlow: modelData.match(/am|pm/i) ? 10 : 40 + pixelSize: Config.options.background.clock.cookie.centerGlow ? numberSizeWithGlow : numberSizeWithoutGlow + Behavior on pixelSize { + animation: Appearance.animation.elementResize.numberAnimation.createObject(this) + } family: Appearance.font.family.expressive weight: Font.Bold } @@ -138,6 +189,9 @@ Item { z: 3 rotation: -90 + (360 / 60) * root.clockMinute Rectangle { + Behavior on height { + animation: Appearance.animation.elementResize.numberAnimation.createObject(this) + } anchors.verticalCenter: parent.verticalCenter x: parent.width / 2 - minuteHandWidth / 2 width: minuteHandLength @@ -149,7 +203,10 @@ Item { // Center dot Rectangle { - visible: !Config.options.background.clock.cookie.minuteHandSizeAdjust + opacity: !Config.options.background.clock.cookie.minuteHandSizeAdjust ? 1.0 : 0 // Not using visible to allow smooth transition + Behavior on opacity { + animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) + } z: 4 color: root.colOnHourHand anchors.centerIn: parent @@ -158,6 +215,17 @@ Item { radius: implicitWidth / 2 } + // Center glow + Rectangle { + visible: Config.options.background.clock.cookie.centerGlow + z: 0 + color: root.colTimeIndicators + anchors.centerIn: parent + implicitWidth: centerGlowSize + implicitHeight: centerGlowSize + radius: implicitWidth / 2 + } + // Quote Rectangle{ id: quoteBox diff --git a/.config/quickshell/ii/modules/common/Config.qml b/.config/quickshell/ii/modules/common/Config.qml index a73b140c3..679db2d6e 100644 --- a/.config/quickshell/ii/modules/common/Config.qml +++ b/.config/quickshell/ii/modules/common/Config.qml @@ -134,6 +134,8 @@ Singleton { property bool hourDots: true property bool timeIndicators: true property bool minuteHandSizeAdjust: true + property bool centerGlow: true + property bool waveAnimation: true } } diff --git a/.config/quickshell/ii/modules/common/widgets/MaterialCookie.qml b/.config/quickshell/ii/modules/common/widgets/MaterialCookie.qml index 3f85cb294..968cfb424 100644 --- a/.config/quickshell/ii/modules/common/widgets/MaterialCookie.qml +++ b/.config/quickshell/ii/modules/common/widgets/MaterialCookie.qml @@ -1,6 +1,8 @@ import QtQuick import QtQuick.Shapes import Quickshell +import qs.modules.common + Item { id: root @@ -12,9 +14,25 @@ Item { property color color: "#605790" property alias strokeWidth: shapePath.strokeWidth + property bool waveAnimation: Config.options.background.clock.cookie.waveAnimation + + implicitWidth: implicitSize implicitHeight: implicitSize + property real waveTime: 0 + Loader{ + active: waveAnimation + sourceComponent: Timer{ + interval: 16 // Does it effect performance, probably, is it noticeable, not really + running: true; repeat: true + onTriggered: { + root.waveTime += 0.05 + } + } + } + + Shape { id: shape anchors.fill: parent @@ -35,7 +53,7 @@ Item { var radius = root.implicitSize / 2 - root.amplitude for (var i = 0; i <= steps; i++) { var angle = (i / steps) * 2 * Math.PI - var wave = Math.sin(angle * root.sides + Math.PI/2) * root.amplitude + var wave = waveAnimation ? Math.sin(angle * root.sides + Math.PI/2 + root.waveTime) * root.amplitude : Math.sin(angle * root.sides + Math.PI/2) * root.amplitude var x = Math.cos(angle) * (radius + wave) + cx var y = Math.sin(angle) * (radius + wave) + cy points.push(Qt.point(x, y)) @@ -45,6 +63,7 @@ Item { path: pointsList } + } } } diff --git a/.config/quickshell/ii/modules/settings/InterfaceConfig.qml b/.config/quickshell/ii/modules/settings/InterfaceConfig.qml index f3116e353..e26911a23 100644 --- a/.config/quickshell/ii/modules/settings/InterfaceConfig.qml +++ b/.config/quickshell/ii/modules/settings/InterfaceConfig.qml @@ -69,16 +69,41 @@ ContentPage { } } - ConfigSpinBox { + ConfigRow{ enabled: Config.options.background.clock.style === "cookie" - icon: "support" - text: Translation.tr("Clock sides") - value: Config.options.background.clock.clockSides - from: 1 - to: 36 - stepSize: 1 - onValueChanged: { - Config.options.background.clock.clockSides = value; + ConfigSpinBox { + icon: "support" + text: Translation.tr("Clock sides") + value: Config.options.background.clock.clockSides + from: 1 + to: 36 + stepSize: 1 + onValueChanged: { + Config.options.background.clock.clockSides = value; + } + } + ConfigSwitch { + enabled: Config.options.background.clock.cookie.hourDots + buttonIcon: "brightness_7" + text: Translation.tr("Center glow") + checked: Config.options.background.clock.cookie.centerGlow + onEnabledChanged: { + checked = Config.options.background.clock.cookie.centerGlow + } + onCheckedChanged: { + Config.options.background.clock.cookie.centerGlow = checked; + } + } + ConfigSwitch { + buttonIcon: "waves" + text: Translation.tr("Wave animation") + checked: Config.options.background.clock.cookie.waveAnimation + onCheckedChanged: { + Config.options.background.clock.cookie.waveAnimation = checked; + } + StyledToolTip { + text: "It may effect performance" + } } } ConfigRow{ @@ -89,6 +114,7 @@ ContentPage { checked: Config.options.background.clock.cookie.hourDots onCheckedChanged: { Config.options.background.clock.cookie.hourDots = checked; + Config.options.background.clock.cookie.centerGlow = checked ? Config.options.background.clock.cookie.centerGlow : false; } } ConfigSwitch {