use multieffect for shadows

This commit is contained in:
end-4 2025-05-20 12:58:39 +02:00
parent bece489ee9
commit fcdf2dc7f6
11 changed files with 100 additions and 125 deletions

View file

@ -5,8 +5,8 @@ import "root:/modules/common/widgets"
import "root:/modules/common/functions/color_utils.js" as ColorUtils
import QtQuick
import QtQuick.Controls
import QtQuick.Effects
import QtQuick.Layouts
import Qt5Compat.GraphicalEffects
import Quickshell.Io
import Quickshell
import Quickshell.Widgets
@ -65,6 +65,16 @@ Scope { // Scope
implicitWidth: cheatsheetColumnLayout.implicitWidth + padding * 2
implicitHeight: cheatsheetColumnLayout.implicitHeight + padding * 2
layer.enabled: true
layer.effect: MultiEffect {
source: cheatsheetBackground
anchors.fill: cheatsheetBackground
shadowEnabled: true
shadowVerticalOffset: 1
shadowColor: Appearance.colors.colShadow
shadowBlur: 0.5
}
Keys.onPressed: (event) => { // Esc to close
if (event.key === Qt.Key_Escape) {
cheatsheetRoot.hide()
@ -124,17 +134,6 @@ Scope { // Scope
}
}
// Shadow
DropShadow {
anchors.fill: cheatsheetBackground
horizontalOffset: 0
verticalOffset: 2
radius: Appearance.sizes.elevationMargin
samples: Appearance.sizes.elevationMargin * 2 + 1 // Ideally should be 2 * radius + 1, see qt docs
color: Appearance.colors.colShadow
source: cheatsheetBackground
}
}
}

View file

@ -261,7 +261,7 @@ Singleton {
property real searchWidthCollapsed: 260
property real searchWidth: 450
property real hyprlandGapsOut: 5
property real elevationMargin: 7
property real elevationMargin: 8
property real fabShadowRadius: 5
property real fabHoveredShadowRadius: 7
}

View file

@ -5,6 +5,7 @@ import "root:/modules/common/functions/color_utils.js" as ColorUtils
import Qt5Compat.GraphicalEffects
import QtQuick
import QtQuick.Controls
import QtQuick.Effects
import QtQuick.Layouts
import Quickshell
import Quickshell.Io
@ -191,6 +192,16 @@ Item {
ColorUtils.mix(Appearance.m3colors.m3secondaryContainer, Appearance.colors.colLayer2, 0.35) : Appearance.colors.colLayer2
radius: Appearance.rounding.normal
layer.enabled: true
layer.effect: MultiEffect {
source: notificationBackground
anchors.fill: notificationBackground
shadowEnabled: popup
shadowColor: Appearance.colors.colShadow
shadowVerticalOffset: 1
shadowBlur: 0.5
}
Behavior on x {
enabled: enableAnimation
NumberAnimation {
@ -208,20 +219,6 @@ Item {
}
}
}
Loader {
active: popup
anchors.fill: notificationBackground
sourceComponent: DropShadow {
id: notificationShadow
source: notificationBackground
radius: 5
samples: radius * 2 + 1
color: Appearance.colors.colShadow
verticalOffset: 2
horizontalOffset: 0
}
}
}

View file

