From 7f8a5315c45229d785f593619ded1d7303491433 Mon Sep 17 00:00:00 2001 From: darksignal7 Date: Sun, 5 Oct 2025 17:10:59 +0300 Subject: [PATCH] make code more readable --- .../ii/modules/background/CookieClock.qml | 157 +++++++++--------- .../quickshell/ii/modules/common/Config.qml | 8 +- .../ii/modules/settings/InterfaceConfig.qml | 41 ++--- 3 files changed, 99 insertions(+), 107 deletions(-) diff --git a/.config/quickshell/ii/modules/background/CookieClock.qml b/.config/quickshell/ii/modules/background/CookieClock.qml index d76a28725..c7c927fa0 100644 --- a/.config/quickshell/ii/modules/background/CookieClock.qml +++ b/.config/quickshell/ii/modules/background/CookieClock.qml @@ -49,6 +49,7 @@ Item { property int clockSecond: 0 + // Loader to set root.clockSecond Loader{ active: Config.option.background.clock.cookie.secondDot sourceComponent: Timer { @@ -95,22 +96,21 @@ Item { sides: Config.options.background.clock.clockSides color: root.colBackground waveAnimation: Config.options.background.clock.cookie.waveAnimation - } - // 12 dots around the cookie + // Hour dots dial style Repeater { model: 12 Item { - opacity: Config.options.background.clock.cookie.dialNumberStyle === "dots" ? 1.0 : 0 // Not using visible to allow smooth transition + required property int index + opacity: Config.options.background.clock.cookie.dialNumberStyle === "dots" ? 1.0 : 0 + rotation: 360 / 12 * index + anchors.fill: parent Behavior on opacity { animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) } - required property int index - rotation: 360 / 12 * index - anchors.fill: parent Rectangle { - anchors { + anchors{ left: parent.left verticalCenter: parent.verticalCenter leftMargin: Config.options.background.clock.cookie.dialNumberStyle === "dots" ? 10 : 50 @@ -135,13 +135,13 @@ Item { Repeater { model: 12 Item { - opacity: Config.options.background.clock.cookie.centerGlow ? 1.0 : 0 // Not using visible to allow smooth transition + required property int index + opacity: Config.options.background.clock.cookie.centerGlow ? 1.0 : 0 + rotation: 360 / 12 * index + anchors.fill: parent 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 @@ -170,33 +170,28 @@ Item { z: 1 anchors.centerIn: cookie spacing: -16 - - // Numbers 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 - Behavior on opacity { - animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) - } anchors.horizontalCenter: parent?.horizontalCenter + color: root.colOnBackground + text: modelData.padStart(2, "0") font { - // A better way to do this? probably yes, do i know : no - // (changing size based on am/pm selected or not) 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 : // for open/close animation - Config.options.background.clock.cookie.centerGlow ? numberSizeWithGlow : numberSizeWithoutGlow + 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 Behavior on pixelSize { animation: Appearance.animation.elementResize.numberAnimation.createObject(this) } family: Appearance.font.family.main weight: Font.Bold } - color: root.colOnBackground - text: modelData.padStart(2, "0") + Behavior on opacity { + animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) + } } } } @@ -210,16 +205,15 @@ Item { Rectangle { // fill opacity: Config.options.background.clock.cookie.hourHandStyle === "fill" ? 1.0 : 0 - Behavior on opacity { - animation: Appearance.animation.elementResize.numberAnimation.createObject(this) - } anchors.verticalCenter: parent.verticalCenter x: parent.width / 2 - hourHandWidth / 2 width: hourHandLength height: hourHandWidth radius: hourHandWidth / 2 - //color: Config.options.background.clock.cookie.hourHandStyle === "stroke" ? "transparent" : root.colHourHand color : root.colHourHand + Behavior on opacity { + animation: Appearance.animation.elementResize.numberAnimation.createObject(this) + } } Rectangle { // border @@ -238,54 +232,54 @@ Item { Item { anchors.fill: parent z: Config.options.background.clock.cookie.minuteHandStyle === "thin" ? 1 : 3 + rotation: -90 + (360 / 60) * root.clockMinute Behavior on rotation{ animation: Appearance.animation.elementResize.numberAnimation.createObject(this) } - 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 height: minuteHandWidth radius: minuteHandWidth / 2 color: root.colMinuteHand + Behavior on height { + animation: Appearance.animation.elementResize.numberAnimation.createObject(this) + } } } // Center dot Rectangle { - opacity: Config.options.background.clock.cookie.minuteHandStyle !== "bold" ? 1.0 : 0 // Not using visible to allow smooth transition - Behavior on opacity { - animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) - } z: 4 + opacity: Config.options.background.clock.cookie.minuteHandStyle !== "bold" ? 1.0 : 0 color: Config.options.background.clock.cookie.minuteHandStyle === "medium" ? root.colBackground : root.colMinuteHand anchors.centerIn: parent implicitWidth: centerDotSize implicitHeight: implicitWidth radius: implicitWidth / 2 + Behavior on opacity { + animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) + } } // Center glow Rectangle { - opacity: Config.options.background.clock.cookie.centerGlow ? 1.0 : 0 // Not using visible to allow smooth transition - Behavior on opacity { - animation: Appearance.animation.elementResize.numberAnimation.createObject(this) - } - Behavior on implicitWidth { // Not using two animations because it looks weird - ParallelAnimation { - NumberAnimation { properties: "implicitWidth,implicitHeight"; duration: 100; easing.type: Easing.InOutQuad } - } - } + opacity: Config.options.background.clock.cookie.centerGlow ? 1.0 : 0 z: 0 color: root.colTimeIndicators anchors.centerIn: parent implicitWidth: Config.options.background.clock.cookie.centerGlow ? centerGlowSize : centerGlowSize * 1.75 implicitHeight: implicitWidth radius: implicitWidth / 2 + Behavior on opacity { + animation: Appearance.animation.elementResize.numberAnimation.createObject(this) + } + Behavior on implicitWidth { // Not using two animations (one for width and one for height) because it looks weird + ParallelAnimation { + NumberAnimation { properties: "implicitWidth,implicitHeight"; duration: 100; easing.type: Easing.InOutQuad } + } + } } @@ -294,16 +288,19 @@ Item { id: secondHand z: Config.options.background.clock.cookie.secondHandStyle === "line" ? 2 : 3 opacity: Config.options.background.clock.cookie.secondHandStyle === "dot" || Config.options.background.clock.cookie.secondHandStyle === "line" ? 1.0 : 0 // Not using visible to allow smooth transition + 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) } - rotation: (360 / 60 * clockSecond) + 90 // +90 degrees to align with minute hand - anchors.fill: parent Rectangle { - + implicitWidth: Config.options.background.clock.cookie.secondHandStyle === "dot" ? root.secondDotSize : root.secondsHandLength + implicitHeight: Config.options.background.clock.cookie.secondHandStyle === "dot" ? implicitWidth : 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) } @@ -315,10 +312,6 @@ Item { verticalCenter: parent.verticalCenter leftMargin: 10 } - implicitWidth: Config.options.background.clock.cookie.secondHandStyle === "dot" ? root.secondDotSize : root.secondsHandLength - implicitHeight: Config.options.background.clock.cookie.secondHandStyle === "dot" ? implicitWidth : root.secondsHandWidth - radius: Config.options.background.clock.cookie.secondHandStyle === "dot" ? implicitWidth / 2 : root.secondsHandWidth / 2 - color: colSeconds } } @@ -329,7 +322,6 @@ Item { height: cookie.height rotation: secondHand.rotation + 45 // +45 degrees to align with minute hand opacity: Config.options.background.clock.cookie.dateStyle === "rotating" ? 1.0 : 0 - Behavior on opacity { animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) } @@ -367,17 +359,16 @@ Item { z: 1 implicitWidth: 45 implicitHeight: Config.options.background.clock.cookie.dateStyle === "square" ? 30 : 0 - Behavior on implicitHeight{ - animation: Appearance.animation.elementResize.numberAnimation.createObject(this) - } - opacity: 1.0 + color: root.colOnBackground + radius: Appearance.rounding.small anchors{ verticalCenter: cookie.verticalCenter right: cookie.right rightMargin: 10 } - color: root.colOnBackground - radius: Appearance.rounding.small // LOOK + Behavior on implicitHeight{ + animation: Appearance.animation.elementResize.numberAnimation.createObject(this) + } StyledText{ opacity: Config.options.background.clock.cookie.dateStyle === "square" ? 1.0 : 0 Behavior on opacity{ @@ -398,14 +389,17 @@ Item { Repeater { model: 4 Item { - opacity: Config.options.background.clock.cookie.dialNumberStyle === "numbers" ? 1.0 : 0 // Not using visible to allow smooth transition + required property int index + opacity: Config.options.background.clock.cookie.dialNumberStyle === "numbers" ? 1.0 : 0 + rotation: 360 / 4 * index + anchors.fill: parent Behavior on opacity { animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) } - required property int index - rotation: 360 / 4 * index - anchors.fill: parent Rectangle { + color: "transparent" + implicitWidth: root.hourNumberSize + implicitHeight: implicitWidth anchors { left: parent.left verticalCenter: parent.verticalCenter @@ -414,14 +408,12 @@ Item { Behavior on anchors.leftMargin{ animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) } - implicitWidth: root.hourNumberSize - implicitHeight: implicitWidth - color: "transparent" StyledText{ - color: root.colOnBackground anchors.centerIn: parent - text: index === 0 ? "9" : index === 1 ? "12" : index === 2 ? "3" : "6" + text: index === 0 ? "9" : + index === 1 ? "12" : + index === 2 ? "3" : "6" rotation: index % 2 === 0 ? index * 90 : -index * 90 //A better way can be found to show texts on right angle font { family: Appearance.font.family.reading @@ -437,14 +429,18 @@ Item { Repeater { model: 12 Item { + required property int index + rotation: 360 / 12 * index + anchors.fill: parent opacity: Config.options.background.clock.cookie.dialNumberStyle === "full" ? 1.0 : 0 Behavior on opacity { animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) } - required property int index - rotation: 360 / 12 * index - anchors.fill: parent Rectangle { + implicitWidth: root.hourLineSize * 3.5 + implicitHeight: root.hourLineSize + radius: implicitWidth / 2 + color: root.colOnBackground anchors { left: parent.left verticalCenter: parent.verticalCenter @@ -453,11 +449,6 @@ Item { Behavior on anchors.leftMargin{ animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) } - implicitWidth: root.hourLineSize * 3.5 - implicitHeight: root.hourLineSize - radius: implicitWidth / 2 - color: root.colOnBackground - opacity: 1.0 } } } @@ -465,14 +456,19 @@ Item { Repeater { model: 60 Item { + required property int index + rotation: 360 / 60 * index + anchors.fill: parent opacity: Config.options.background.clock.cookie.dialNumberStyle === "full" ? 1.0 : 0 Behavior on opacity { animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) } - required property int index - rotation: 360 / 60 * index - anchors.fill: parent Rectangle { + implicitWidth: root.minuteLineSize * 3.5 + implicitHeight: root.minuteLineSize + radius: implicitWidth / 2 + color: root.colOnBackground + opacity: 0.5 anchors { left: parent.left verticalCenter: parent.verticalCenter @@ -481,11 +477,6 @@ Item { Behavior on anchors.leftMargin{ animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) } - implicitWidth: root.minuteLineSize * 3.5 - implicitHeight: root.minuteLineSize - radius: implicitWidth / 2 - color: root.colOnBackground - opacity: 0.5 } } } diff --git a/.config/quickshell/ii/modules/common/Config.qml b/.config/quickshell/ii/modules/common/Config.qml index cfd38cc50..10f688520 100644 --- a/.config/quickshell/ii/modules/common/Config.qml +++ b/.config/quickshell/ii/modules/common/Config.qml @@ -131,11 +131,11 @@ Singleton { property real scale: 1 property int clockSides: 12 property JsonObject cookie: JsonObject { - property string dialNumberStyle: "dots" // Options: "dots" , "numbers", "full" , "none" - property string hourHandStyle: "fill" // Options: "fill", "stroke" + property string dialNumberStyle: "dots" // Options: "dots" , "numbers", "full" , "none" + property string hourHandStyle: "fill" // Options: "fill", "stroke" property string minuteHandStyle: "medium" // Options: "medium", "bold" - property string secondHandStyle: "dot" // Options: "dot", "line" , "none" - property string dateStyle: "rotating" // Options: "rotating", "square", "none" + property string secondHandStyle: "dot" // Options: "dot", "line" , "none" + property string dateStyle: "rotating" // Options: "rotating", "square", "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 20aed3474..0e78e5251 100644 --- a/.config/quickshell/ii/modules/settings/InterfaceConfig.qml +++ b/.config/quickshell/ii/modules/settings/InterfaceConfig.qml @@ -205,28 +205,28 @@ ContentPage { } ContentSubsection { - enabled: Config.options.background.clock.style === "cookie" - visible: Config.options.background.clock.style === "cookie" - title: Translation.tr("Hour hand style") - ConfigSelectionArray { - currentValue: Config.options.background.clock.cookie.hourHandStyle - onSelected: newValue => { - Config.options.background.clock.cookie.hourHandStyle = newValue; - } - options: [ - { - displayName: Translation.tr("Fill"), - icon: "stroke_full", - value: "fill" - }, - { - displayName: Translation.tr("Stroke"), - icon: "stroke_partial", - value: "stroke" - } - ] + enabled: Config.options.background.clock.style === "cookie" + visible: Config.options.background.clock.style === "cookie" + title: Translation.tr("Hour hand style") + ConfigSelectionArray { + currentValue: Config.options.background.clock.cookie.hourHandStyle + onSelected: newValue => { + Config.options.background.clock.cookie.hourHandStyle = newValue; } + options: [ + { + displayName: Translation.tr("Fill"), + icon: "stroke_full", + value: "fill" + }, + { + displayName: Translation.tr("Stroke"), + icon: "stroke_partial", + value: "stroke" + } + ] } + } ConfigSpinBox { enabled: Config.options.background.clock.style === "cookie" @@ -241,6 +241,7 @@ ContentPage { Config.options.background.clock.clockSides = value; } } + ConfigSwitch { enabled: Config.options.background.clock.style === "cookie" visible: Config.options.background.clock.style === "cookie"