kenji/illogical-impulse
1
0
Fork 0
forked from Shinonome/dots-hyprland
Code Pull Requests Activity

refactor 'rotating' date indicator with repeater/text

Browse Source
This commit is contained in:
darksignal7
2025-10-08 18:53:45 +03:00
parent 68ea59328e
commit 6c23d482dd
2 changed files with 34 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.config/quickshell/ii/modules/background/cookieClock/MinuteMarks.qml
+6 -2
View File
@@ -16,6 +16,7 @@ Item {
property int minuteLineSize: 4 property int minuteLineSize: 4
property color color: Appearance.colors.colOnSecondaryContainer property color color: Appearance.colors.colOnSecondaryContainer
property string style: Config.options.background.clock.cookie.dialNumberStyle // "dots", "numbers", "full", "hide" property string style: Config.options.background.clock.cookie.dialNumberStyle // "dots", "numbers", "full", "hide"
property string dateStyle : Config.options.background.clock.cookie.dateStyle
Repeater { Repeater {
model: 12 model: 12
@@ -64,7 +65,7 @@ Item {
anchors { anchors {
left: parent.left left: parent.left
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
leftMargin: root.style === "numbers" ? 32 : 96 leftMargin: root.style === "numbers" ? root.dateStyle === "rotating" ? 48 : 32 : 96
} }
Behavior on anchors.leftMargin { Behavior on anchors.leftMargin {
animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
@@ -78,9 +79,12 @@ Item {
rotation: numberItem.index % 2 === 0 ? numberItem.index * 90 : -numberItem.index * 90 //A better way can be found to show texts on right angle rotation: numberItem.index % 2 === 0 ? numberItem.index * 90 : -numberItem.index * 90 //A better way can be found to show texts on right angle
font { font {
family: Appearance.font.family.reading family: Appearance.font.family.reading
pixelSize: 80 pixelSize: root.dateStyle === "rotating" ? 70 : 80
weight: 1000 weight: 1000
} }
Behavior on font.pixelSize {
animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
}
} }
} }
} }
.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RotatingDate.qml
+27 -29
View File
@@ -6,44 +6,42 @@ import qs.modules.common
import qs.modules.common.widgets import qs.modules.common.widgets
import QtQuick import QtQuick
Canvas { Item {
z: 0 id: root
opacity: root.style === "rotating" ? 1.0 : 0 property real radius: 65
Behavior on opacity {
animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) property string dateText: Qt.locale().toString(DateTime.clock.date, "ddd dd")
} property real angleStep: Math.PI / 2.35 / dateText.length
property color dayColor: Appearance.colors.colSecondary
property color monthColor: Appearance.colors.colSecondaryHover
rotation: { rotation: {
if (!Config.options.time.secondPrecision) if (!Config.options.time.secondPrecision) return 0
return 0; else return secondHandLoader.item.rotation + 45 // +45 to center the text
return (secondHandLoader.item.rotation + 45); // +45 degrees to align text's center
} }
onPaint: {
var ctx = getContext("2d");
ctx.clearRect(0, 0, width, height);
ctx.font = "700 30px " + Appearance.font.family.title;
var text = Qt.locale().toString(DateTime.clock.date, "ddd dd"); Repeater {
var radius = 65; model: root.dateText.length
var angleStep = Math.PI / 2.35 / text.length;
for (var i = 0; i < text.length; i++) { delegate: Text {
var angle = i * angleStep - Math.PI / 2; required property int index
var x = width / 2 + radius * Math.cos(angle); property real angle: index * root.angleStep - Math.PI / 2
var y = height / 2 + radius * Math.sin(angle);
ctx.save(); x: root.width / 2 + root.radius * Math.cos(angle) - width / 2
ctx.translate(x, y); y: root.height / 2 + root.radius * Math.sin(angle) - height / 2
ctx.rotate(angle + Math.PI / 2);
if (i >= 3) text: root.dateText.charAt(index)
ctx.fillStyle = root.colOnBackground;
else font.family: Appearance.font.family.title
ctx.fillStyle = Appearance.colors.colSecondaryHover; font.pixelSize: 30
font.weight: Font.DemiBold
color: index < 3 ? root.dayColor : root.monthColor
rotation: angle * 180 / Math.PI + 90
ctx.fillText(text[i], 0, 0);
ctx.restore();
} }
} }
} }