mirror of
https://github.com/AvengeMedia/DankMaterialShell.git
synced 2026-04-04 21:02:06 -04:00
Moar M3 iteration stuffs
This commit is contained in:
purian23
@@ -884,6 +884,7 @@ Item {
|
||||
shadowOpacity: Theme.elevationLevel1 && Theme.elevationLevel1.alpha !== undefined ? Theme.elevationLevel1.alpha : 0.2
|
||||
shadowVerticalOffset: Theme.elevationLevel1 && Theme.elevationLevel1.offsetY !== undefined ? Theme.elevationLevel1.offsetY : 1
|
||||
shadowBlur: Theme.elevationEnabled ? Math.max(0, Math.min(1, (Theme.elevationLevel1 && Theme.elevationLevel1.blurPx !== undefined ? Theme.elevationLevel1.blurPx : 4) / Theme.elevationBlurMax)) : 0
|
||||
blurMax: Theme.elevationBlurMax
|
||||
shadowColor: Theme.elevationShadowColor(Theme.elevationLevel1)
|
||||
}
|
||||
|
||||
|
||||
@@ -52,9 +52,11 @@ Item {
|
||||
}
|
||||
|
||||
function _isBarActive(c) {
|
||||
if (!c.enabled) return false;
|
||||
if (!c.enabled)
|
||||
return false;
|
||||
const prefs = c.screenPreferences || ["all"];
|
||||
if (prefs.length > 0) return true;
|
||||
if (prefs.length > 0)
|
||||
return true;
|
||||
return (c.showOnLastDisplay ?? true) && Quickshell.screens.length === 1;
|
||||
}
|
||||
|
||||
@@ -64,7 +66,8 @@ Item {
|
||||
return;
|
||||
|
||||
const hasHorizontal = configs.some(c => {
|
||||
if (!_isBarActive(c)) return false;
|
||||
if (!_isBarActive(c))
|
||||
return false;
|
||||
const p = c.position ?? SettingsData.Position.Top;
|
||||
return p === SettingsData.Position.Top || p === SettingsData.Position.Bottom;
|
||||
});
|
||||
@@ -72,7 +75,8 @@ Item {
|
||||
return;
|
||||
|
||||
const hasVertical = configs.some(c => {
|
||||
if (!_isBarActive(c)) return false;
|
||||
if (!_isBarActive(c))
|
||||
return false;
|
||||
const p = c.position ?? SettingsData.Position.Top;
|
||||
return p === SettingsData.Position.Left || p === SettingsData.Position.Right;
|
||||
});
|
||||
@@ -136,7 +140,7 @@ Item {
|
||||
scrollYBehavior: defaultBar.scrollYBehavior ?? "workspace",
|
||||
shadowIntensity: defaultBar.shadowIntensity ?? 0,
|
||||
shadowOpacity: defaultBar.shadowOpacity ?? 60,
|
||||
shadowColorMode: defaultBar.shadowColorMode ?? "text",
|
||||
shadowColorMode: defaultBar.shadowColorMode ?? "default",
|
||||
shadowCustomColor: defaultBar.shadowCustomColor ?? "#000000"
|
||||
};
|
||||
SettingsData.addBarConfig(newBar);
|
||||
@@ -1038,6 +1042,155 @@ Item {
|
||||
}
|
||||
}
|
||||
|
||||
SettingsCard {
|
||||
id: shadowCard
|
||||
iconName: "layers"
|
||||
title: I18n.tr("Shadow", "bar shadow settings card")
|
||||
settingKey: "barShadow"
|
||||
collapsible: true
|
||||
expanded: true
|
||||
visible: selectedBarConfig?.enabled
|
||||
|
||||
readonly property bool shadowActive: (selectedBarConfig?.shadowIntensity ?? 0) > 0
|
||||
readonly property bool isCustomColor: (selectedBarConfig?.shadowColorMode ?? "default") === "custom"
|
||||
|
||||
SettingsToggleRow {
|
||||
text: I18n.tr("Enable Shadow")
|
||||
description: I18n.tr("Toggle M3 baseline shadow on or off for this bar")
|
||||
checked: shadowCard.shadowActive
|
||||
onToggled: checked => {
|
||||
if (checked) {
|
||||
SettingsData.updateBarConfig(selectedBarId, {
|
||||
shadowIntensity: 12,
|
||||
shadowOpacity: 60
|
||||
});
|
||||
} else {
|
||||
SettingsData.updateBarConfig(selectedBarId, {
|
||||
shadowIntensity: 0
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
SettingsSliderRow {
|
||||
visible: shadowCard.shadowActive
|
||||
text: I18n.tr("Intensity", "shadow intensity slider")
|
||||
minimum: 0
|
||||
maximum: 100
|
||||
unit: "px"
|
||||
defaultValue: 12
|
||||
value: selectedBarConfig?.shadowIntensity ?? 0
|
||||
onSliderValueChanged: newValue => SettingsData.updateBarConfig(selectedBarId, {
|
||||
shadowIntensity: newValue
|
||||
})
|
||||
}
|
||||
|
||||
SettingsSliderRow {
|
||||
visible: shadowCard.shadowActive
|
||||
text: I18n.tr("Opacity")
|
||||
minimum: 10
|
||||
maximum: 100
|
||||
unit: "%"
|
||||
defaultValue: 60
|
||||
value: selectedBarConfig?.shadowOpacity ?? 60
|
||||
onSliderValueChanged: newValue => SettingsData.updateBarConfig(selectedBarId, {
|
||||
shadowOpacity: newValue
|
||||
})
|
||||
}
|
||||
|
||||
Column {
|
||||
visible: shadowCard.shadowActive
|
||||
width: parent.width
|
||||
spacing: Theme.spacingS
|
||||
|
||||
StyledText {
|
||||
text: I18n.tr("Color")
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
color: Theme.surfaceText
|
||||
horizontalAlignment: Text.AlignLeft
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: Theme.spacingM
|
||||
}
|
||||
|
||||
Item {
|
||||
width: parent.width
|
||||
height: shadowColorGroup.implicitHeight
|
||||
|
||||
DankButtonGroup {
|
||||
id: shadowColorGroup
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
buttonPadding: parent.width < 420 ? Theme.spacingXS : Theme.spacingS
|
||||
minButtonWidth: parent.width < 420 ? 36 : 56
|
||||
textSize: parent.width < 420 ? Theme.fontSizeSmall : Theme.fontSizeMedium
|
||||
model: [I18n.tr("Default (Black)"), I18n.tr("Surface", "shadow color option"), I18n.tr("Primary"), I18n.tr("Secondary"), I18n.tr("Custom")]
|
||||
selectionMode: "single"
|
||||
currentIndex: {
|
||||
switch (selectedBarConfig?.shadowColorMode || "default") {
|
||||
case "surface":
|
||||
return 1;
|
||||
case "primary":
|
||||
return 2;
|
||||
case "secondary":
|
||||
return 3;
|
||||
case "custom":
|
||||
return 4;
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
onSelectionChanged: (index, selected) => {
|
||||
if (!selected)
|
||||
return;
|
||||
let mode = "default";
|
||||
switch (index) {
|
||||
case 1:
|
||||
mode = "surface";
|
||||
break;
|
||||
case 2:
|
||||
mode = "primary";
|
||||
break;
|
||||
case 3:
|
||||
mode = "secondary";
|
||||
break;
|
||||
case 4:
|
||||
mode = "custom";
|
||||
break;
|
||||
}
|
||||
SettingsData.updateBarConfig(selectedBarId, {
|
||||
shadowColorMode: mode
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
visible: selectedBarConfig?.shadowColorMode === "custom"
|
||||
width: 32
|
||||
height: 32
|
||||
radius: 16
|
||||
color: selectedBarConfig?.shadowCustomColor ?? "#000000"
|
||||
border.color: Theme.outline
|
||||
border.width: 1
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: {
|
||||
PopoutService.colorPickerModal.selectedColor = selectedBarConfig?.shadowCustomColor ?? "#000000";
|
||||
PopoutService.colorPickerModal.pickerTitle = I18n.tr("Color");
|
||||
PopoutService.colorPickerModal.onColorSelectedCallback = function (color) {
|
||||
SettingsData.updateBarConfig(selectedBarId, {
|
||||
shadowCustomColor: color.toString()
|
||||
});
|
||||
};
|
||||
PopoutService.colorPickerModal.show();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
SettingsCard {
|
||||
iconName: "rounded_corner"
|
||||
title: I18n.tr("Corners & Background")
|
||||
@@ -1140,134 +1293,6 @@ Item {
|
||||
}
|
||||
}
|
||||
|
||||
SettingsCard {
|
||||
id: shadowCard
|
||||
iconName: "layers"
|
||||
title: I18n.tr("Shadow", "bar shadow settings card")
|
||||
settingKey: "barShadow"
|
||||
collapsible: true
|
||||
expanded: false
|
||||
visible: selectedBarConfig?.enabled
|
||||
|
||||
readonly property bool shadowActive: (selectedBarConfig?.shadowIntensity ?? 0) > 0
|
||||
readonly property bool isCustomColor: (selectedBarConfig?.shadowColorMode ?? "text") === "custom"
|
||||
|
||||
SettingsSliderRow {
|
||||
text: I18n.tr("Intensity", "shadow intensity slider")
|
||||
minimum: 0
|
||||
maximum: 100
|
||||
unit: "%"
|
||||
value: selectedBarConfig?.shadowIntensity ?? 0
|
||||
onSliderValueChanged: newValue => SettingsData.updateBarConfig(selectedBarId, {
|
||||
shadowIntensity: newValue
|
||||
})
|
||||
}
|
||||
|
||||
SettingsSliderRow {
|
||||
visible: shadowCard.shadowActive
|
||||
text: I18n.tr("Opacity")
|
||||
minimum: 10
|
||||
maximum: 100
|
||||
unit: "%"
|
||||
value: selectedBarConfig?.shadowOpacity ?? 60
|
||||
onSliderValueChanged: newValue => SettingsData.updateBarConfig(selectedBarId, {
|
||||
shadowOpacity: newValue
|
||||
})
|
||||
}
|
||||
|
||||
Column {
|
||||
visible: shadowCard.shadowActive
|
||||
width: parent.width
|
||||
spacing: Theme.spacingS
|
||||
|
||||
StyledText {
|
||||
text: I18n.tr("Color")
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
color: Theme.surfaceText
|
||||
horizontalAlignment: Text.AlignLeft
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: Theme.spacingM
|
||||
}
|
||||
|
||||
Item {
|
||||
width: parent.width
|
||||
height: shadowColorGroup.implicitHeight
|
||||
|
||||
DankButtonGroup {
|
||||
id: shadowColorGroup
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
buttonPadding: parent.width < 420 ? Theme.spacingXS : Theme.spacingS
|
||||
minButtonWidth: parent.width < 420 ? 36 : 56
|
||||
textSize: parent.width < 420 ? Theme.fontSizeSmall : Theme.fontSizeMedium
|
||||
model: [I18n.tr("Text", "shadow color option"), I18n.tr("Surface", "shadow color option"), I18n.tr("Primary"), I18n.tr("Secondary"), I18n.tr("Custom")]
|
||||
selectionMode: "single"
|
||||
currentIndex: {
|
||||
switch (selectedBarConfig?.shadowColorMode || "text") {
|
||||
case "surface":
|
||||
return 1;
|
||||
case "primary":
|
||||
return 2;
|
||||
case "secondary":
|
||||
return 3;
|
||||
case "custom":
|
||||
return 4;
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
onSelectionChanged: (index, selected) => {
|
||||
if (!selected)
|
||||
return;
|
||||
let mode = "text";
|
||||
switch (index) {
|
||||
case 1:
|
||||
mode = "surface";
|
||||
break;
|
||||
case 2:
|
||||
mode = "primary";
|
||||
break;
|
||||
case 3:
|
||||
mode = "secondary";
|
||||
break;
|
||||
case 4:
|
||||
mode = "custom";
|
||||
break;
|
||||
}
|
||||
SettingsData.updateBarConfig(selectedBarId, {
|
||||
shadowColorMode: mode
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
visible: selectedBarConfig?.shadowColorMode === "custom"
|
||||
width: 32
|
||||
height: 32
|
||||
radius: 16
|
||||
color: selectedBarConfig?.shadowCustomColor ?? "#000000"
|
||||
border.color: Theme.outline
|
||||
border.width: 1
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: {
|
||||
PopoutService.colorPickerModal.selectedColor = selectedBarConfig?.shadowCustomColor ?? "#000000";
|
||||
PopoutService.colorPickerModal.pickerTitle = I18n.tr("Color");
|
||||
PopoutService.colorPickerModal.onColorSelectedCallback = function (color) {
|
||||
SettingsData.updateBarConfig(selectedBarId, {
|
||||
shadowCustomColor: color.toString()
|
||||
});
|
||||
};
|
||||
PopoutService.colorPickerModal.show();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
SettingsToggleCard {
|
||||
iconName: "border_style"
|
||||
title: I18n.tr("Border")
|
||||
|
||||
@@ -126,6 +126,15 @@ Item {
|
||||
return Theme.warning;
|
||||
}
|
||||
|
||||
function openM3ShadowColorPicker() {
|
||||
PopoutService.colorPickerModal.selectedColor = SettingsData.m3ElevationCustomColor ?? "#000000";
|
||||
PopoutService.colorPickerModal.pickerTitle = I18n.tr("Shadow Color");
|
||||
PopoutService.colorPickerModal.onColorSelectedCallback = function (color) {
|
||||
SettingsData.set("m3ElevationCustomColor", color.toString());
|
||||
};
|
||||
PopoutService.colorPickerModal.show();
|
||||
}
|
||||
|
||||
function formatThemeAutoTime(isoString) {
|
||||
if (!isoString)
|
||||
return "";
|
||||
@@ -1597,12 +1606,115 @@ Item {
|
||||
tab: "theme"
|
||||
tags: ["elevation", "shadow", "lift", "m3", "material"]
|
||||
settingKey: "m3ElevationEnabled"
|
||||
text: I18n.tr("M3 Elevation & Shadows")
|
||||
text: I18n.tr("Shadows")
|
||||
description: I18n.tr("Material Design 3 shadows and elevation on modals, popouts, and dialogs")
|
||||
checked: SettingsData.m3ElevationEnabled ?? true
|
||||
onToggled: checked => SettingsData.set("m3ElevationEnabled", checked)
|
||||
}
|
||||
|
||||
SettingsSliderRow {
|
||||
tab: "theme"
|
||||
tags: ["elevation", "shadow", "intensity", "blur", "m3"]
|
||||
settingKey: "m3ElevationIntensity"
|
||||
text: I18n.tr("Shadow Intensity")
|
||||
description: I18n.tr("Controls the base blur radius and offset of shadows")
|
||||
value: SettingsData.m3ElevationIntensity ?? 12
|
||||
minimum: 0
|
||||
maximum: 100
|
||||
unit: "px"
|
||||
defaultValue: 12
|
||||
visible: SettingsData.m3ElevationEnabled ?? true
|
||||
onSliderValueChanged: newValue => SettingsData.set("m3ElevationIntensity", newValue)
|
||||
}
|
||||
|
||||
SettingsSliderRow {
|
||||
tab: "theme"
|
||||
tags: ["elevation", "shadow", "opacity", "transparency", "m3"]
|
||||
settingKey: "m3ElevationOpacity"
|
||||
text: I18n.tr("Shadow Opacity")
|
||||
description: I18n.tr("Controls the transparency of the shadow")
|
||||
value: SettingsData.m3ElevationOpacity ?? 30
|
||||
minimum: 0
|
||||
maximum: 100
|
||||
unit: "%"
|
||||
defaultValue: 30
|
||||
visible: SettingsData.m3ElevationEnabled ?? true
|
||||
onSliderValueChanged: newValue => SettingsData.set("m3ElevationOpacity", newValue)
|
||||
}
|
||||
|
||||
SettingsDropdownRow {
|
||||
tab: "theme"
|
||||
tags: ["elevation", "shadow", "color", "m3"]
|
||||
settingKey: "m3ElevationColorMode"
|
||||
text: I18n.tr("Shadow Color")
|
||||
description: I18n.tr("Base color for shadows (opacity is applied automatically)")
|
||||
options: [I18n.tr("Default (Black)", "shadow color option"), I18n.tr("Text Color", "shadow color option"), I18n.tr("Primary", "shadow color option"), I18n.tr("Surface Variant", "shadow color option"), I18n.tr("Custom", "shadow color option")]
|
||||
currentValue: {
|
||||
switch (SettingsData.m3ElevationColorMode) {
|
||||
case "text":
|
||||
return I18n.tr("Text Color", "shadow color option");
|
||||
case "primary":
|
||||
return I18n.tr("Primary", "shadow color option");
|
||||
case "surfaceVariant":
|
||||
return I18n.tr("Surface Variant", "shadow color option");
|
||||
case "custom":
|
||||
return I18n.tr("Custom", "shadow color option");
|
||||
default:
|
||||
return I18n.tr("Default (Black)", "shadow color option");
|
||||
}
|
||||
}
|
||||
visible: SettingsData.m3ElevationEnabled ?? true
|
||||
onValueChanged: value => {
|
||||
if (value === I18n.tr("Primary", "shadow color option")) {
|
||||
SettingsData.set("m3ElevationColorMode", "primary");
|
||||
} else if (value === I18n.tr("Surface Variant", "shadow color option")) {
|
||||
SettingsData.set("m3ElevationColorMode", "surfaceVariant");
|
||||
} else if (value === I18n.tr("Custom", "shadow color option")) {
|
||||
SettingsData.set("m3ElevationColorMode", "custom");
|
||||
openM3ShadowColorPicker();
|
||||
} else if (value === I18n.tr("Text Color", "shadow color option")) {
|
||||
SettingsData.set("m3ElevationColorMode", "text");
|
||||
} else {
|
||||
SettingsData.set("m3ElevationColorMode", "default");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
visible: (SettingsData.m3ElevationEnabled ?? true) && SettingsData.m3ElevationColorMode === "custom"
|
||||
width: parent.width
|
||||
implicitHeight: 36
|
||||
height: implicitHeight
|
||||
|
||||
Row {
|
||||
anchors.left: parent.left
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: Theme.spacingM
|
||||
|
||||
StyledText {
|
||||
text: I18n.tr("Custom Shadow Color")
|
||||
color: Theme.surfaceText
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
width: 26
|
||||
height: 26
|
||||
radius: 13
|
||||
color: SettingsData.m3ElevationCustomColor ?? "#000000"
|
||||
border.color: Theme.outline
|
||||
border.width: 1
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: openM3ShadowColorPicker()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
SettingsToggleRow {
|
||||
tab: "theme"
|
||||
tags: ["elevation", "shadow", "modal", "dialog", "m3"]
|
||||
|
||||
@@ -669,6 +669,7 @@ Item {
|
||||
shadowHorizontalOffset: 0
|
||||
shadowVerticalOffset: Theme.elevationLevel1 && Theme.elevationLevel1.offsetY !== undefined ? Theme.elevationLevel1.offsetY : 1
|
||||
shadowBlur: Theme.elevationEnabled ? Math.max(0, Math.min(1, (Theme.elevationLevel1 && Theme.elevationLevel1.blurPx !== undefined ? Theme.elevationLevel1.blurPx : 4) / Theme.elevationBlurMax)) : 0
|
||||
blurMax: Theme.elevationBlurMax
|
||||
shadowColor: Theme.elevationShadowColor(Theme.elevationLevel1)
|
||||
shadowOpacity: Theme.elevationLevel1 && Theme.elevationLevel1.alpha !== undefined ? Theme.elevationLevel1.alpha : 0.2
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user