Customizable date format

Modules/Settings/TimeWeatherTab.qml

@@ -4,183 +4,382 @@ import qs.Common
 import qs.Widgets
 
 Item {
-  id: timeWeatherTab
+    id: timeWeatherTab
-
-  DankFlickable {
-    anchors.fill: parent
-    anchors.topMargin: Theme.spacingL
-    anchors.bottomMargin: Theme.spacingXL
-    clip: true
-    contentHeight: mainColumn.height
-    contentWidth: width
-
-    Column {
-      id: mainColumn
-      width: parent.width
-      spacing: Theme.spacingXL
-
-      Loader {
-        width: parent.width
-        sourceComponent: timeComponent
-      }
-
-      Loader {
-        width: parent.width
-        sourceComponent: weatherComponent
-      }
-    }
-  }
-
-  // Time Format Component
-  Component {
-    id: timeComponent
-
-    StyledRect {
-      width: parent.width
-      height: timeSection.implicitHeight + Theme.spacingL * 2
-      radius: Theme.cornerRadius
-      color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g,
-                     Theme.surfaceVariant.b, 0.3)
-      border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
-                            Theme.outline.b, 0.2)
-      border.width: 1
-
-      Column {
-        id: timeSection
 
+    DankFlickable {
         anchors.fill: parent
-        anchors.margins: Theme.spacingL
+        anchors.topMargin: Theme.spacingL
-        spacing: Theme.spacingM
+        anchors.bottomMargin: Theme.spacingXL
-
+        clip: true
-        Row {
+        contentHeight: mainColumn.height
-          width: parent.width
+        contentWidth: width
-          spacing: Theme.spacingM
-
-          DankIcon {
-            name: "schedule"
-            size: Theme.iconSize
-            color: Theme.primary
-            anchors.verticalCenter: parent.verticalCenter
-          }
-
-          StyledText {
-            text: "Time Format"
-            font.pixelSize: Theme.fontSizeLarge
-            font.weight: Font.Medium
-            color: Theme.surfaceText
-            anchors.verticalCenter: parent.verticalCenter
-          }
-        }
-
-        DankToggle {
-          width: parent.width
-          text: "24-Hour Format"
-          description: "Use 24-hour time format instead of 12-hour AM/PM"
-          checked: SettingsData.use24HourClock
-          onToggled: checked => {
-                       return SettingsData.setClockFormat(checked)
-                     }
-        }
-      }
-    }
-  }
-
-  // Weather Component
-  Component {
-    id: weatherComponent
-
-    StyledRect {
-      width: parent.width
-      height: weatherSection.implicitHeight + Theme.spacingL * 2
-      radius: Theme.cornerRadius
-      color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g,
-                     Theme.surfaceVariant.b, 0.3)
-      border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
-                            Theme.outline.b, 0.2)
-      border.width: 1
-
-      Column {
-        id: weatherSection
-
-        anchors.fill: parent
-        anchors.margins: Theme.spacingL
-        spacing: Theme.spacingM
-
-        Row {
-          width: parent.width
-          spacing: Theme.spacingM
-
-          DankIcon {
-            name: "cloud"
-            size: Theme.iconSize
-            color: Theme.primary
-            anchors.verticalCenter: parent.verticalCenter
-          }
-
-          StyledText {
-            text: "Weather"
-            font.pixelSize: Theme.fontSizeLarge
-            font.weight: Font.Medium
-            color: Theme.surfaceText
-            anchors.verticalCenter: parent.verticalCenter
-          }
-        }
-
-        DankToggle {
-          width: parent.width
-          text: "Enable Weather"
-          description: "Show weather information in top bar and centcom center"
-          checked: SettingsData.weatherEnabled
-          onToggled: checked => {
-                       return SettingsData.setWeatherEnabled(checked)
-                     }
-        }
-
-        DankToggle {
-          width: parent.width
-          text: "Fahrenheit"
-          description: "Use Fahrenheit instead of Celsius for temperature"
-          checked: SettingsData.useFahrenheit
-          enabled: SettingsData.weatherEnabled
-          onToggled: checked => {
-                       return SettingsData.setTemperatureUnit(checked)
-                     }
-        }
-
-        DankToggle {
-          width: parent.width
-          text: "Auto Location"
-          description: "Allow wttr.in to determine location based on IP address"
-          checked: SettingsData.useAutoLocation
-          enabled: SettingsData.weatherEnabled
-          onToggled: checked => {
-                       return SettingsData.setAutoLocation(checked)
-                     }
-        }
 
         Column {
-          width: parent.width
+            id: mainColumn
-          spacing: Theme.spacingXS
-          visible: !SettingsData.useAutoLocation && SettingsData.weatherEnabled
 
-          StyledText {
-            text: "Location"
-            font.pixelSize: Theme.fontSizeMedium
-            color: Theme.surfaceText
-            font.weight: Font.Medium
-          }
-
-          DankLocationSearch {
             width: parent.width
-            currentLocation: SettingsData.weatherLocation
+            spacing: Theme.spacingXL
-            placeholderText: "New York, NY"
+
-            onLocationSelected: (displayName, coordinates) => {
+            Loader {
-                                  SettingsData.setWeatherLocation(displayName,
+                width: parent.width
-                                                                  coordinates)
+                sourceComponent: timeComponent
-                                }
+            }
-          }
+
+            Loader {
+                width: parent.width
+                sourceComponent: weatherComponent
+            }
+
         }
-      }
+
     }
