vinzenz/nova-shell
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

flyout animations

Browse source
This commit is contained in:
Damocles 2026-04-12 16:08:23 +02:00
parent 472ecf6783
commit 3a8b2d5b11
2 changed files with 73 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

78
modules/Flyout.qml
View file

@ -8,9 +8,23 @@ PanelWindow {
required property var screen
visible: M.FlyoutState.visible && M.FlyoutState.screen === root.screen
visible: _winVisible
color: "transparent"
property bool _winVisible: false
property bool _shown: M.FlyoutState.visible && M.FlyoutState.screen === root.screen
on_ShownChanged: {
if (_shown) {
_winVisible = true;
hideAnim.stop();
showAnim.start();
} else {
showAnim.stop();
hideAnim.start();
}
}
WlrLayershell.layer: WlrLayer.Overlay
WlrLayershell.exclusiveZone: 0
WlrLayershell.namespace: "nova-flyout"
@ -18,32 +32,54 @@ PanelWindow {
anchors.top: true
anchors.left: true
// Flush below bar, centered on hovered item
margins.top: 0
margins.left: Math.max(0, Math.min(Math.round(M.FlyoutState.itemX - implicitWidth / 2), screen.width - implicitWidth))
margins.left: Math.max(0, Math.min(
Math.round(M.FlyoutState.itemX - implicitWidth / 2),
screen.width - implicitWidth
))
implicitWidth: label.implicitWidth + M.Theme.barPadding * 2
implicitHeight: label.implicitHeight + M.Theme.barPadding * 2
// Background matching bar style — square top corners so it looks
// flush / attached to the bar above, rounded bottom corners only
Rectangle {
anchors.fill: parent
color: M.Theme.base00
opacity: Math.max(M.Theme.barOpacity, 0.85)
topLeftRadius: 0
topRightRadius: 0
bottomLeftRadius: M.Theme.radius
bottomRightRadius: M.Theme.radius
ParallelAnimation {
id: showAnim
NumberAnimation { target: content; property: "opacity"; to: 1; duration: 120; easing.type: Easing.OutCubic }
NumberAnimation { target: content; property: "y"; to: 0; duration: 150; easing.type: Easing.OutCubic }
}
Text {
id: label
anchors.centerIn: parent
text: M.FlyoutState.text.replace(/\n/g, "<br>")
textFormat: Text.RichText
color: M.Theme.base05
font.pixelSize: M.Theme.fontSize
font.family: M.Theme.fontFamily
ParallelAnimation {
id: hideAnim
NumberAnimation { target: content; property: "opacity"; to: 0; duration: 150; easing.type: Easing.InCubic }
NumberAnimation { target: content; property: "y"; to: -content.height; duration: 150; easing.type: Easing.InCubic }
onFinished: root._winVisible = false
}
Item {
id: content
anchors.left: parent.left
anchors.right: parent.right
height: root.implicitHeight
opacity: 0
y: -height
Rectangle {
anchors.fill: parent
color: M.Theme.base00
opacity: Math.max(M.Theme.barOpacity, 0.85)
topLeftRadius: 0
topRightRadius: 0
bottomLeftRadius: M.Theme.radius
bottomRightRadius: M.Theme.radius
}
Text {
id: label
anchors.centerIn: parent
text: M.FlyoutState.text.replace(/\n/g, "<br>")
textFormat: Text.RichText
color: M.Theme.base05
font.pixelSize: M.Theme.fontSize
font.family: M.Theme.fontFamily
}
}
}