mirror of
https://github.com/end-4/dots-hyprland.git
synced 2026-06-05 14:59:27 -05:00
added center glow , wave animation etc.
This commit is contained in:
@@ -24,6 +24,9 @@ Item {
|
||||
property real minuteHandWidth: Config.options.background.clock.cookie.minuteHandSizeAdjust ? hourHandWidth : 12
|
||||
property real centerDotSize: 10
|
||||
property real hourDotSize: 12
|
||||
property real centerGlowSize: 135
|
||||
|
||||
|
||||
|
||||
property color colShadow: Appearance.colors.colShadow
|
||||
property color colBackground: Appearance.colors.colSecondaryContainer
|
||||
@@ -31,10 +34,11 @@ Item {
|
||||
property color colHourHand: Appearance.colors.colPrimary
|
||||
property color colMinuteHand: Appearance.colors.colSecondaryActive
|
||||
property color colOnHourHand: Appearance.colors.colOnPrimary
|
||||
|
||||
property color colTimeIndicators: Appearance.colors.colSecondaryContainerHover
|
||||
readonly property list<string> clockNumbers: DateTime.time.split(/[: ]/)
|
||||
readonly property int clockHour: parseInt(clockNumbers[0]) % 12
|
||||
readonly property int clockMinute: parseInt(clockNumbers[1])
|
||||
|
||||
|
||||
implicitWidth: implicitSize
|
||||
implicitHeight: implicitSize
|
||||
@@ -72,7 +76,10 @@ Item {
|
||||
Repeater {
|
||||
model: 12
|
||||
Item {
|
||||
visible: Config.options.background.clock.cookie.hourDots
|
||||
opacity: Config.options.background.clock.cookie.hourDots ? 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
|
||||
@@ -90,6 +97,41 @@ Item {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Center glow behind the cookie
|
||||
Rectangle {
|
||||
id: glowLines
|
||||
z: 1
|
||||
anchors.centerIn: cookie
|
||||
Repeater {
|
||||
model: 12
|
||||
Item {
|
||||
opacity: Config.options.background.clock.cookie.centerGlow ? 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: 50
|
||||
}
|
||||
implicitWidth: root.hourDotSize
|
||||
implicitHeight: implicitWidth / 2
|
||||
radius: implicitWidth / 2
|
||||
color: root.colOnBackground
|
||||
opacity: Config.options.background.clock.cookie.centerGlow ? 0.5 : 0
|
||||
Behavior on opacity {
|
||||
animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Column {
|
||||
@@ -97,7 +139,6 @@ Item {
|
||||
z: 1
|
||||
anchors.centerIn: cookie
|
||||
spacing: -16
|
||||
visible: Config.options.background.clock.cookie.timeIndicators
|
||||
|
||||
// Numbers
|
||||
Repeater {
|
||||
@@ -105,9 +146,19 @@ Item {
|
||||
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 { // LOOK
|
||||
animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
|
||||
}
|
||||
anchors.horizontalCenter: parent?.horizontalCenter
|
||||
font {
|
||||
pixelSize: modelData.match(/am|pm/i) ? 26 : 68
|
||||
// A better way to do this? probably yes, do i know : no
|
||||
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
|
||||
Behavior on pixelSize {
|
||||
animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
|
||||
}
|
||||
family: Appearance.font.family.expressive
|
||||
weight: Font.Bold
|
||||
}
|
||||
@@ -138,6 +189,9 @@ Item {
|
||||
z: 3
|
||||
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
|
||||
@@ -149,7 +203,10 @@ Item {
|
||||
|
||||
// Center dot
|
||||
Rectangle {
|
||||
visible: !Config.options.background.clock.cookie.minuteHandSizeAdjust
|
||||
opacity: !Config.options.background.clock.cookie.minuteHandSizeAdjust ? 1.0 : 0 // Not using visible to allow smooth transition
|
||||
Behavior on opacity {
|
||||
animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
|
||||
}
|
||||
z: 4
|
||||
color: root.colOnHourHand
|
||||
anchors.centerIn: parent
|
||||
@@ -158,6 +215,17 @@ Item {
|
||||
radius: implicitWidth / 2
|
||||
}
|
||||
|
||||
// Center glow
|
||||
Rectangle {
|
||||
visible: Config.options.background.clock.cookie.centerGlow
|
||||
z: 0
|
||||
color: root.colTimeIndicators
|
||||
anchors.centerIn: parent
|
||||
implicitWidth: centerGlowSize
|
||||
implicitHeight: centerGlowSize
|
||||
radius: implicitWidth / 2
|
||||
}
|
||||
|
||||
// Quote
|
||||
Rectangle{
|
||||
id: quoteBox
|
||||
|
||||
@@ -134,6 +134,8 @@ Singleton {
|
||||
property bool hourDots: true
|
||||
property bool timeIndicators: true
|
||||
property bool minuteHandSizeAdjust: true
|
||||
property bool centerGlow: true
|
||||
property bool waveAnimation: true
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
import QtQuick
|
||||
import QtQuick.Shapes
|
||||
import Quickshell
|
||||
import qs.modules.common
|
||||
|
||||
|
||||
Item {
|
||||
id: root
|
||||
@@ -12,9 +14,25 @@ Item {
|
||||
property color color: "#605790"
|
||||
property alias strokeWidth: shapePath.strokeWidth
|
||||
|
||||
property bool waveAnimation: Config.options.background.clock.cookie.waveAnimation
|
||||
|
||||
|
||||
implicitWidth: implicitSize
|
||||
implicitHeight: implicitSize
|
||||
|
||||
property real waveTime: 0
|
||||
Loader{
|
||||
active: waveAnimation
|
||||
sourceComponent: Timer{
|
||||
interval: 16 // Does it effect performance, probably, is it noticeable, not really
|
||||
running: true; repeat: true
|
||||
onTriggered: {
|
||||
root.waveTime += 0.05
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Shape {
|
||||
id: shape
|
||||
anchors.fill: parent
|
||||
@@ -35,7 +53,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 = Math.sin(angle * root.sides + Math.PI/2) * root.amplitude
|
||||
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 x = Math.cos(angle) * (radius + wave) + cx
|
||||
var y = Math.sin(angle) * (radius + wave) + cy
|
||||
points.push(Qt.point(x, y))
|
||||
@@ -45,6 +63,7 @@ Item {
|
||||
|
||||
path: pointsList
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -69,16 +69,41 @@ ContentPage {
|
||||
}
|
||||
}
|
||||
|
||||
ConfigSpinBox {
|
||||
ConfigRow{
|
||||
enabled: Config.options.background.clock.style === "cookie"
|
||||
icon: "support"
|
||||
text: Translation.tr("Clock sides")
|
||||
value: Config.options.background.clock.clockSides
|
||||
from: 1
|
||||
to: 36
|
||||
stepSize: 1
|
||||
onValueChanged: {
|
||||
Config.options.background.clock.clockSides = value;
|
||||
ConfigSpinBox {
|
||||
icon: "support"
|
||||
text: Translation.tr("Clock sides")
|
||||
value: Config.options.background.clock.clockSides
|
||||
from: 1
|
||||
to: 36
|
||||
stepSize: 1
|
||||
onValueChanged: {
|
||||
Config.options.background.clock.clockSides = value;
|
||||
}
|
||||
}
|
||||
ConfigSwitch {
|
||||
enabled: Config.options.background.clock.cookie.hourDots
|
||||
buttonIcon: "brightness_7"
|
||||
text: Translation.tr("Center glow")
|
||||
checked: Config.options.background.clock.cookie.centerGlow
|
||||
onEnabledChanged: {
|
||||
checked = Config.options.background.clock.cookie.centerGlow
|
||||
}
|
||||
onCheckedChanged: {
|
||||
Config.options.background.clock.cookie.centerGlow = checked;
|
||||
}
|
||||
}
|
||||
ConfigSwitch {
|
||||
buttonIcon: "waves"
|
||||
text: Translation.tr("Wave animation")
|
||||
checked: Config.options.background.clock.cookie.waveAnimation
|
||||
onCheckedChanged: {
|
||||
Config.options.background.clock.cookie.waveAnimation = checked;
|
||||
}
|
||||
StyledToolTip {
|
||||
text: "It may effect performance"
|
||||
}
|
||||
}
|
||||
}
|
||||
ConfigRow{
|
||||
@@ -89,6 +114,7 @@ ContentPage {
|
||||
checked: Config.options.background.clock.cookie.hourDots
|
||||
onCheckedChanged: {
|
||||
Config.options.background.clock.cookie.hourDots = checked;
|
||||
Config.options.background.clock.cookie.centerGlow = checked ? Config.options.background.clock.cookie.centerGlow : false;
|
||||
}
|
||||
}
|
||||
ConfigSwitch {
|
||||
|
||||
Reference in New Issue
Block a user