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>

1 files changed, 46 insertions, 49 deletions

diff --git a/modules/dashboard/dash/DateTime.qml b/modules/dashboard/dash/DateTime.qml
index b7c7cfd..57fac83 100644
--- a/modules/dashboard/dash/DateTime.qml
+++ b/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
-
-        horizontalAlignment: Text.AlignHCenter
-        text: Time.format("HH")
-        color: Colours.palette.m3secondary
-        font.pointSize: Appearance.font.size.extraLarge
-        font.weight: 500
-    }
+        anchors.verticalCenter: parent.verticalCenter
+        spacing: 0
 
-    StyledText {
-        id: sep
+        StyledText {
+            Layout.alignment: Qt.AlignHCenter
+            text: root.timeComponents[0]
+            color: Colours.palette.m3secondary
+            font.pointSize: Appearance.font.size.extraLarge
+            font.weight: 600
+        }
 
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.top: hours.bottom
-        anchors.topMargin: -font.pointSize * 0.5
+        StyledText {
+            Layout.topMargin: -(font.pointSize * 0.2)
+            Layout.alignment: Qt.AlignHCenter
+            text: "•••"
+            color: Colours.palette.m3primary
+            font.pointSize: Appearance.font.size.extraLarge * 0.9
+        }
 
-        horizontalAlignment: Text.AlignHCenter
-        text: "•••"
-        color: Colours.palette.m3primary
-        font.pointSize: Appearance.font.size.extraLarge * 0.9
-    }
+        StyledText {
+            Layout.alignment: Qt.AlignHCenter
+            text: root.timeComponents[1]
+            color: Colours.palette.m3secondary
+            font.pointSize: Appearance.font.size.extraLarge
+            font.weight: 600
+        }
 
-    StyledText {
-        id: mins
+        StyledText {
+            visible: Config.services.useTwelveHourClock
+            Layout.topMargin: Appearance.spacing.small
+            Layout.alignment: Qt.AlignHCenter
 
-        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
+            text: root.timeComponents[2]
+            color: Colours.palette.m3secondary
+            font.pointSize: Appearance.font.size.large
+            font.weight: 600
+        }
 
-        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
+        }
     }
 }