-  }
+
+    // Time Format Component
+    Component {
+        id: timeComponent
+
+        StyledRect {
+            width: parent.width
+            height: timeSection.implicitHeight + Theme.spacingL * 2
+            radius: Theme.cornerRadius
+            color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
+            border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+            border.width: 1
+
+            Column {
+                id: timeSection
+
+                anchors.fill: parent
+                anchors.margins: Theme.spacingL
+                spacing: Theme.spacingM
+
+                Row {
+                    width: parent.width
+                    spacing: Theme.spacingM
+
+                    DankIcon {
+                        name: "schedule"
+                        size: Theme.iconSize
+                        color: Theme.primary
+                        anchors.verticalCenter: parent.verticalCenter
+                    }
+
+                    StyledText {
+                        text: "Time Format"
+                        font.pixelSize: Theme.fontSizeLarge
+                        font.weight: Font.Medium
+                        color: Theme.surfaceText
+                        anchors.verticalCenter: parent.verticalCenter
+                    }
+
+                }
+
+                DankToggle {
+                    width: parent.width
+                    text: "24-Hour Format"
+                    description: "Use 24-hour time format instead of 12-hour AM/PM"
+                    checked: SettingsData.use24HourClock
+                    onToggled: (checked) => {
+                        return SettingsData.setClockFormat(checked);
+                    }
+                }
+
+                Column {
+                    width: parent.width
+                    spacing: Theme.spacingS
+
+                    StyledText {
+                        text: "Date Format"
+                        font.pixelSize: Theme.fontSizeMedium
+                        color: Theme.surfaceText
+                        font.weight: Font.Medium
+                    }
+
+                    DankDropdown {
+                        width: parent.width
+                        height: 50
+                        text: "Format"
+                        description: "Preview: " + Qt.formatDate(new Date(), SettingsData.clockDateFormat)
+                        currentValue: {
+                            // Find matching preset or show "Custom"
+                            const presets = [{
+                                "format": "ddd d",
+                                "label": "Day Date"
+                            }, {
+                                "format": "ddd MMM d",
+                                "label": "Day Month Date"
+                            }, {
+                                "format": "MMM d",
+                                "label": "Month Date"
+                            }, {
+                                "format": "M/d",
+                                "label": "Numeric (M/D)"
+                            }, {
+                                "format": "d/M",
+                                "label": "Numeric (D/M)"
+                            }, {
+                                "format": "ddd d MMM yyyy",
+                                "label": "Full with Year"
+                            }, {
+                                "format": "yyyy-MM-dd",
+                                "label": "ISO Date"
+                            }, {
+                                "format": "dddd, MMMM d",
+                                "label": "Full Day & Month"
+                            }];
+                            const match = presets.find((p) => {
+                                return p.format === SettingsData.clockDateFormat;
+                            });
+                            return match ? match.label : "Custom: " + SettingsData.clockDateFormat;
+                        }
+                        options: ["Day Date", "Day Month Date", "Month Date", "Numeric (M/D)", "Numeric (D/M)", "Full with Year", "ISO Date", "Full Day & Month", "Custom..."]
+                        onValueChanged: (value) => {
+                            const formatMap = {
+                                "Day Date": "ddd d",
+                                "Day Month Date": "ddd MMM d",
+                                "Month Date": "MMM d",
+                                "Numeric (M/D)": "M/d",
+                                "Numeric (D/M)": "d/M",
+                                "Full with Year": "ddd d MMM yyyy",
+                                "ISO Date": "yyyy-MM-dd",
+                                "Full Day & Month": "dddd, MMMM d"
+                            };
+                            if (value === "Custom...") {
+                                customFormatInput.visible = true;
+                            } else {
+                                customFormatInput.visible = false;
+                                SettingsData.setClockDateFormat(formatMap[value]);
+                            }
+                        }
+                    }
+
+                    DankTextField {
+                        id: customFormatInput
+
+                        width: parent.width
+                        visible: false
+                        placeholderText: "Enter custom format (e.g., ddd MMM d)"
+                        text: SettingsData.clockDateFormat
+                        onTextChanged: {
+                            if (visible && text)
+                                SettingsData.setClockDateFormat(text);
+
+                        }
+                    }
+
+                    Rectangle {
+                        width: parent.width
+                        height: formatHelp.implicitHeight + Theme.spacingM * 2
+                        radius: Theme.cornerRadius
+                        color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.2)
+                        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.1)
+                        border.width: 1
+
+                        Column {
+                            id: formatHelp
+
+                            anchors.fill: parent
+                            anchors.margins: Theme.spacingM
+                            spacing: Theme.spacingXS
+
+                            StyledText {
+                                text: "Format Legend"
+                                font.pixelSize: Theme.fontSizeSmall
+                                color: Theme.primary
+                                font.weight: Font.Medium
+                            }
+
+                            Row {
+                                spacing: Theme.spacingL
+
+                                Column {
+                                    spacing: 2
+
+                                    StyledText {
+                                        text: "• d - Day (1-31)"
+                                        font.pixelSize: Theme.fontSizeSmall
+                                        color: Theme.surfaceVariantText
+                                    }
+
+                                    StyledText {
+                                        text: "• dd - Day (01-31)"
+                                        font.pixelSize: Theme.fontSizeSmall
+                                        color: Theme.surfaceVariantText
+                                    }
+
+                                    StyledText {
+                                        text: "• ddd - Day name (Mon)"
+                                        font.pixelSize: Theme.fontSizeSmall
+                                        color: Theme.surfaceVariantText
+                                    }
+
+                                    StyledText {
+                                        text: "• dddd - Day name (Monday)"
+                                        font.pixelSize: Theme.fontSizeSmall
+                                        color: Theme.surfaceVariantText
+                                    }
+
+                                }
+
+                                Column {
+                                    spacing: 2
+
+                                    StyledText {
+                                        text: "• M - Month (1-12)"
+                                        font.pixelSize: Theme.fontSizeSmall
+                                        color: Theme.surfaceVariantText
+                                    }
+
+                                    StyledText {
+                                        text: "• MM - Month (01-12)"
+                                        font.pixelSize: Theme.fontSizeSmall
+                                        color: Theme.surfaceVariantText
+                                    }
+
+                                    StyledText {
+                                        text: "• MMM - Month (Jan)"
+                                        font.pixelSize: Theme.fontSizeSmall
+                                        color: Theme.surfaceVariantText
+                                    }
+
+                                    StyledText {
+                                        text: "• MMMM - Month (January)"
+                                        font.pixelSize: Theme.fontSizeSmall
+                                        color: Theme.surfaceVariantText
+                                    }
+
+                                }
+
+                                Column {
+                                    spacing: 2
+
+                                    StyledText {
+                                        text: "• yy - Year (24)"
+                                        font.pixelSize: Theme.fontSizeSmall
+                                        color: Theme.surfaceVariantText
+                                    }
+
+                                    StyledText {
+                                        text: "• yyyy - Year (2024)"
+                                        font.pixelSize: Theme.fontSizeSmall
+                                        color: Theme.surfaceVariantText
+                                    }
+
+                                }
+
+                            }
+
+                        }
+
+                    }
+
+                }
+
+            }
+
+        }
+
+    }
+
+    // Weather Component
+    Component {
+        id: weatherComponent
+
+        StyledRect {
+            width: parent.width
+            height: weatherSection.implicitHeight + Theme.spacingL * 2
+            radius: Theme.cornerRadius
+            color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
+            border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+            border.width: 1
+
+            Column {
+                id: weatherSection
+
+                anchors.fill: parent
+                anchors.margins: Theme.spacingL
+                spacing: Theme.spacingM
+
+                Row {
+                    width: parent.width
+                    spacing: Theme.spacingM
+
+                    DankIcon {
+                        name: "cloud"
+                        size: Theme.iconSize
+                        color: Theme.primary
+                        anchors.verticalCenter: parent.verticalCenter
+                    }
+
+                    StyledText {
+                        text: "Weather"
+                        font.pixelSize: Theme.fontSizeLarge
+                        font.weight: Font.Medium
+                        color: Theme.surfaceText
+                        anchors.verticalCenter: parent.verticalCenter
+                    }
+
+                }
+
+                DankToggle {
+                    width: parent.width
+                    text: "Enable Weather"
+                    description: "Show weather information in top bar and centcom center"
+                    checked: SettingsData.weatherEnabled
+                    onToggled: (checked) => {
+                        return SettingsData.setWeatherEnabled(checked);
+                    }
+                }
+
+                DankToggle {
+                    width: parent.width
+                    text: "Fahrenheit"
+                    description: "Use Fahrenheit instead of Celsius for temperature"
+                    checked: SettingsData.useFahrenheit
+                    enabled: SettingsData.weatherEnabled
+                    onToggled: (checked) => {
+                        return SettingsData.setTemperatureUnit(checked);
+                    }
+                }
+
+                DankToggle {
+                    width: parent.width
+                    text: "Auto Location"
+                    description: "Allow wttr.in to determine location based on IP address"
+                    checked: SettingsData.useAutoLocation
+                    enabled: SettingsData.weatherEnabled
+                    onToggled: (checked) => {
+                        return SettingsData.setAutoLocation(checked);
+                    }
+                }
+
+                Column {
+                    width: parent.width
+                    spacing: Theme.spacingXS
+                    visible: !SettingsData.useAutoLocation && SettingsData.weatherEnabled
+
+                    StyledText {
+                        text: "Location"
+                        font.pixelSize: Theme.fontSizeMedium
+                        color: Theme.surfaceText
+                        font.weight: Font.Medium
+                    }
+
+                    DankLocationSearch {
+                        width: parent.width
+                        currentLocation: SettingsData.weatherLocation
+                        placeholderText: "New York, NY"
+                        onLocationSelected: (displayName, coordinates) => {
+                            SettingsData.setWeatherLocation(displayName, coordinates);
+                        }
+                    }
+
+                }
+
+            }
+
+        }
+
+    }
+
 }

