support for displaying seconds on a clock (#457)

Co-authored-by: Oleksandr <avktech@gmail.com>

Common/SettingsData.qml

@@ -60,6 +60,7 @@ Singleton {
     property real cornerRadius: 12
 
     property bool use24HourClock: true
+    property bool showSeconds: false
     property bool useFahrenheit: false
     property bool nightModeEnabled: false
     property int animationSpeed: SettingsData.AnimationSpeed.Short
@@ -320,6 +321,7 @@ Singleton {
                 popupTransparency = settings.popupTransparency !== undefined ? (settings.popupTransparency > 1 ? settings.popupTransparency / 100 : settings.popupTransparency) : 1.0
                 dockTransparency = settings.dockTransparency !== undefined ? (settings.dockTransparency > 1 ? settings.dockTransparency / 100 : settings.dockTransparency) : 1
                 use24HourClock = settings.use24HourClock !== undefined ? settings.use24HourClock : true
+                showSeconds = settings.showSeconds !== undefined ? settings.showSeconds : true
                 useFahrenheit = settings.useFahrenheit !== undefined ? settings.useFahrenheit : false
                 nightModeEnabled = settings.nightModeEnabled !== undefined ? settings.nightModeEnabled : false
                 weatherLocation = settings.weatherLocation !== undefined ? settings.weatherLocation : "New York, NY"
@@ -528,6 +530,7 @@ Singleton {
                                                 "popupTransparency": popupTransparency,
                                                 "dockTransparency": dockTransparency,
                                                 "use24HourClock": use24HourClock,
+                                                "showSeconds": showSeconds,
                                                 "useFahrenheit": useFahrenheit,
                                                 "nightModeEnabled": nightModeEnabled,
                                                 "weatherLocation": weatherLocation,
@@ -679,7 +682,7 @@ Singleton {
         const validKeys = [
             "currentThemeName", "customThemeFile", "matugenScheme", "runUserMatugenTemplates",
             "dankBarTransparency", "dankBarWidgetTransparency", "popupTransparency", "dockTransparency",
-            "use24HourClock", "useFahrenheit", "nightModeEnabled", "weatherLocation",
+            "use24HourClock", "showSeconds", "useFahrenheit", "nightModeEnabled", "weatherLocation",
             "weatherCoordinates", "useAutoLocation", "weatherEnabled", "showLauncherButton",
             "showWorkspaceSwitcher", "showFocusedWindow", "showWeather", "showMusic",
             "showClipboard", "showCpuUsage", "showMemUsage", "showCpuTemp", "showGpuTemp",
@@ -744,9 +747,9 @@ Singleton {
 
     function getEffectiveTimeFormat() {
         if (use24HourClock) {
-            return Locale.ShortFormat
+            return showSeconds ? "hh:mm:ss" : "hh:mm"
         } else {
-            return "h:mm AP"
+            return showSeconds ? "h:mm:ss AP": "h:mm AP"
         }
     }
 
@@ -1020,6 +1023,11 @@ Singleton {
         saveSettings()
     }
 
+    function setTimeFormat(useSec) {
+        showSeconds = useSec
+        saveSettings()
+    }
+
     function setTemperatureUnit(fahrenheit) {
         useFahrenheit = fahrenheit
         saveSettings()

Modules/DankBar/Widgets/Clock.qml

@@ -98,6 +98,30 @@ Rectangle {
             }
         }
 
+        Row {
+            visible: SettingsData.showSeconds
+            spacing: 0
+            anchors.horizontalCenter: parent.horizontalCenter
+
+            StyledText {
+                text: String(systemClock?.date?.getSeconds()).padStart(2, '0').charAt(0)
+                font.pixelSize: Theme.barTextSize(barThickness)
+                color: Theme.surfaceText
+                font.weight: Font.Normal
+                width: 9
+                horizontalAlignment: Text.AlignHCenter
+            }
+
+            StyledText {
+                text: String(systemClock?.date?.getSeconds()).padStart(2, '0').charAt(1)
+                font.pixelSize: Theme.barTextSize(barThickness)
+                color: Theme.surfaceText
+                font.weight: Font.Normal
+                width: 9
+                horizontalAlignment: Text.AlignHCenter
+            }
+        }
+
         Item {
             width: 12
             height: Theme.spacingM
@@ -191,8 +215,7 @@ Rectangle {
 
         StyledText {
             text: {
-                const format = SettingsData.use24HourClock ? "HH:mm" : "h:mm AP"
+                return systemClock?.date?.toLocaleTimeString(Qt.locale(), SettingsData.getEffectiveTimeFormat())
-                return systemClock?.date?.toLocaleTimeString(Qt.locale(), format)
             }
             font.pixelSize: Theme.barTextSize(barThickness)
             color: Theme.surfaceText

Modules/DankDash/Overview/ClockCard.qml

@@ -76,6 +76,31 @@ Card {
                     horizontalAlignment: Text.AlignHCenter
                 }
             }
+
+            Row {
+                visible: SettingsData.showSeconds
+                spacing: 0
+                anchors.horizontalCenter: parent.horizontalCenter
+
+                StyledText {
+                    text: String(systemClock?.date?.getSeconds()).padStart(2, '0').charAt(0)
+                    font.pixelSize: 48
+                    color: Theme.primary
+                    font.weight: Font.Medium
+                    width: 28
+                    horizontalAlignment: Text.AlignHCenter
+                }
+
+                StyledText {
+                    text: String(systemClock?.date?.getSeconds()).padStart(2, '0').charAt(1)
+                    font.pixelSize: 48
+                    color: Theme.primary
+                    font.weight: Font.Medium
+                    width: 28
+                    horizontalAlignment: Text.AlignHCenter
+                }
+            }
+
         }
         
         StyledText {

Modules/Lock/LockScreenContent.qml

@@ -190,8 +190,7 @@ Item {
                 anchors.horizontalCenter: parent.horizontalCenter
                 anchors.top: parent.top
                 text: {
-                    const format = SettingsData.use24HourClock ? "HH:mm" : "h:mm AP"
+                    return systemClock.date.toLocaleTimeString(Qt.locale(), SettingsData.getEffectiveTimeFormat())
-                    return systemClock.date.toLocaleTimeString(Qt.locale(), format)
                 }
                 font.pixelSize: 120
                 font.weight: Font.Light

Modules/Settings/TimeWeatherTab.qml

@@ -85,6 +85,69 @@ Item {
                 }
             }
 
+            StyledRect {
+                width: parent.width
+                height: timeSection.implicitHeight + Theme.spacingL * 2
+                radius: Theme.cornerRadius
+                color: Theme.surfaceContainerHigh
+                border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
+                                      Theme.outline.b, 0.2)
+                border.width: 0
+
+                Column {
+                    id: secondsSection
+
+                    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
+                        }
+
+                        Column {
+                            width: parent.width - Theme.iconSize - Theme.spacingM
+                                   - toggle.width - Theme.spacingM
+                            spacing: Theme.spacingXS
+                            anchors.verticalCenter: parent.verticalCenter
+
+                            StyledText {
+                                text: I18n.tr("Show seconds")
+                                font.pixelSize: Theme.fontSizeLarge
+                                font.weight: Font.Medium
+                                color: Theme.surfaceText
+                            }
+
+                            StyledText {
+                                text: I18n.tr("Clock show seconds")
+                                font.pixelSize: Theme.fontSizeSmall
+                                color: Theme.surfaceVariantText
+                                wrapMode: Text.WordWrap
+                                width: parent.width
+                            }
+                        }
+
+                        DankToggle {
+                            id: toggleSec
+
+                            anchors.verticalCenter: parent.verticalCenter
+                            checked: SettingsData.showSeconds
+                            onToggled: checked => {
+                                           return SettingsData.setTimeFormat(
+                                               checked)
+                                       }
+                        }
+                    }
+                }
+            }
+
             StyledRect {
                 width: parent.width
                 height: dateSection.implicitHeight + Theme.spacingL * 2