zoriya/noctalia-shell
1
0
Fork 0
mirror of https://github.com/zoriya/noctalia-shell.git synced 2025-12-06 06:36:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #909 from lonerOrz/feat/colorization

Browse Source 
Reconstruct the control center icon colorization
This commit is contained in:
Lysec
2025-11-30 16:39:10 +01:00
committed by GitHub
parent eaff0c6434 9a9ebf11fb
commit a17082d27f
14 changed files with 147 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
Assets/Translations/de.json
View File

@@ -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.",

13
Assets/Translations/en.json
View File

@@ -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",

10
Assets/Translations/es.json
View File

@@ -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.",

10
Assets/Translations/fr.json
View File

@@ -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é.",

10
Assets/Translations/ja.json
View File

@@ -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": "ライブラリまたはカスタムファイルからアイコンを選択します。",

10
Assets/Translations/nl.json
View File

@@ -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.",

10
Assets/Translations/pt.json
View File

@@ -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.",

10
Assets/Translations/ru.json
View File

@@ -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": "Выберите иконку из библиотеки или пользовательский файл.",

10
Assets/Translations/tr.json
View File

@@ -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.",

10
Assets/Translations/uk-UA.json
View File

@@ -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": "Вибрати значок з бібліотеки або власний файл.",

10
Assets/Translations/zh-CN.json
View File

@@ -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": "从库中选择图标或自定义文件。",

49
Modules/Bar/Widgets/ControlCenter.qml
View File

@@ -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")

40
Modules/Panels/Settings/Bar/WidgetSettings/ControlCenterSettings.qml
View File

@@ -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
}
}

3
Services/UI/BarWidgetRegistry.qml
View File

@@ -111,7 +111,8 @@ Singleton {
"useDistroLogo": false,
"icon": "noctalia",
"customIconPath": "",
"colorizeDistroLogo": false
"colorizeDistroLogo": false,
"colorizeSystemIcon": "none"
},
"CustomButton": {
"allowUserSettings": true,