feat: add configurable widget appearance settings

2026-04-15 20:13:10 +00:00
parent f7cc9882ef
commit 0798dd3ea2
4 changed files with 364 additions and 20 deletions
@@ -1,5 +1,6 @@
 import QtQuick
 import QtQuick.Controls as QQC2
+import QtQuick.Dialogs as Dialogs
 import QtQuick.Layouts
 import org.kde.kcmutils as KCM
 import org.kde.kirigami as Kirigami
@@ -9,13 +10,77 @@ KCM.SimpleKCM {

    property alias cfg_opacity: opacitySpinBox.value
    property string cfg_fontFamily
+    property string cfg_labelVisibilityMode
+    property string cfg_labelPlacement
+    property string cfg_backgroundStyle
+    property alias cfg_backgroundColor: backgroundColorField.text
+    property alias cfg_backgroundRadius: backgroundRadiusSpinBox.value
+    property alias cfg_foregroundColor: foregroundColorField.text
+    property alias cfg_textShadowEnabled: textShadowCheckBox.checked
    readonly property var availableFonts: Qt.fontFamilies()
+    readonly property var labelVisibilityOptions: [{
+        "text": i18n("Auto hide when idle"),
+        "value": "auto"
+    }, {
+        "text": i18n("Always show"),
+        "value": "always"
+    }, {
+        "text": i18n("Always hide"),
+        "value": "never"
+    }]
+    readonly property var labelPlacementOptions: [{
+        "text": i18n("Left"),
+        "value": "left"
+    }, {
+        "text": i18n("Right"),
+        "value": "right"
+    }]
+    readonly property var backgroundStyleOptions: [{
+        "text": i18n("Default"),
+        "value": "custom"
+    }, {
+        "text": i18n("Solid background"),
+        "value": "default"
+    }]
+
+    function syncComboByValue(comboBox, options, configuredValue, fallbackValue) {
+        const requestedValue = configuredValue || fallbackValue;
+        const requestedIndex = options.findIndex((option) => {
+            return option.value === requestedValue;
+        });
+        const fallbackIndex = options.findIndex((option) => {
+            return option.value === fallbackValue;
+        });
+        const resolvedIndex = requestedIndex >= 0 ? requestedIndex : (fallbackIndex >= 0 ? fallbackIndex : 0);
+        if (comboBox.currentIndex !== resolvedIndex)
+            comboBox.currentIndex = resolvedIndex;
+
+        return options[resolvedIndex].value;
+    }

    onCfg_fontFamilyChanged: {
        const index = availableFonts.indexOf(cfg_fontFamily);
        if (index >= 0 && fontFamilyComboBox.currentIndex !== index)
            fontFamilyComboBox.currentIndex = index;

+    }
+    onCfg_labelVisibilityModeChanged: {
+        const resolvedValue = syncComboByValue(labelVisibilityModeComboBox, labelVisibilityOptions, cfg_labelVisibilityMode, "auto");
+        if (cfg_labelVisibilityMode !== resolvedValue)
+            cfg_labelVisibilityMode = resolvedValue;
+
+    }
+    onCfg_labelPlacementChanged: {
+        const resolvedValue = syncComboByValue(labelPlacementComboBox, labelPlacementOptions, cfg_labelPlacement, "left");
+        if (cfg_labelPlacement !== resolvedValue)
+            cfg_labelPlacement = resolvedValue;
+
+    }
+    onCfg_backgroundStyleChanged: {
+        const resolvedValue = syncComboByValue(backgroundStyleComboBox, backgroundStyleOptions, cfg_backgroundStyle, "custom");
+        if (cfg_backgroundStyle !== resolvedValue)
+            cfg_backgroundStyle = resolvedValue;
+
    }

    Kirigami.FormLayout {
@@ -35,6 +100,109 @@ KCM.SimpleKCM {
            onActivated: configRoot.cfg_fontFamily = currentText
        }

+        QQC2.ComboBox {
+            id: labelVisibilityModeComboBox
+
+            Kirigami.FormData.label: i18n("Now Playing labels:")
+            model: configRoot.labelVisibilityOptions
+            textRole: "text"
+            valueRole: "value"
+            onActivated: configRoot.cfg_labelVisibilityMode = currentValue
+        }
+
+        QQC2.ComboBox {
+            id: labelPlacementComboBox
+
+            Kirigami.FormData.label: i18n("Label placement:")
+            model: configRoot.labelPlacementOptions
+            textRole: "text"
+            valueRole: "value"
+            onActivated: configRoot.cfg_labelPlacement = currentValue
+        }
+
+        QQC2.ComboBox {
+            id: backgroundStyleComboBox
+
+            Kirigami.FormData.label: i18n("Background style:")
+            model: configRoot.backgroundStyleOptions
+            textRole: "text"
+            valueRole: "value"
+            onActivated: configRoot.cfg_backgroundStyle = currentValue
+        }
+
+        RowLayout {
+            Kirigami.FormData.label: i18n("Background color:")
+            enabled: configRoot.cfg_backgroundStyle === "custom"
+
+            QQC2.TextField {
+                id: backgroundColorField
+
+                Layout.fillWidth: true
+                placeholderText: i18n("transparent or #AARRGGBB")
+            }
+
+            QQC2.Button {
+                text: i18n("Pick...")
+                onClicked: {
+                    backgroundColorDialog.selectedColor = backgroundColorField.text || "transparent";
+                    backgroundColorDialog.open();
+                }
+            }
+
+        }
+
+        RowLayout {
+            Kirigami.FormData.label: i18n("Foreground color:")
+
+            QQC2.TextField {
+                id: foregroundColorField
+
+                Layout.fillWidth: true
+                placeholderText: i18n("white or #RRGGBB")
+            }
+
+            QQC2.Button {
+                text: i18n("Pick...")
+                onClicked: {
+                    foregroundColorDialog.selectedColor = foregroundColorField.text || "white";
+                    foregroundColorDialog.open();
+                }
+            }
+
+        }
+
+        QQC2.SpinBox {
+            id: backgroundRadiusSpinBox
+
+            Kirigami.FormData.label: i18n("Background radius:")
+            enabled: configRoot.cfg_backgroundStyle === "custom"
+            from: 0
+            to: 100
+        }
+
+        QQC2.CheckBox {
+            id: textShadowCheckBox
+
+            Kirigami.FormData.label: i18n("Text shadow:")
+            text: i18n("Enable")
+        }
+
+    }
+
+    Dialogs.ColorDialog {
+        id: backgroundColorDialog
+
+        title: i18n("Select background color")
+        options: Dialogs.ColorDialog.ShowAlphaChannel
+        onAccepted: configRoot.cfg_backgroundColor = selectedColor.toString()
+    }
+
+    Dialogs.ColorDialog {
+        id: foregroundColorDialog
+
+        title: i18n("Select foreground color")
+        options: Dialogs.ColorDialog.ShowAlphaChannel
+        onAccepted: configRoot.cfg_foregroundColor = selectedColor.toString()
    }

 }