un4seen/quickdots
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated clock module: added animations and removed redundancies

Browse Source
This commit is contained in:
SomeElse
2026-04-28 06:03:57 +00:00
parent 41d010618e
commit 1682c0a208
14 changed files with 395 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
bar/modules/Clock.qml
View File

@@ -203,14 +203,56 @@ Rectangle {
RowLayout {
Layout.fillWidth: true
Text {
text: "‹"; color: root.t.clockPopupDim; font.pixelSize: 18; font.bold: true
Rectangle {
id: prevMonthBtn
width: 26; height: 26; radius: 6
color: prevBtnMouse.containsMouse
? (prevBtnMouse.pressed ? root.t.calArrowBgPress : root.t.calArrowBgHover)
: root.t.calArrowBg
scale: prevBtnMouse.pressed ? 0.88 : 1.0
Behavior on color { ColorAnimation { duration: 120 } }
Behavior on scale { NumberAnimation { duration: 100; easing.type: Easing.OutCubic } }
MouseArea {
anchors.fill: parent; cursorShape: Qt.PointingHandCursor
onClicked: {
cal.displayMonth -= 1
if (cal.displayMonth < 0) { cal.displayMonth = 11; cal.displayYear -= 1 }
id: prevBtnMouse
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
function goToPrev() {
if (slideAnim.running) return
cal.slideDir = -1
let m = cal.displayMonth - 1
let y = cal.displayYear
if (m < 0) { m = 11; y -= 1 }
cal.pendingMonth = m
cal.pendingYear = y
slideAnim.restart()
}
onPressed: { goToPrev(); prevHoldDelay.restart() }
onReleased: { prevHoldDelay.stop(); prevHoldRepeat.stop() }
onCanceled: { prevHoldDelay.stop(); prevHoldRepeat.stop() }
Timer {
id: prevHoldDelay
interval: 400; repeat: false
onTriggered: prevHoldRepeat.restart()
}
Timer {
id: prevHoldRepeat
interval: 200; repeat: true
onTriggered: prevBtnMouse.goToPrev()
}
}
Text {
anchors.centerIn: parent
text: "‹"
color: prevBtnMouse.containsMouse ? root.t.calArrowIconHover : root.t.calArrowIcon
font.pixelSize: 18; font.bold: true
Behavior on color { ColorAnimation { duration: 120 } }
}
}
@@ -221,14 +263,56 @@ Rectangle {
Layout.fillWidth: true; horizontalAlignment: Text.AlignHCenter
}
Text {
text: "›"; color: root.t.clockPopupDim; font.pixelSize: 18; font.bold: true
Rectangle {
id: nextMonthBtn
width: 26; height: 26; radius: 6
color: nextBtnMouse.containsMouse
? (nextBtnMouse.pressed ? root.t.calArrowBgPress : root.t.calArrowBgHover)
: root.t.calArrowBg
scale: nextBtnMouse.pressed ? 0.88 : 1.0
Behavior on color { ColorAnimation { duration: 120 } }
Behavior on scale { NumberAnimation { duration: 100; easing.type: Easing.OutCubic } }
MouseArea {
anchors.fill: parent; cursorShape: Qt.PointingHandCursor
onClicked: {
cal.displayMonth += 1
if (cal.displayMonth > 11) { cal.displayMonth = 0; cal.displayYear += 1 }
id: nextBtnMouse
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
function goToNext() {
if (slideAnim.running) return
cal.slideDir = 1
let m = cal.displayMonth + 1
let y = cal.displayYear
if (m > 11) { m = 0; y += 1 }
cal.pendingMonth = m
cal.pendingYear = y
slideAnim.restart()
}
onPressed: { goToNext(); nextHoldDelay.restart() }
onReleased: { nextHoldDelay.stop(); nextHoldRepeat.stop() }
onCanceled: { nextHoldDelay.stop(); nextHoldRepeat.stop() }
Timer {
id: nextHoldDelay
interval: 400; repeat: false
onTriggered: nextHoldRepeat.restart()
}
Timer {
id: nextHoldRepeat
interval: 200; repeat: true
onTriggered: nextBtnMouse.goToNext()
}
}
Text {
anchors.centerIn: parent
text: "›"
color: nextBtnMouse.containsMouse ? root.t.calArrowIconHover : root.t.calArrowIcon
font.pixelSize: 18; font.bold: true
Behavior on color { ColorAnimation { duration: 120 } }
}
}
}
@@ -237,8 +321,11 @@ Rectangle {
id: cal
Layout.fillWidth: true
implicitHeight: gridCol.implicitHeight
property int displayYear: timeManager.now.getFullYear()
property int displayMonth: timeManager.now.getMonth()
property int displayYear: timeManager.now.getFullYear()
property int displayMonth: timeManager.now.getMonth()
property int pendingYear: displayYear
property int pendingMonth: displayMonth
property int slideDir: 1
Connections {
target: calendarPopup
@@ -250,9 +337,35 @@ Rectangle {
}
}
SequentialAnimation {
id: slideAnim
NumberAnimation {
target: gridCol; property: "x"
to: -cal.slideDir * cal.width
duration: 80; easing.type: Easing.InCubic
}
ScriptAction {
script: {
cal.displayMonth = cal.pendingMonth
cal.displayYear = cal.pendingYear
gridCol.x = cal.slideDir * cal.width
}
}
NumberAnimation {
target: gridCol; property: "x"
to: 0
duration: 100; easing.type: Easing.OutCubic
}
}
Item {
id: calGridClip
anchors.fill: parent
clip: true
ColumnLayout {
id: gridCol
anchors.fill: parent
width: parent.width
spacing: 2
Row {
@@ -298,28 +411,41 @@ Rectangle {
}
}
}
}
}
}
}
}
Rectangle { Layout.fillWidth: true; height: 1; color: root.t.calSeparator }
RowLayout {
Layout.fillWidth: true; spacing: 12
Text { text: "󰣐"; color: root.t.clockIcon; font.pixelSize: 16 }
ColumnLayout {
spacing: 0; Layout.fillWidth: true
Text {
text: timeManager.now.toLocaleTimeString(Qt.locale(), "t") || "UTC"
color: root.t.clockPopupText; font.pixelSize: 12; font.bold: true
}
Text {
text: "UTC " + (root.tzOffsetHours >= 0 ? "+" : "") + root.tzOffsetHours
color: root.t.clockPopupDim; font.pixelSize: 10
}
}
Layout.fillWidth: true
Layout.leftMargin: 6
Layout.rightMargin: 6
Text {
text: timeManager.now.toLocaleTimeString(Qt.locale(), "HH:mm:ss")
color: root.t.clockTime; font.pixelSize: 20; font.bold: true; font.family: "monospace"
text: "UTC " + (root.tzOffsetHours >= 0 ? "+" : "") + root.tzOffsetHours
color: root.t.clockPopupUtc
font.pixelSize: 13
font.bold: true
font.family: "monospace"
}
Item { Layout.fillWidth: true }
Text {
text: {
let d = timeManager.now
let month = d.getMonth() + 1
let day = d.getDate()
let year = d.getFullYear()
if (Cfg.Config.clockDateFormat === "DMY")
return day + "/" + month + "/" + year
return month + "/" + day + "/" + year
}
color: root.t.clockPopupDate
font.pixelSize: 14
font.bold: true
font.family: "monospace"
}
}

8
bar/modules/Volume.qml
View File

@@ -402,6 +402,14 @@ Rectangle {
onPressed: pos => sliderItem.seek(pos.x)
onPositionChanged: pos => { if (pressed) sliderItem.seek(pos.x) }
}
WheelHandler {
acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
onWheel: event => {
const step = 2
const delta = event.angleDelta.y > 0 ? step : -step
vs.sliderMoved(Math.max(0, Math.min(vs.maxVolume, vs.volume + delta)))
}
}
function seek(x) {
let ratio = Math.max(0.0, Math.min(1.0, x / sliderItem.width))
vs.sliderMoved(Math.round(ratio * vs.maxVolume))

6
config/config.qml
View File

@@ -43,6 +43,12 @@ QtObject {
property int popupBorderWidth: 1
property int popupAnimDuration: 500
// ── Clock Popup ───────────────────────────────────────────────────────────
// Date format shown in the clock popup.
// "MDY" → month/day/year (e.g. 4/28/2026)
// "DMY" → day/month/year (e.g. 28/4/2026)
property string clockDateFormat: "DMY"
// ── Tray Styling ─────────────────────────────────────────────────────────
property int trayHeight: 26
property int trayIconSize: 20

15
config/themes/aero.qml
View File

@@ -157,4 +157,19 @@ QtObject {
readonly property color notifHistoryShadow: "#55000000"
readonly property color notifHistoryHover: "#11cbdc3d"
readonly property color notifHistoryEmpty: textDim
// new variables adaptated
readonly property color frameBorder: "transparent"
readonly property color clockPopupDate: textMain
readonly property color clockPopupUtc: textDim
readonly property color calArrowIcon: textDim
readonly property color calArrowIconHover: accent
readonly property color calArrowBg: "transparent"
readonly property color calArrowBgHover: "#22cbdc3d"
readonly property color calArrowBgPress: accent
// ── BgDate Module ──────────────────────────────────────────────────────────
readonly property color bgDateText: textMain
readonly property color bgDateShadow: "#66000000"
readonly property color bgDateSecondsText: textMain
}

15
config/themes/aurora.qml
View File

@@ -158,4 +158,19 @@ QtObject {
readonly property color notifHistoryShadow: "#55000000"
readonly property color notifHistoryHover: "#1100d9ff"
readonly property color notifHistoryEmpty: textDim
// new variables adaptated
readonly property color frameBorder: "transparent"
readonly property color clockPopupDate: textMain
readonly property color clockPopupUtc: textDim
readonly property color calArrowIcon: textDim
readonly property color calArrowIconHover: accent
readonly property color calArrowBg: "transparent"
readonly property color calArrowBgHover: "#2200d9ff"
readonly property color calArrowBgPress: accent
// ── BgDate Module ──────────────────────────────────────────────────────────
readonly property color bgDateText: textMain
readonly property color bgDateShadow: "#88000000"
readonly property color bgDateSecondsText: textMain
}

15
config/themes/beach.qml
View File

@@ -157,4 +157,19 @@ QtObject {
readonly property color notifHistoryShadow: "#55000000"
readonly property color notifHistoryHover: "#11ebc6a0"
readonly property color notifHistoryEmpty: textDim
// new variables adaptated
readonly property color frameBorder: "transparent"
readonly property color clockPopupDate: textMain
readonly property color clockPopupUtc: textDim
readonly property color calArrowIcon: textDim
readonly property color calArrowIconHover: accent
readonly property color calArrowBg: "transparent"
readonly property color calArrowBgHover: "#22ebc6a0"
readonly property color calArrowBgPress: accent
// ── BgDate Module ──────────────────────────────────────────────────────────
readonly property color bgDateText: textMain
readonly property color bgDateShadow: "#66000000"
readonly property color bgDateSecondsText: textMain
}

15
config/themes/colorful.qml
View File

@@ -158,4 +158,19 @@ QtObject {
readonly property color notifHistoryShadow: "#55000000"
readonly property color notifHistoryHover: "#11f0a1ba"
readonly property color notifHistoryEmpty: textDim
// new variables adaptated
readonly property color frameBorder: "transparent"
readonly property color clockPopupDate: textMain
readonly property color clockPopupUtc: textDim
readonly property color calArrowIcon: textDim
readonly property color calArrowIconHover: accent
readonly property color calArrowBg: "transparent"
readonly property color calArrowBgHover: "#22f0a1ba"
readonly property color calArrowBgPress: accent
// ── BgDate Module ──────────────────────────────────────────────────────────
readonly property color bgDateText: textMain
readonly property color bgDateShadow: "#66000000"
readonly property color bgDateSecondsText: textMain
}

15
config/themes/cosmic.qml
View File

@@ -157,4 +157,19 @@ QtObject {
readonly property color notifHistoryShadow: "#55000000"
readonly property color notifHistoryHover: "#11bdf0ff"
readonly property color notifHistoryEmpty: textDim
// new variables adaptated
readonly property color frameBorder: "transparent"
readonly property color clockPopupDate: textMain
readonly property color clockPopupUtc: textDim
readonly property color calArrowIcon: textDim
readonly property color calArrowIconHover: accent
readonly property color calArrowBg: "transparent"
readonly property color calArrowBgHover: "#22bdf0ff"
readonly property color calArrowBgPress: accent
// ── BgDate Module ──────────────────────────────────────────────────────────
readonly property color bgDateText: textMain
readonly property color bgDateShadow: "#66000000"
readonly property color bgDateSecondsText: textMain
}

15
config/themes/everforest.qml
View File

@@ -158,6 +158,21 @@ QtObject {
readonly property color notifHistoryShadow: "#55000000"
readonly property color notifHistoryHover: "#22ffffff"
readonly property color notifHistoryEmpty: textDim
// new variables adaptated
readonly property color frameBorder: "transparent"
readonly property color clockPopupDate: textMain
readonly property color clockPopupUtc: textDim
readonly property color calArrowIcon: textDim
readonly property color calArrowIconHover: accent
readonly property color calArrowBg: "transparent"
readonly property color calArrowBgHover: "#224a8c5c"
readonly property color calArrowBgPress: accent
// ── BgDate Module ──────────────────────────────────────────────────────────
readonly property color bgDateText: textMain
readonly property color bgDateShadow: "#44000000"
readonly property color bgDateSecondsText: textMain
}

12
config/themes/goldencity.qml
View File

@@ -84,6 +84,13 @@ QtObject {
readonly property color clockPopupHeader: "#ffc19375"
readonly property color clockPopupText: textMain
readonly property color clockPopupDim: textDim
readonly property color clockPopupDate: textMain // Numeric date in the popup (month/day/year)
readonly property color clockPopupUtc: textDim // UTC offset label (e.g. UTC +2)
readonly property color calArrowIcon: textDim // Default arrow glyph color
readonly property color calArrowIconHover: "#ffc19375" // Hovered arrow — horizon gold
readonly property color calArrowBg: "transparent" // Default button background
readonly property color calArrowBgHover: "#22c19375" // Hovered button — soft gold tint
readonly property color calArrowBgPress: "#ffc19375" // Pressed button — full horizon gold
// ── Workspace Module ───────────────────────────────────────────────────────
readonly property color wsPanelBg: bgPanel
@@ -158,4 +165,9 @@ QtObject {
readonly property color notifHistoryShadow: "#aa000000"
readonly property color notifHistoryHover: "#11c19375"
readonly property color notifHistoryEmpty: textDim
// ── BgDate Module ──────────────────────────────────────────────────────────
readonly property color bgDateText: textMain // Date string color
readonly property color bgDateShadow: "#66000000" // Drop shadow for both texts
readonly property color bgDateSecondsText: textMain // Seconds clock — sun-glow gold
}

15
config/themes/metropolitan.qml
View File

@@ -158,4 +158,19 @@ QtObject {
readonly property color notifHistoryShadow: "#aa000000"
readonly property color notifHistoryHover: "#11ffb86c"
readonly property color notifHistoryEmpty: textDim
// new variables adaptated
readonly property color frameBorder: "transparent"
readonly property color clockPopupDate: textMain
readonly property color clockPopupUtc: textDim
readonly property color calArrowIcon: textDim
readonly property color calArrowIconHover: accent
readonly property color calArrowBg: "transparent"
readonly property color calArrowBgHover: "#22ffb86c"
readonly property color calArrowBgPress: accent
// ── BgDate Module ──────────────────────────────────────────────────────────
readonly property color bgDateText: textMain
readonly property color bgDateShadow: "#aa000000"
readonly property color bgDateSecondsText: textMain
}

15
config/themes/neonica.qml
View File

@@ -156,4 +156,19 @@ QtObject {
readonly property color notifHistoryShadow: "#33000000"
readonly property color notifHistoryHover: "#22c4a7e7"
readonly property color notifHistoryEmpty: "#ff6e6a86"
// new variables adaptated
readonly property color frameBorder: "transparent"
readonly property color clockPopupDate: textMain
readonly property color clockPopupUtc: textDim
readonly property color calArrowIcon: textDim
readonly property color calArrowIconHover: accent
readonly property color calArrowBg: "transparent"
readonly property color calArrowBgHover: "#22ff2e97"
readonly property color calArrowBgPress: accent
// ── BgDate Module ──────────────────────────────────────────────────────────
readonly property color bgDateText: textMain
readonly property color bgDateShadow: "#44000000"
readonly property color bgDateSecondsText: textMain
}

15
config/themes/supreme.qml
View File

@@ -157,4 +157,19 @@ QtObject {
readonly property color notifHistoryShadow: "#552d1621"
readonly property color notifHistoryHover: "#11ff7eb9"
readonly property color notifHistoryEmpty: textDim
// new variables adaptated
readonly property color frameBorder: "transparent"
readonly property color clockPopupDate: textMain
readonly property color clockPopupUtc: textDim
readonly property color calArrowIcon: textDim
readonly property color calArrowIconHover: accent
readonly property color calArrowBg: "transparent"
readonly property color calArrowBgHover: "#22ff7eb9"
readonly property color calArrowBgPress: accent
// ── BgDate Module ──────────────────────────────────────────────────────────
readonly property color bgDateText: textMain
readonly property color bgDateShadow: "#662d1621"
readonly property color bgDateSecondsText: textMain
}

91
widgets/bgDate/BgDate.qml
View File

@@ -14,32 +14,93 @@ PanelWindow {
WlrLayershell.exclusiveZone: -1
mask: Region {}
property string dateString: ""
property string fullDateString: ""
property int typedChars: 0
property string secondsString: ""
function startTyping() {
typedChars = 0;
secondsText.opacity = 0;
typingTimer.start();
}
function updateDate() {
let d = new Date();
dateString = d.toLocaleDateString(Qt.locale(), "dddd, d MMMM yyyy");
fullDateString = d.toLocaleDateString(Qt.locale(), "dddd, d MMMM yyyy");
startTyping();
}
Component.onCompleted: updateDate()
function updateSeconds() {
let d = new Date();
secondsString = Qt.formatTime(d, "hh:mm:ss");
}
Text {
id: dateText
Component.onCompleted: {
updateSeconds();
updateDate();
}
Column {
anchors.centerIn: parent
color: Cfg.Config.theme.clockText
styleColor: Cfg.Config.theme.clockShadow
font.pixelSize: 64
font.weight: Font.ExtraLight
font.letterSpacing: 4
opacity: 0.55
style: Text.DropShadow
text: dateString
spacing: 10
Text {
id: dateText
anchors.horizontalCenter: parent.horizontalCenter
color: Cfg.Config.theme.bgDateText
styleColor: Cfg.Config.theme.bgDateShadow
font.pixelSize: 64
font.weight: Font.ExtraLight
font.letterSpacing: 4
opacity: 0.55
style: Text.DropShadow
text: fullDateString.substring(0, typedChars)
}
Text {
id: secondsText
anchors.horizontalCenter: parent.horizontalCenter
color: Cfg.Config.theme.bgDateSecondsText
styleColor: Cfg.Config.theme.bgDateShadow
font.pixelSize: 22
font.weight: Font.ExtraLight
font.letterSpacing: 6
opacity: 0
style: Text.DropShadow
text: secondsString
Behavior on opacity {
NumberAnimation {
duration: 700
easing.type: Easing.InOutQuad
}
}
}
}
Timer {
interval: 60000
id: typingTimer
interval: 55
repeat: true
onTriggered: {
if (typedChars < fullDateString.length) {
typedChars++;
} else {
stop();
secondsText.opacity = 0.55;
}
}
}
Timer {
interval: 1000
running: true
repeat: true
onTriggered: updateDate()
onTriggered: {
updateSeconds();
let d = new Date();
if (d.getSeconds() === 0 && d.getMinutes() === 0 && d.getHours() === 0)
updateDate();
}
}
}