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,34 +5,65 @@ 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
 
-    spacing: Appearance.spacing.small
+    implicitWidth: Config.bar.sizes.innerWidth
+    implicitHeight: layout.implicitHeight + root.padding * 2
 
-    Loader {
+    color: Qt.alpha(Colours.tPalette.m3surfaceContainer, Config.bar.clock.background ? Colours.tPalette.m3surfaceContainer.a : 0)
-        anchors.horizontalCenter: parent.horizontalCenter
+    radius: Appearance.rounding.full
 
-        active: Config.bar.clock.showIcon
+    Column {
-        visible: active
+        id: layout
+        anchors.centerIn: parent
+        spacing: Appearance.spacing.small
 
-        sourceComponent: MaterialIcon {
+        Loader {
-            text: "calendar_month"
+            anchors.horizontalCenter: parent.horizontalCenter
+
+            active: Config.bar.clock.showIcon
+            visible: active
+
+            sourceComponent: MaterialIcon {
+                text: "calendar_month"
+                color: root.colour
+            }
+        }
+        
+        StyledText {
+            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
+            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
         }
     }
-
-    StyledText {
-        id: text
-
-        anchors.horizontalCenter: parent.horizontalCenter
-
-        horizontalAlignment: StyledText.AlignHCenter
-        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/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