Compare commits

..

No commits in common. "81d0da4cd713fbfb15a6e3d00f29049e864e4c8b" and "bf40be76c5f09d149a9730eb99dd887edc238fe1" have entirely different histories.

View file

@ -1,5 +1,4 @@
import QtQuick import QtQuick
import QtQuick.Effects
import Quickshell import Quickshell
import Quickshell.Wayland import Quickshell.Wayland
import "." as M import "." as M
@ -28,163 +27,69 @@ PanelWindow {
Column { Column {
anchors.centerIn: parent anchors.centerIn: parent
spacing: 12 spacing: 8
// Neon clock Row {
Item {
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
width: clockRow.width
height: clockRow.height
// Glow layer rendered offscreen, only its neon halo is visible Text {
Row { text: Qt.formatDateTime(clock.date, "HH")
id: glowSource color: M.Theme.base05
visible: false opacity: 0.7
anchors.centerIn: parent font.pixelSize: 72
font.family: M.Theme.fontFamily
Text { font.bold: true
text: Qt.formatDateTime(clock.date, "HH")
color: M.Theme.base0D
font.pixelSize: 72
font.family: M.Theme.fontFamily
font.bold: true
anchors.verticalCenter: parent.verticalCenter
}
Text {
text: ":"
color: colon._colors[colon._colorIdx % colon._colors.length]
font.pixelSize: 72
font.family: M.Theme.fontFamily
font.bold: true
opacity: colon.opacity
anchors.verticalCenter: parent.verticalCenter
}
Text {
text: Qt.formatDateTime(clock.date, "mm")
color: M.Theme.base0E
font.pixelSize: 72
font.family: M.Theme.fontFamily
font.bold: true
anchors.verticalCenter: parent.verticalCenter
}
} }
Text {
id: colon
text: ":"
font.pixelSize: 72
font.family: M.Theme.fontFamily
font.bold: true
MultiEffect { property int _colorIdx: 0
source: glowSource readonly property var _colors: [M.Theme.base08, M.Theme.base09, M.Theme.base0A, M.Theme.base0B, M.Theme.base0C, M.Theme.base0D, M.Theme.base0E, M.Theme.base05]
anchors.fill: glowSource color: _colors[_colorIdx % _colors.length]
shadowEnabled: true
shadowColor: M.Theme.base0D
shadowBlur: 1.0
shadowVerticalOffset: 0
shadowHorizontalOffset: 0
}
// Actual visible text on top of the glow SequentialAnimation {
Row { loops: Animation.Infinite
id: clockRow running: true
anchors.centerIn: parent NumberAnimation {
target: colon
Text { property: "opacity"
text: Qt.formatDateTime(clock.date, "HH") to: 0.1
color: M.Theme.base0D duration: 1000
opacity: 0.85 easing.type: Easing.InOutSine
font.pixelSize: 72 }
font.family: M.Theme.fontFamily ScriptAction {
font.bold: true script: colon._colorIdx++
anchors.verticalCenter: parent.verticalCenter }
} NumberAnimation {
Text { target: colon
id: colon property: "opacity"
text: ":" to: 0.7
font.pixelSize: 72 duration: 1000
font.family: M.Theme.fontFamily easing.type: Easing.InOutSine
font.bold: true
anchors.verticalCenter: parent.verticalCenter
property int _colorIdx: 0
readonly property var _colors: [M.Theme.base08, M.Theme.base09, M.Theme.base0A, M.Theme.base0B, M.Theme.base0C, M.Theme.base0D, M.Theme.base0E, M.Theme.base05]
color: _colors[_colorIdx % _colors.length]
SequentialAnimation {
loops: Animation.Infinite
running: true
NumberAnimation {
target: colon
property: "opacity"
to: 0.1
duration: 1000
easing.type: Easing.InOutSine
}
ScriptAction {
script: colon._colorIdx++
}
NumberAnimation {
target: colon
property: "opacity"
to: 0.85
duration: 1000
easing.type: Easing.InOutSine
}
} }
} }
Text { }
text: Qt.formatDateTime(clock.date, "mm") Text {
color: M.Theme.base0E text: Qt.formatDateTime(clock.date, "mm")
opacity: 0.85 color: M.Theme.base05
font.pixelSize: 72 opacity: 0.7
font.family: M.Theme.fontFamily font.pixelSize: 72
font.bold: true font.family: M.Theme.fontFamily
anchors.verticalCenter: parent.verticalCenter font.bold: true
}
} }
} }
// Date with subtle glow
Text { Text {
id: dateText
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
text: Qt.formatDateTime(clock.date, "dddd, dd MMMM yyyy") text: Qt.formatDateTime(clock.date, "dddd, dd MMMM yyyy")
color: M.Theme.base05 color: M.Theme.base05
opacity: 0.5 opacity: 0.5
font.pixelSize: 18 font.pixelSize: 18
font.family: M.Theme.fontFamily font.family: M.Theme.fontFamily
font.letterSpacing: 4
layer.enabled: true
layer.effect: MultiEffect {
shadowEnabled: true
shadowColor: M.Theme.base0D
shadowBlur: 0.4
shadowVerticalOffset: 0
shadowHorizontalOffset: 0
}
}
// Seconds as a thin animated progress bar
Item {
anchors.horizontalCenter: parent.horizontalCenter
width: clockRow.width
height: 2
Rectangle {
anchors.fill: parent
color: M.Theme.base02
radius: 1
opacity: 0.3
}
Rectangle {
width: parent.width * (clock.date.getSeconds() / 59)
height: parent.height
color: colon._colors[colon._colorIdx % colon._colors.length]
radius: 1
opacity: 0.6
Behavior on width {
NumberAnimation {
duration: 300
}
}
}
} }
} }
} }