129 lines
3.4 KiB
Text
129 lines
3.4 KiB
Text
import { HorizontalBox, VerticalBox, Palette } from "std-widgets.slint";
|
|
|
|
component SideBarItem inherits Rectangle {
|
|
in property <bool> selected;
|
|
in property <bool> has-focus;
|
|
in-out property <string> text <=> label.text;
|
|
|
|
callback clicked <=> touch.clicked;
|
|
|
|
min-height: l.preferred-height;
|
|
|
|
states [
|
|
pressed when touch.pressed : {
|
|
state.opacity: 0.8;
|
|
}
|
|
hover when touch.has-hover : {
|
|
state.opacity: 0.6;
|
|
}
|
|
selected when root.selected : {
|
|
state.opacity: 1;
|
|
}
|
|
focused when root.has-focus : {
|
|
state.opacity: 0.8;
|
|
}
|
|
]
|
|
|
|
state := Rectangle {
|
|
opacity: 0;
|
|
background: Palette.background;
|
|
|
|
animate opacity { duration: 150ms; }
|
|
}
|
|
|
|
l := HorizontalBox {
|
|
y: (parent.height - self.height) / 2;
|
|
spacing: 0px;
|
|
|
|
label := Text {
|
|
vertical-alignment: center;
|
|
}
|
|
}
|
|
|
|
touch := TouchArea {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
export component SideBar inherits Rectangle {
|
|
in property <[string]> model: [];
|
|
in property <string> title <=> label.text;
|
|
out property <int> current-item: 0;
|
|
out property <int> current-focused: fs.has-focus ? fs.focused-tab : -1; // The currently focused tab
|
|
|
|
width: 180px;
|
|
forward-focus: fs;
|
|
accessible-role: tab;
|
|
accessible-delegate-focus: root.current-focused >= 0 ? root.current-focused : root.current-item;
|
|
|
|
Rectangle {
|
|
background: Palette.alternate-background;
|
|
border-width: 1px;
|
|
border-radius: 4px;
|
|
border-color: Palette.border;
|
|
|
|
fs := FocusScope {
|
|
key-pressed(event) => {
|
|
if (event.text == "\n") {
|
|
root.current-item = root.current-focused;
|
|
return accept;
|
|
}
|
|
if (event.text == Key.UpArrow) {
|
|
self.focused-tab = Math.max(self.focused-tab - 1, 0);
|
|
return accept;
|
|
}
|
|
if (event.text == Key.DownArrow) {
|
|
self.focused-tab = Math.min(self.focused-tab + 1, root.model.length - 1);
|
|
return accept;
|
|
}
|
|
return reject;
|
|
}
|
|
|
|
key-released(event) => {
|
|
if (event.text == " ") {
|
|
root.current-item = root.current-focused;
|
|
return accept;
|
|
}
|
|
return reject;
|
|
}
|
|
|
|
property <int> focused-tab: 0;
|
|
|
|
x: 0;
|
|
width: 0; // Do not react on clicks
|
|
}
|
|
}
|
|
|
|
VerticalBox {
|
|
padding-left: 0px;
|
|
padding-right: 0px;
|
|
alignment: start;
|
|
|
|
label := Text {
|
|
font-size: 16px;
|
|
horizontal-alignment: center;
|
|
}
|
|
|
|
navigation := VerticalLayout {
|
|
alignment: start;
|
|
vertical-stretch: 0;
|
|
for item[index] in root.model : SideBarItem {
|
|
clicked => { root.current-item = index; }
|
|
|
|
has-focus: index == root.current-focused;
|
|
text: item;
|
|
selected: index == root.current-item;
|
|
}
|
|
}
|
|
|
|
VerticalLayout {
|
|
bottom := VerticalBox {
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
|
|
@children
|
|
}
|
|
}
|
|
}
|
|
} |