1
0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2026-04-11 00:02:28 -04:00

feat: Implement Material Design 3 elevation and shadow effects

- Added global toggle for enabling M3 elevation & shadow effects
- Refactored various components to sync updated specs
This commit is contained in:
purian23
2026-02-26 01:09:21 -05:00
parent a6269084c0
commit 788c1fa9e6
24 changed files with 181 additions and 103 deletions

View File

@@ -98,7 +98,7 @@ Item {
sourceComponent: IconImage {
anchors.fill: parent
source: root.iconPath
backer.sourceSize: Qt.size(root.iconSize, root.iconSize)
backer.sourceSize: Qt.size(root.iconSize * 2, root.iconSize * 2)
mipmap: true
asynchronous: true
visible: status === Image.Ready

View File

@@ -81,6 +81,8 @@ Rectangle {
mipmap: true
cache: true
visible: false
sourceSize.width: Math.max(width * 2, 128)
sourceSize.height: Math.max(height * 2, 128)
source: !root.shouldProbe ? root.imageSource : ""
}

View File

@@ -263,10 +263,10 @@ Item {
layer.enabled: true
layer.effect: MultiEffect {
shadowEnabled: true
shadowBlur: 0.4
shadowColor: Theme.shadowStrong
shadowVerticalOffset: 4
shadowEnabled: Theme.elevationEnabled
shadowBlur: Theme.elevationEnabled ? Math.max(0, Math.min(1, (Theme.elevationLevel2 && Theme.elevationLevel2.blurPx !== undefined ? Theme.elevationLevel2.blurPx : 8) / Theme.elevationBlurMax)) : 0
shadowColor: Theme.elevationShadowColor(Theme.elevationLevel2)
shadowVerticalOffset: Theme.elevationLevel2 && Theme.elevationLevel2.offsetY !== undefined ? Theme.elevationLevel2.offsetY : 4
}
Column {

View File

@@ -135,13 +135,14 @@ Rectangle {
color: Theme.surface
radius: Theme.cornerRadius
layer.enabled: true
layer.enabled: Theme.elevationEnabled
layer.effect: MultiEffect {
shadowEnabled: true
shadowColor: Theme.shadowStrong
shadowBlur: 0.8
shadowEnabled: Theme.elevationEnabled
shadowColor: Theme.elevationShadowColor(Theme.elevationLevel2)
shadowBlur: Theme.elevationEnabled ? Math.max(0, Math.min(1, (Theme.elevationLevel2 && Theme.elevationLevel2.blurPx !== undefined ? Theme.elevationLevel2.blurPx : 8) / Theme.elevationBlurMax)) : 0
shadowHorizontalOffset: 0
shadowVerticalOffset: 4
shadowVerticalOffset: Theme.elevationLevel2 && Theme.elevationLevel2.offsetY !== undefined ? Theme.elevationLevel2.offsetY : 4
shadowOpacity: Theme.elevationLevel2 && Theme.elevationLevel2.alpha !== undefined ? Theme.elevationLevel2.alpha : 0.25
}
Rectangle {

View File

@@ -257,9 +257,10 @@ PanelWindow {
scale: shouldBeVisible ? 1 : 0.9
property bool childHovered: false
property real shadowBlurPx: 10
property real shadowSpreadPx: 0
property real shadowBaseAlpha: 0.60
readonly property var elev: Theme.elevationLevel3
property real shadowBlurPx: elev && elev.blurPx !== undefined ? elev.blurPx : 12
property real shadowSpreadPx: elev && elev.spreadPx !== undefined ? elev.spreadPx : 0
property real shadowBaseAlpha: elev && elev.alpha !== undefined ? elev.alpha : 0.3
readonly property real popupSurfaceAlpha: SettingsData.popupTransparency
readonly property real effectiveShadowAlpha: shouldBeVisible ? Math.max(0, Math.min(1, shadowBaseAlpha * popupSurfaceAlpha)) : 0
@@ -277,12 +278,12 @@ PanelWindow {
id: bgShadowLayer
anchors.fill: parent
visible: osdContainer.popupSurfaceAlpha >= 0.95
layer.enabled: Quickshell.env("DMS_DISABLE_LAYER") !== "true" && Quickshell.env("DMS_DISABLE_LAYER") !== "1"
layer.enabled: Theme.elevationEnabled && Quickshell.env("DMS_DISABLE_LAYER") !== "true" && Quickshell.env("DMS_DISABLE_LAYER") !== "1"
layer.smooth: false
layer.textureSize: Qt.size(Math.round(width * root.dpr), Math.round(height * root.dpr))
layer.textureMirroring: ShaderEffectSource.MirrorVertically
readonly property int blurMax: 64
readonly property int blurMax: Theme.elevationBlurMax
layer.effect: MultiEffect {
id: shadowFx

View File

@@ -493,14 +493,15 @@ Item {
x: contentWrapper.x
y: contentWrapper.y
property real shadowBlurPx: 10
property real shadowSpreadPx: 0
property real shadowBaseAlpha: 0.60
readonly property var elev: Theme.elevationLevel3
property real shadowBlurPx: elev && elev.blurPx !== undefined ? elev.blurPx : 12
property real shadowSpreadPx: elev && elev.spreadPx !== undefined ? elev.spreadPx : 0
property real shadowBaseAlpha: elev && elev.alpha !== undefined ? elev.alpha : 0.3
readonly property real popupSurfaceAlpha: SettingsData.popupTransparency
readonly property real effectiveShadowAlpha: Math.max(0, Math.min(1, shadowBaseAlpha * popupSurfaceAlpha))
readonly property int blurMax: 64
readonly property int blurMax: Theme.elevationBlurMax
layer.enabled: Quickshell.env("DMS_DISABLE_LAYER") !== "true" && Quickshell.env("DMS_DISABLE_LAYER") !== "1" && !(root.suspendShadowWhileResizing && root._resizeActive)
layer.enabled: Theme.elevationEnabled && Quickshell.env("DMS_DISABLE_LAYER") !== "true" && Quickshell.env("DMS_DISABLE_LAYER") !== "1" && !(root.suspendShadowWhileResizing && root._resizeActive)
layer.smooth: false
layer.effect: MultiEffect {
@@ -511,10 +512,8 @@ Item {
maskEnabled: false
shadowBlur: Math.max(0, Math.min(1, shadowSource.shadowBlurPx / shadowSource.blurMax))
shadowScale: 1 + (2 * shadowSource.shadowSpreadPx) / Math.max(1, Math.min(shadowSource.width, shadowSource.height))
shadowColor: {
const baseColor = Theme.isLightMode ? Qt.rgba(0, 0, 0, 1) : Theme.surfaceContainerHighest;
return Theme.withAlpha(baseColor, shadowSource.effectiveShadowAlpha);
}
shadowVerticalOffset: parent.elev && parent.elev.offsetY !== undefined ? parent.elev.offsetY : 6
shadowColor: Theme.elevationShadowColor(Theme.elevationLevel3)
}
}