1 | // Copyright © SixtyFPS GmbH <info@slint.dev> |
2 | // SPDX-License-Identifier: MIT |
3 | |
4 | import { SpinBox, Button, CheckBox, Slider, LineEdit, ScrollView, ListView, |
5 | HorizontalBox, VerticalBox, GridBox, StandardButton, Palette } from "std-widgets.slint" ; |
6 | |
7 | @rust-attr(derive(serde::Serialize, serde::Deserialize)) |
8 | export struct TodoItem { |
9 | title: string, |
10 | checked: bool, |
11 | } |
12 | |
13 | component MainWindow inherits Window { |
14 | in property <[TodoItem]> todo-model: [ |
15 | { title: "Implement the .slint file" , checked: true }, |
16 | { title: "Do the Rust part" , checked: false }, |
17 | { title: "Make the C++ code" , checked: false }, |
18 | { title: "Write some JavaScript code" , checked: false }, |
19 | { title: "Test the application" , checked: false }, |
20 | { title: "Ship to customer" , checked: false }, |
21 | { title: "???" , checked: false }, |
22 | { title: "Profit" , checked: false }, |
23 | ]; |
24 | |
25 | in property <bool> show-header: false; |
26 | in-out property <bool> is-sort-by-name: false; |
27 | in-out property <bool> hide-done-items: false; |
28 | |
29 | callback todo-added(string); |
30 | callback remove-done(); |
31 | callback popup_confirmed; |
32 | callback show_confirm_popup; |
33 | callback apply_sorting_and_filtering(); |
34 | |
35 | show_confirm_popup => { confirm_popup.show(); } |
36 | |
37 | preferred-width: 400px; |
38 | preferred-height: 600px; |
39 | |
40 | confirm_popup := PopupWindow { |
41 | x: 40px; |
42 | y: 100px; |
43 | width: min(confirm_popup_layout.preferred-width, root.width - 80px); |
44 | |
45 | Rectangle { |
46 | background: Palette.background; |
47 | border-color: Palette.border; |
48 | border-width: 1px; |
49 | } |
50 | |
51 | confirm_popup_layout := Dialog { |
52 | height:100%; width: 100%; |
53 | |
54 | confirm_popup_text := Text { |
55 | text: "Some items are not done, are you sure you wish to quit?" ; |
56 | wrap: word-wrap; |
57 | } |
58 | |
59 | StandardButton { kind: yes; clicked => { root.popup_confirmed(); } } |
60 | StandardButton { kind: no; } |
61 | } |
62 | } |
63 | |
64 | |
65 | VerticalBox { |
66 | HorizontalBox { |
67 | padding: 0px; |
68 | text-edit := LineEdit { |
69 | accepted(text) => { |
70 | root.todo-added(self.text); |
71 | self.text = "" ; |
72 | } |
73 | |
74 | placeholder-text: "What needs to be done?" ; |
75 | } |
76 | |
77 | btn := Button { |
78 | clicked => { |
79 | root.todo-added(text-edit.text); |
80 | text-edit.text = "" ; |
81 | } |
82 | |
83 | text: "Add New Entry" ; |
84 | enabled: text-edit.text != "" ; |
85 | } |
86 | } |
87 | |
88 | if (root.show-header) : HorizontalBox { |
89 | padding: 0px; |
90 | alignment: start; |
91 | |
92 | CheckBox { |
93 | toggled => { |
94 | root.apply_sorting_and_filtering(); |
95 | } |
96 | |
97 | text: "Sort by name" ; |
98 | checked <=> root.is-sort-by-name; |
99 | } |
100 | |
101 | CheckBox { |
102 | toggled => { |
103 | root.apply_sorting_and_filtering(); |
104 | } |
105 | |
106 | text: "Hide done items" ; |
107 | checked <=> root.hide-done-items; |
108 | } |
109 | } |
110 | |
111 | list-view := ListView { |
112 | for todo in root.todo-model: HorizontalLayout { |
113 | CheckBox { |
114 | toggled => { |
115 | todo.checked = self.checked; |
116 | } |
117 | |
118 | text: todo.title; |
119 | checked: todo.checked; |
120 | } |
121 | } |
122 | } |
123 | HorizontalBox { |
124 | padding: 0px; |
125 | alignment: end; |
126 | |
127 | Button { |
128 | clicked => { root.remove-done(); } |
129 | |
130 | text: "Remove Done Items" ; |
131 | } |
132 | } |
133 | } |
134 | } |
135 | |