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

date indicator: put each style in a loader

Browse Source
This commit is contained in:
end-4
2025-10-07 17:43:37 +02:00
parent c70b8f7aa2
commit d70e5c396f
2 changed files with 121 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.config/quickshell/ii/modules/background/cookieClock/CookieClock.qml
+1
View File
@@ -149,6 +149,7 @@ Item {
anchors.fill: parent anchors.fill: parent
colOnBackground: root.colOnBackground colOnBackground: root.colOnBackground
style: Config.options.background.clock.cookie.dateStyle style: Config.options.background.clock.cookie.dateStyle
dateSquareSize: root.dateSquareSize
} }
} }
.config/quickshell/ii/modules/background/cookieClock/DateIndicator.qml
+120 -110
View File
@@ -11,167 +11,177 @@ Item {
id: root id: root
property string style: "rotating" property string style: "rotating"
property color colOnBackground: Appearance.colors.colOnSecondaryContainer property color colOnBackground: Appearance.colors.colOnSecondaryContainer
property color colOnSecondary: Appearance.colors.colOnSecondaryContainer property color colBackground: Appearance.colors.colOnSecondaryContainer
property real dateSquareSize: 64
Canvas { Loader {
z: 0
anchors.fill: parent anchors.fill: parent
rotation: {
if (!Config.options.time.secondPrecision) return 0;
return (secondHandLoader.item.rotation + 45); // +45 degrees to align text's center
}
opacity: root.style === "rotating" ? 1.0 : 0 opacity: root.style === "rotating" ? 1.0 : 0
Behavior on opacity { Behavior on opacity {
animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
} }
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"); active: opacity > 0
var radius = 78; sourceComponent: Canvas {
var angleStep = Math.PI / 2.35 / text.length; z: 0
rotation: {
if (!Config.options.time.secondPrecision)
return 0;
return (secondHandLoader.item.rotation + 45); // +45 degrees to align text's center
}
for (var i = 0; i < text.length; i++) { onPaint: {
var angle = i * angleStep - Math.PI / 2; var ctx = getContext("2d");
var x = width / 2 + radius * Math.cos(angle); ctx.clearRect(0, 0, width, height);
var y = height / 2 + radius * Math.sin(angle); ctx.font = "700 30px " + Appearance.font.family.title;
ctx.save(); var text = Qt.locale().toString(DateTime.clock.date, "ddd dd");
ctx.translate(x, y); var radius = 78;
ctx.rotate(angle + Math.PI / 2); var angleStep = Math.PI / 2.35 / text.length;
if (i >= 3) for (var i = 0; i < text.length; i++) {
ctx.fillStyle = root.colOnBackground; var angle = i * angleStep - Math.PI / 2;
else var x = width / 2 + radius * Math.cos(angle);
ctx.fillStyle = Appearance.colors.colSecondaryHover; var y = height / 2 + radius * Math.sin(angle);
ctx.fillText(text[i], 0, 0); ctx.save();
ctx.restore(); ctx.translate(x, y);
ctx.rotate(angle + Math.PI / 2);
if (i >= 3)
ctx.fillStyle = root.colOnBackground;
else
ctx.fillStyle = Appearance.colors.colSecondaryHover;
ctx.fillText(text[i], 0, 0);
ctx.restore();
}
} }
} }
} }
// Square date (only today's number) in right side of the clock // Square date (only today's number) in right side of the clock
Rectangle { Loader {
z: 1
implicitWidth: root.style === "rect" ? 45 : 0
implicitHeight: root.style === "rect" ? 30 : 0
color: root.colOnSecondary
radius: Appearance.rounding.small
anchors { anchors {
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
right: parent.right right: parent.right
rightMargin: 10 rightMargin: 10
} }
Behavior on implicitHeight { width: root.style === "rect" ? 45 : 0
height: root.style === "rect" ? 30 : 0
Behavior on width {
animation: Appearance.animation.elementResize.numberAnimation.createObject(this) animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
} }
Behavior on implicitWidth { Behavior on height {
animation: Appearance.animation.elementResize.numberAnimation.createObject(this) animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
} }
StyledText { active: height > 0
opacity: root.style === "rect" ? 1.0 : 0 sourceComponent: Rectangle {
Behavior on opacity { z: 1
animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) color: root.colBackground
} radius: Appearance.rounding.small
anchors.centerIn: parent StyledText {
color: Appearance.colors.colSecondaryHover opacity: root.style === "rect" ? 1.0 : 0
text: DateTime.date.substring(5, 7) Behavior on opacity {
font { animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
family: Appearance.font.family.expressive }
pixelSize: 20 anchors.centerIn: parent
weight: 1000 color: Appearance.colors.colSecondaryHover
text: DateTime.date.substring(5, 7)
font {
family: Appearance.font.family.expressive
pixelSize: 20
weight: 1000
}
} }
} }
} }
// Date bubble style left side // Date bubble style left side
Item { Loader {
width: root.style === "bubble" ? dateSquareSize : 0
height: root.style === "bubble" ? dateSquareSize : 0
anchors { anchors {
left: parent.left left: parent.left
bottom: parent.bottom bottom: parent.bottom
topMargin: 50 topMargin: 50
} }
Behavior on width { property real targetSize: root.style === "bubble" ? root.dateSquareSize : 0
width: targetSize
height: targetSize
Behavior on targetSize {
animation: Appearance.animation.elementResize.numberAnimation.createObject(this) animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
} }
Behavior on height { active: targetSize > 0
animation: Appearance.animation.elementResize.numberAnimation.createObject(this) sourceComponent: Item {
} MaterialCookie {
MaterialCookie { z: 5
z: 5 sides: 4
sides: 4 anchors.centerIn: parent
anchors.centerIn: parent color: Appearance.colors.colPrimaryContainer
color: Appearance.colors.colPrimaryContainer implicitSize: root.style === "bubble" ? root.dateSquareSize : 0
implicitSize: root.style === "bubble" ? dateSquareSize : 0 constantlyRotate: Config.options.background.clock.cookie.constantlyRotate
constantlyRotate: Config.options.background.clock.cookie.constantlyRotate Behavior on implicitSize {
Behavior on implicitSize { animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
animation: Appearance.animation.elementResize.numberAnimation.createObject(this) }
} }
} StyledText {
StyledText { z: 6
z: 6 anchors.centerIn: parent
anchors.centerIn: parent text: DateTime.date.substring(5, 7)
text: DateTime.date.substring(5, 7) color: Appearance.colors.colPrimary
color: Appearance.colors.colPrimary opacity: root.style === "bubble" ? 1.0 : 0
opacity: root.style === "bubble" ? 1.0 : 0 font {
font { family: Appearance.font.family.expressive
family: Appearance.font.family.expressive pixelSize: 30
pixelSize: 30 weight: 1000
weight: 1000 }
} Behavior on opacity {
Behavior on opacity { animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) }
} }
} }
} }
// Date bubble style right side // Date bubble style right side
Item { Loader {
width: root.style === "bubble" ? dateSquareSize : 0
height: root.style === "bubble" ? dateSquareSize : 0
anchors { anchors {
right: parent.right right: parent.right
top: parent.top top: parent.top
bottomMargin: 50 bottomMargin: 50
} }
Behavior on width { property real targetSize: root.style === "bubble" ? root.dateSquareSize : 0
width: targetSize
height: targetSize
Behavior on targetSize {
animation: Appearance.animation.elementResize.numberAnimation.createObject(this) animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
} }
Behavior on height {
animation: Appearance.animation.elementResize.numberAnimation.createObject(this) active: targetSize > 0
} sourceComponent: Item {
MaterialCookie { MaterialCookie {
z: 5 z: 5
sides: 1 sides: 1
anchors.centerIn: parent anchors.centerIn: parent
color: Appearance.colors.colTertiaryContainer color: Appearance.colors.colTertiaryContainer
implicitSize: root.style === "bubble" ? dateSquareSize : 0 implicitSize: root.style === "bubble" ? root.dateSquareSize : 0
constantlyRotate: Config.options.background.clock.cookie.constantlyRotate constantlyRotate: Config.options.background.clock.cookie.constantlyRotate
Behavior on implicitSize { Behavior on implicitSize {
animation: Appearance.animation.elementResize.numberAnimation.createObject(this) animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
}
} }
} StyledText {
StyledText { z: 6
z: 6 anchors.centerIn: parent
anchors.centerIn: parent text: DateTime.date.substring(8, 10)
text: DateTime.date.substring(8, 10) color: Appearance.colors.colTertiary
color: Appearance.colors.colTertiary opacity: root.style === "bubble" ? 1.0 : 0
opacity: root.style === "bubble" ? 1.0 : 0 font {
font { family: Appearance.font.family.expressive
family: Appearance.font.family.expressive pixelSize: 30
pixelSize: 30 weight: 1000
weight: 1000 }
} Behavior on opacity {
Behavior on opacity { animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) }
} }
} }
} }