205 lines
6.5 KiB
QML
205 lines
6.5 KiB
QML
import QtQuick
|
|
import QtQuick.Effects
|
|
import Quickshell
|
|
import Quickshell.Wayland
|
|
import "." as M
|
|
|
|
PanelWindow {
|
|
id: root
|
|
|
|
required property var screen
|
|
|
|
color: "transparent"
|
|
|
|
WlrLayershell.layer: WlrLayer.Background
|
|
WlrLayershell.exclusiveZone: -1
|
|
WlrLayershell.namespace: "nova-background-overlay"
|
|
mask: Region {}
|
|
|
|
anchors.top: true
|
|
anchors.left: true
|
|
anchors.right: true
|
|
anchors.bottom: true
|
|
|
|
SystemClock {
|
|
id: clock
|
|
precision: SystemClock.Seconds
|
|
}
|
|
|
|
Column {
|
|
anchors.centerIn: parent
|
|
spacing: 12
|
|
|
|
// Neon clock
|
|
Item {
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
width: clockRow.width
|
|
height: clockRow.height
|
|
|
|
// Glow layer — rendered offscreen, only its neon halo is visible
|
|
Row {
|
|
id: glowSource
|
|
visible: false
|
|
anchors.centerIn: parent
|
|
|
|
Text {
|
|
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]
|
|
Behavior on color {
|
|
ColorAnimation {
|
|
duration: 800
|
|
}
|
|
}
|
|
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
|
|
}
|
|
}
|
|
|
|
MultiEffect {
|
|
source: glowSource
|
|
anchors.fill: glowSource
|
|
shadowEnabled: true
|
|
shadowColor: M.Theme.base0D
|
|
shadowBlur: 1.0
|
|
shadowVerticalOffset: 0
|
|
shadowHorizontalOffset: 0
|
|
}
|
|
|
|
// Actual visible text on top of the glow
|
|
Row {
|
|
id: clockRow
|
|
anchors.centerIn: parent
|
|
|
|
Text {
|
|
text: Qt.formatDateTime(clock.date, "HH")
|
|
color: M.Theme.base0D
|
|
opacity: 0.85
|
|
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
|
|
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]
|
|
Behavior on color {
|
|
ColorAnimation {
|
|
duration: 800
|
|
}
|
|
}
|
|
|
|
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")
|
|
color: M.Theme.base0E
|
|
opacity: 0.85
|
|
font.pixelSize: 72
|
|
font.family: M.Theme.fontFamily
|
|
font.bold: true
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
}
|
|
}
|
|
}
|
|
|
|
// Date with subtle glow
|
|
Text {
|
|
id: dateText
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
text: Qt.formatDateTime(clock.date, "dddd, dd MMMM yyyy")
|
|
color: M.Theme.base05
|
|
opacity: 0.5
|
|
font.pixelSize: 18
|
|
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]
|
|
Behavior on color {
|
|
ColorAnimation {
|
|
duration: 800
|
|
}
|
|
}
|
|
radius: 1
|
|
opacity: 0.6
|
|
|
|
Behavior on width {
|
|
NumberAnimation {
|
|
duration: 300
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|