makepad_widgets/designer_toolbox.rs
1use crate::{
2 makepad_derive_widget::*,
3 makepad_draw::*,
4 designer_data::*,
5 view::View,
6 widget::*,
7};
8
9live_design!{
10 use link::theme::*;
11 use makepad_draw::shader::std::*;
12 use link::widgets::*;
13 use crate::designer_theme::*;
14
15 pub DesignerToolboxBase = {{DesignerToolbox}}{
16 }
17
18 pub DesignerToolbox = <DesignerToolboxBase>{
19 width: Fill,
20 height: Fill
21 show_bg: false
22
23 <DockToolbar> {
24 content = {
25 align: { x: 0., y: 0. }
26 spacing: (THEME_SPACE_3)
27 <View> {
28
29 height: Fill, width: Fit
30 align: { x: 0.5, y: 0.5}
31 <Icon> {
32 margin: { left: 5.}
33 icon_walk: { width: 11. }
34 draw_icon: {
35 color: #A
36 svg_file: dep("crate://self/resources/icons/icon_typography.svg"),
37 }
38 }
39 }
40 <Vr> {}
41 <View> {
42 align: { x: 0., y: 0. }
43 flow: Right, width: Fit,
44 spacing: 0.
45 <Labelbold> { text: "Font" }
46 <Label> { text: "Noto Sans" }
47 }
48 <View> {
49 align: { x: 0., y: 0. }
50 flow: Right, width: Fit,
51 spacing: 0.
52 <Labelbold> { text: "Weight" }
53 <Label> { text: "bold"
54 }
55 }
56 <View> {
57 align: { x: 0., y: 0. }
58 flow: Right, width: Fit,
59 spacing: 0.
60 <Labelbold> { text: "Size" }
61 <Label> { text: "11 pt" }
62 }
63 <View> {
64 align: { x: 0., y: 0. }
65 flow: Right, width: Fit,
66 spacing: 0.
67 <Labelbold> { text: "Line height" }
68 <Label> { text: "1.2" }
69 }
70 <Vr> {}
71 <View> {
72 align: { x: 0., y: 0. }
73 flow: Right, width: Fit,
74 spacing: 0.
75 <ButtonFlatter> {
76 width: 25.
77 text: ""
78 icon_walk: { width: 11. }
79 draw_icon: {
80 svg_file: dep("crate://self/resources/icons/icon_text_align_left.svg"),
81 }
82 }
83 <ButtonFlatter> {
84 width: 25.
85 text: ""
86 icon_walk: { width: 11. }
87 draw_icon: {
88 color: (THEME_COLOR_D_3),
89 svg_file: dep("crate://self/resources/icons/icon_text_align_justify.svg"),
90 }
91 }
92 <ButtonFlatter> {
93 width: 25.
94 text: ""
95 icon_walk: { width: 11. }
96 draw_icon: {
97 color: (THEME_COLOR_D_3),
98 svg_file: dep("crate://self/resources/icons/icon_text_align_right.svg"),
99 }
100 }
101 }
102 <Vr> {}
103 <Label> { text: "Stroke" }
104 <View> {
105 height: Fill, width: 15.,
106 align: { x: 0.5, y: 0.5}
107 <RoundedView> {
108 width: 15., height: 15.,
109 draw_bg: {
110 color: (STUDIO_PALETTE_5),
111 border_radius: 5.0
112 }
113 }
114 }
115 <Label> { text: "Fill" }
116 <View> {
117 height: Fill, width: 15.,
118 align: { x: 0.5, y: 0.5}
119 <RoundedView> {
120 width: 15., height: 15.,
121 draw_bg: {
122 color: (STUDIO_PALETTE_2),
123 border_radius: 5.0
124 }
125 }
126 }
127 <Filler> {}
128 <Label> { text: "Canvas" }
129 <View> {
130 height: Fill, width: 15.,
131 align: { x: 0.5, y: 0.5}
132 <RoundedView> {
133 width: 15., height: 15.,
134 draw_bg: {
135 color: (THEME_COLOR_D_3),
136 border_radius: 5.0
137 }
138 }
139 }
140 }
141 }
142
143 <RoundedShadowView>{
144 abs_pos: vec2(25., 65.)
145 width: 36., height: Fit,
146 spacing: 0.,
147 align: { x: 0.5, y: 0.0 }
148 flow: Down,
149 clip_x: false, clip_y: false,
150
151 draw_bg: {
152 border_size: 1.0
153 border_color: (THEME_COLOR_BEVEL_OUTSET_1)
154 shadow_color: (THEME_COLOR_BEVEL_OUTSET_2)
155 shadow_radius: 7.5
156 border_radius: (THEME_CORNER_RADIUS)
157 shadow_offset: vec2(0.0, 0.0)
158 color: (THEME_COLOR_FG_APP)
159 }
160
161 <View> {
162 width: Fit, height: Fit,
163 align: { x: 0.5, y: 0. }
164 padding: { top: 5., bottom: 2. }
165 <ButtonFlatter> {
166 draw_bg: { color_focus: #fff0 }
167 icon_walk: {
168 width: 9.5
169 margin: { left: 6. }
170 }
171 align: { x: 0.5, y: 0.5 }
172 draw_icon: {
173 svg_file: dep("crate://self/resources/icons/icon_select.svg"),
174 }
175 text: ""
176 }
177 }
178 <Hr> { height: 10. }
179 <View> {
180 width: Fit, height: Fit,
181 align: { x: 0.5, y: 0. }
182 padding: { bottom: 3. }
183 <ButtonFlatter> {
184 draw_bg: { color_focus: #fff0 }
185 icon_walk: {
186 width: 14
187 margin: { left: 5. }
188 }
189 align: { x: 0.5, y: 0.5 }
190 draw_icon: {
191 svg_file: dep("crate://self/resources/icons/icon_draw.svg"),
192 }
193 text: ""
194 }
195 }
196 <Hr> { height: 10. }
197 <View> {
198 width: Fit, height: Fit,
199 align: { x: 0.5, y: 0. }
200 padding: { bottom: 2. }
201 <ButtonFlatter> {
202 draw_bg: { color_focus: #fff0 }
203 icon_walk: {
204 width: 12
205 margin: { left: 5. }
206 }
207 align: { x: 0.5, y: 0.5 }
208 draw_icon: {
209 svg_file: dep("crate://self/resources/icons/icon_text.svg"),
210 }
211 text: ""
212 }
213 }
214 <Hr> { height: 10. }
215 <View> {
216 width: Fit, height: Fit,
217 align: { x: 0.5, y: 0. }
218 padding: { bottom: 3. }
219 <ButtonFlatter> {
220 draw_bg: { color_focus: #fff0 }
221 icon_walk: {
222 width: 14
223 margin: { left: 5. }
224 }
225 align: { x: 0.5, y: 0.5 }
226 draw_icon: {
227 svg_file: dep("crate://self/resources/icons/icon_layout.svg"),
228 }
229 text: ""
230 }
231 }
232 <Hr> { height: 10. }
233 <View> {
234 width: Fit, height: Fit,
235 align: { x: 0.5, y: 0. }
236 <ButtonFlatter> {
237 draw_bg: { color_focus: #fff0 }
238 icon_walk: {
239 width: 14
240 margin: { left: 5. }
241 }
242 align: { x: 0.5, y: 0.5 }
243 draw_icon: {
244 svg_file: dep("crate://self/resources/icons/icon_widget.svg"),
245 }
246 text: ""
247 }
248 }
249 <Hr> { height: 10. }
250 <View> {
251 width: Fit, height: Fit,
252 align: { x: 0.5, y: 0. }
253 padding: { bottom: 5.}
254 <ButtonFlatter> {
255 draw_bg: { color_focus: #fff0 }
256 icon_walk: {
257 width: 14
258 margin: { left: 5. }
259 }
260 align: { x: 0.5, y: 0.5 }
261 draw_icon: {
262 svg_file: dep("crate://self/resources/icons/icon_image.svg"),
263 }
264 text: ""
265 }
266 }
267 }
268 /*
269 <RoundedShadowView>{
270 width: 250., height: 350.,
271 abs_pos: vec2(25., 325.)
272 padding: <THEME_MSPACE_2> {}
273 spacing: (THEME_SPACE_1)
274 align: { x: 0.5, y: 0.0 }
275 flow: Down,
276 clip_x: false, clip_y: false,
277
278 draw_bg: {
279 border_size: 1.0
280 border_color: (THEME_COLOR_BEVEL_OUTSET_1)
281 shadow_color: (THEME_COLOR_D_4)
282 shadow_radius: 10.0,
283 shadow_offset: vec2(0.0, 5.0)
284 border_radius: 2.5
285 color: (THEME_COLOR_FG_APP),
286 }
287
288 <View> {
289 flow: Right,
290 width: Fill, height: Fit,
291 align: { x: 0.0, y: 0.5 }
292 <RoundedView> {
293 margin: { left: (THEME_SPACE_2), right: (THEME_SPACE_1), top: 5. }
294 width: 15., height: 15.,
295 draw_bg: {
296 color: (#f00),
297 border_radius: 5.0
298 }
299 }
300 <Pbold> { width: Fit, margin: {left: 3.}, text: "Canvas" }
301 }
302 <Hr> { margin: <THEME_MSPACE_1> {} }
303 <ColorPicker>{}
304 <View> {
305 width: Fill, height: Fit,
306 spacing: (THEME_SPACE_2)
307 align: { x: 0.5, y: 0.5 }
308 flow: Right,
309 <Pbold> { width: Fit, text: "RGBA" }
310 <P> { width: Fit, text: "0 / 255 / 0 / 255" }
311 <P> { width: Fit, text: "#83741AFF" }
312 }
313 <View> {
314 align: { x: 0.5, y: 0.5 }
315 width: Fill, height: Fit,
316 flow: Right,
317 spacing: (THEME_SPACE_1),
318 margin: { bottom: 10. }
319 <RoundedView> {
320 margin: { right: (THEME_SPACE_1)}
321 width: 15., height: 15.,
322 draw_bg: {
323 color: (STUDIO_PALETTE_1),
324 border_radius: 5.0
325 }
326 }
327 <RoundedView> {
328 margin: { right: (THEME_SPACE_1)}
329 width: 15., height: 15.,
330 draw_bg: {
331 color: (STUDIO_PALETTE_2),
332 border_radius: 5.0
333 }
334 }
335 <RoundedView> {
336 margin: { right: (THEME_SPACE_1)}
337 width: 15., height: 15.,
338 draw_bg: {
339 color: (STUDIO_PALETTE_3),
340 border_radius: 5.0
341 }
342 }
343 <RoundedView> {
344 margin: { right: (THEME_SPACE_1)}
345 width: 15., height: 15.,
346 draw_bg: {
347 color: (STUDIO_PALETTE_4),
348 border_radius: 5.0
349 }
350 }
351 <RoundedView> {
352 margin: { right: (THEME_SPACE_1)}
353 width: 15., height: 15.,
354 draw_bg: {
355 color: (STUDIO_PALETTE_5),
356 border_radius: 5.0
357 }
358 }
359 <RoundedView> {
360 margin: { right: (THEME_SPACE_1)}
361 width: 15., height: 15.,
362 draw_bg: {
363 color: (STUDIO_PALETTE_6),
364 border_radius: 5.0
365 }
366 }
367 <RoundedView> {
368 margin: { right: (THEME_SPACE_1)}
369 width: 15., height: 15.,
370 draw_bg: {
371 color: (STUDIO_PALETTE_7),
372 border_radius: 5.0
373 }
374 }
375 }
376 }*/
377 }
378}
379
380#[derive(Live, Widget, LiveHook)]
381pub struct DesignerToolbox {
382 #[deref] view: View
383}
384
385impl Widget for DesignerToolbox {
386 fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope){
387 self.view.handle_event(cx, event, scope);
388 }
389
390 fn draw_walk(&mut self, cx: &mut Cx2d, scope:&mut Scope, _walk: Walk) -> DrawStep {
391 let _data = scope.data.get::<DesignerData>().unwrap();
392 while let Some(_next) = self.view.draw(cx, &mut Scope::empty()).step() {
393 }
394 DrawStep::done()
395 }
396}