Clock: factorized many settings in a single combobox

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 {

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,
+  implicitWidth: Math.round(layout.implicitWidth + Style.marginM * 2 * scaling)
-                                         dateText.implicitWidth) : clock.width) + Style.marginM * 2 * scaling
+  implicitHeight: Math.round(Style.capsuleHeight * scaling)
-  implicitHeight: compactMode ? (timeText.implicitHeight + dateText.implicitHeight + Math.round(
+  radius: Math.round(Style.radiusS * scaling)
-                                   Style.marginXS * scaling) + Math.round(Style.marginM * 2 * scaling)) : Math.round(
-                                  Style.capsuleHeight * scaling)
-  radius: Math.round(Style.radiusM * 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 {
+    ColumnLayout {
-      id: compactColumn
+      id: layout
       anchors.centerIn: parent
-      spacing: compactMode ? 0 : Math.round(Style.marginXXS * scaling)
+      spacing: -3 * scaling
-      visible: compactMode
 
+      // 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")
+          let timeStr = ""
-          return Qt.formatDateTime(now, timeFormat)
-        }
-        font.pointSize: Style.fontSizeS * scaling
-        font.weight: Style.fontWeightBold
-        color: Color.mPrimary
-        horizontalAlignment: Text.AlignHCenter
-        anchors.horizontalCenter: parent.horizontalCenter
-      }
 
-      NText {
+          if (use12h) {
-        id: dateText
+            // 12-hour format with proper padding and consistent spacing
-        visible: compactMode || showDate
+            const hours = now.getHours()
-        text: {
+            const displayHours = hours === 0 ? 12 : (hours > 12 ? hours - 12 : hours)
-          const now = Time.date
+            const paddedHours = displayHours.toString().padStart(2, '0')
-          const day = now.getDate()
+            const minutes = now.getMinutes().toString().padStart(2, '0')
-          const month = now.getMonth() + 1
+            const ampm = hours < 12 ? 'AM' : 'PM'
-          const dd = (day < 10 ? "0" + day : "" + day)
+
-          const mm = (month < 10 ? "0" + month : "" + month)
+            if (showSeconds) {
-          return reverseDayMonth ? `${mm}/${dd}` : `${dd}/${mm}`
+              const seconds = now.getSeconds().toString().padStart(2, '0')
+              timeStr = `${paddedHours}:${minutes}:${seconds} ${ampm}`
+            } else {
+              timeStr = `${paddedHours}:${minutes} ${ampm}`
             }
-        font.pointSize: Math.max(Style.fontSizeXXS, Style.fontSizeXXS * scaling)
+          } else {
-        font.weight: Style.fontWeightRegular
+            // 24-hour format with padding
-        color: Color.mPrimary
+            const hours = now.getHours().toString().padStart(2, '0')
-        horizontalAlignment: Text.AlignHCenter
+            const minutes = now.getMinutes().toString().padStart(2, '0')
-        anchors.horizontalCenter: parent.horizontalCenter
+
+            if (showSeconds) {
+              const seconds = now.getSeconds().toString().padStart(2, '0')
+              timeStr = `${hours}:${minutes}:${seconds}`
+            } else {
+              timeStr = `${hours}:${minutes}`
             }
           }
 
-    // Non-compact single-line text
+          // Add inline date if needed
-    NText {
+          if (inlineDate) {
-      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()
+            const day = now.getDate().toString().padStart(2, '0')
             let month = now.toLocaleDateString(Qt.locale(), "MMM")
-          return timeString + " - " + (reverseDayMonth ? `${dayName}, ${month} ${day}` : `${dayName}, ${day} ${month}`)
+            timeStr += " - " + (reverseDayMonth ? `${dayName}, ${month} ${day}` : `${dayName}, ${day} ${month}`)
           }
-        return timeString
+
+          return timeStr
         }
-      anchors.centerIn: parent
+
-      font.pointSize: Style.fontSizeS * scaling
+        //font.family: Settings.data.ui.fontFixed
+        font.pointSize: Style.fontSizeXS * scaling
         font.weight: Style.fontWeightBold
         color: Color.mPrimary
+        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+      }
+
+      // Second line
+      NText {
+        visible: (displayFormat === "time-date-short")
+        text: {
+          const now = Time.date
+          const day = now.getDate().toString().padStart(2, '0')
+          const month = (now.getMonth() + 1).toString().padStart(2, '0')
+          return reverseDayMonth ? `${month}/${day}` : `${day}/${month}`
+        }
+
+        // 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
+        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+      }
     }
   }
 
   NTooltip {
     id: tooltip
     text: `${Time.formatDate(reverseDayMonth)}.`
-    target: clock
+    target: clockContainer
     positionAbove: Settings.data.bar.position === "bottom"
   }
 

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 {
+  NComboBox {
-    label: "Show date"
+    label: "Display Format"
-    checked: valueShowDate
+    model: ListModel {
-    onToggled: checked => valueShowDate = checked
+      ListElement {
+        key: "time"
+        name: "HH:mm"
       }
-
+      ListElement {
-  NToggle {
+        key: "time-seconds"
-    label: "Compact clock (date under time)"
+        name: "HH:mm:ss"
-    checked: valueCompactMode
+      }
-    onToggled: checked => valueCompactMode = checked
+      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

Services/BarWidgetRegistry.qml

@@ -52,11 +52,9 @@ Singleton {
                                   },
                                   "Clock": {
                                     "allowUserSettings": true,
-                                    "showDate": false,
+                                    "displayFormat": "time-date-short",
                                     "use12HourClock": false,
-                                    "showSeconds": false,
+                                    "reverseDayMonth": true
-                                    "reverseDayMonth": true,
-                                    "compactMode": false
                                   },
                                   "CustomButton": {
                                     "allowUserSettings": true,