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