diff --git a/.config/quickshell/ii/modules/background/CookieClock.qml b/.config/quickshell/ii/modules/background/CookieClock.qml index 8ab69e3e5..a49eae3f2 100644 --- a/.config/quickshell/ii/modules/background/CookieClock.qml +++ b/.config/quickshell/ii/modules/background/CookieClock.qml @@ -21,7 +21,8 @@ Item { property real hourHandLength: 72 property real hourHandWidth: 20 property real minuteHandLength: 95 - property real minuteHandWidth: Config.options.background.clock.cookie.minuteHandStyle === "bold" ? hourHandWidth : 12 + property real minuteHandWidth: Config.options.background.clock.cookie.minuteHandStyle === "bold" ? hourHandWidth : + Config.options.background.clock.cookie.minuteHandStyle === "medium" ? 12 : 6 property real centerDotSize: 10 property real hourDotSize: 12 property real centerGlowSize: 135 @@ -92,34 +93,39 @@ Item { sides: Config.options.background.clock.clockSides color: root.colBackground - // 12 dots around the cookie - Repeater { - model: 12 - Item { - opacity: Config.options.background.clock.cookie.dialNumberStyle === "dots" ? 1.0 : 0 // Not using visible to allow smooth transition - Behavior on opacity { + + } + + // 12 dots around the cookie + Repeater { + model: 12 + Item { + opacity: Config.options.background.clock.cookie.dialNumberStyle === "dots" ? 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: Config.options.background.clock.cookie.dialNumberStyle === "dots" ? 10 : 50 + } + Behavior on anchors.leftMargin{ 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: 10 - } - implicitWidth: root.hourDotSize - implicitHeight: implicitWidth - radius: implicitWidth / 2 - color: root.colOnBackground - opacity: 0.5 - } + implicitWidth: root.hourDotSize + implicitHeight: implicitWidth + radius: implicitWidth / 2 + color: root.colOnBackground + opacity: 0.5 } } } - // Center glow behind the cookie + // Center glow lines Rectangle { id: glowLines z: 1 @@ -138,7 +144,7 @@ Item { anchors { left: parent.left verticalCenter: parent.verticalCenter - leftMargin: 50 + leftMargin: Config.options.background.clock.cookie.centerGlow ? 50 : 75 } implicitWidth: root.hourDotSize implicitHeight: implicitWidth / 2 @@ -148,6 +154,9 @@ Item { Behavior on opacity { animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) } + Behavior on anchors.leftMargin{ + animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) + } } } } @@ -167,15 +176,17 @@ Item { 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 + Behavior on opacity { animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) } anchors.horizontalCenter: parent?.horizontalCenter 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.centerGlow ? numberSizeWithGlow : numberSizeWithoutGlow + pixelSize: !Config.options.background.clock.cookie.timeIndicators ? 100 : // for open/close animation + Config.options.background.clock.cookie.centerGlow ? numberSizeWithGlow : numberSizeWithoutGlow Behavior on pixelSize { animation: Appearance.animation.elementResize.numberAnimation.createObject(this) } @@ -191,7 +202,7 @@ Item { // Hour hand Item { anchors.fill: parent - z: 2 + z: 3 rotation: -90 + (360 / 12) * (root.clockHour + root.clockMinute / 60) Rectangle { anchors.verticalCenter: parent.verticalCenter @@ -206,7 +217,7 @@ Item { // Minute hand Item { anchors.fill: parent - z: 3 + z: Config.options.background.clock.cookie.minuteHandStyle === "thin" ? 1 : 3 Behavior on rotation{ animation: Appearance.animation.elementResize.numberAnimation.createObject(this) } @@ -240,20 +251,28 @@ Item { // Center glow Rectangle { - visible: Config.options.background.clock.cookie.centerGlow + 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 } + } + } z: 0 color: root.colTimeIndicators anchors.centerIn: parent - implicitWidth: centerGlowSize - implicitHeight: centerGlowSize + implicitWidth: Config.options.background.clock.cookie.centerGlow ? centerGlowSize : centerGlowSize * 1.75 + implicitHeight: implicitWidth radius: implicitWidth / 2 } - // Second hand/ dot + // Second hand/dot Item { id: secondHand - z:3 + 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 Behavior on opacity { animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) @@ -264,6 +283,7 @@ Item { rotation: (360 / 60 * clockSecond) + 90 // +90 degrees to align with minute hand anchors.fill: parent Rectangle { + Behavior on implicitHeight { animation: Appearance.animation.elementResize.numberAnimation.createObject(this) } @@ -282,12 +302,14 @@ Item { } } - // Date + // Date (the rotating one with the second hand) Canvas { + z: 0 width: cookie.width height: cookie.height rotation: secondHand.rotation + 45 // +45 degrees to align with minute hand - opacity: Config.options.background.clock.cookie.dateInClock ? 1.0 : 0 + opacity: Config.options.background.clock.cookie.dateStyle === "rotating" ? 1.0 : 0 + Behavior on opacity { animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) } @@ -319,8 +341,40 @@ Item { } } } + + // Date(only today's number) in right side of the clock + Rectangle{ + 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 + anchors{ + verticalCenter: cookie.verticalCenter + right: cookie.right + rightMargin: 10 + } + color: root.colOnBackground + radius: Appearance.rounding.small // LOOK + StyledText{ + opacity: Config.options.background.clock.cookie.dateStyle === "square" ? 1.0 : 0 + Behavior on opacity{ + animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) + } + anchors.centerIn: parent + color: root.colHourHand + text: DateTime.date.substring(5,7) + font { + family: Appearance.font.family.expressive + pixelSize: 20 + weight: 1000 + } + } + } - // Hour Indicator numbers + // Hour Indicator numbers (3-6-9-12) Repeater { model: 4 Item { @@ -335,13 +389,14 @@ Item { anchors { left: parent.left verticalCenter: parent.verticalCenter - leftMargin: 32 + leftMargin: Config.options.background.clock.cookie.dialNumberStyle === "numbers" ? 32 : 96 + } + Behavior on anchors.leftMargin{ + animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) } implicitWidth: root.hourNumberSize implicitHeight: implicitWidth - //radius: implicitWidth / 2 color: "transparent" - //opacity: 0.5 StyledText{ color: root.colOnBackground diff --git a/.config/quickshell/ii/modules/common/Config.qml b/.config/quickshell/ii/modules/common/Config.qml index 2ce21ac8a..43bdb8e76 100644 --- a/.config/quickshell/ii/modules/common/Config.qml +++ b/.config/quickshell/ii/modules/common/Config.qml @@ -134,6 +134,7 @@ Singleton { property string dialNumberStyle: "dots" // Options: "dots" , "numbers", "none" property string minuteHandStyle: "medium" // Options: "medium", "bold" 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/common/widgets/MaterialCookie.qml b/.config/quickshell/ii/modules/common/widgets/MaterialCookie.qml index 587fdd541..47e75cff2 100644 --- a/.config/quickshell/ii/modules/common/widgets/MaterialCookie.qml +++ b/.config/quickshell/ii/modules/common/widgets/MaterialCookie.qml @@ -8,6 +8,7 @@ Item { id: root property int sides: 12 + property real animatedSides: 12 property int implicitSize: 100 property real amplitude: implicitSize / 50 property int renderPoints: 360 @@ -32,6 +33,13 @@ Item { } } + onSidesChanged: NumberAnimation { + target: root + property: "animatedSides" + to: root.sides + duration: 100 + easing.type: Easing.InOutQuad + } Shape { id: shape @@ -53,7 +61,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 = waveAnimation ? Math.sin(angle * root.sides + Math.PI/2 - root.waveTime) * root.amplitude : Math.sin(angle * root.sides + Math.PI/2) * root.amplitude + var wave = waveAnimation ? Math.sin(angle * root.animatedSides + Math.PI/2 - root.waveTime) * root.amplitude : Math.sin(angle * root.animatedSides + 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)) diff --git a/.config/quickshell/ii/modules/settings/InterfaceConfig.qml b/.config/quickshell/ii/modules/settings/InterfaceConfig.qml index c2bfd0c32..25b7eed36 100644 --- a/.config/quickshell/ii/modules/settings/InterfaceConfig.qml +++ b/.config/quickshell/ii/modules/settings/InterfaceConfig.qml @@ -87,6 +87,7 @@ ContentPage { } if (newValue != "none"){ Config.options.background.clock.cookie.dateInClock = false; + Config.options.background.clock.cookie.dateStyle = "none"; } } options: [ @@ -138,27 +139,62 @@ ContentPage { } } - ContentSubsection { - enabled: Config.options.background.clock.style === "cookie" - visible: Config.options.background.clock.style === "cookie" - title: Translation.tr("Minute hand style") - ConfigSelectionArray { - currentValue: Config.options.background.clock.cookie.minuteHandStyle - onSelected: newValue => { - Config.options.background.clock.cookie.minuteHandStyle = newValue; + ConfigRow{ + ContentSubsection { + enabled: Config.options.background.clock.style === "cookie" + visible: Config.options.background.clock.style === "cookie" + title: Translation.tr("Minute hand style") + ConfigSelectionArray { + currentValue: Config.options.background.clock.cookie.minuteHandStyle + onSelected: newValue => { + Config.options.background.clock.cookie.minuteHandStyle = newValue; + } + options: [ + { + displayName: Translation.tr("Thin"), + icon: "pen_size_1", + value: "thin" + }, + { + displayName: Translation.tr("Medium"), + icon: "pen_size_3", + value: "medium" + }, + { + displayName: Translation.tr("Bold"), + icon: "pen_size_5", + value: "bold" + } + ] + } + } + ContentSubsection { + enabled: Config.options.background.clock.style === "cookie" && Config.options.background.clock.cookie.dialNumberStyle === "none" + visible: Config.options.background.clock.style === "cookie" + title: Translation.tr("Date style") + ConfigSelectionArray { + currentValue: Config.options.background.clock.cookie.dateStyle + onSelected: newValue => { + Config.options.background.clock.cookie.dateStyle = newValue; + } + options: [ + { + displayName: Translation.tr("None"), + icon: "deselect", + value: "none" + }, + { + displayName: Translation.tr("Rotating"), + icon: "rotate_right", + value: "rotating" + }, + { + displayName: Translation.tr("Square"), + icon: "square", + value: "square" + } + ] } - options: [ - { - displayName: Translation.tr("Medium"), - icon: "pen_size_1", - value: "medium" - }, - { - displayName: Translation.tr("Bold"), - icon: "pen_size_5", - value: "bold" - }, - ] } } @@ -224,22 +260,6 @@ ContentPage { text: "Can't be turned on when using 'Numbers' dial style for aesthetic reasons" } } - ConfigSwitch { - enabled: Config.options.background.clock.style === "cookie" && Config.options.background.clock.cookie.dialNumberStyle === "none" - visible: Config.options.background.clock.style === "cookie" - buttonIcon: "date_range" - text: Translation.tr("Date inside clock") - checked: Config.options.background.clock.cookie.dateInClock - onEnabledChanged: { - checked = Config.options.background.clock.cookie.dateInClock - } - onCheckedChanged: { - Config.options.background.clock.cookie.dateInClock = checked; - } - StyledToolTip { - text: "Can only be turned on when not using any dial style for aesthetic reasons" - } - } }