mirror of
https://github.com/slint-ui/slint.git
synced 2025-10-02 14:51:15 +00:00

Items are auto centered these days so no need for extra bindings. The buttons also look after themselves and don't need logic in the loop to resize them.
105 lines
3.4 KiB
Text
105 lines
3.4 KiB
Text
// Copyright © SixtyFPS GmbH <info@slint.dev>
|
|
// SPDX-License-Identifier: MIT
|
|
|
|
import { DemoPalette, Page, PushButton } from "./common.slint";
|
|
import { CopyPage } from "./copy_page.slint";
|
|
import { ScanPage } from "./scan_page.slint";
|
|
import { PrintPage } from "./print_page.slint";
|
|
import { PrinterQueueView } from "./printer_queue.slint";
|
|
import { UsbPage } from "./usb_page.slint";
|
|
|
|
|
|
|
|
enum SubPage { None, Print, Scan, Copy, Usb }
|
|
|
|
component ActionButton inherits Rectangle {
|
|
in property <image> icon <=> img.source;
|
|
in property <string> text <=> label.text;
|
|
width: DemoPalette.button-width;
|
|
height: DemoPalette.button-height;
|
|
|
|
callback clicked;
|
|
|
|
VerticalLayout {
|
|
spacing: 10px;
|
|
|
|
Rectangle {
|
|
border-radius: 25px;
|
|
border-width: 5px;
|
|
border-color: DemoPalette.secondary;
|
|
background: DemoPalette.dark-mode ? DemoPalette.primary : DemoPalette.background;
|
|
width: DemoPalette.button-width;
|
|
height: self.width;
|
|
|
|
img := Image {
|
|
colorize: DemoPalette.text-primary;
|
|
}
|
|
}
|
|
|
|
label := Text {
|
|
font-size: DemoPalette.base-font-size * 1.375;
|
|
font-weight: 800;
|
|
horizontal-alignment: center;
|
|
color: DemoPalette.text-primary;
|
|
}
|
|
}
|
|
|
|
TouchArea { clicked => { root.clicked() } }
|
|
}
|
|
|
|
export component HomePage inherits Page {
|
|
in-out property <length> header-row-height: 40px;
|
|
in-out property <length> button-spacing: 35px;
|
|
in-out property <SubPage> current-subpage: SubPage.None;
|
|
|
|
header: @tr("Slint Printer Demo");
|
|
|
|
for action[idx] in [
|
|
{ name: @tr("Print"), id: SubPage.Print, icon: @image-url("images/print.svg") },
|
|
{ name: @tr("Scan"), id: SubPage.Scan, icon: @image-url("images/scan.svg") },
|
|
{ name: @tr("Copy"), id: SubPage.Copy, icon: @image-url("images/copy.svg") },
|
|
{ name: @tr("USB"), id: SubPage.Usb, icon: @image-url("images/usb.svg") },
|
|
]: ActionButton {
|
|
x: mod(idx, 2) * (DemoPalette.button-width + root.button-spacing);
|
|
y: floor(idx / 2) * (DemoPalette.button-height + root.button-spacing)
|
|
+ /* header row height */ 46px
|
|
+ /* top-padding of printer queue */ 27px;
|
|
icon: action.icon;
|
|
text: action.name;
|
|
|
|
clicked => { root.current-subpage = action.id; }
|
|
}
|
|
|
|
queue-view := PrinterQueueView {
|
|
show-job-details(idx) => {
|
|
root.current-subpage = SubPage.Print;
|
|
}
|
|
|
|
x: parent.width - self.width;
|
|
width: 313px;
|
|
}
|
|
|
|
PrintPage {
|
|
back => { root.current-subpage = SubPage.None; }
|
|
x: root.current-subpage == SubPage.Print ? 0 : parent.width + parent.x + 2px;
|
|
animate x { duration: 125ms; easing: ease; }
|
|
}
|
|
|
|
ScanPage {
|
|
back => { root.current-subpage = SubPage.None; }
|
|
x: root.current-subpage == SubPage.Scan ? 0 : parent.width + parent.x + 2px;
|
|
animate x { duration: 125ms; easing: ease; }
|
|
}
|
|
|
|
CopyPage {
|
|
back => { root.current-subpage = SubPage.None; }
|
|
x: root.current-subpage == SubPage.Copy ? 0 : parent.width + parent.x + 2px;
|
|
animate x { duration: 125ms; easing: ease; }
|
|
}
|
|
|
|
UsbPage {
|
|
back => { root.current-subpage = SubPage.None; }
|
|
x: root.current-subpage == SubPage.Usb ? 0 : parent.width + parent.x + 2px;
|
|
animate x { duration: 125ms; easing: ease; }
|
|
}
|
|
}
|