add shadows to bar modules

This commit is contained in:
lucy 2026-08-02 21:30:24 +02:00
commit 44ec5354f9
8 changed files with 82 additions and 1 deletions

View file

@ -1,3 +1,4 @@
pragma ComponentBehavior: Bound
import Quickshell.Widgets import Quickshell.Widgets
import Quickshell.Hyprland import Quickshell.Hyprland
import QtQuick import QtQuick
@ -5,10 +6,21 @@ import QtQuick.Layouts
import qs import qs
import qs.widgets import qs.widgets
import qs.settings import qs.settings
import QtQuick.Effects
Rectangle { Rectangle {
id: root id: root
required property double moduleHeight required property double moduleHeight
layer.enabled: true
layer.effect: MultiEffect {
id: dropShadow
source: root
shadowEnabled: true
shadowHorizontalOffset: 4
shadowVerticalOffset: 2
shadowOpacity: 0.5
shadowColor: "#020202"
}
implicitHeight: moduleHeight implicitHeight: moduleHeight
implicitWidth: titleLayout.width + 32 implicitWidth: titleLayout.width + 32
color: Colors.base02 color: Colors.base02

View file

@ -64,7 +64,7 @@ Variants {
id: rightLayout id: rightLayout
anchors.right: parent.right anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
spacing: 5 spacing: 15
anchors.rightMargin: Config.floating ? (Config.barHeight - root.moduleHeight) / 2 : Config.rounding anchors.rightMargin: Config.floating ? (Config.barHeight - root.moduleHeight) / 2 : Config.rounding
Mpris { Mpris {
moduleHeight: root.moduleHeight moduleHeight: root.moduleHeight

View file

@ -1,12 +1,23 @@
import Quickshell.Services.UPower import Quickshell.Services.UPower
import QtQuick import QtQuick
import QtQuick.Layouts import QtQuick.Layouts
import QtQuick.Effects
import qs import qs
import qs.widgets import qs.widgets
import qs.settings import qs.settings
Rectangle { Rectangle {
id: root id: root
layer.enabled: true
layer.effect: MultiEffect {
id: dropShadow
source: root
shadowEnabled: true
shadowHorizontalOffset: 4
shadowVerticalOffset: 2
shadowOpacity: 0.5
shadowColor: "#020202"
}
clip: true clip: true
color: Colors.base02 color: Colors.base02
visible: UPower.displayDevice.isLaptopBattery visible: UPower.displayDevice.isLaptopBattery

View file

@ -1,11 +1,23 @@
pragma ComponentBehavior: Bound
import Quickshell import Quickshell
import QtQuick import QtQuick
import QtQuick.Effects
import qs import qs
import qs.widgets import qs.widgets
import qs.settings import qs.settings
Rectangle { Rectangle {
id: root id: root
layer.enabled: true
layer.effect: MultiEffect {
id: dropShadow
source: root
shadowEnabled: true
shadowHorizontalOffset: 4
shadowVerticalOffset: 2
shadowOpacity: 0.5
shadowColor: "#020202"
}
clip: true clip: true
required property double moduleHeight required property double moduleHeight
implicitHeight: moduleHeight implicitHeight: moduleHeight

View file

@ -1,12 +1,24 @@
pragma ComponentBehavior: Bound
import Quickshell.Services.Mpris import Quickshell.Services.Mpris
import QtQuick import QtQuick
import QtQuick.Layouts import QtQuick.Layouts
import QtQuick.Effects
import qs import qs
import qs.widgets import qs.widgets
import qs.settings import qs.settings
Rectangle { Rectangle {
id: root id: root
layer.enabled: true
layer.effect: MultiEffect {
id: dropShadow
source: root
shadowEnabled: true
shadowHorizontalOffset: 4
shadowVerticalOffset: 2
shadowOpacity: 0.5
shadowColor: "#020202"
}
required property double moduleHeight required property double moduleHeight
implicitHeight: moduleHeight implicitHeight: moduleHeight
implicitWidth: songLayout.implicitWidth + 32 implicitWidth: songLayout.implicitWidth + 32

View file

@ -1,13 +1,25 @@
pragma ComponentBehavior: Bound
import Quickshell.Services.Pipewire import Quickshell.Services.Pipewire
import Quickshell.Io import Quickshell.Io
import QtQuick import QtQuick
import QtQuick.Layouts import QtQuick.Layouts
import QtQuick.Effects
import qs import qs
import qs.widgets import qs.widgets
import qs.settings import qs.settings
Rectangle { Rectangle {
id: root id: root
layer.enabled: true
layer.effect: MultiEffect {
id: dropShadow
source: root
shadowEnabled: true
shadowHorizontalOffset: 4
shadowVerticalOffset: 2
shadowOpacity: 0.5
shadowColor: "#020202"
}
color: clickHandler.containsMouse ? Colors.base03 : Colors.base02 color: clickHandler.containsMouse ? Colors.base03 : Colors.base02
property PwNode defaultAudio: Pipewire.ready ? Pipewire.defaultAudioSink : null property PwNode defaultAudio: Pipewire.ready ? Pipewire.defaultAudioSink : null
property bool mute: Pipewire.ready ? defaultAudio?.audio.muted : null property bool mute: Pipewire.ready ? defaultAudio?.audio.muted : null

View file

@ -4,11 +4,22 @@ import Quickshell.Services.SystemTray
import Quickshell.Widgets import Quickshell.Widgets
import QtQuick import QtQuick
import QtQuick.Layouts import QtQuick.Layouts
import QtQuick.Effects
import qs import qs
import qs.settings import qs.settings
Rectangle { Rectangle {
id: root id: root
layer.enabled: true
layer.effect: MultiEffect {
id: dropShadow
source: root
shadowEnabled: true
shadowHorizontalOffset: 4
shadowVerticalOffset: 2
shadowOpacity: 0.5
shadowColor: "#020202"
}
visible: iconRepeater.count != 0 visible: iconRepeater.count != 0
Layout.fillHeight: true Layout.fillHeight: true
required property double moduleHeight required property double moduleHeight

View file

@ -13,6 +13,17 @@ import qs.widgets
Rectangle { Rectangle {
id: main id: main
layer.enabled: true
layer.effect: MultiEffect {
id: dropShadow
source: main
shadowEnabled: true
shadowHorizontalOffset: 4
shadowVerticalOffset: 2
shadowOpacity: 0.5
shadowColor: "#020202"
}
required property real moduleHeight required property real moduleHeight
required property int screenHeight required property int screenHeight
color: Colors.base02 color: Colors.base02