added center glow , wave animation etc.

This commit is contained in:
darksignal7
2025-10-04 17:28:30 +03:00
parent 0f29869a76
commit b0987b224d
4 changed files with 130 additions and 15 deletions
@@ -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<string> 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
@@ -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
}
}
@@ -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
}
}
}
}
@@ -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 {