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 color color: Appearance.colors.colOnSecondaryContainer
property string style: Config.options.background.clock.cookie.dialNumberStyle // "dots", "numbers", "full", "hide"
property string dateStyle : Config.options.background.clock.cookie.dateStyle
Repeater {
model: 12
@@ -64,7 +65,7 @@ Item {
anchors {
left: parent.left
verticalCenter: parent.verticalCenter
leftMargin: root.style === "numbers" ? 32 : 96
leftMargin: root.style === "numbers" ? root.dateStyle === "rotating" ? 48 : 32 : 96
}
Behavior on anchors.leftMargin {
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
font {
family: Appearance.font.family.reading
pixelSize: 80
pixelSize: root.dateStyle === "rotating" ? 70 : 80
weight: 1000
}
Behavior on font.pixelSize {
animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
}
}
}
}
.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RotatingDate.qml
+28 -30
View File
@@ -6,44 +6,42 @@ import qs.modules.common
import qs.modules.common.widgets
import QtQuick
Canvas {
z: 0
Item {
id: root
opacity: root.style === "rotating" ? 1.0 : 0
Behavior on opacity {
animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
}
property real radius: 65
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: {
if (!Config.options.time.secondPrecision)
return 0;
return (secondHandLoader.item.rotation + 45); // +45 degrees to align text's center
if (!Config.options.time.secondPrecision) return 0
else return secondHandLoader.item.rotation + 45 // +45 to center the text
}
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");
var radius = 65;
var angleStep = Math.PI / 2.35 / text.length;
Repeater {
model: root.dateText.length
for (var i = 0; i < text.length; i++) {
var angle = i * angleStep - Math.PI / 2;
var x = width / 2 + radius * Math.cos(angle);
var y = height / 2 + radius * Math.sin(angle);
delegate: Text {
required property int index
property real angle: index * root.angleStep - Math.PI / 2
ctx.save();
ctx.translate(x, y);
ctx.rotate(angle + Math.PI / 2);
x: root.width / 2 + root.radius * Math.cos(angle) - width / 2
y: root.height / 2 + root.radius * Math.sin(angle) - height / 2
if (i >= 3)
ctx.fillStyle = root.colOnBackground;
else
ctx.fillStyle = Appearance.colors.colSecondaryHover;
text: root.dateText.charAt(index)
font.family: Appearance.font.family.title
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();
}
}
}
}