From dac08b34c6dbe943375b852cf67f41573b4de983 Mon Sep 17 00:00:00 2001 From: purian23 Date: Fri, 17 Jul 2026 12:55:02 -0400 Subject: [PATCH] feat(settings): add explicit border toggle and updated layouts - Defaults On with blur enabled to clean up the border edges - Darken Modal moves to Launcher settings Closes #2446 port 1.5 (cherry picked from commit 92ba2bb57d0fd11f5266a669a09f82467ad6af8b) --- quickshell/Common/SettingsData.qml | 2 + quickshell/Common/settings/SettingsSpec.js | 1 + quickshell/Modules/Settings/LauncherTab.qml | 25 ++++ .../Modules/Settings/ThemeColorsTab.qml | 86 ++++++------ quickshell/Services/BlurService.qml | 6 +- .../translations/settings_search_index.json | 122 ++++++++++-------- 6 files changed, 139 insertions(+), 103 deletions(-) diff --git a/quickshell/Common/SettingsData.qml b/quickshell/Common/SettingsData.qml index 79d265f41..efd7c2d41 100644 --- a/quickshell/Common/SettingsData.qml +++ b/quickshell/Common/SettingsData.qml @@ -240,6 +240,8 @@ Singleton { onBlurForegroundLayersChanged: saveSettings() property real blurLayerOutlineOpacity: 0.12 onBlurLayerOutlineOpacityChanged: saveSettings() + property bool blurBorderEnabled: true + onBlurBorderEnabledChanged: saveSettings() property string blurBorderColor: "outline" onBlurBorderColorChanged: saveSettings() property string blurBorderCustomColor: "#ffffff" diff --git a/quickshell/Common/settings/SettingsSpec.js b/quickshell/Common/settings/SettingsSpec.js index b1113d21a..78a3a9362 100644 --- a/quickshell/Common/settings/SettingsSpec.js +++ b/quickshell/Common/settings/SettingsSpec.js @@ -70,6 +70,7 @@ var SPEC = { blurEnabled: { def: false }, blurForegroundLayers: { def: true }, blurLayerOutlineOpacity: { def: 0.12, coerce: percentToUnit }, + blurBorderEnabled: { def: true }, blurBorderColor: { def: "outline" }, blurBorderCustomColor: { def: "#ffffff" }, blurBorderOpacity: { def: 0.35, coerce: percentToUnit }, diff --git a/quickshell/Modules/Settings/LauncherTab.qml b/quickshell/Modules/Settings/LauncherTab.qml index b6ef548d6..69393cc83 100644 --- a/quickshell/Modules/Settings/LauncherTab.qml +++ b/quickshell/Modules/Settings/LauncherTab.qml @@ -747,6 +747,31 @@ Item { } } + SettingsCard { + width: parent.width + iconName: "layers" + title: I18n.tr("Modal Background") + settingKey: "modalBackground" + tags: ["modal", "darken", "background", "overlay", "launcher"] + + SettingsControlledByFrame { + visible: SettingsData.frameEnabled + parentModal: root.parentModal + settingLabel: I18n.tr("Darken Modal Background") + reason: I18n.tr("Disabled by Frame Mode") + } + + SettingsToggleRow { + settingKey: "modalDarkenBackground" + tags: ["modal", "darken", "background", "overlay", "launcher"] + text: I18n.tr("Darken Modal Background") + description: I18n.tr("Show darkened overlay behind modal dialogs") + visible: !SettingsData.frameEnabled + checked: SettingsData.modalDarkenBackground + onToggled: checked => SettingsData.set("modalDarkenBackground", checked) + } + } + SettingsCard { width: parent.width iconName: "open_in_new" diff --git a/quickshell/Modules/Settings/ThemeColorsTab.qml b/quickshell/Modules/Settings/ThemeColorsTab.qml index 0860c6620..e14fb0172 100644 --- a/quickshell/Modules/Settings/ThemeColorsTab.qml +++ b/quickshell/Modules/Settings/ThemeColorsTab.qml @@ -1734,16 +1734,6 @@ Item { } } } - SettingsToggleRow { - tab: "theme" - tags: ["foreground", "layers", "contrast", "surface", "blur", "glass", "frosted"] - settingKey: "blurForegroundLayers" - text: I18n.tr("Foreground Layers") - description: I18n.tr("Show foreground surfaces on panels for stronger contrast") - checked: SettingsData.blurForegroundLayers ?? true - onToggled: checked => SettingsData.set("blurForegroundLayers", checked) - } - SettingsSliderRow { tab: "theme" tags: ["surface", "popup", "transparency", "opacity", "modal"] @@ -1759,12 +1749,47 @@ Item { onSliderValueChanged: newValue => SettingsData.set("popupTransparency", newValue / 100) } + SettingsToggleRow { + tab: "theme" + tags: ["foreground", "layers", "contrast", "surface", "blur", "glass", "frosted"] + settingKey: "blurForegroundLayers" + text: I18n.tr("Foreground Layers") + description: I18n.tr("Show foreground surfaces on panels for stronger contrast") + checked: SettingsData.blurForegroundLayers ?? true + onToggled: checked => SettingsData.set("blurForegroundLayers", checked) + } + + SettingsSliderRow { + tab: "theme" + tags: ["foreground", "layers", "outline", "border", "cards", "widgets", "notifications", "control center"] + settingKey: "blurLayerOutlineOpacity" + text: I18n.tr("Layer Outline Opacity") + description: I18n.tr("Controls outlines around foreground cards, pills, and notification cards") + value: Math.round((SettingsData.blurLayerOutlineOpacity ?? 0.12) * 100) + minimum: 0 + maximum: 40 + unit: "%" + defaultValue: 12 + onSliderValueChanged: newValue => SettingsData.set("blurLayerOutlineOpacity", newValue / 100) + } + + SettingsToggleRow { + tab: "theme" + tags: ["surface", "popup", "modal", "border", "outline", "edge"] + settingKey: "blurBorderEnabled" + text: I18n.tr("Surface Border Outline") + description: I18n.tr("Outline around shell surfaces") + checked: SettingsData.blurBorderEnabled ?? true + onToggled: checked => SettingsData.set("blurBorderEnabled", checked) + } + SettingsDropdownRow { tab: "theme" tags: ["surface", "popup", "modal", "border", "outline", "edge"] settingKey: "blurBorderColor" text: I18n.tr("Surface Border Color") description: I18n.tr("Border color around popouts, modals, and other shell surfaces") + visible: SettingsData.blurBorderEnabled ?? true options: [I18n.tr("Outline", "surface border color"), I18n.tr("Primary", "surface border color"), I18n.tr("Secondary", "surface border color"), I18n.tr("Text Color", "surface border color"), I18n.tr("Custom", "surface border color")] optionColorMap: ({ [I18n.tr("Outline", "surface border color")]: Theme.outline, @@ -1809,6 +1834,7 @@ Item { settingKey: "blurBorderOpacity" text: I18n.tr("Surface Border Opacity") description: I18n.tr("Controls the outline of popouts, modals, and other shell surfaces") + visible: SettingsData.blurBorderEnabled ?? true value: Math.round((SettingsData.blurBorderOpacity ?? 0.35) * 100) minimum: 0 maximum: 100 @@ -1817,20 +1843,6 @@ Item { onSliderValueChanged: newValue => SettingsData.set("blurBorderOpacity", newValue / 100) } - SettingsSliderRow { - tab: "theme" - tags: ["foreground", "layers", "outline", "border", "cards", "widgets", "notifications", "control center"] - settingKey: "blurLayerOutlineOpacity" - text: I18n.tr("Layer Outline Opacity") - description: I18n.tr("Controls outlines around foreground cards, pills, and notification cards") - value: Math.round((SettingsData.blurLayerOutlineOpacity ?? 0.12) * 100) - minimum: 0 - maximum: 40 - unit: "%" - defaultValue: 12 - onSliderValueChanged: newValue => SettingsData.set("blurLayerOutlineOpacity", newValue / 100) - } - SettingsSliderRow { tab: "theme" tags: ["corner", "radius", "rounded", "square"] @@ -2104,32 +2116,6 @@ Item { } } - SettingsCard { - tab: "theme" - tags: ["modal", "darken", "background", "overlay"] - title: I18n.tr("Modal Background") - settingKey: "modalBackground" - iconName: "layers" - - SettingsControlledByFrame { - visible: themeColorsTab.frameModeActive - parentModal: themeColorsTab.parentModal - settingLabel: I18n.tr("Darken Modal Background") - reason: I18n.tr("Disabled by Frame Mode") - } - - SettingsToggleRow { - tab: "theme" - tags: ["modal", "darken", "background", "overlay"] - settingKey: "modalDarkenBackground" - text: I18n.tr("Darken Modal Background") - description: I18n.tr("Show darkened overlay behind modal dialogs") - visible: !themeColorsTab.frameModeActive - checked: SettingsData.modalDarkenBackground - onToggled: checked => SettingsData.set("modalDarkenBackground", checked) - } - } - SettingsCard { tab: "theme" tags: ["applications", "portal", "dark", "terminal"] diff --git a/quickshell/Services/BlurService.qml b/quickshell/Services/BlurService.qml index 77fffcc98..4fd484455 100644 --- a/quickshell/Services/BlurService.qml +++ b/quickshell/Services/BlurService.qml @@ -17,6 +17,8 @@ Singleton { // These settings predate non-blurred surface borders, so keep their keys for compatibility. readonly property color borderColor: { + if (!(SettingsData.blurBorderEnabled ?? true)) + return "transparent"; const opacity = SettingsData.blurBorderOpacity ?? 0.35; switch (SettingsData.blurBorderColor ?? "outline") { case "primary": @@ -26,12 +28,12 @@ Singleton { case "surfaceText": return Theme.withAlpha(Theme.surfaceText, opacity); case "custom": - return Theme.withAlpha(SettingsData.blurBorderCustomColor ?? "#ffffff", opacity); + return Theme.withAlpha(Qt.color(SettingsData.blurBorderCustomColor ?? "#ffffff"), opacity); default: return Theme.withAlpha(Theme.outline, opacity); } } - readonly property int borderWidth: 1 + readonly property int borderWidth: (SettingsData.blurBorderEnabled ?? true) ? 1 : 0 function hoverColor(baseColor, hoverAlpha) { if (!enabled) diff --git a/quickshell/translations/settings_search_index.json b/quickshell/translations/settings_search_index.json index b2365929d..c85302e2e 100644 --- a/quickshell/translations/settings_search_index.json +++ b/quickshell/translations/settings_search_index.json @@ -2374,6 +2374,29 @@ ], "icon": "extension" }, + { + "section": "modalDarkenBackground", + "label": "Darken Modal Background", + "tabIndex": 9, + "category": "Launcher", + "keywords": [ + "background", + "behind", + "dark mode", + "darken", + "darkened", + "dialogs", + "drawer", + "launcher", + "menu", + "modal", + "night", + "overlay", + "show", + "start" + ], + "description": "Show darkened overlay behind modal dialogs" + }, { "section": "launcherStyle", "label": "Default Launcher", @@ -2614,6 +2637,30 @@ ], "icon": "apps" }, + { + "section": "modalBackground", + "label": "Modal Background", + "tabIndex": 9, + "category": "Launcher", + "keywords": [ + "background", + "behind", + "dark mode", + "darken", + "darkened", + "dialogs", + "drawer", + "launcher", + "menu", + "modal", + "night", + "overlay", + "show", + "start" + ], + "icon": "layers", + "description": "Show darkened overlay behind modal dialogs" + }, { "section": "spotlightCloseNiriOverview", "label": "Niri Integration", @@ -3383,31 +3430,6 @@ ], "description": "Base to derive dark theme from" }, - { - "section": "modalDarkenBackground", - "label": "Darken Modal Background", - "tabIndex": 10, - "category": "Theme & Colors", - "keywords": [ - "appearance", - "background", - "behind", - "colors", - "dark mode", - "darken", - "darkened", - "dialogs", - "look", - "modal", - "night", - "overlay", - "scheme", - "show", - "style", - "theme" - ], - "description": "Show darkened overlay behind modal dialogs" - }, { "section": "matugenTemplateEmacs", "label": "Emacs", @@ -3827,32 +3849,6 @@ "icon": "auto_awesome", "conditionKey": "matugenAvailable" }, - { - "section": "modalBackground", - "label": "Modal Background", - "tabIndex": 10, - "category": "Theme & Colors", - "keywords": [ - "appearance", - "background", - "behind", - "colors", - "dark mode", - "darken", - "darkened", - "dialogs", - "look", - "modal", - "night", - "overlay", - "scheme", - "show", - "style", - "theme" - ], - "icon": "layers", - "description": "Show darkened overlay behind modal dialogs" - }, { "section": "modalElevationEnabled", "label": "Modal Shadows", @@ -4142,6 +4138,30 @@ ], "description": "Controls the outline of popouts, modals, and other shell surfaces" }, + { + "section": "blurBorderEnabled", + "label": "Surface Border Outline", + "tabIndex": 10, + "category": "Theme & Colors", + "keywords": [ + "appearance", + "around", + "border", + "colors", + "edge", + "look", + "modal", + "outline", + "popup", + "scheme", + "shell", + "style", + "surface", + "surfaces", + "theme" + ], + "description": "Outline around shell surfaces" + }, { "section": "popupTransparency", "label": "Surface Opacity",