@ -99,7 +99,7 @@ Scope {
ColumnLayout { // Scrollable window content
id: columnLayout
anchors.horizontalCenter: parent.horizontalCenter
width: parent.width - Appearance.sizes.hyprlandGapsOut * 2
width: parent.width - Appearance.sizes.elevationMargin * 2
spacing: 0 // The widgets themselves have margins for spacing
// Notifications are added by the above signal handlers

View file

@ -3,10 +3,11 @@ import "root:/modules/common"
import "root:/modules/common/widgets"
import QtQuick
import QtQuick.Controls
import QtQuick.Effects
import QtQuick.Layouts
import Quickshell
import Quickshell.Widgets
import Qt5Compat.GraphicalEffects
// import Qt5Compat.GraphicalEffects
Item {
id: root
@ -31,6 +32,16 @@ Item {
color: Appearance.colors.colLayer0
implicitWidth: valueRow.implicitWidth
layer.enabled: true
layer.effect: MultiEffect {
source: valueIndicator
anchors.fill: valueIndicator
shadowEnabled: true
shadowColor: Appearance.colors.colShadow
shadowVerticalOffset: 1
shadowBlur: 0.5
}
RowLayout { // Icon on the left, stuff on the right
id: valueRow
Layout.margins: 10
@ -94,15 +105,4 @@ Item {
}
}
}
DropShadow {
id: valueShadow
anchors.fill: valueIndicator
source: valueIndicator
radius: Appearance.sizes.elevationMargin
samples: radius * 2 + 1
color: Appearance.colors.colShadow
verticalOffset: 2
horizontalOffset: 0
}
}

View file

@ -3,8 +3,8 @@ import "root:/services/"
import "root:/modules/common"
import "root:/modules/common/widgets"
import "root:/modules/common/functions/color_utils.js" as ColorUtils
import Qt5Compat.GraphicalEffects
import QtQuick
import QtQuick.Effects
import QtQuick.Layouts
import Quickshell
import Quickshell.Io
@ -59,6 +59,16 @@ Item {
color: Appearance.colors.colLayer0
radius: Appearance.rounding.screenRounding * root.scale + 5 * 2
layer.enabled: true
layer.effect: MultiEffect {
source: overviewBackground
anchors.fill: overviewBackground
shadowEnabled: true
shadowColor: Appearance.colors.colShadow
shadowVerticalOffset: 1
shadowBlur: 0.5
}
ColumnLayout {
id: workspaceColumnLayout
@ -210,15 +220,4 @@ Item {
}
}
}
DropShadow {
z: -9999
anchors.fill: overviewBackground
horizontalOffset: 0
verticalOffset: 2
radius: Appearance.sizes.elevationMargin
samples: radius * 2 + 1 // Ideally should be 2 * radius + 1, see qt docs
color: Appearance.colors.colShadow
source: overviewBackground
}
}

View file

@ -7,6 +7,7 @@ import Qt5Compat.GraphicalEffects
import Qt.labs.platform
import QtQuick
import QtQuick.Controls
import QtQuick.Effects
import QtQuick.Layouts
import Quickshell
import Quickshell.Io
@ -160,6 +161,15 @@ Item { // Wrapper
implicitHeight: columnLayout.implicitHeight
radius: Appearance.rounding.large
color: Appearance.colors.colLayer0
layer.enabled: true
layer.effect: MultiEffect {
source: searchWidgetContent
anchors.fill: searchWidgetContent
shadowEnabled: true
shadowColor: Appearance.colors.colShadow
shadowVerticalOffset: 1
shadowBlur: 0.5
}
ColumnLayout {
id: columnLayout
@ -366,15 +376,4 @@ Item { // Wrapper
}
}
DropShadow {
id: searchWidgetShadow
anchors.fill: searchWidgetContent
source: searchWidgetContent
radius: Appearance.sizes.elevationMargin
samples: radius * 2 + 1
color: Appearance.colors.colShadow
verticalOffset: 2
horizontalOffset: 0
}
}

View file

@ -5,6 +5,7 @@ import "root:/modules/common/widgets"
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Effects
import Qt5Compat.GraphicalEffects
import Quickshell.Io
import Quickshell
@ -80,6 +81,16 @@ Scope { // Scope
radius: Appearance.rounding.screenRounding - Appearance.sizes.elevationMargin + 1
focus: sidebarRoot.visible
layer.enabled: true
layer.effect: MultiEffect {
source: sidebarLeftBackground
anchors.fill: sidebarLeftBackground
shadowEnabled: true
shadowColor: Appearance.colors.colShadow
shadowVerticalOffset: 1
shadowBlur: 0.5
}
Behavior on width {
animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
}
@ -161,17 +172,6 @@ Scope { // Scope
}
}
// Shadow
DropShadow {
anchors.fill: sidebarLeftBackground
horizontalOffset: 0
verticalOffset: 2
radius: Appearance.sizes.elevationMargin
samples: Appearance.sizes.elevationMargin * 2 + 1 // Ideally should be 2 * radius + 1, see qt docs
color: Appearance.colors.colShadow
source: sidebarLeftBackground
}
}
}

