vicrodh
3134b83d72
The sidebar collapse toggle is now an icon-only button at the far left of the header, before the Discover tab. Removed from NavButtons, which is now just the back/forward history pair. cc
71 lines
2.0 KiB
Plaintext
71 lines
2.0 KiB
Plaintext
// Browser-like back / forward navigation pair.
|
|
//
|
|
// The [<] [>] history pair uses the same circular elevated style as the
|
|
// Discover carousel page navigators. Used inline beside the Discover
|
|
// tabs and in place of the per-page Back button. (The sidebar-collapse
|
|
// toggle lives in the header now, not here.)
|
|
|
|
import { Theme } from "../foundation/semantic-colors.slint";
|
|
import { NavState } from "../state.slint";
|
|
import { QbzIcon } from "../primitives/QbzIcon.slint";
|
|
|
|
// Circular elevated icon button — same look as the Discover carousel
|
|
// page navigators (Carousel.slint NavButton).
|
|
component HistoryNavBtn inherits Rectangle {
|
|
in property <image> icon;
|
|
in property <bool> enabled: true;
|
|
callback clicked();
|
|
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 14px;
|
|
opacity: root.enabled ? 1.0 : 0.4;
|
|
background: ta.has-hover && root.enabled
|
|
? Theme.surface-hover
|
|
: Theme.surface-elevated;
|
|
|
|
QbzIcon {
|
|
source: root.icon;
|
|
width: 15px;
|
|
height: 15px;
|
|
x: (parent.width - self.width) / 2;
|
|
y: (parent.height - self.height) / 2;
|
|
tint: root.enabled ? Theme.text-primary : Theme.text-muted;
|
|
}
|
|
|
|
ta := TouchArea {
|
|
enabled: root.enabled;
|
|
mouse-cursor: root.enabled ? pointer : default;
|
|
clicked => {
|
|
if (root.enabled) {
|
|
root.clicked();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
export component NavButtons inherits HorizontalLayout {
|
|
spacing: 4px;
|
|
|
|
VerticalLayout {
|
|
alignment: center;
|
|
HistoryNavBtn {
|
|
icon: @image-url("../assets/icons/chevron-left.svg");
|
|
enabled: NavState.can-back;
|
|
clicked => {
|
|
NavState.request-back();
|
|
}
|
|
}
|
|
}
|
|
VerticalLayout {
|
|
alignment: center;
|
|
HistoryNavBtn {
|
|
icon: @image-url("../assets/icons/chevron-right.svg");
|
|
enabled: NavState.can-forward;
|
|
clicked => {
|
|
NavState.request-forward();
|
|
}
|
|
}
|
|
}
|
|
}
|