Clock: factorized many settings in a single combobox

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