bar: add date and background option for clock (#1198)

* bar: add date and background option for clock

* fix height binding loop qs WARN

README.md

@@ -337,6 +337,8 @@ default, you must create it manually.
             "showOnHover": true
         },
         "clock": {
+            "background": false,
+            "showDate": false,
             "showIcon": true
         },
         "dragThreshold": 20,

config/BarConfig.qml

@@ -113,6 +113,8 @@ JsonObject {
     }
 
     component Clock: JsonObject {
+        property bool background: false
+        property bool showDate: true
         property bool showIcon: true
     }
 

config/Config.qml

@@ -202,6 +202,8 @@ Singleton {
                 showLockStatus: bar.status.showLockStatus
             },
             clock: {
+                background: bar.clock.background,
+                showDate: bar.clock.showDate,
                 showIcon: bar.clock.showIcon
             },
             entries: bar.entries,

modules/bar/components/Clock.qml

@@ -5,11 +5,21 @@ import qs.services
 import qs.config
 import QtQuick
 
-Column {
+StyledRect {
     id: root
 
-    property color colour: Colours.palette.m3tertiary
+    readonly property color colour: Colours.palette.m3tertiary
+    readonly property int padding: Config.bar.clock.background ? Appearance.padding.normal : Appearance.padding.small
 
+    implicitWidth: Config.bar.sizes.innerWidth
+    implicitHeight: layout.implicitHeight + root.padding * 2
+
+    color: Qt.alpha(Colours.tPalette.m3surfaceContainer, Config.bar.clock.background ? Colours.tPalette.m3surfaceContainer.a : 0)
+    radius: Appearance.rounding.full
+
+    Column {
+        id: layout
+        anchors.centerIn: parent
         spacing: Appearance.spacing.small
 
         Loader {
@@ -25,8 +35,28 @@ Column {
         }
         
         StyledText {
-        id: text
+            anchors.horizontalCenter: parent.horizontalCenter
 
+            visible: Config.bar.clock.showDate
+
+            horizontalAlignment: StyledText.AlignHCenter
+            text: Time.format("ddd\nd")
+            font.pointSize: Appearance.font.size.smaller
+            font.family: Appearance.font.family.sans
+            color: root.colour
+        }
+
+        Rectangle {
+            anchors.horizontalCenter: parent.horizontalCenter
+            visible: Config.bar.clock.showDate
+            height: visible ? 1 : 0
+            
+            width: parent.width * 0.8
+            color: root.colour
+            opacity: 0.2
+        }
+
+        StyledText {
             anchors.horizontalCenter: parent.horizontalCenter
 
             horizontalAlignment: StyledText.AlignHCenter
@@ -35,4 +65,5 @@ Column {
             font.family: Appearance.font.family.mono
             color: root.colour
         }
+    }
 }

modules/controlcenter/taskbar/TaskbarPane.qml

@@ -22,6 +22,8 @@ Item {
     property bool activeWindowCompact: Config.bar.activeWindow.compact ?? false
     property bool activeWindowInverted: Config.bar.activeWindow.inverted ?? false
     property bool clockShowIcon: Config.bar.clock.showIcon ?? true
+    property bool clockBackground: Config.bar.clock.background ?? false
+    property bool clockShowDate: Config.bar.clock.showDate ?? false
     property bool persistent: Config.bar.persistent ?? true
     property bool showOnHover: Config.bar.showOnHover ?? true
     property int dragThreshold: Config.bar.dragThreshold ?? 20
@@ -69,6 +71,8 @@ Item {
     function saveConfig(entryIndex, entryEnabled) {
         Config.bar.activeWindow.compact = root.activeWindowCompact;
         Config.bar.activeWindow.inverted = root.activeWindowInverted;
+        Config.bar.clock.background = root.clockBackground;
+        Config.bar.clock.showDate = root.clockShowDate;
         Config.bar.clock.showIcon = root.clockShowIcon;
         Config.bar.persistent = root.persistent;
         Config.bar.showOnHover = root.showOnHover;
@@ -537,6 +541,24 @@ Item {
                                 font.pointSize: Appearance.font.size.normal
                             }
 
+                            SwitchRow {
+                                label: qsTr("Background")
+                                checked: root.clockBackground
+                                onToggled: checked => {
+                                    root.clockBackground = checked;
+                                    root.saveConfig();
+                                }
+                            }
+
+                            SwitchRow {
+                                label: qsTr("Show date")
+                                checked: root.clockShowDate
+                                onToggled: checked => {
+                                    root.clockShowDate = checked;
+                                    root.saveConfig();
+                                }
+                            }
+
                             SwitchRow {
                                 label: qsTr("Show clock icon")
                                 checked: root.clockShowIcon