make TimeColumn not rely on autocascade, rename centerGlow -> hourMarks

This commit is contained in:
end-4
2025-10-06 10:09:06 +02:00
parent 07a3edf020
commit 122c1f8e37
6 changed files with 74 additions and 42 deletions
@@ -7,7 +7,6 @@ import qs.modules.common.widgets
import qs.modules.common.functions
import QtQuick
import QtQuick.Layouts
import Quickshell
import Qt5Compat.GraphicalEffects
Item {
@@ -23,7 +22,7 @@ Item {
Config.options.background.clock.cookie.minuteHandStyle === "medium" ? 12 : 5
property real centerDotSize: 10
property real hourDotSize: 12
property real centerGlowSize: 135
property real hourMarkSize: 135
property real secondDotSize: 20
property real secondHandWidth: 2
property real secondHandLength: 100
@@ -75,12 +74,18 @@ Item {
anchors.fill: parent
}
HourMarks {
anchors.fill: parent
anchors.centerIn: parent
implicitSize: root.hourMarkSize
markLength: root.hourDotSize
color: root.colTimeIndicators
colOnBackground: root.colOnBackground
}
// Number column in the middle
TimeColumn {
anchors.centerIn: parent
color: root.colOnBackground
clockNumbers: root.clockNumbers
}
// Hour hand
@@ -132,6 +137,7 @@ Item {
}
}
// Date
DateIndicator {
anchors.fill: parent
colOnBackground: root.colOnBackground
@@ -8,13 +8,21 @@ import qs.modules.common.functions
import QtQuick
Item {
id: root
property real implicitSize: 135
property real markLength: 10
property color color: Appearance.colors.colOnSecondaryContainer
property color colOnBackground: Appearance.colors.colSecondaryContainer
property bool isEnabled: Config.options.background.clock.cookie.hourMarks
Rectangle {
opacity: Config.options.background.clock.cookie.centerGlow ? 1.0 : 0
opacity: root.isEnabled ? 1.0 : 0
z: 0
color: root.colTimeIndicators
color: root.color
anchors.centerIn: parent
implicitWidth: Config.options.background.clock.cookie.centerGlow ? centerGlowSize : centerGlowSize * 1.75
implicitHeight: Config.options.background.clock.cookie.centerGlow ? centerGlowSize : centerGlowSize * 1.75 // Not using implicitHeight to allow smooth transition
implicitWidth: root.isEnabled ? root.implicitSize : root.implicitSize * 1.75
implicitHeight: root.isEnabled ? root.implicitSize : root.implicitSize * 1.75 // Not using implicitHeight to allow smooth transition
radius: implicitWidth / 2
Behavior on opacity {
animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
@@ -27,7 +35,7 @@ Item {
}
}
// Center glow lines
// Hour mark lines
Rectangle {
id: glowLines
z: 1
@@ -36,23 +44,28 @@ Item {
model: 12
Item {
required property int index
opacity: Config.options.background.clock.cookie.centerGlow ? 1.0 : 0
rotation: 360 / 12 * index
anchors.fill: parent
rotation: 360 / 12 * index
opacity: root.isEnabled ? 1.0 : 0
Behavior on opacity {
animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
}
Rectangle {
anchors {
left: parent.left
verticalCenter: parent.verticalCenter
leftMargin: Config.options.background.clock.cookie.centerGlow ? 50 : 75
leftMargin: root.isEnabled ? 50 : 75
}
implicitWidth: root.hourDotSize
implicitWidth: root.markLength
implicitHeight: implicitWidth / 2
radius: implicitWidth / 2
color: root.colOnBackground
opacity: Config.options.background.clock.cookie.centerGlow ? 0.5 : 0
opacity: root.isEnabled ? 0.5 : 0
Behavior on opacity {
animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
}
@@ -8,30 +8,43 @@ import qs.modules.common.functions
import QtQuick
Column {
id: timeIndicators
id: root
required property list<string> clockNumbers
property bool isEnabled: Config.options.background.clock.cookie.timeIndicators
property color color: Appearance.colors.colOnSecondaryContainer
z: 1
spacing: -16
Repeater {
model: root.clockNumbers
delegate: StyledText {
required property string modelData
opacity: Config.options.background.clock.cookie.timeIndicators ? 1.0 : 0 // Not using visible to allow smooth transition
anchors.horizontalCenter: parent?.horizontalCenter
color: root.colOnBackground
property bool hourMarksEnabled: Config.options.background.clock.cookie.hourMarks
property bool isAmPm: !!modelData.match(/am|pm/i)
property real numberSizeWithoutGlow: isAmPm ? 26 : 68
property real numberSizeWithGlow: isAmPm ? 10 : 40
property real numberSize: root.isEnabled ? (hourMarksEnabled ? numberSizeWithGlow : numberSizeWithoutGlow) : 100 // open/close animation
anchors.horizontalCenter: root.horizontalCenter
visible: opacity > 0
color: root.color
opacity: root.isEnabled ? 1.0 : 0
Behavior on opacity {
animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
}
text: modelData.padStart(2, "0")
font {
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.timeIndicators ? 100 : // open/close animation
Config.options.background.clock.cookie.centerGlow ? numberSizeWithGlow : numberSizeWithoutGlow // changing size according to center glow
family: Appearance.font.family.expressive
weight: Font.Bold
pixelSize: numberSize
Behavior on pixelSize {
animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
}
family: Appearance.font.family.expressive
weight: Font.Bold
}
Behavior on opacity {
animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
}
}
}
@@ -137,7 +137,7 @@ Singleton {
property string secondHandStyle: "dot" // Options: "dot", "line" , "none"
property string dateStyle: "rotating" // Options: "rotating", "rect", "bubble" , "none"
property bool timeIndicators: true
property bool centerGlow: true
property bool hourMarks: true
property bool dateInClock: true
property bool constantlyRotate: false
}
@@ -20,8 +20,7 @@ Item {
property real shapeRotation: 0
Loader{
Loader {
active: constantlyRotate
sourceComponent: FrameAnimation{
running: true
@@ -52,7 +51,8 @@ Item {
var radius = root.implicitSize / 2 - root.amplitude
for (var i = 0; i <= steps; i++) {
var angle = (i / steps) * 2 * Math.PI
var wave = constantlyRotate ? Math.sin(angle * root.sides + Math.PI/2 - root.shapeRotation) * root.amplitude : Math.sin(angle * root.sides + Math.PI/2) * root.amplitude
var rotatedAngle = angle * root.sides + Math.PI/2 + (root.shapeRotation * root.constantlyRotate)
var wave = Math.sin(rotatedAngle) * root.amplitude
var x = Math.cos(angle) * (radius + wave) + cx
var y = Math.sin(angle) * (radius + wave) + cy
points.push(Qt.point(x, y))
@@ -64,7 +64,7 @@ ContentPage {
onSelected: newValue => {
Config.options.background.clock.cookie.dialNumberStyle = newValue;
if (newValue !== "dots" && newValue !== "full") {
Config.options.background.clock.cookie.centerGlow = false;
Config.options.background.clock.cookie.hourMarks = false;
}
if (newValue === "numbers") {
Config.options.background.clock.cookie.timeIndicators = false;
@@ -183,6 +183,11 @@ ContentPage {
Config.options.background.clock.cookie.secondHandStyle = newValue;
}
options: [
{
displayName: "",
icon: "block",
value: "hide"
},
{
displayName: Translation.tr("Classic"),
icon: "radio",
@@ -198,11 +203,6 @@ ContentPage {
icon: "adjust",
value: "dot"
},
{
displayName: Translation.tr("Hide"),
icon: "deselect",
value: "hide"
}
]
}
}
@@ -218,8 +218,8 @@ ContentPage {
}
options: [
{
displayName: Translation.tr("None"),
icon: "deselect",
displayName: "",
icon: "block",
value: "none"
},
{
@@ -273,13 +273,13 @@ ContentPage {
ConfigSwitch {
enabled: Config.options.background.clock.style === "cookie" && Config.options.background.clock.cookie.dialNumberStyle === "dots" || Config.options.background.clock.cookie.dialNumberStyle === "full"
buttonIcon: "brightness_7"
text: Translation.tr("Center glow")
checked: Config.options.background.clock.cookie.centerGlow
text: Translation.tr("Hour marks")
checked: Config.options.background.clock.cookie.hourMarks
onEnabledChanged: {
checked = Config.options.background.clock.cookie.centerGlow;
checked = Config.options.background.clock.cookie.hourMarks;
}
onCheckedChanged: {
Config.options.background.clock.cookie.centerGlow = checked;
Config.options.background.clock.cookie.hourMarks = checked;
}
StyledToolTip {
text: "Can only be turned on using the 'Dots' or 'Full' dial style for aesthetic reasons"