quickshell: crossfade dock/undock silhouette swap, ease column border jump

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
rope 2026-06-12 09:07:22 +01:00
parent 8413ac293e
commit dcf31fbe63

View file

@ -515,19 +515,25 @@ in
} }
// Frame right-column inner border starts below a flush-right // Frame right-column inner border starts below a flush-right
// dropdown's bottom curve and follows the morph. // dropdown's bottom curve and follows the morph. The short y
// animation softens the dock/undock jump.
Rectangle { Rectangle {
x: bar.width - Theme.frameWidth - Theme.borderWidth / 2 x: bar.width - Theme.frameWidth - Theme.borderWidth / 2
y: chrome.mergedRight ? 30 + chrome.height + 8 : 38 y: chrome.mergedRight ? 30 + chrome.height + 8 : 38
width: Theme.borderWidth width: Theme.borderWidth
height: Math.max(0, bar.height - Theme.frameWidth - 8 - y) height: Math.max(0, bar.height - Theme.frameWidth - 8 - y)
color: Theme.base03 color: Theme.base03
Behavior on y {
NumberAnimation { duration: 90; easing.type: Easing.OutCubic }
}
} }
// Frame top-right inner corner hidden while a flush-right // Frame top-right inner corner fades out while a flush-right
// dropdown is merged into the column there. // dropdown is merged into the column there.
Shape { Shape {
visible: !chrome.mergedRight opacity: chrome.mergedRight ? 0 : 1
visible: opacity > 0.01
Behavior on opacity { NumberAnimation { duration: 90 } }
preferredRendererType: Shape.CurveRenderer preferredRendererType: Shape.CurveRenderer
ShapePath { ShapePath {
fillColor: "transparent" fillColor: "transparent"
@ -1359,13 +1365,20 @@ in
NumberAnimation { duration: 280; easing.type: Easing.OutExpo } NumberAnimation { duration: 280; easing.type: Easing.OutExpo }
} }
// Crossfade between the floating and column-merged
// silhouettes at dock/undock; the brief double-draw of
// the (near-identical) bodies is imperceptible over blur.
PanelShape { PanelShape {
visible: !chrome.mergedRight opacity: chrome.mergedRight ? 0 : 1
visible: opacity > 0.01
Behavior on opacity { NumberAnimation { duration: 90 } }
width: chrome.width width: chrome.width
height: chrome.height height: chrome.height
} }
PanelShapeFlush { PanelShapeFlush {
visible: chrome.mergedRight opacity: chrome.mergedRight ? 1 : 0
visible: opacity > 0.01
Behavior on opacity { NumberAnimation { duration: 90 } }
width: chrome.width width: chrome.width
height: chrome.height height: chrome.height
} }