nosignal/nosignal-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

refactor: fade flickable -> own component

Browse source
This commit is contained in:
2 * r + 2 * t 2026-06-05 16:54:40 +10:00
parent 682356f9da
commit 45c97074b7
2 changed files with 73 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
components/containers/VerticalFadeFlickable.qml Normal file
View file

@ -0,0 +1,72 @@
pragma ComponentBehavior: Bound
import QtQuick
import qs.components
import qs.components.effects
StyledFlickable {
id: root
property real fadeAmount: 0.3
property real topFadeOpacity: fadeShouldBeActive(true) ? 0 : 1
property real bottomFadeOpacity: fadeShouldBeActive(false) ? 0 : 1
function fadeShouldBeActive(isStart: bool): bool {
// When content is smaller than flickable size, hide fade when rebound starts
if (contentHeight + topMargin + bottomMargin < height && rebound.running && ((isStart ? verticalOvershoot > 0 : verticalOvershoot < 0)))
return false;
if (isStart)
return visibleArea.yPosition > 0;
return visibleArea.yPosition + visibleArea.heightRatio < 1;
}
flickableDirection: Flickable.VerticalFlick
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: root.fadeAmount
color: Qt.rgba(0, 0, 0, 1)
}
GradientStop {
position: 1 - root.fadeAmount
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
}
}
}

63
modules/nexus/navpane/NavLocations.qml
View file

@ -5,78 +5,17 @@ import QtQuick.Layouts
import Caelestia.Config
import qs.components
import qs.components.containers
import qs.components.effects
import qs.services
import qs.modules.nexus
StyledFlickable {
VerticalFadeFlickable {
id: root
required property NexusState nState
property real topFadeOpacity: fadeShouldBeActive(true) ? 0 : 1
property real bottomFadeOpacity: fadeShouldBeActive(false) ? 0 : 1
function fadeShouldBeActive(isStart: bool): bool {
// When content is smaller than flickable size, hide fade when rebound starts
if (contentHeight + topMargin + bottomMargin < height && rebound.running && ((isStart ? verticalOvershoot > 0 : verticalOvershoot < 0)))
return false;
if (isStart)
return visibleArea.yPosition > 0;
return visibleArea.yPosition + visibleArea.heightRatio < 1;
}
topMargin: Tokens.padding.large
bottomMargin: Tokens.padding.large
contentHeight: content.implicitHeight
flickableDirection: Flickable.VerticalFlick
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