From 83fbb8f95d5e281d55bc1864e87715e67ab81c81 Mon Sep 17 00:00:00 2001 From: LemmyCook Date: Thu, 11 Sep 2025 09:43:52 -0400 Subject: [PATCH] Clock: factorized many settings in a single combobox --- Commons/Settings.qml | 13 +- Modules/Bar/Widgets/Clock.qml | 124 ++++++++++-------- .../Bar/WidgetSettings/ClockSettings.qml | 51 +++---- Services/BarWidgetRegistry.qml | 6 +- 4 files changed, 109 insertions(+), 85 deletions(-) diff --git a/Commons/Settings.qml b/Commons/Settings.qml index 762a92c..a6aafdf 100644 --- a/Commons/Settings.qml +++ b/Commons/Settings.qml @@ -142,9 +142,16 @@ Singleton { !== undefined ? widget.alwaysShowPercentage : adapter.bar.alwaysShowBatteryPercentage break case "Clock": - widget.showDate = widget.showDate !== undefined ? widget.showDate : adapter.location.showDateWithClock widget.use12HourClock = widget.use12HourClock !== undefined ? widget.use12HourClock : adapter.location.use12HourClock widget.reverseDayMonth = widget.reverseDayMonth !== undefined ? widget.reverseDayMonth : adapter.location.reverseDayMonth + if (widget.showDate !== undefined) { + console.log("HELLLO") + widget.displayFormat = "time-date" + } else if (widget.showSeconds) { + widget.displayFormat = "time-seconds" + } + delete widget.showDate + delete widget.showSeconds break case "MediaMini": widget.showAlbumArt = widget.showAlbumArt !== undefined ? widget.showAlbumArt : adapter.audio.showMiniplayerAlbumArt @@ -174,7 +181,7 @@ Singleton { } } - // Backup the widget definition before altering + // Compare settings, to detect if something has been upgraded const widgetAfter = JSON.stringify(widget) return (widgetAfter !== widgetBefore) } @@ -258,7 +265,7 @@ Singleton { JsonAdapter { id: adapter - property int settingsVersion: 1 + property int settingsVersion: 2 // bar property JsonObject bar: JsonObject { diff --git a/Modules/Bar/Widgets/Clock.qml b/Modules/Bar/Widgets/Clock.qml index 0b566d1..2c2c9ed 100644 --- a/Modules/Bar/Widgets/Clock.qml +++ b/Modules/Bar/Widgets/Clock.qml @@ -1,4 +1,5 @@ import QtQuick +import QtQuick.Layouts import Quickshell import qs.Commons import qs.Services @@ -29,95 +30,106 @@ Rectangle { } // Resolve settings: try user settings or defaults from BarWidgetRegistry - readonly property bool showDate: widgetSettings.showDate !== undefined ? widgetSettings.showDate : widgetMetadata.showDate readonly property bool use12h: widgetSettings.use12HourClock !== undefined ? widgetSettings.use12HourClock : widgetMetadata.use12HourClock - readonly property bool showSeconds: widgetSettings.showSeconds !== undefined ? widgetSettings.showSeconds : widgetMetadata.showSeconds readonly property bool reverseDayMonth: widgetSettings.reverseDayMonth !== undefined ? widgetSettings.reverseDayMonth : widgetMetadata.reverseDayMonth - readonly property bool compactMode: widgetSettings.compactMode !== undefined ? widgetSettings.compactMode : widgetMetadata.compactMode + readonly property string displayFormat: widgetSettings.displayFormat + !== undefined ? widgetSettings.displayFormat : widgetMetadata.displayFormat - implicitWidth: (compactMode ? Math.max(timeText.implicitWidth, - dateText.implicitWidth) : clock.width) + Style.marginM * 2 * scaling - implicitHeight: compactMode ? (timeText.implicitHeight + dateText.implicitHeight + Math.round( - Style.marginXS * scaling) + Math.round(Style.marginM * 2 * scaling)) : Math.round( - Style.capsuleHeight * scaling) - radius: Math.round(Style.radiusM * scaling) + implicitWidth: Math.round(layout.implicitWidth + Style.marginM * 2 * scaling) + implicitHeight: Math.round(Style.capsuleHeight * scaling) + radius: Math.round(Style.radiusS * scaling) color: Color.mSurfaceVariant - // Clock with optional compact layout & attached calendar Item { id: clockContainer anchors.fill: parent - anchors.margins: Math.round((compactMode ? Style.marginXS : Style.marginM) * scaling) + anchors.margins: Style.marginXS * scaling - Column { - id: compactColumn + ColumnLayout { + id: layout anchors.centerIn: parent - spacing: compactMode ? 0 : Math.round(Style.marginXXS * scaling) - visible: compactMode + spacing: -3 * scaling + // First line NText { - id: timeText + readonly property bool showSeconds: (displayFormat === "time-seconds") + readonly property bool inlineDate: (displayFormat === "time-date") + text: { const now = Time.date - const timeFormat = use12h ? (showSeconds ? "h:mm:ss AP" : "h:mm AP") : (showSeconds ? "HH:mm:ss" : "HH:mm") - return Qt.formatDateTime(now, timeFormat) + let timeStr = "" + + if (use12h) { + // 12-hour format with proper padding and consistent spacing + const hours = now.getHours() + const displayHours = hours === 0 ? 12 : (hours > 12 ? hours - 12 : hours) + const paddedHours = displayHours.toString().padStart(2, '0') + const minutes = now.getMinutes().toString().padStart(2, '0') + const ampm = hours < 12 ? 'AM' : 'PM' + + if (showSeconds) { + const seconds = now.getSeconds().toString().padStart(2, '0') + timeStr = `${paddedHours}:${minutes}:${seconds} ${ampm}` + } else { + timeStr = `${paddedHours}:${minutes} ${ampm}` + } + } else { + // 24-hour format with padding + const hours = now.getHours().toString().padStart(2, '0') + const minutes = now.getMinutes().toString().padStart(2, '0') + + if (showSeconds) { + const seconds = now.getSeconds().toString().padStart(2, '0') + timeStr = `${hours}:${minutes}:${seconds}` + } else { + timeStr = `${hours}:${minutes}` + } + } + + // Add inline date if needed + if (inlineDate) { + let dayName = now.toLocaleDateString(Qt.locale(), "ddd") + dayName = dayName.charAt(0).toUpperCase() + dayName.slice(1) + const day = now.getDate().toString().padStart(2, '0') + let month = now.toLocaleDateString(Qt.locale(), "MMM") + timeStr += " - " + (reverseDayMonth ? `${dayName}, ${month} ${day}` : `${dayName}, ${day} ${month}`) + } + + return timeStr } - font.pointSize: Style.fontSizeS * scaling + + //font.family: Settings.data.ui.fontFixed + font.pointSize: Style.fontSizeXS * scaling font.weight: Style.fontWeightBold color: Color.mPrimary - horizontalAlignment: Text.AlignHCenter - anchors.horizontalCenter: parent.horizontalCenter + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter } + // Second line NText { - id: dateText - visible: compactMode || showDate + visible: (displayFormat === "time-date-short") text: { const now = Time.date - const day = now.getDate() - const month = now.getMonth() + 1 - const dd = (day < 10 ? "0" + day : "" + day) - const mm = (month < 10 ? "0" + month : "" + month) - return reverseDayMonth ? `${mm}/${dd}` : `${dd}/${mm}` + const day = now.getDate().toString().padStart(2, '0') + const month = (now.getMonth() + 1).toString().padStart(2, '0') + return reverseDayMonth ? `${month}/${day}` : `${day}/${month}` } - font.pointSize: Math.max(Style.fontSizeXXS, Style.fontSizeXXS * scaling) + + // Enable fixed-width font for consistent spacing + //font.family: Settings.data.ui.fontFixed + font.pointSize: Style.fontSizeXXS * scaling font.weight: Style.fontWeightRegular color: Color.mPrimary - horizontalAlignment: Text.AlignHCenter - anchors.horizontalCenter: parent.horizontalCenter + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter } } - - // Non-compact single-line text - NText { - id: clock - visible: !compactMode - text: { - const now = Time.date - const timeFormat = use12h ? (showSeconds ? "h:mm:ss AP" : "h:mm AP") : (showSeconds ? "HH:mm:ss" : "HH:mm") - const timeString = Qt.formatDateTime(now, timeFormat) - - if (showDate) { - let dayName = now.toLocaleDateString(Qt.locale(), "ddd") - dayName = dayName.charAt(0).toUpperCase() + dayName.slice(1) - let day = now.getDate() - let month = now.toLocaleDateString(Qt.locale(), "MMM") - return timeString + " - " + (reverseDayMonth ? `${dayName}, ${month} ${day}` : `${dayName}, ${day} ${month}`) - } - return timeString - } - anchors.centerIn: parent - font.pointSize: Style.fontSizeS * scaling - font.weight: Style.fontWeightBold - color: Color.mPrimary - } } NTooltip { id: tooltip text: `${Time.formatDate(reverseDayMonth)}.` - target: clock + target: clockContainer positionAbove: Settings.data.bar.position === "bottom" } diff --git a/Modules/SettingsPanel/Bar/WidgetSettings/ClockSettings.qml b/Modules/SettingsPanel/Bar/WidgetSettings/ClockSettings.qml index d525cb4..16c0f46 100644 --- a/Modules/SettingsPanel/Bar/WidgetSettings/ClockSettings.qml +++ b/Modules/SettingsPanel/Bar/WidgetSettings/ClockSettings.qml @@ -14,32 +14,45 @@ ColumnLayout { property var widgetMetadata: null // Local state - property bool valueShowDate: widgetData.showDate !== undefined ? widgetData.showDate : widgetMetadata.showDate + property string valueDisplayFormat: widgetData.displayFormat !== undefined ? widgetData.displayFormat : widgetMetadata.displayFormat property bool valueUse12h: widgetData.use12HourClock !== undefined ? widgetData.use12HourClock : widgetMetadata.use12HourClock - property bool valueShowSeconds: widgetData.showSeconds !== undefined ? widgetData.showSeconds : widgetMetadata.showSeconds property bool valueReverseDayMonth: widgetData.reverseDayMonth !== undefined ? widgetData.reverseDayMonth : widgetMetadata.reverseDayMonth - property bool valueCompactMode: widgetData.compactMode !== undefined ? widgetData.compactMode : widgetMetadata.compactMode function saveSettings() { var settings = Object.assign({}, widgetData || {}) - settings.showDate = valueShowDate + settings.displayFormat = valueDisplayFormat settings.use12HourClock = valueUse12h - settings.showSeconds = valueShowSeconds settings.reverseDayMonth = valueReverseDayMonth - settings.compactMode = valueCompactMode + console.log(JSON.stringify(settings)) return settings } - NToggle { - label: "Show date" - checked: valueShowDate - onToggled: checked => valueShowDate = checked - } - - NToggle { - label: "Compact clock (date under time)" - checked: valueCompactMode - onToggled: checked => valueCompactMode = checked + NComboBox { + label: "Display Format" + model: ListModel { + ListElement { + key: "time" + name: "HH:mm" + } + ListElement { + key: "time-seconds" + name: "HH:mm:ss" + } + ListElement { + key: "time-date" + name: "HH:mm - Date" + } + ListElement { + key: "time-date-short" + name: "HH:mm - Short Date" + } + } + currentKey: valueDisplayFormat + onSelected: key => { + valueDisplayFormat = key + console.log(key) + } + minimumWidth: 230 * scaling } NToggle { @@ -48,12 +61,6 @@ ColumnLayout { onToggled: checked => valueUse12h = checked } - NToggle { - label: "Show seconds" - checked: valueShowSeconds - onToggled: checked => valueShowSeconds = checked - } - NToggle { label: "Reverse day and month" checked: valueReverseDayMonth diff --git a/Services/BarWidgetRegistry.qml b/Services/BarWidgetRegistry.qml index 800177d..b67c769 100644 --- a/Services/BarWidgetRegistry.qml +++ b/Services/BarWidgetRegistry.qml @@ -52,11 +52,9 @@ Singleton { }, "Clock": { "allowUserSettings": true, - "showDate": false, + "displayFormat": "time-date-short", "use12HourClock": false, - "showSeconds": false, - "reverseDayMonth": true, - "compactMode": false + "reverseDayMonth": true }, "CustomButton": { "allowUserSettings": true,