Modules/TopBar/Clock.qml

@@ -4,91 +4,89 @@ import qs.Common
 import qs.Widgets
 
 Rectangle {
-  id: root
+    id: root
 
-  property date currentDate: new Date()
+    property date currentDate: new Date()
-  property bool compactMode: false
+    property bool compactMode: false
-  property string section: "center"
+    property string section: "center"
-  property var popupTarget: null
+    property var popupTarget: null
-  property var parentScreen: null
+    property var parentScreen: null
 
-  signal clockClicked
+    signal clockClicked()
 
-  width: clockRow.implicitWidth + Theme.spacingS * 2
+    width: clockRow.implicitWidth + Theme.spacingS * 2
-  height: 30
+    height: 30
-  radius: Theme.cornerRadius
+    radius: Theme.cornerRadius
-  color: {
+    color: {
-    const baseColor = clockMouseArea.containsMouse ? Theme.primaryHover : Theme.surfaceTextHover
+        const baseColor = clockMouseArea.containsMouse ? Theme.primaryHover : Theme.surfaceTextHover;
-    return Qt.rgba(baseColor.r, baseColor.g, baseColor.b,
+        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
-                   baseColor.a * Theme.widgetTransparency)
+    }
-  }
+    Component.onCompleted: {
-  Component.onCompleted: {
+        root.currentDate = systemClock.date;
-    root.currentDate = systemClock.date
-  }
-
-  Row {
-    id: clockRow
-
-    anchors.centerIn: parent
-    spacing: Theme.spacingS
-
-    StyledText {
-      text: SettingsData.use24HourClock ? Qt.formatTime(root.currentDate,
-                                                        "H:mm") : Qt.formatTime(
-                                            root.currentDate, "h:mm AP")
-      font.pixelSize: Theme.fontSizeMedium - 1
-      color: Theme.surfaceText
-      anchors.verticalCenter: parent.verticalCenter
     }
 
-    StyledText {
+    Row {
-      text: "•"
+        id: clockRow
-      font.pixelSize: Theme.fontSizeSmall
+
-      color: Theme.outlineButton
+        anchors.centerIn: parent
-      anchors.verticalCenter: parent.verticalCenter
+        spacing: Theme.spacingS
-      visible: !SettingsData.clockCompactMode
+
+        StyledText {
+            text: SettingsData.use24HourClock ? Qt.formatTime(root.currentDate, "H:mm") : Qt.formatTime(root.currentDate, "h:mm AP")
+            font.pixelSize: Theme.fontSizeMedium - 1
+            color: Theme.surfaceText
+            anchors.verticalCenter: parent.verticalCenter
+        }
+
+        StyledText {
+            text: "•"
+            font.pixelSize: Theme.fontSizeSmall
+            color: Theme.outlineButton
+            anchors.verticalCenter: parent.verticalCenter
+            visible: !SettingsData.clockCompactMode
+        }
+
+        StyledText {
+            text: Qt.formatDate(root.currentDate, SettingsData.clockDateFormat)
+            font.pixelSize: Theme.fontSizeMedium - 1
+            color: Theme.surfaceText
+            anchors.verticalCenter: parent.verticalCenter
+            visible: !SettingsData.clockCompactMode
+        }
+
     }
 
-    StyledText {
+    SystemClock {
-      text: Qt.formatDate(root.currentDate, "ddd d")
+        id: systemClock
-      font.pixelSize: Theme.fontSizeMedium - 1
+
-      color: Theme.surfaceText
+        precision: SystemClock.Seconds
-      anchors.verticalCenter: parent.verticalCenter
+        onDateChanged: root.currentDate = systemClock.date
-      visible: !SettingsData.clockCompactMode
     }
-  }
 
-  SystemClock {
+    MouseArea {
-    id: systemClock
+        id: clockMouseArea
 
-    precision: SystemClock.Seconds
+        anchors.fill: parent
-    onDateChanged: root.currentDate = systemClock.date
+        hoverEnabled: true
-  }
+        cursorShape: Qt.PointingHandCursor
-
+        onClicked: {
-  MouseArea {
+            if (popupTarget && popupTarget.setTriggerPosition) {
-    id: clockMouseArea
+                var globalPos = mapToGlobal(0, 0);
-
+                var currentScreen = parentScreen || Screen;
-    anchors.fill: parent
+                var screenX = currentScreen.x || 0;
-    hoverEnabled: true
+                var relativeX = globalPos.x - screenX;
-    cursorShape: Qt.PointingHandCursor
+                popupTarget.setTriggerPosition(relativeX, Theme.barHeight + Theme.spacingXS, width, section, currentScreen);
-    onClicked: {
+            }
-      if (popupTarget && popupTarget.setTriggerPosition) {
+            root.clockClicked();
-        var globalPos = mapToGlobal(0, 0)
+        }
-        var currentScreen = parentScreen || Screen
-        var screenX = currentScreen.x || 0
-        var relativeX = globalPos.x - screenX
-        popupTarget.setTriggerPosition(relativeX,
-                                       Theme.barHeight + Theme.spacingXS,
-                                       width, section, currentScreen)
-      }
-      root.clockClicked()
     }
-  }
 
-  Behavior on color {
+    Behavior on color {
-    ColorAnimation {
+        ColorAnimation {
-      duration: Theme.shortDuration
+            duration: Theme.shortDuration
-      easing.type: Theme.standardEasing
+            easing.type: Theme.standardEasing
+        }
+
     }
-  }
+
 }