add desktop clock colorization & fix control center widget hover color

Assets/settings-widgets-default.json

@@ -240,7 +240,7 @@
     "Clock": {
       "showBackground": true,
       "clockStyle": "digital",
-      "usePrimaryColor": false,
+      "clockColor": "none",
       "useCustomFont": false,
       "format": "HH:mm\\nd MMMM yyyy"
     },

Modules/Bar/Widgets/ControlCenter.qml

@@ -67,13 +67,10 @@ NIconButton {
   customRadius: Style.radiusL
   colorBg: Style.capsuleColor
   colorFg: iconColor
-  colorBgHover: useDistroLogo ? Color.mSurfaceVariant : Color.mHover
+  colorBgHover: Color.mHover
   colorFgHover: Color.mOnHover
-  colorBorder: "transparent"
-  colorBorderHover: useDistroLogo ? Color.mHover : "transparent"
-
-  border.color: Style.capsuleBorderColor
-  border.width: Style.capsuleBorderWidth
+  colorBorder: Style.capsuleBorderColor
+  colorBorderHover: Style.capsuleBorderColor
 
   NPopupContextMenu {
     id: contextMenu
@@ -141,9 +138,9 @@ NIconButton {
     visible: source !== ""
     smooth: true
     asynchronous: true
-    layer.enabled: enableColorization && (useDistroLogo || customIconPath !== "")
+    layer.enabled: (enableColorization || hovering) && (useDistroLogo || customIconPath !== "")
     layer.effect: ShaderEffect {
-      property color targetColor: iconColor
+      property color targetColor: !hovering ? iconColor : Color.mOnHover
       property real colorizeMode: 2.0
 
       fragmentShader: Qt.resolvedUrl(Quickshell.shellDir + "/Shaders/qsb/appicon_colorize.frag.qsb")

Modules/Panels/Settings/Bar/WidgetSettings/SystemMonitorSettings.qml

@@ -120,8 +120,8 @@ ColumnLayout {
   NToggle {
     id: showCpuFreq
     Layout.fillWidth: true
-    label: "Show CPU Frequency" // TODO: use I18n.tr
-    description: "Display the current CPU clock speed in GHz" // TODO: use I18n.tr
+    label: I18n.tr("bar.system-monitor.cpu-frequency-label")
+    description: I18n.tr("bar.system-monitor.cpu-frequency-description")
     checked: valueShowCpuFreq
     onToggled: checked => {
                  valueShowCpuFreq = checked;

Modules/Panels/Settings/DesktopWidgets/WidgetSettings/ClockSettings.qml

@@ -18,7 +18,7 @@ ColumnLayout {
   property bool valueShowBackground: widgetData.showBackground !== undefined ? widgetData.showBackground : widgetMetadata.showBackground
   property bool valueRoundedCorners: widgetData.roundedCorners !== undefined ? widgetData.roundedCorners : true
   property string valueClockStyle: widgetData.clockStyle !== undefined ? widgetData.clockStyle : widgetMetadata.clockStyle
-  property bool valueUsePrimaryColor: widgetData.usePrimaryColor !== undefined ? widgetData.usePrimaryColor : widgetMetadata.usePrimaryColor
+  property bool valueClockColor: widgetData.clockColor !== undefined ? widgetData.clockColor : widgetMetadata.clockColor
   property bool valueUseCustomFont: widgetData.useCustomFont !== undefined ? widgetData.useCustomFont : widgetMetadata.useCustomFont
   property string valueCustomFont: widgetData.customFont !== undefined ? widgetData.customFont : ""
   property string valueFormat: widgetData.format !== undefined ? widgetData.format : widgetMetadata.format
@@ -34,7 +34,7 @@ ColumnLayout {
     settings.showBackground = valueShowBackground;
     settings.roundedCorners = valueRoundedCorners;
     settings.clockStyle = valueClockStyle;
-    settings.usePrimaryColor = valueUsePrimaryColor;
+    settings.clockColor = valueClockColor;
     settings.useCustomFont = valueUseCustomFont;
     settings.customFont = valueCustomFont;
     settings.format = valueFormat.trim();
@@ -99,15 +99,37 @@ ColumnLayout {
                 }
   }
 
-  NToggle {
-    Layout.fillWidth: true
-    label: I18n.tr("bar.clock.use-primary-color-label")
-    description: I18n.tr("bar.clock.use-primary-color-description")
-    checked: valueUsePrimaryColor
-    onToggled: checked => {
-                 valueUsePrimaryColor = checked;
-                 settingsChanged(saveSettings());
-               }
+  NComboBox {
+    label: I18n.tr("common.select-color")
+    description: I18n.tr("bar.clock.select-color-description")
+    model: [
+      {
+        "name": I18n.tr("common.none"),
+        "key": "none"
+      },
+      {
+        "key": "primary",
+        "name": I18n.tr("common.primary")
+      },
+      {
+        "key": "secondary",
+        "name": I18n.tr("common.secondary")
+      },
+      {
+        "key": "tertiary",
+        "name": I18n.tr("common.tertiary")
+      },
+      {
+        "key": "error",
+        "name": I18n.tr("common.error")
+      }
+    ]
+    currentKey: valueClockColor
+    onSelected: key => {
+                  valueClockColor = key;
+                  settingsChanged(saveSettings());
+                }
+    minimumWidth: 200
   }
 
   NToggle {
@@ -225,7 +247,7 @@ ColumnLayout {
                 family: valueUseCustomFont && valueCustomFont ? valueCustomFont : Settings.data.ui.fontDefault
                 pointSize: Style.fontSizeM
                 font.weight: Style.fontWeightBold
-                color: valueUsePrimaryColor ? Color.mPrimary : Color.mOnSurface
+                color: valueClockColor
                 wrapMode: Text.WordWrap
                 Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
 

Services/UI/DesktopWidgetRegistry.qml

@@ -62,7 +62,7 @@ Singleton {
                                   "Clock": {
                                     "showBackground": true,
                                     "clockStyle": "digital",
-                                    "usePrimaryColor": false,
+                                    "clockColor": "none",
                                     "useCustomFont": false,
                                     "format": "HH:mm\\nd MMMM yyyy"
                                   },