diff --git a/Assets/Translations/de.json b/Assets/Translations/de.json index d130e330..74ee69aa 100644 --- a/Assets/Translations/de.json +++ b/Assets/Translations/de.json @@ -102,9 +102,13 @@ "control-center": { "browse-file": "Datei durchsuchen", "browse-library": "Bibliothek durchsuchen", - "colorize-distro-logo": { - "description": "Wende die Designfarben auf das Logo deiner Distribution an.", - "label": "Distro-Logo einfärben" + "enable-colorization": { + "description": "Aktiviert die Färbung für das Kontrollzentrum-Symbol und wendet Themenfarben an.", + "label": "Färbung aktivieren" + }, + "color-selection": { + "description": "Wendet Themenfarben auf Symbole an.", + "label": "Farbauswahl" }, "icon": { "description": "Symbol aus der Bibliothek oder eine benutzerdefinierte Datei auswählen.", diff --git a/Assets/Translations/en.json b/Assets/Translations/en.json index 386e0217..b5d4a34a 100644 --- a/Assets/Translations/en.json +++ b/Assets/Translations/en.json @@ -102,14 +102,18 @@ "control-center": { "browse-file": "Browse File", "browse-library": "Browse Library", - "colorize-distro-logo": { - "description": "Apply theme colors to your distribution logo.", - "label": "Colorize distro logo" - }, "icon": { "description": "Select an icon from the library or a custom file.", "label": "Icon" }, + "enable-colorization": { + "description": "Enable colorization for the control center icon, applying theme colors.", + "label": "Enable Colorization" + }, + "color-selection": { + "description": "Apply theme colors to icons.", + "label": "Select Color" + }, "select-custom-icon": "Select a custom icon", "use-distro-logo": { "description": "Use your distribution's logo instead of a custom icon.", @@ -542,6 +546,7 @@ }, "colors": { "error": "Error", + "none": "None", "onSurface": "On Surface", "primary": "Primary", "secondary": "Secondary", diff --git a/Assets/Translations/es.json b/Assets/Translations/es.json index bfa4ec9e..48113563 100644 --- a/Assets/Translations/es.json +++ b/Assets/Translations/es.json @@ -102,9 +102,13 @@ "control-center": { "browse-file": "Explorar archivo", "browse-library": "Explorar biblioteca", - "colorize-distro-logo": { - "description": "Aplica los colores del tema a tu logotipo de distribución.", - "label": "Colorear logotipo de la distribución" + "enable-colorization": { + "description": "Habilita la coloración para el ícono del centro de control, aplicando colores del tema.", + "label": "Habilitar Coloración" + }, + "color-selection": { + "description": "Aplica colores del tema a los íconos.", + "label": "Seleccionar Color" }, "icon": { "description": "Selecciona un icono de la biblioteca o un archivo personalizado.", diff --git a/Assets/Translations/fr.json b/Assets/Translations/fr.json index cb99dca5..6981185f 100644 --- a/Assets/Translations/fr.json +++ b/Assets/Translations/fr.json @@ -102,9 +102,13 @@ "control-center": { "browse-file": "Parcourir les fichiers", "browse-library": "Parcourir la bibliothèque", - "colorize-distro-logo": { - "description": "Appliquez les couleurs du thème au logo de votre distribution.", - "label": "Coloriser le logo de la distribution" + "enable-colorization": { + "description": "Active la coloration pour l'icône du centre de contrôle, en appliquant les couleurs du thème.", + "label": "Activer la Coloration" + }, + "color-selection": { + "description": "Applique les couleurs du thème aux icônes.", + "label": "Sélectionner la Couleur" }, "icon": { "description": "Sélectionnez une icône de la bibliothèque ou un fichier personnalisé.", diff --git a/Assets/Translations/ja.json b/Assets/Translations/ja.json index ab35dfb2..1af2ac8d 100644 --- a/Assets/Translations/ja.json +++ b/Assets/Translations/ja.json @@ -102,9 +102,13 @@ "control-center": { "browse-file": "ファイルを参照", "browse-library": "ライブラリを参照", - "colorize-distro-logo": { - "description": "ディストリビューションのロゴにテーマカラーを適用します。", - "label": "テーマカラーの適用" + "enable-colorization": { + "description": "コントロールセンターのアイコンの色付けを有効にし、テーマの色を適用します。", + "label": "色の有効化" + }, + "color-selection": { + "description": "アイコンにテーマの色を適用します。", + "label": "色の選択" }, "icon": { "description": "ライブラリまたはカスタムファイルからアイコンを選択します。", diff --git a/Assets/Translations/nl.json b/Assets/Translations/nl.json index 6ba74b31..38e7398e 100644 --- a/Assets/Translations/nl.json +++ b/Assets/Translations/nl.json @@ -102,9 +102,13 @@ "control-center": { "browse-file": "Bestand kiezen", "browse-library": "Bibliotheek doorbladeren", - "colorize-distro-logo": { - "description": "Pas themakleuren toe op je distributielogo.", - "label": "Distributielogo inkleuren" + "enable-colorization": { + "description": "Schakel kleuring in voor het pictogram van het controlecentrum, waarbij themakleuren worden toegepast.", + "label": "Kleuren inschakelen" + }, + "color-selection": { + "description": "Themakleuren toepassen op pictogrammen.", + "label": "Kleur selecteren" }, "icon": { "description": "Selecteer een pictogram uit de bibliotheek of een aangepast bestand.", diff --git a/Assets/Translations/pt.json b/Assets/Translations/pt.json index 85715953..b62d03e3 100644 --- a/Assets/Translations/pt.json +++ b/Assets/Translations/pt.json @@ -102,9 +102,13 @@ "control-center": { "browse-file": "Navegar por Arquivo", "browse-library": "Navegar na Biblioteca", - "colorize-distro-logo": { - "description": "Aplicar as cores do tema ao logotipo da sua distribuição.", - "label": "Colorir logo da distribuição" + "enable-colorization": { + "description": "Ativa a colorização para o ícone do centro de controlo, aplicando as cores do tema.", + "label": "Ativar colorização" + }, + "color-selection": { + "description": "Aplica as cores do tema aos ícones.", + "label": "Selecionar cor" }, "icon": { "description": "Selecione um ícone da biblioteca ou um arquivo personalizado.", diff --git a/Assets/Translations/ru.json b/Assets/Translations/ru.json index 77e82ae3..1ab96fb7 100644 --- a/Assets/Translations/ru.json +++ b/Assets/Translations/ru.json @@ -102,9 +102,13 @@ "control-center": { "browse-file": "Обзор файла", "browse-library": "Обзор библиотеки", - "colorize-distro-logo": { - "description": "Применить цвета темы к логотипу вашего дистрибутива.", - "label": "Раскрасить логотип дистрибутива" + "enable-colorization": { + "description": "Включает окрашивание для значка центра управления, применяя цвета темы.", + "label": "Включить окрашивание" + }, + "color-selection": { + "description": "Применяет цвета темы к значкам.", + "label": "Выбор цвета" }, "icon": { "description": "Выберите иконку из библиотеки или пользовательский файл.", diff --git a/Assets/Translations/tr.json b/Assets/Translations/tr.json index e2ee4721..9f87f816 100644 --- a/Assets/Translations/tr.json +++ b/Assets/Translations/tr.json @@ -102,9 +102,13 @@ "control-center": { "browse-file": "Dosyaya Göz At", "browse-library": "Kütüphaneye Göz At", - "colorize-distro-logo": { - "description": "Dağıtım logonuza tema renklerini uygula.", - "label": "Dağıtım logosunu renklendir" + "enable-colorization": { + "description": "Kontrol merkezi simgesi için renklendirmeyi etkinleştirir, tema renklerini uygular.", + "label": "Renklendirmeyi Etkinleştir" + }, + "color-selection": { + "description": "Simgeye tema renklerini uygular.", + "label": "Renk Seç" }, "icon": { "description": "Kütüphaneden veya özel bir dosyadan bir ikon seçin.", diff --git a/Assets/Translations/uk-UA.json b/Assets/Translations/uk-UA.json index 01f39558..d8703c26 100644 --- a/Assets/Translations/uk-UA.json +++ b/Assets/Translations/uk-UA.json @@ -102,9 +102,13 @@ "control-center": { "browse-file": "Огляд файлу", "browse-library": "Огляд бібліотеки", - "colorize-distro-logo": { - "description": "Застосувати кольори теми до логотипа вашого дистрибутива.", - "label": "Розфарбовувати логотип дистрибутива" + "enable-colorization": { + "description": "Вмикає розфарбовування для іконки центру керування, застосовуючи кольори теми.", + "label": "Увімкнути розфарбовування" + }, + "color-selection": { + "description": "Застосовує кольори теми до іконок.", + "label": "Вибір кольору" }, "icon": { "description": "Вибрати значок з бібліотеки або власний файл.", diff --git a/Assets/Translations/zh-CN.json b/Assets/Translations/zh-CN.json index 18e0a49b..4a734e82 100644 --- a/Assets/Translations/zh-CN.json +++ b/Assets/Translations/zh-CN.json @@ -102,9 +102,13 @@ "control-center": { "browse-file": "浏览文件", "browse-library": "浏览库", - "colorize-distro-logo": { - "description": "将主题颜色应用到您的发行版徽标。", - "label": "为发行版徽标着色" + "enable-colorization": { + "description": "为控制中心图标启用着色，应用主题颜色。", + "label": "启用着色" + }, + "color-selection": { + "description": "将主题颜色应用于图标。", + "label": "选择颜色" }, "icon": { "description": "从库中选择图标或自定义文件。", diff --git a/Modules/Bar/Widgets/ControlCenter.qml b/Modules/Bar/Widgets/ControlCenter.qml index 9326e176..47e3ec7f 100644 --- a/Modules/Bar/Widgets/ControlCenter.qml +++ b/Modules/Bar/Widgets/ControlCenter.qml @@ -34,13 +34,40 @@ NIconButton { readonly property string customIcon: widgetSettings.icon || widgetMetadata.icon readonly property bool useDistroLogo: (widgetSettings.useDistroLogo !== undefined) ? widgetSettings.useDistroLogo : widgetMetadata.useDistroLogo readonly property string customIconPath: widgetSettings.customIconPath || "" - readonly property bool colorizeDistroLogo: { - if (widgetSettings.colorizeDistroLogo !== undefined) - return widgetSettings.colorizeDistroLogo; - return widgetMetadata.colorizeDistroLogo !== undefined ? widgetMetadata.colorizeDistroLogo : false; + readonly property bool enableColorization: widgetSettings.enableColorization || false + + readonly property string colorizeSystemIcon: { + if (widgetSettings.colorizeSystemIcon !== undefined) + return widgetSettings.colorizeSystemIcon; + return widgetMetadata.colorizeSystemIcon !== undefined ? widgetMetadata.colorizeSystemIcon : "none"; } - // If we have a custom path or distro logo, don't use the theme icon. + + readonly property bool isColorizing: enableColorization && colorizeSystemIcon !== "none" + + readonly property color iconColor: { + if (!isColorizing) return Color.mOnSurface; + switch (colorizeSystemIcon) { + case "primary": return Color.mPrimary; + case "secondary": return Color.mSecondary; + case "tertiary": return Color.mTertiary; + case "error": return Color.mError; + default: return Color.mOnSurface; + } + } + readonly property color iconHoverColor: { + if (!isColorizing) return Color.mOnHover; + switch (colorizeSystemIcon) { + case "primary": return Qt.darker(Color.mPrimary, 1.2); + case "secondary": return Qt.darker(Color.mSecondary, 1.2); + case "tertiary": return Qt.darker(Color.mTertiary, 1.2); + case "error": return Qt.darker(Color.mError, 1.2); + default: return Color.mOnHover; + } + } + + // If we have a custom path and not using distro logo, use the theme icon. + // If using distro logo, don't use theme icon. icon: (customIconPath === "" && !useDistroLogo) ? customIcon : "" tooltipText: I18n.tr("tooltips.open-control-center") tooltipDirection: BarService.getTooltipDirection() @@ -48,8 +75,9 @@ NIconButton { applyUiScale: false density: Settings.data.bar.density colorBg: Style.capsuleColor - colorFg: Color.mOnSurface + colorFg: iconColor colorBgHover: useDistroLogo ? Color.mSurfaceVariant : Color.mHover + colorFgHover: iconHoverColor colorBorder: Color.transparent colorBorderHover: useDistroLogo ? Color.mHover : Color.transparent @@ -115,18 +143,19 @@ NIconButton { width: root.width * 0.8 height: width source: { - if (customIconPath !== "") - return customIconPath.startsWith("file://") ? customIconPath : "file://" + customIconPath; if (useDistroLogo) return HostService.osLogo; + if (customIconPath !== "") + return customIconPath.startsWith("file://") ? customIconPath : "file://" + customIconPath; return ""; } visible: source !== "" smooth: true asynchronous: true - layer.enabled: useDistroLogo && colorizeDistroLogo + layer.enabled: isColorizing && (useDistroLogo || customIconPath !== "") layer.effect: ShaderEffect { - property color targetColor: Settings.data.colorSchemes.darkMode ? Color.mOnSurface : Color.mSurfaceVariant + property color targetColor: isColorizing ? iconColor : + (Settings.data.colorSchemes.darkMode ? Color.mOnSurface : Color.mSurfaceVariant) property real colorizeMode: 2.0 fragmentShader: Qt.resolvedUrl(Quickshell.shellDir + "/Shaders/qsb/appicon_colorize.frag.qsb") diff --git a/Modules/Panels/Settings/Bar/WidgetSettings/ControlCenterSettings.qml b/Modules/Panels/Settings/Bar/WidgetSettings/ControlCenterSettings.qml index 5f9eb339..7886b6db 100644 --- a/Modules/Panels/Settings/Bar/WidgetSettings/ControlCenterSettings.qml +++ b/Modules/Panels/Settings/Bar/WidgetSettings/ControlCenterSettings.qml @@ -17,14 +17,16 @@ ColumnLayout { property string valueIcon: widgetData.icon !== undefined ? widgetData.icon : widgetMetadata.icon property bool valueUseDistroLogo: widgetData.useDistroLogo !== undefined ? widgetData.useDistroLogo : widgetMetadata.useDistroLogo property string valueCustomIconPath: widgetData.customIconPath !== undefined ? widgetData.customIconPath : "" - property bool valueColorizeDistroLogo: widgetData.colorizeDistroLogo !== undefined ? widgetData.colorizeDistroLogo : (widgetMetadata.colorizeDistroLogo !== undefined ? widgetMetadata.colorizeDistroLogo : false) + property bool valueEnableColorization: widgetData.enableColorization || false + property string valueColorizeSystemIcon: widgetData.colorizeSystemIcon !== undefined ? widgetData.colorizeSystemIcon : (widgetMetadata.colorizeSystemIcon !== undefined ? widgetMetadata.colorizeSystemIcon : "none") function saveSettings() { var settings = Object.assign({}, widgetData || {}); settings.icon = valueIcon; settings.useDistroLogo = valueUseDistroLogo; settings.customIconPath = valueCustomIconPath; - settings.colorizeDistroLogo = valueColorizeDistroLogo; + settings.enableColorization = valueEnableColorization; + settings.colorizeSystemIcon = valueColorizeSystemIcon; return settings; } @@ -34,20 +36,32 @@ ColumnLayout { checked: valueUseDistroLogo onToggled: function (checked) { valueUseDistroLogo = checked; - if (checked) { - valueCustomIconPath = ""; - valueIcon = ""; - } } } NToggle { - visible: valueUseDistroLogo - label: I18n.tr("bar.widget-settings.control-center.colorize-distro-logo.label") - description: I18n.tr("bar.widget-settings.control-center.colorize-distro-logo.description") - checked: valueColorizeDistroLogo + label: I18n.tr("bar.widget-settings.control-center.enable-colorization.label") + description: I18n.tr("bar.widget-settings.control-center.enable-colorization.description") + checked: valueEnableColorization onToggled: function (checked) { - valueColorizeDistroLogo = checked; + valueEnableColorization = checked; + } + } + + NComboBox { + visible: valueEnableColorization + label: I18n.tr("bar.widget-settings.control-center.color-selection.label") + description: I18n.tr("bar.widget-settings.control-center.color-selection.description") + model: [ + { "name": I18n.tr("options.colors.none"), "key": "none" }, + { "name": I18n.tr("options.colors.primary"), "key": "primary" }, + { "name": I18n.tr("options.colors.secondary"), "key": "secondary" }, + { "name": I18n.tr("options.colors.tertiary"), "key": "tertiary" }, + { "name": I18n.tr("options.colors.error"), "key": "error" } + ] + currentKey: valueColorizeSystemIcon + onSelected: function(key) { + valueColorizeSystemIcon = key; } } @@ -65,14 +79,14 @@ ColumnLayout { Layout.alignment: Qt.AlignVCenter radius: width * 0.5 imagePath: valueCustomIconPath - visible: valueCustomIconPath !== "" + visible: valueCustomIconPath !== "" && !valueUseDistroLogo } NIcon { Layout.alignment: Qt.AlignVCenter icon: valueIcon pointSize: Style.fontSizeXXL * 1.5 - visible: valueIcon !== "" && valueCustomIconPath === "" + visible: valueIcon !== "" && valueCustomIconPath === "" && !valueUseDistroLogo } } diff --git a/Services/UI/BarWidgetRegistry.qml b/Services/UI/BarWidgetRegistry.qml index 9cde54c7..d6f0a881 100644 --- a/Services/UI/BarWidgetRegistry.qml +++ b/Services/UI/BarWidgetRegistry.qml @@ -111,7 +111,8 @@ Singleton { "useDistroLogo": false, "icon": "noctalia", "customIconPath": "", - "colorizeDistroLogo": false + "colorizeDistroLogo": false, + "colorizeSystemIcon": "none" }, "CustomButton": { "allowUserSettings": true,