mirror of
https://github.com/AvengeMedia/DankMaterialShell.git
synced 2026-08-01 19:18:28 -04:00
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 92ba2bb57d)
This commit is contained in:
@@ -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"
|
||||
|
||||
@@ -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 },
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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"]
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user