feat: fade out nexus nav list

This commit is contained in:
2 * r + 2 * t 2026-06-04 16:13:58 +10:00
parent d6d53ed7bc
commit 328c4ba37d
2 changed files with 54 additions and 0 deletions

View file

@ -19,6 +19,8 @@ ColumnLayout {
NavLocations {
Layout.fillWidth: true
Layout.fillHeight: true
Layout.topMargin: -topMargin
Layout.bottomMargin: -bottomMargin
nState: root.nState
}
}

View file

@ -5,6 +5,7 @@ import QtQuick.Layouts
import Caelestia.Config
import qs.components
import qs.components.containers
import qs.components.effects
import qs.services
import qs.modules.nexus
@ -13,8 +14,59 @@ StyledFlickable {
required property NexusState nState
property real topFadeOpacity: visibleArea.yPosition > 0 ? 0 : 1
property real bottomFadeOpacity: visibleArea.yPosition + visibleArea.heightRatio < 1 ? 0 : 1
topMargin: Tokens.padding.large
bottomMargin: Tokens.padding.large
contentHeight: content.implicitHeight
layer.enabled: true
layer.effect: Mask {
maskSource: mask
Rectangle {
id: mask
anchors.fill: parent
visible: false
layer.enabled: true
gradient: Gradient {
orientation: Gradient.Vertical
GradientStop {
position: 0
color: Qt.rgba(0, 0, 0, root.topFadeOpacity)
}
GradientStop {
position: 0.3
color: Qt.rgba(0, 0, 0, 1)
}
GradientStop {
position: 0.7
color: Qt.rgba(0, 0, 0, 1)
}
GradientStop {
position: 1
color: Qt.rgba(0, 0, 0, root.bottomFadeOpacity)
}
}
}
}
Behavior on topFadeOpacity {
Anim {
type: Anim.SlowEffects
}
}
Behavior on bottomFadeOpacity {
Anim {
type: Anim.SlowEffects
}
}
ColumnLayout {
id: content