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:
@@ -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()
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user