feat: make utils anim to sidebar width

This commit is contained in:
2 * r + 2 * t 2026-03-28 21:06:49 +11:00
parent edf1c155f1
commit 04efa4d39d
2 changed files with 40 additions and 19 deletions

View file

@ -165,16 +165,10 @@ Variants {
blobGroup: blobGroup blobGroup: blobGroup
panel: panels.sidebar panel: panels.sidebar
bar: bar bar: bar
deformAmount: 0 deformAmount: 0.05
height: panel.height + 2 height: panel.height + 2
exclude: panels.sidebar.offsetScale > 0 ? [] : [utilsBg] exclude: panels.sidebar.offsetScale > 0.08 ? [] : [utilsBg]
bottomLeftRadius: panels.sidebar.visible ? 0 : radius bottomLeftRadius: Math.max(0, Math.min(1, panels.sidebar.offsetScale / 0.3)) * radius
Behavior on bottomLeftRadius {
Anim {
duration: Appearance.anim.durations.expressiveDefaultSpatial
}
}
} }
PanelBg { PanelBg {
@ -202,14 +196,9 @@ Variants {
blobGroup: blobGroup blobGroup: blobGroup
panel: panels.utilities panel: panels.utilities
bar: bar bar: bar
exclude: panels.sidebar.offsetScale > 0 ? [] : [sidebarBg] deformAmount: panels.sidebar.visible ? 0.1 : 0.15
topLeftRadius: panels.sidebar.visible ? 0 : radius exclude: panels.sidebar.offsetScale > 0.08 ? [] : [sidebarBg]
topLeftRadius: Math.max(0, Math.min(1, panels.sidebar.offsetScale / 0.3)) * radius
Behavior on topLeftRadius {
Anim {
duration: Appearance.anim.durations.expressiveDefaultSpatial
}
}
} }
PanelBg { PanelBg {

View file

@ -5,12 +5,13 @@ import Quickshell
import qs.components import qs.components
import qs.config import qs.config
import qs.modules.bar.popouts as BarPopouts import qs.modules.bar.popouts as BarPopouts
import qs.modules.sidebar as Sidebar
Item { Item {
id: root id: root
required property DrawerVisibilities visibilities required property DrawerVisibilities visibilities
required property Item sidebar required property Sidebar.Wrapper sidebar
required property BarPopouts.Wrapper popouts required property BarPopouts.Wrapper popouts
readonly property PersistentProperties props: PersistentProperties { readonly property PersistentProperties props: PersistentProperties {
@ -22,13 +23,44 @@ Item {
} }
readonly property bool shouldBeActive: visibilities.sidebar || (visibilities.utilities && Config.utilities.enabled && !(visibilities.session && Config.session.enabled)) readonly property bool shouldBeActive: visibilities.sidebar || (visibilities.utilities && Config.utilities.enabled && !(visibilities.session && Config.session.enabled))
property real offsetScale: shouldBeActive ? 0 : 1 property real offsetScale: shouldBeActive ? 0 : 1
property real sidebarLerp
visible: offsetScale < 1 visible: offsetScale < 1
anchors.bottomMargin: (-implicitHeight - 5) * offsetScale anchors.bottomMargin: (-implicitHeight - 5) * offsetScale
implicitHeight: content.implicitHeight + content.anchors.margins * 2 implicitHeight: content.implicitHeight + content.anchors.margins * 2
implicitWidth: sidebar.visible ? sidebar.width : Config.utilities.sizes.width implicitWidth: sidebar.width * (1 - sidebar.offsetScale) * sidebarLerp + Config.utilities.sizes.width * (1 - sidebarLerp)
opacity: 1 - offsetScale opacity: 1 - offsetScale
states: State {
name: "attachedToSidebar"
when: root.visibilities.sidebar
PropertyChanges {
root.sidebarLerp: 1
}
}
transitions: [
Transition {
from: ""
Anim {
property: "sidebarLerp"
duration: Appearance.anim.durations.expressiveDefaultSpatial / 2
easing.bezierCurve: Appearance.anim.curves.standardAccel
}
},
Transition {
to: ""
Anim {
property: "sidebarLerp"
duration: Appearance.anim.durations.expressiveDefaultSpatial / 2
easing.bezierCurve: Appearance.anim.curves.standardDecel
}
}
]
Behavior on offsetScale { Behavior on offsetScale {
Anim { Anim {
duration: Appearance.anim.durations.expressiveDefaultSpatial duration: Appearance.anim.durations.expressiveDefaultSpatial