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

View file

@ -5,12 +5,13 @@ import Quickshell
import qs.components
import qs.config
import qs.modules.bar.popouts as BarPopouts
import qs.modules.sidebar as Sidebar
Item {
id: root
required property DrawerVisibilities visibilities
required property Item sidebar
required property Sidebar.Wrapper sidebar
required property BarPopouts.Wrapper popouts
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))
property real offsetScale: shouldBeActive ? 0 : 1
property real sidebarLerp
visible: offsetScale < 1
anchors.bottomMargin: (-implicitHeight - 5) * offsetScale
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
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 {
Anim {
duration: Appearance.anim.durations.expressiveDefaultSpatial