config: respect user locale for twelve hour clock & temperature (#290)

* bar: add 12h clock option

* feat: allow custom format config

* feat: 12h clock based on locale with config

* chore: cleanup

* fix: PR comments, add automatic fahrenheit

* fix: formatting

* dashboard: fix up date time

* lock: better 12h clock

---------

Co-authored-by: Soramane <61896496+soramanew@users.noreply.github.com>

README.md

@@ -221,7 +221,8 @@ All configuration options are in `~/.config/caelestia/shell.json`.
     },
     "services": {
       "weatherLocation": "10,10",
-      "useFahrenheit": false
+      "useFahrenheit": false,
+      "useTwelveHourClock": false
     },
     "session": {
         "dragThreshold": 30,

config/ServiceConfig.qml

@@ -1,6 +1,8 @@
 import Quickshell.Io
+import QtQuick
 
 JsonObject {
     property string weatherLocation: "" // A lat,long pair or empty for autodetection, e.g. "37.8267,-122.4233"
-    property bool useFahrenheit: false
+    property bool useFahrenheit: [Locale.ImperialUSSystem, Locale.ImperialSystem].includes(Qt.locale().measurementSystem)
+    property bool useTwelveHourClock: Qt.locale().timeFormat(Locale.ShortFormat).toLowerCase().includes("a")
 }

modules/background/DesktopClock.qml

@@ -11,7 +11,7 @@ Item {
         id: timeText
 
         anchors.centerIn: parent
-        text: Time.format("hh:mm:ss")
+        text: Time.format(Config.services.useTwelveHourClock ? "hh:mm:ss A" : "hh:mm:ss")
         font.pointSize: Appearance.font.size.extraLarge
         font.bold: true
     }

modules/bar/components/Clock.qml

@@ -25,7 +25,7 @@ Column {
         anchors.horizontalCenter: parent.horizontalCenter
 
         horizontalAlignment: StyledText.AlignHCenter
-        text: Time.format("hh\nmm")
+        text: Time.format(Config.services.useTwelveHourClock ? "hh\nmm\nA" : "hh\nmm")
         font.pointSize: Appearance.font.size.smaller
         font.family: Appearance.font.family.mono
         color: root.colour

modules/dashboard/dash/DateTime.qml

@@ -2,70 +2,67 @@ import qs.widgets
 import qs.services
 import qs.config
 import QtQuick
+import QtQuick.Layouts
 
 Item {
     id: root
 
+    readonly property list<string> timeComponents: Time.format(Config.services.useTwelveHourClock ? "hh:mm:A" : "hh:mm").split(":")
+
     anchors.top: parent.top
     anchors.bottom: parent.bottom
     implicitWidth: Config.dashboard.sizes.dateTimeWidth
 
-    StyledText {
-        id: hours
-
+    ColumnLayout {
         anchors.left: parent.left
         anchors.right: parent.right
-        anchors.top: parent.top
-        anchors.topMargin: (root.height - (hours.implicitHeight + sep.implicitHeight + sep.anchors.topMargin + mins.implicitHeight + mins.anchors.topMargin + date.implicitHeight + date.anchors.topMargin)) / 2
+        anchors.verticalCenter: parent.verticalCenter
+        spacing: 0
 
-        horizontalAlignment: Text.AlignHCenter
-        text: Time.format("HH")
-        color: Colours.palette.m3secondary
-        font.pointSize: Appearance.font.size.extraLarge
-        font.weight: 500
-    }
+        StyledText {
+            Layout.alignment: Qt.AlignHCenter
+            text: root.timeComponents[0]
+            color: Colours.palette.m3secondary
+            font.pointSize: Appearance.font.size.extraLarge
+            font.weight: 600
+        }
 
-    StyledText {
-        id: sep
+        StyledText {
+            Layout.topMargin: -(font.pointSize * 0.2)
+            Layout.alignment: Qt.AlignHCenter
+            text: "•••"
+            color: Colours.palette.m3primary
+            font.pointSize: Appearance.font.size.extraLarge * 0.9
+        }
 
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.top: hours.bottom
-        anchors.topMargin: -font.pointSize * 0.5
+        StyledText {
+            Layout.alignment: Qt.AlignHCenter
+            text: root.timeComponents[1]
+            color: Colours.palette.m3secondary
+            font.pointSize: Appearance.font.size.extraLarge
+            font.weight: 600
+        }
 
-        horizontalAlignment: Text.AlignHCenter
-        text: "•••"
-        color: Colours.palette.m3primary
-        font.pointSize: Appearance.font.size.extraLarge * 0.9
-    }
+        StyledText {
+            visible: Config.services.useTwelveHourClock
+            Layout.topMargin: Appearance.spacing.small
+            Layout.alignment: Qt.AlignHCenter
 
-    StyledText {
-        id: mins
+            text: root.timeComponents[2]
+            color: Colours.palette.m3secondary
+            font.pointSize: Appearance.font.size.large
+            font.weight: 600
+        }
 
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.top: sep.bottom
-        anchors.topMargin: -sep.font.pointSize * 0.45
-
-        horizontalAlignment: Text.AlignHCenter
-        text: Time.format("mm")
-        color: Colours.palette.m3secondary
-        font.pointSize: Appearance.font.size.extraLarge
-        font.weight: 500
-    }
-
-    StyledText {
-        id: date
-
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.top: mins.bottom
-        anchors.topMargin: Appearance.spacing.normal
-
-        horizontalAlignment: Text.AlignHCenter
-        text: Time.format("ddd, d")
-        color: Colours.palette.m3tertiary
-        font.pointSize: Appearance.font.size.normal
-        font.weight: 500
+        StyledText {
+            Layout.topMargin: Appearance.spacing.normal
+            Layout.fillWidth: true
+            horizontalAlignment: Text.AlignHCenter
+            text: Time.format("ddd, d")
+            color: Colours.palette.m3tertiary
+            font.pointSize: Appearance.font.size.normal
+            font.weight: 500
+            elide: Text.ElideRight
+        }
     }
 }

modules/lock/Clock.qml

@@ -1,6 +1,7 @@
 import qs.widgets
 import qs.services
 import qs.config
+import QtQuick
 import QtQuick.Layouts
 
 ColumnLayout {
@@ -8,13 +9,15 @@ ColumnLayout {
 
     spacing: 0
 
+    readonly property list<string> timeComponents: Time.format(Config.services.useTwelveHourClock ? "hh:mm:A" : "hh:mm").split(":")
+
     RowLayout {
         Layout.alignment: Qt.AlignHCenter
         spacing: Appearance.spacing.small
 
         StyledText {
             Layout.alignment: Qt.AlignVCenter
-            text: Time.format("HH")
+            text: root.timeComponents[0]
             color: Colours.palette.m3secondary
             font.pointSize: Appearance.font.size.extraLarge * 4
             font.family: Appearance.font.family.mono
@@ -32,12 +35,23 @@ ColumnLayout {
 
         StyledText {
             Layout.alignment: Qt.AlignVCenter
-            text: Time.format("mm")
+            text: root.timeComponents[1]
             color: Colours.palette.m3secondary
             font.pointSize: Appearance.font.size.extraLarge * 4
             font.family: Appearance.font.family.mono
             font.weight: 800
         }
+
+        StyledText {
+            visible: Config.services.useTwelveHourClock
+            Layout.leftMargin: Appearance.spacing.normal
+            Layout.alignment: Qt.AlignVCenter
+
+            text: root.timeComponents[2]
+            color: Colours.palette.m3primary
+            font.pointSize: Appearance.font.size.extraLarge * 3
+            font.weight: 700
+        }
     }
 
     StyledText {