Clock: add compact mode with nnumeric/verbose date options

Modules/Bar/Widgets/Clock.qml

@@ -34,33 +34,94 @@ Rectangle {
   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 bool compactDateNumeric: widgetSettings.compactDateNumeric
+                                             !== undefined ? widgetSettings.compactDateNumeric : widgetMetadata.compactDateNumeric
 
-  implicitWidth: clock.width + Style.marginM * 2 * scaling
+  implicitWidth: (compactMode ? Math.max(timeText.implicitWidth,
-  implicitHeight: Math.round(Style.capsuleHeight * scaling)
+                                         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)
   color: Color.mSurfaceVariant
 
-  // Clock Icon with attached calendar
+  // Clock with optional compact layout & attached calendar
-  NText {
+  Item {
-    id: clock
+    id: clockContainer
-    text: {
+    anchors.fill: parent
-      const now = Time.date
+    anchors.margins: Math.round((compactMode ? Style.marginS : Style.marginM) * scaling)
-      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) {
+    Column {
-        let dayName = now.toLocaleDateString(Qt.locale(), "ddd")
+      id: compactColumn
-        dayName = dayName.charAt(0).toUpperCase() + dayName.slice(1)
+      anchors.centerIn: parent
-        let day = now.getDate()
+      spacing: Math.round(Style.marginXXS * scaling)
-        let month = now.toLocaleDateString(Qt.locale(), "MMM")
+      visible: compactMode
-        return timeString + " - " + (reverseDayMonth ? `${dayName}, ${month} ${day}` : `${dayName}, ${day} ${month}`)
+
+      NText {
+        id: timeText
+        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)
+        }
+        font.pointSize: Style.fontSizeS * scaling
+        font.weight: Style.fontWeightBold
+        color: Color.mPrimary
+        horizontalAlignment: Text.AlignHCenter
+        anchors.horizontalCenter: parent.horizontalCenter
+      }
+
+      NText {
+        id: dateText
+        visible: compactMode || showDate
+        text: {
+          const now = Time.date
+          if (compactDateNumeric) {
+            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}`
+          } else {
+            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 reverseDayMonth ? `${dayName}, ${month} ${day}` : `${dayName}, ${day} ${month}`
+          }
+        }
+        font.pointSize: Math.max(Style.fontSizeXS, Style.fontSizeXS * scaling)
+        font.weight: Style.fontWeightRegular
+        color: Color.mPrimary
+        horizontalAlignment: Text.AlignHCenter
+        anchors.horizontalCenter: parent.horizontalCenter
       }
-      return timeString
     }
-    anchors.centerIn: parent
+
-    font.pointSize: Style.fontSizeS * scaling
+    // Non-compact single-line text
-    font.weight: Style.fontWeightBold
+    NText {
-    color: Color.mPrimary
+      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 {

Modules/SettingsPanel/Bar/WidgetSettings/ClockSettings.qml

@@ -18,6 +18,9 @@ ColumnLayout {
   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
+  property bool valueCompactDateNumeric: widgetData.compactDateNumeric
+                                         !== undefined ? widgetData.compactDateNumeric : widgetMetadata.compactDateNumeric
 
   function saveSettings() {
     var settings = Object.assign({}, widgetData || {})
@@ -25,6 +28,8 @@ ColumnLayout {
     settings.use12HourClock = valueUse12h
     settings.showSeconds = valueShowSeconds
     settings.reverseDayMonth = valueReverseDayMonth
+    settings.compactMode = valueCompactMode
+    settings.compactDateNumeric = valueCompactDateNumeric
     return settings
   }
 
@@ -34,6 +39,20 @@ ColumnLayout {
     onToggled: checked => valueShowDate = checked
   }
 
+  NToggle {
+    label: "Compact clock (date under time)"
+    checked: valueCompactMode
+    onToggled: checked => valueCompactMode = checked
+  }
+
+  // Only visible when compact mode is enabled
+  NToggle {
+    visible: valueCompactMode
+    label: "Compact date numeric (DD/MM)"
+    checked: valueCompactDateNumeric
+    onToggled: checked => valueCompactDateNumeric = checked
+  }
+
   NToggle {
     label: "Use 12-hour clock"
     checked: valueUse12h

Services/BarWidgetRegistry.qml

@@ -55,7 +55,9 @@ Singleton {
                                     "showDate": false,
                                     "use12HourClock": false,
                                     "showSeconds": false,
-                                    "reverseDayMonth": true
+                                    "reverseDayMonth": true,
+                                    "compactMode": false,
+                                    "compactDateNumeric": true
                                   },
                                   "CustomButton": {
                                     "allowUserSettings": true,