Compare commits
No commits in common. "81d0da4cd713fbfb15a6e3d00f29049e864e4c8b" and "bf40be76c5f09d149a9730eb99dd887edc238fe1" have entirely different histories.
81d0da4cd7
...
bf40be76c5
1 changed files with 45 additions and 140 deletions
|
|
@ -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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue