1// Copyright © SixtyFPS GmbH <info@slint.dev>
2// SPDX-License-Identifier: MIT
3
4import { DemoPalette, Page } from "common.slint";
5import { HomePage } from "./home_page.slint";
6import { InkLevel, InkPage } from "./ink_page.slint";
7import { SettingsPage } from "./settings_page.slint";
8import { PrinterQueue } from "./printer_queue.slint";
9
10// re-export for the native code
11export { PrinterQueue }
12
13import "./fonts/NotoSans-Regular.ttf";
14import "./fonts/NotoSans-Bold.ttf";
15
16component SideBarIcon inherits Rectangle {
17 in-out property <bool> active;
18
19 callback activate;
20
21 GridLayout {
22 padding: 0px;
23 @children
24 }
25
26 TouchArea {
27 clicked => { root.activate(); }
28 }
29}
30
31component MainWindow inherits Window {
32 /// Note that this property is overwritten in the .cpp and .rs code.
33 /// The data is only in this file so it looks good in the viewer
34 in property <[InkLevel]> ink-levels: [
35 {color: #0ff, level: 60%},
36 {color: #ff0, level: 80%},
37 {color: #f0f, level: 70%},
38 {color: #000, level: 30%},
39 ];
40 out property <int> active-page: 0;
41
42 callback quit();
43
44 width: 772px;
45 height: 504px;
46 title: @tr("Slint printer demo");
47 background: DemoPalette.main-background;
48 default-font-family: "Noto Sans";
49 default-font-size: DemoPalette.base-font-size;
50
51 HorizontalLayout {
52 padding: 10px;
53 padding-left: 67px;
54
55 main-view := Rectangle {
56 height: 100%;
57 border-radius: 30px;
58 background: DemoPalette.page-background-color;
59
60 Rectangle {
61 clip: true;
62 x: main-view.border-radius / 2;
63 y: main-view.border-radius / 2;
64 width: main-view.width - main-view.border-radius;
65 height: main-view.height - main-view.border-radius;
66
67 home-page := HomePage {
68 y: root.active-page == 0 ? 0 : root.active-page < 0 ? - self.height - 1px : parent.height + 1px;
69 animate y { duration: 125ms; easing: ease; }
70 }
71
72 SettingsPage {
73 y: root.active-page == 1 ? 0 : root.active-page < 1 ? - self.height - 1px : parent.height + 1px;
74 animate y { duration: 125ms; easing: ease; }
75 }
76
77 InkPage {
78 y: root.active-page == 2 ? 0 : root.active-page < 2 ? - self.height - 1px : parent.height + 1px;
79 ink-levels <=> root.ink-levels;
80 page-visible: root.active-page == 2;
81 animate y { duration: 125ms; easing: ease; }
82 }
83 }
84 }
85 }
86
87 sidebar := Rectangle {
88 function icon-y(index: int) -> length {
89 return 100px // top padding
90 + index * 72px;
91 }
92
93 width: 57px;
94 x: 10px;
95
96
97 Image {
98 x:0;
99 source: @image-url("images/page_selection.svg");
100 y: sidebar.icon-y(root.active-page) - self.width / 2;
101 width: main-view.x - sidebar.x + 1px;
102 height: 1.75 * self.width;
103 colorize: DemoPalette.page-background-color;
104 animate y {
105 duration: 125ms;
106 }
107 }
108
109 for page-icon[idx] in [
110 @image-url("images/home.svg"),
111 @image-url("images/settings.svg"),
112 @image-url("images/ink.svg"),
113 ] : SideBarIcon {
114 activate => {
115 root.active-page = idx;
116 }
117
118 y: sidebar.icon-y(idx);
119 x: 16px;
120 height: 35px;
121 width: 30px;
122
123 icon := Image {
124 colorize: (root.active-page == idx) ? DemoPalette.active-page-icon-color : DemoPalette.inactive-page-icon-color;
125 animate colorize {
126 duration: 125ms;
127 }
128 source: page-icon;
129 image-fit: contain;
130 width: 100%;
131 height: 100%;
132 }
133 }
134
135 Rectangle {
136 y: sidebar.icon-y(3) + 17px;
137 x: 12px;
138 background: #6284FF;
139 height: 2px;
140 width: 37px;
141 }
142
143 SideBarIcon {
144 activate => {
145 DemoPalette.night-mode = !DemoPalette.night-mode;
146 }
147
148 y: sidebar.icon-y(4);
149 x: 16px;
150 height: 35px;
151 width: 30px;
152
153 Image {
154 colorize: DemoPalette.night-mode ? #F1FF98 : DemoPalette.inactive-page-icon-color;
155 source: DemoPalette.night-mode ? @image-url("images/moon_full.svg") : @image-url("images/moon.svg");
156 image-fit: contain;
157 width: 100%;
158 height: 100%;
159 }
160 }
161 }
162}
163