diff --git a/bar/modules/Clock.qml b/bar/modules/Clock.qml index 5a2acb1..79fb708 100644 --- a/bar/modules/Clock.qml +++ b/bar/modules/Clock.qml @@ -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" } } diff --git a/bar/modules/Volume.qml b/bar/modules/Volume.qml index e6f9583..1b3ccd8 100644 --- a/bar/modules/Volume.qml +++ b/bar/modules/Volume.qml @@ -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)) diff --git a/config/config.qml b/config/config.qml index 6378443..2418bf6 100644 --- a/config/config.qml +++ b/config/config.qml @@ -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 diff --git a/config/themes/aero.qml b/config/themes/aero.qml index 58d94f5..2f61b66 100644 --- a/config/themes/aero.qml +++ b/config/themes/aero.qml @@ -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 } diff --git a/config/themes/aurora.qml b/config/themes/aurora.qml index 97545fc..d119970 100644 --- a/config/themes/aurora.qml +++ b/config/themes/aurora.qml @@ -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 } diff --git a/config/themes/beach.qml b/config/themes/beach.qml index acb361d..5f52732 100644 --- a/config/themes/beach.qml +++ b/config/themes/beach.qml @@ -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 } diff --git a/config/themes/colorful.qml b/config/themes/colorful.qml index ece9fc6..963685c 100644 --- a/config/themes/colorful.qml +++ b/config/themes/colorful.qml @@ -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 } diff --git a/config/themes/cosmic.qml b/config/themes/cosmic.qml index 6d086da..f3d4f96 100644 --- a/config/themes/cosmic.qml +++ b/config/themes/cosmic.qml @@ -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 } diff --git a/config/themes/everforest.qml b/config/themes/everforest.qml index c84cf36..f410c28 100644 --- a/config/themes/everforest.qml +++ b/config/themes/everforest.qml @@ -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 } diff --git a/config/themes/goldencity.qml b/config/themes/goldencity.qml index 643750b..9450ffa 100644 --- a/config/themes/goldencity.qml +++ b/config/themes/goldencity.qml @@ -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 } diff --git a/config/themes/metropolitan.qml b/config/themes/metropolitan.qml index cd66e6a..87008c3 100644 --- a/config/themes/metropolitan.qml +++ b/config/themes/metropolitan.qml @@ -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 } diff --git a/config/themes/neonica.qml b/config/themes/neonica.qml index 03274b0..27060b4 100644 --- a/config/themes/neonica.qml +++ b/config/themes/neonica.qml @@ -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 } diff --git a/config/themes/supreme.qml b/config/themes/supreme.qml index 1676b76..dd87248 100644 --- a/config/themes/supreme.qml +++ b/config/themes/supreme.qml @@ -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 } diff --git a/widgets/bgDate/BgDate.qml b/widgets/bgDate/BgDate.qml index c01b485..3bfe228 100644 --- a/widgets/bgDate/BgDate.qml +++ b/widgets/bgDate/BgDate.qml @@ -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(); + } } }