mirror of
https://github.com/danbulant/dots-hyprland
synced 2026-05-24 20:31:57 +00:00
use multieffect for shadows
This commit is contained in:
parent
bece489ee9
commit
fcdf2dc7f6
11 changed files with 100 additions and 125 deletions
|
|
@ -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
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue