Clock: add compact mode with nnumeric/verbose date options

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