112 lines
3.3 KiB
Plaintext
112 lines
3.3 KiB
Plaintext
import { Button, VerticalBox, CheckBox, ComboBox, ListView, HorizontalBox, LineEdit } from "std-widgets.slint";
|
|
|
|
import { DemoPalette, Page } from "common.slint";
|
|
import { HomePage, TodoItem } from "./homepage.slint";
|
|
import { DevicesPage } from "welcome.slint";
|
|
|
|
// export struct TodoItem {
|
|
// title: string,
|
|
// checked: bool,
|
|
// }
|
|
|
|
component AppNavigation inherits Rectangle {
|
|
in-out property <bool> active;
|
|
callback activate;
|
|
|
|
GridLayout {
|
|
padding: 0px;
|
|
@children
|
|
}
|
|
|
|
TouchArea {
|
|
clicked => { root.activate(); }
|
|
}
|
|
}
|
|
export component MainWindow inherits Window {
|
|
callback quit();
|
|
|
|
preferred-width: 400px;
|
|
preferred-height: 600px;
|
|
title: @tr("Serial");
|
|
|
|
out property<int> active-page: 0;
|
|
// out property<string> active-page: home;
|
|
callback todo-added(string);
|
|
|
|
in property <[TodoItem]> todo-model: [
|
|
{ title: "Implement the .slint file", checked: true },
|
|
{ title: "Do the Rust part", checked: false },
|
|
{ title: "Make the C++ code", checked: false },
|
|
{ title: "Write some JavaScript code", checked: false },
|
|
{ title: "Test the application", checked: false },
|
|
{ title: "Ship to customer", checked: false },
|
|
{ title: "???", checked: false },
|
|
{ title: "Profit", checked: false },
|
|
];
|
|
|
|
HorizontalLayout {
|
|
padding: 10px;
|
|
// padding-left: 67px;
|
|
// alignment: center;
|
|
|
|
main-view := Rectangle {
|
|
// height: 100%;
|
|
// border-radius: 30px;
|
|
// background: DemoPalette.page-background-color;
|
|
|
|
|
|
Rectangle {
|
|
clip: true;
|
|
x: main-view.border-radius / 2;
|
|
y: main-view.border-radius / 2;
|
|
width: main-view.width - main-view.border-radius;
|
|
height: main-view.height - main-view.border-radius;
|
|
|
|
home-page := DevicesPage {
|
|
y: root.active-page == 0 ? 0 : root.active-page < 0 ? - self.height - 1px : parent.height + 1px;
|
|
animate y { duration: 125ms; easing: ease; }
|
|
}
|
|
HomePage {
|
|
y: root.active-page == 1 ? 0 : root.active-page < 1 ? - self.height - 1px : parent.height + 1px;
|
|
animate y { duration: 125ms; easing: ease; }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
navigation := Rectangle {
|
|
width: 57px;
|
|
x: 10px;
|
|
|
|
function icon-y(index: int) -> length {
|
|
return 200px // top padding
|
|
+ index * 72px;
|
|
}
|
|
|
|
for page-icon[idx] in [
|
|
@image-url("images/home.svg"),
|
|
@image-url("images/scan.svg"),
|
|
// @image-url("images/ink.svg"),
|
|
] : AppNavigation {
|
|
y: navigation.icon-y(idx);
|
|
x: 16px;
|
|
height: 35px;
|
|
width: 30px;
|
|
|
|
icon := Image {
|
|
// colorize: (root.active-page == idx) ? DemoPalette.active-page-icon-color : DemoPalette.inactive-page-icon-color;
|
|
// animate colorize {
|
|
// duration: 125ms;
|
|
// }
|
|
source: page-icon;
|
|
image-fit: contain;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
activate => {
|
|
root.active-page = idx;
|
|
}
|
|
}
|
|
}
|
|
}
|