1
0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2026-04-03 20:32:07 -04:00

Refactor shadow levels to their own layer

This commit is contained in:
purian23
2026-02-28 16:46:11 -05:00
parent 771e59fcb8
commit 1d25d18ca7
5 changed files with 175 additions and 72 deletions

View File

@@ -89,15 +89,30 @@ Item {
}
}
layer.enabled: Theme.elevationEnabled
layer.effect: MultiEffect {
shadowEnabled: Theme.elevationEnabled
shadowHorizontalOffset: 0
shadowVerticalOffset: Theme.elevationLevel2 && Theme.elevationLevel2.offsetY !== undefined ? Theme.elevationLevel2.offsetY : 4
shadowBlur: Theme.elevationEnabled ? Math.max(0, Math.min(1, (Theme.elevationLevel2 && Theme.elevationLevel2.blurPx !== undefined ? Theme.elevationLevel2.blurPx : 8) / Theme.elevationBlurMax)) : 0
blurMax: Theme.elevationBlurMax
shadowColor: Theme.elevationShadowColor(Theme.elevationLevel2)
shadowOpacity: Theme.elevationLevel2 && Theme.elevationLevel2.alpha !== undefined ? Theme.elevationLevel2.alpha : 0.25
Item {
id: volumeShadowLayer
anchors.fill: parent
z: -1
layer.enabled: Theme.elevationEnabled
layer.effect: MultiEffect {
autoPaddingEnabled: true
shadowEnabled: Theme.elevationEnabled
shadowHorizontalOffset: 0
shadowVerticalOffset: Theme.elevationLevel2 && Theme.elevationLevel2.offsetY !== undefined ? Theme.elevationLevel2.offsetY : 4
shadowBlur: Theme.elevationEnabled ? Math.max(0, Math.min(1, (Theme.elevationLevel2 && Theme.elevationLevel2.blurPx !== undefined ? Theme.elevationLevel2.blurPx : 8) / Theme.elevationBlurMax)) : 0
blurMax: Theme.elevationBlurMax
shadowColor: Theme.elevationShadowColor(Theme.elevationLevel2)
shadowOpacity: Theme.elevationLevel2 && Theme.elevationLevel2.alpha !== undefined ? Theme.elevationLevel2.alpha : 0.25
}
Rectangle {
anchors.fill: parent
radius: volumePanel.radius
color: volumePanel.color
border.color: volumePanel.border.color
border.width: volumePanel.border.width
}
}
MouseArea {
@@ -224,15 +239,30 @@ Item {
}
}
layer.enabled: Theme.elevationEnabled
layer.effect: MultiEffect {
shadowEnabled: Theme.elevationEnabled
shadowHorizontalOffset: 0
shadowVerticalOffset: Theme.elevationLevel2 && Theme.elevationLevel2.offsetY !== undefined ? Theme.elevationLevel2.offsetY : 4
shadowBlur: Theme.elevationEnabled ? Math.max(0, Math.min(1, (Theme.elevationLevel2 && Theme.elevationLevel2.blurPx !== undefined ? Theme.elevationLevel2.blurPx : 8) / Theme.elevationBlurMax)) : 0
blurMax: Theme.elevationBlurMax
shadowColor: Theme.elevationShadowColor(Theme.elevationLevel2)
shadowOpacity: Theme.elevationLevel2 && Theme.elevationLevel2.alpha !== undefined ? Theme.elevationLevel2.alpha : 0.25
Item {
id: audioDevicesShadowLayer
anchors.fill: parent
z: -1
layer.enabled: Theme.elevationEnabled
layer.effect: MultiEffect {
autoPaddingEnabled: true
shadowEnabled: Theme.elevationEnabled
shadowHorizontalOffset: 0
shadowVerticalOffset: Theme.elevationLevel2 && Theme.elevationLevel2.offsetY !== undefined ? Theme.elevationLevel2.offsetY : 4
shadowBlur: Theme.elevationEnabled ? Math.max(0, Math.min(1, (Theme.elevationLevel2 && Theme.elevationLevel2.blurPx !== undefined ? Theme.elevationLevel2.blurPx : 8) / Theme.elevationBlurMax)) : 0
blurMax: Theme.elevationBlurMax
shadowColor: Theme.elevationShadowColor(Theme.elevationLevel2)
shadowOpacity: Theme.elevationLevel2 && Theme.elevationLevel2.alpha !== undefined ? Theme.elevationLevel2.alpha : 0.25
}
Rectangle {
anchors.fill: parent
radius: audioDevicesPanel.radius
color: audioDevicesPanel.color
border.color: audioDevicesPanel.border.color
border.width: audioDevicesPanel.border.width
}
}
Column {
@@ -375,15 +405,30 @@ Item {
}
}
layer.enabled: Theme.elevationEnabled
layer.effect: MultiEffect {
shadowEnabled: Theme.elevationEnabled
shadowHorizontalOffset: 0
shadowVerticalOffset: Theme.elevationLevel2 && Theme.elevationLevel2.offsetY !== undefined ? Theme.elevationLevel2.offsetY : 4
shadowBlur: Theme.elevationEnabled ? Math.max(0, Math.min(1, (Theme.elevationLevel2 && Theme.elevationLevel2.blurPx !== undefined ? Theme.elevationLevel2.blurPx : 8) / Theme.elevationBlurMax)) : 0
blurMax: Theme.elevationBlurMax
shadowColor: Theme.elevationShadowColor(Theme.elevationLevel2)
shadowOpacity: Theme.elevationLevel2 && Theme.elevationLevel2.alpha !== undefined ? Theme.elevationLevel2.alpha : 0.25
Item {
id: playersShadowLayer
anchors.fill: parent
z: -1
layer.enabled: Theme.elevationEnabled
layer.effect: MultiEffect {
autoPaddingEnabled: true
shadowEnabled: Theme.elevationEnabled
shadowHorizontalOffset: 0
shadowVerticalOffset: Theme.elevationLevel2 && Theme.elevationLevel2.offsetY !== undefined ? Theme.elevationLevel2.offsetY : 4
shadowBlur: Theme.elevationEnabled ? Math.max(0, Math.min(1, (Theme.elevationLevel2 && Theme.elevationLevel2.blurPx !== undefined ? Theme.elevationLevel2.blurPx : 8) / Theme.elevationBlurMax)) : 0
blurMax: Theme.elevationBlurMax
shadowColor: Theme.elevationShadowColor(Theme.elevationLevel2)
shadowOpacity: Theme.elevationLevel2 && Theme.elevationLevel2.alpha !== undefined ? Theme.elevationLevel2.alpha : 0.25
}
Rectangle {
anchors.fill: parent
radius: playersPanel.radius
color: playersPanel.color
border.color: playersPanel.border.color
border.width: playersPanel.border.width
}
}
Column {

View File

@@ -32,19 +32,34 @@ Rectangle {
height: baseCardHeight + contentItem.extraHeight
radius: Theme.cornerRadius
clip: false
readonly property bool shadowsAllowed: Theme.elevationEnabled && 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.effect: MultiEffect {
autoPaddingEnabled: true
shadowEnabled: Theme.elevationEnabled
blurEnabled: false
maskEnabled: false
shadowBlur: Math.max(0, Math.min(1, Theme.elevationLevel1.blurPx / Theme.elevationBlurMax))
shadowScale: 1
shadowVerticalOffset: Theme.elevationLevel1.offsetY
shadowHorizontalOffset: 0
blurMax: Theme.elevationBlurMax
shadowColor: Theme.elevationShadowColor(Theme.elevationLevel1)
Item {
id: shadowLayer
anchors.fill: parent
z: -1
layer.enabled: root.shadowsAllowed
layer.effect: MultiEffect {
autoPaddingEnabled: true
shadowEnabled: root.shadowsAllowed
blurEnabled: false
maskEnabled: false
shadowBlur: Math.max(0, Math.min(1, ((Theme.elevationLevel1 && Theme.elevationLevel1.blurPx !== undefined) ? Theme.elevationLevel1.blurPx : 4) / Theme.elevationBlurMax))
shadowScale: 1
shadowVerticalOffset: (Theme.elevationLevel1 && Theme.elevationLevel1.offsetY !== undefined) ? Theme.elevationLevel1.offsetY : 1
shadowHorizontalOffset: 0
blurMax: Theme.elevationBlurMax
shadowColor: Theme.elevationShadowColor(Theme.elevationLevel1)
}
Rectangle {
anchors.fill: parent
radius: root.radius
color: root.color
border.color: root.border.color
border.width: root.border.width
}
}
color: {

View File

@@ -39,7 +39,7 @@ Rectangle {
height: expanded ? (expandedContent.height + cardPadding * 2) : (baseCardHeight + collapsedContent.extraHeight)
readonly property real targetHeight: expanded ? (expandedContent.height + cardPadding * 2) : (baseCardHeight + collapsedContent.extraHeight)
radius: Theme.cornerRadius
scale: (cardHoverHandler.hovered ? 1.005 : 1.0) * listLevelAdjacentScaleInfluence
scale: (cardHoverHandler.hovered ? 1.004 : 1.0) * listLevelAdjacentScaleInfluence
readonly property bool shadowsAllowed: Theme.elevationEnabled && Quickshell.env("DMS_DISABLE_LAYER") !== "true" && Quickshell.env("DMS_DISABLE_LAYER") !== "1"
readonly property var shadowElevation: Theme.elevationLevel1
readonly property real baseShadowBlurPx: (shadowElevation && shadowElevation.blurPx !== undefined) ? shadowElevation.blurPx : 4
@@ -124,18 +124,32 @@ Rectangle {
id: cardHoverHandler
}
layer.enabled: root.shadowsAllowed
layer.effect: MultiEffect {
autoPaddingEnabled: true
shadowEnabled: root.shadowsAllowed
blurEnabled: false
maskEnabled: false
shadowBlur: Math.max(0, Math.min(1, root.shadowBlurPx / Theme.elevationBlurMax))
shadowScale: 1
shadowVerticalOffset: root.shadowOffsetYPx
shadowHorizontalOffset: 0
blurMax: Theme.elevationBlurMax
shadowColor: root.shadowElevation ? Theme.elevationShadowColor(root.shadowElevation) : "transparent"
Item {
id: shadowLayer
anchors.fill: parent
z: -1
layer.enabled: root.shadowsAllowed
layer.effect: MultiEffect {
autoPaddingEnabled: true
shadowEnabled: root.shadowsAllowed
blurEnabled: false
maskEnabled: false
shadowBlur: Math.max(0, Math.min(1, root.shadowBlurPx / Theme.elevationBlurMax))
shadowScale: 1
shadowVerticalOffset: root.shadowOffsetYPx
shadowHorizontalOffset: 0
blurMax: Theme.elevationBlurMax
shadowColor: root.shadowElevation ? Theme.elevationShadowColor(root.shadowElevation) : "transparent"
}
Rectangle {
anchors.fill: parent
radius: root.radius
color: root.color
border.color: root.border.color
border.width: root.border.width
}
}
Rectangle {

View File

@@ -254,6 +254,8 @@ Item {
}
contentItem: Rectangle {
id: contentSurface
LayoutMirroring.enabled: I18n.isRtl
LayoutMirroring.childrenInherit: true
color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 1)
@@ -261,16 +263,30 @@ Item {
border.width: 2
radius: Theme.cornerRadius
layer.enabled: Theme.elevationEnabled && SettingsData.popoutElevationEnabled
layer.effect: MultiEffect {
autoPaddingEnabled: true
blurEnabled: false
maskEnabled: false
shadowEnabled: Theme.elevationEnabled && SettingsData.popoutElevationEnabled
shadowBlur: Theme.elevationEnabled ? Math.max(0, Math.min(1, (Theme.elevationLevel2 && Theme.elevationLevel2.blurPx !== undefined ? Theme.elevationLevel2.blurPx : 8) / Theme.elevationBlurMax)) : 0
blurMax: Theme.elevationBlurMax
shadowColor: Theme.elevationShadowColor(Theme.elevationLevel2)
shadowVerticalOffset: Theme.elevationLevel2 && Theme.elevationLevel2.offsetY !== undefined ? Theme.elevationLevel2.offsetY : 4
Item {
id: shadowLayer
anchors.fill: parent
z: -1
layer.enabled: Theme.elevationEnabled && SettingsData.popoutElevationEnabled
layer.effect: MultiEffect {
autoPaddingEnabled: true
blurEnabled: false
maskEnabled: false
shadowEnabled: Theme.elevationEnabled && SettingsData.popoutElevationEnabled
shadowBlur: Theme.elevationEnabled ? Math.max(0, Math.min(1, (Theme.elevationLevel2 && Theme.elevationLevel2.blurPx !== undefined ? Theme.elevationLevel2.blurPx : 8) / Theme.elevationBlurMax)) : 0
blurMax: Theme.elevationBlurMax
shadowColor: Theme.elevationShadowColor(Theme.elevationLevel2)
shadowVerticalOffset: Theme.elevationLevel2 && Theme.elevationLevel2.offsetY !== undefined ? Theme.elevationLevel2.offsetY : 4
}
Rectangle {
anchors.fill: parent
radius: contentSurface.radius
color: contentSurface.color
border.color: contentSurface.border.color
border.width: contentSurface.border.width
}
}
Column {

View File

@@ -132,19 +132,32 @@ Rectangle {
}
contentItem: Rectangle {
id: contentSurface
color: Theme.surface
radius: Theme.cornerRadius
layer.enabled: Theme.elevationEnabled
layer.effect: MultiEffect {
autoPaddingEnabled: true
shadowEnabled: Theme.elevationEnabled
blurMax: Theme.elevationBlurMax
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: Theme.elevationLevel2 && Theme.elevationLevel2.offsetY !== undefined ? Theme.elevationLevel2.offsetY : 4
shadowOpacity: Theme.elevationLevel2 && Theme.elevationLevel2.alpha !== undefined ? Theme.elevationLevel2.alpha : 0.25
Item {
id: shadowLayer
anchors.fill: parent
z: -1
layer.enabled: Theme.elevationEnabled
layer.effect: MultiEffect {
autoPaddingEnabled: true
shadowEnabled: Theme.elevationEnabled
blurMax: Theme.elevationBlurMax
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: Theme.elevationLevel2 && Theme.elevationLevel2.offsetY !== undefined ? Theme.elevationLevel2.offsetY : 4
shadowOpacity: Theme.elevationLevel2 && Theme.elevationLevel2.alpha !== undefined ? Theme.elevationLevel2.alpha : 0.25
}
Rectangle {
anchors.fill: parent
radius: contentSurface.radius
color: contentSurface.color
}
}
Rectangle {