View file

@ -8,10 +8,11 @@ import Qt.labs.platform
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Effects
import Qt5Compat.GraphicalEffects
import Quickshell
import Quickshell.Io
import Quickshell.Hyprland
import Qt5Compat.GraphicalEffects
Button {
id: root
@ -137,6 +138,16 @@ Button {
implicitHeight: contextMenuColumnLayout.implicitHeight + radius * 2
implicitWidth: contextMenuColumnLayout.implicitWidth
layer.enabled: true
layer.effect: MultiEffect {
source: contextMenu
anchors.fill: contextMenu
shadowEnabled: true
shadowColor: Appearance.colors.colShadow
shadowVerticalOffset: 1
shadowBlur: 0.5
}
Behavior on opacity {
NumberAnimation {
duration: Appearance.animation.elementMoveFast.duration
@ -185,26 +196,6 @@ Button {
}
}
}
DropShadow {
opacity: root.showActions ? 1 : 0
visible: opacity > 0
anchors.fill: contextMenu
source: contextMenu
radius: Appearance.sizes.elevationMargin
samples: radius * 2 + 1
color: Appearance.colors.colShadow
verticalOffset: 2
horizontalOffset: 0
Behavior on opacity {
NumberAnimation {
duration: Appearance.animation.elementMoveFast.duration
easing.type: Appearance.animation.elementMoveFast.type
easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
}
}
}
}
}
}

View file

@ -7,6 +7,7 @@ import "./quickToggles/"
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Effects
import Qt5Compat.GraphicalEffects
import Quickshell.Io
import Quickshell
@ -65,6 +66,16 @@ Scope {
color: Appearance.colors.colLayer0
radius: Appearance.rounding.screenRounding - Appearance.sizes.elevationMargin + 1
layer.enabled: true
layer.effect: MultiEffect {
source: sidebarRightBackground
anchors.fill: sidebarRightBackground
shadowEnabled: true
shadowColor: Appearance.colors.colShadow
shadowVerticalOffset: 1
shadowBlur: 0.5
}
Keys.onPressed: (event) => {
if (event.key === Qt.Key_Escape) {
sidebarRoot.hide();
@ -164,17 +175,6 @@ Scope {
}
}
// Shadow
DropShadow {
anchors.fill: sidebarRightBackground
horizontalOffset: 0
verticalOffset: 2
radius: Appearance.sizes.elevationMargin
samples: Appearance.sizes.elevationMargin * 2 + 1 // Ideally should be 2 * radius + 1, see qt docs
color: Appearance.colors.colShadow
source: sidebarRightBackground
}
}
}

View file

@ -4,8 +4,8 @@ import "root:/services"
import "root:/modules/common/functions/color_utils.js" as ColorUtils
import QtQuick
import QtQuick.Controls
import QtQuick.Effects
import QtQuick.Layouts
import Qt5Compat.GraphicalEffects
Item {
id: root
@ -173,25 +173,15 @@ Item {
Behavior on color {
animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
}
}
DropShadow {
id: fabShadow
anchors.fill: fabBackground
source: fabBackground
horizontalOffset: 0
verticalOffset: fabButton.hovered ? 4 : 2
radius: fabButton.hovered ? Appearance.sizes.fabHoveredShadowRadius : Appearance.sizes.fabShadowRadius
samples: fabShadow.radius * 2 + 1
color: Appearance.colors.colShadow
z: fabBackground.z - 1
Behavior on verticalOffset {
NumberAnimation {
duration: Appearance.animation.elementMoveFast.duration
easing.type: Appearance.animation.elementMoveFast.type
easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
}
layer.enabled: true
layer.effect: MultiEffect {
source: fabBackground
anchors.fill: fabBackground
shadowEnabled: true
shadowColor: Appearance.colors.colShadow
shadowBlur: 0.6
shadowVerticalOffset: fabButton.hovered ? 4 : 2
}
}