mirror of
https://github.com/flectar/mail.git
synced 2026-11-11 17:57:54 +00:00
46 lines
1.6 KiB
Plaintext
46 lines
1.6 KiB
Plaintext
// A shared, non-interactive overlay for scrollable list surfaces. Consumers
|
|
// decide when each edge is active from their viewport position, while this
|
|
// component keeps the visual treatment identical across workspaces.
|
|
export component ScrollFade inherits Rectangle {
|
|
in property <color> surface-color;
|
|
in property <length> content-y: 0px;
|
|
in property <length> content-height: 0px;
|
|
in property <length> visible-height: root.height;
|
|
in property <length> fade-height: 48px;
|
|
private property <bool> show-top: root.content-y < -1px;
|
|
private property <bool> show-bottom: root.content-height + root.content-y
|
|
> root.visible-height + 1px;
|
|
|
|
background: transparent;
|
|
|
|
Rectangle {
|
|
x: 0px;
|
|
y: 0px;
|
|
width: parent.width;
|
|
height: min(root.fade-height, parent.height / 2);
|
|
background: @linear-gradient(
|
|
180deg,
|
|
root.surface-color 0%,
|
|
root.surface-color.with-alpha(0.82) 38%,
|
|
root.surface-color.with-alpha(0) 100%
|
|
);
|
|
opacity: root.show-top ? 1 : 0;
|
|
animate opacity { duration: 140ms; easing: ease-out; }
|
|
}
|
|
|
|
Rectangle {
|
|
x: 0px;
|
|
y: parent.height - self.height;
|
|
width: parent.width;
|
|
height: min(root.fade-height, parent.height / 2);
|
|
background: @linear-gradient(
|
|
180deg,
|
|
root.surface-color.with-alpha(0) 0%,
|
|
root.surface-color.with-alpha(0.82) 62%,
|
|
root.surface-color 100%
|
|
);
|
|
opacity: root.show-bottom ? 1 : 0;
|
|
animate opacity { duration: 140ms; easing: ease-out; }
|
|
}
|
|
}
|