1// Copyright © SixtyFPS GmbH <info@slint.dev>
2// SPDX-License-Identifier: MIT
3
4import { DemoPalette, Page, PushButton } from "./common.slint";
5import { CopyPage } from "./copy_page.slint";
6import { ScanPage } from "./scan_page.slint";
7import { PrintPage } from "./print_page.slint";
8import { PrinterQueueView } from "./printer_queue.slint";
9import { UsbPage } from "./usb_page.slint";
10
11component ActionButton inherits Rectangle {
12 in property <image> icon <=> img.source;
13 in property <string> text <=> label.text;
14
15 callback clicked;
16
17 VerticalLayout {
18 spacing: 4px;
19
20 Rectangle {
21 border-radius: 25px;
22 border-width: 5px;
23 border-color: DemoPalette.control-outline-color;
24 background: DemoPalette.printer-action-background-color;
25
26 img := Image {
27 x: (parent.width / 2) - (self.width / 2);
28 y: (parent.height / 2) - (self.height / 2);
29 colorize: DemoPalette.text-foreground-color;
30 }
31 }
32
33 label := Text {
34 font-size: DemoPalette.base-font-size * 1.375;
35 font-weight: 800;
36 horizontal-alignment: center;
37 color: DemoPalette.text-foreground-color;
38 }
39 }
40
41 TouchArea { clicked => { root.clicked() } }
42}
43
44export component HomePage inherits Page {
45 in-out property <length> header-row-height: 40px;
46 in-out property <length> button-spacing: 35px;
47 in-out property <length> button-width: 127px;
48 in-out property <length> button-height: root.button-width + 37px;
49 in-out property <int> current-subpage: 0;
50
51 header: @tr("Slint Printer Demo");
52
53 for action[idx] in [
54 { name: @tr("Print"), icon: @image-url("images/print.svg") },
55 { name: @tr("Scan"), icon: @image-url("images/scan.svg") },
56 { name: @tr("Copy"), icon: @image-url("images/copy.svg") },
57 { name: @tr("USB"), icon: @image-url("images/usb.svg") },
58 ]: ActionButton {
59 clicked => { root.current-subpage = idx + 1; }
60
61 x: mod(idx, 2) * (root.button-width + root.button-spacing);
62 y: floor(idx / 2) * (root.button-height + root.button-spacing)
63 + /* header row height */ 46px
64 + /* top-padding of printer queue */ 27px; // align with the first item of the printer queue
65 width: root.button-width;
66 height: root.button-height;
67 icon: action.icon;
68 text: action.name;
69 }
70
71 queue-view := PrinterQueueView {
72 show-job-details(idx) => {
73 root.current-subpage = 1; // Not nice to hard-code the index here...
74 }
75
76 x: parent.width - self.width;
77 width: 313px;
78 }
79
80 PrintPage {
81 back => { root.current-subpage = 0 }
82 x: root.current-subpage == 1 ? 0 : parent.width + parent.x + 2px;
83 animate x { duration: 125ms; easing: ease; }
84 }
85
86 ScanPage {
87 back => { root.current-subpage = 0 }
88 x: root.current-subpage == 2 ? 0 : parent.width + parent.x + 2px;
89 animate x { duration: 125ms; easing: ease; }
90 }
91
92 CopyPage {
93 back => { root.current-subpage = 0 }
94 x: root.current-subpage == 3 ? 0 : parent.width + parent.x + 2px;
95 animate x { duration: 125ms; easing: ease; }
96 }
97
98 UsbPage {
99 back => { root.current-subpage = 0 }
100 x: root.current-subpage == 4 ? 0 : parent.width + parent.x + 2px;
101 animate x { duration: 125ms; easing: ease; }
102 }
103}
104