1
0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2026-04-30 17:42:06 -04:00

blur: revise general blur styling and refine it

This commit is contained in:
bbedward
2026-04-24 12:07:23 -04:00
parent b2668a2ffc
commit 1abb221024
29 changed files with 225 additions and 177 deletions

View File

@@ -82,6 +82,7 @@ DankPopout {
isRightEdge: root.__dropdownRightEdge
activePlayer: root.__dropdownPlayer
allPlayers: root.__dropdownPlayers
targetWindow: root.backgroundWindow
onCloseRequested: root.__hideDropdowns()
onPanelEntered: root.__stopCloseTimer()
onPanelExited: root.__startCloseTimer()

View File

@@ -15,6 +15,7 @@ Item {
property var allPlayers: []
property point anchorPos: Qt.point(0, 0)
property bool isRightEdge: false
property var targetWindow: null
property bool __isChromeBrowser: {
if (!activePlayer?.identity)
@@ -56,6 +57,30 @@ Item {
});
}
readonly property Item __activePanel: {
switch (dropdownType) {
case 1:
return volumePanel;
case 2:
return audioDevicesPanel;
case 3:
return playersPanel;
default:
return null;
}
}
WindowBlur {
targetWindow: root.targetWindow
readonly property bool active: root.__activePanel !== null && root.__activePanel.visible && root.__activePanel.opacity > 0
readonly property real s: root.__activePanel ? Math.min(1, root.__activePanel.scale) : 1
blurX: root.__activePanel ? root.__activePanel.x + root.__activePanel.width * (1 - s) * 0.5 : 0
blurY: root.__activePanel ? root.__activePanel.y + root.__activePanel.height * (1 - s) * 0.5 : 0
blurWidth: active ? root.__activePanel.width * s : 0
blurHeight: active ? root.__activePanel.height * s : 0
blurRadius: Theme.cornerRadius * 2
}
Rectangle {
id: volumePanel
visible: dropdownType === 1 && volumeAvailable
@@ -64,8 +89,8 @@ Item {
x: isRightEdge ? anchorPos.x : anchorPos.x - width
y: anchorPos.y - height / 2
radius: Theme.cornerRadius * 2
color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.95)
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3)
color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
border.color: BlurService.enabled ? "transparent" : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3)
border.width: 1
opacity: dropdownType === 1 ? 1 : 0
@@ -99,7 +124,7 @@ Item {
borderColor: volumePanel.border.color
borderWidth: volumePanel.border.width
shadowOpacity: Theme.elevationLevel2 && Theme.elevationLevel2.alpha !== undefined ? Theme.elevationLevel2.alpha : 0.25
shadowEnabled: Theme.elevationEnabled
shadowEnabled: Theme.elevationEnabled && !BlurService.enabled
}
MouseArea {
@@ -126,23 +151,26 @@ Item {
width: parent.width
height: parent.height
anchors.centerIn: parent
color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
color: Theme.withAlpha(Theme.outline, Theme.popupTransparency)
radius: Theme.cornerRadius
}
Rectangle {
readonly property real ratio: volumeAvailable ? Math.min(1.0, currentVolume) : 0
readonly property real thumbHeight: 4
width: parent.width
height: volumeAvailable ? (Math.min(1.0, currentVolume) * parent.height) : 0
height: Math.max(0, ratio * (parent.height - thumbHeight) - 3)
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter
color: Theme.primary
bottomLeftRadius: Theme.cornerRadius
bottomRightRadius: Theme.cornerRadius
radius: Theme.cornerRadius
topLeftRadius: 0
topRightRadius: 0
}
Rectangle {
width: parent.width + 8
height: 8
height: 4
radius: Theme.cornerRadius
y: {
const ratio = volumeAvailable ? Math.min(1.0, currentVolume) : 0;
@@ -151,8 +179,7 @@ Item {
}
anchors.horizontalCenter: parent.horizontalCenter
color: Theme.primary
border.width: 3
border.color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 1.0)
border.width: 0
}
MouseArea {
@@ -202,8 +229,8 @@ Item {
x: isRightEdge ? anchorPos.x : anchorPos.x - width
y: anchorPos.y - height / 2
radius: Theme.cornerRadius * 2
color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.98)
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.6)
color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
border.color: BlurService.enabled ? "transparent" : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.6)
border.width: 2
opacity: dropdownType === 2 ? 1 : 0
@@ -237,7 +264,7 @@ Item {
borderColor: audioDevicesPanel.border.color
borderWidth: audioDevicesPanel.border.width
shadowOpacity: Theme.elevationLevel2 && Theme.elevationLevel2.alpha !== undefined ? Theme.elevationLevel2.alpha : 0.25
shadowEnabled: Theme.elevationEnabled
shadowEnabled: Theme.elevationEnabled && !BlurService.enabled
}
Column {
@@ -356,8 +383,8 @@ Item {
x: isRightEdge ? anchorPos.x : anchorPos.x - width
y: anchorPos.y - height / 2
radius: Theme.cornerRadius * 2
color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.98)
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.6)
color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
border.color: BlurService.enabled ? "transparent" : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.6)
border.width: 2
opacity: dropdownType === 3 ? 1 : 0
@@ -391,7 +418,7 @@ Item {
borderColor: playersPanel.border.color
borderWidth: playersPanel.border.width
shadowOpacity: Theme.elevationLevel2 && Theme.elevationLevel2.alpha !== undefined ? Theme.elevationLevel2.alpha : 0.25
shadowEnabled: Theme.elevationEnabled
shadowEnabled: Theme.elevationEnabled && !BlurService.enabled
}
Column {

View File

@@ -2,7 +2,6 @@ import QtQuick
import QtQuick.Effects
import QtQuick.Layouts
import Quickshell.Services.Mpris
import Quickshell.Io
import qs.Common
import qs.Services
import qs.Widgets
@@ -629,7 +628,7 @@ Item {
x: isRightEdge ? Theme.spacingM : parent.width - 40 - Theme.spacingM
y: 185
color: playerSelectorArea.containsMouse || playersExpanded ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.2) : "transparent"
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3)
border.color: BlurService.enabled ? "transparent" : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3)
border.width: 1
z: 100
visible: (allPlayers?.length || 0) >= 1
@@ -672,7 +671,7 @@ Item {
x: isRightEdge ? Theme.spacingM : parent.width - 40 - Theme.spacingM
y: 130
color: volumeButtonArea.containsMouse && volumeAvailable || volumeExpanded ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.2) : "transparent"
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, volumeAvailable ? 0.3 : 0.15)
border.color: BlurService.enabled ? "transparent" : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, volumeAvailable ? 0.3 : 0.15)
border.width: 1
z: 101
enabled: volumeAvailable
@@ -749,7 +748,7 @@ Item {
x: isRightEdge ? Theme.spacingM : parent.width - 40 - Theme.spacingM
y: 240
color: audioDevicesArea.containsMouse || devicesExpanded ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.2) : "transparent"
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3)
border.color: BlurService.enabled ? "transparent" : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3)
border.width: 1
z: 100

View File

@@ -10,8 +10,8 @@ Rectangle {
property int pad: Theme.spacingM
radius: Theme.cornerRadius
color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
color: Theme.nestedSurface
border.color: Theme.outlineMedium
border.width: 1
default property alias content: contentItem.data

View File

@@ -103,7 +103,7 @@ Rectangle {
}
]
color: isCurrent ? Theme.withAlpha(Theme.primary, 0.1) : Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
color: isCurrent ? Theme.withAlpha(Theme.primary, 0.1) : Theme.nestedSurface
border.color: isCurrent ? Theme.withAlpha(Theme.primary, 0.3) : "transparent"
border.width: isCurrent ? 1 : 0

View File

@@ -213,8 +213,8 @@ Item {
width: parent.width
height: heroContent.height + Theme.spacingL * 2
radius: Theme.cornerRadius
color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
border.color: Theme.withAlpha(Theme.outline, 0.08)
color: Theme.nestedSurface
border.color: Theme.outlineMedium
border.width: 1
Column {