makepad_studio/
app_ui.rs

1use crate::makepad_widgets::*;
2
3live_design!{
4    use link::theme::*;
5    use link::widgets::*;
6    use link::shaders::*;
7    use makepad_widgets::designer_theme::*;
8    use makepad_studio::studio_editor::StudioCodeEditor;
9    use makepad_studio::ai_chat::ai_chat_view::AiChatView;
10    use makepad_studio::studio_file_tree::StudioFileTree;
11    use makepad_studio::run_view::RunView;
12    use makepad_studio::log_list::LogList;
13    use makepad_studio::run_list::RunList;
14    use makepad_studio::profiler::Profiler;
15    use makepad_studio::search::Search;
16    use makepad_studio::snapshot::Snapshot;
17    
18    ICO_SEARCH = dep("crate://self/resources/icons/Icon_Search.svg")
19
20    Logo = <Button> {
21        draw_icon: {
22            svg_file: dep("crate://self/resources/logo_makepad.svg"),
23            fn get_color(self) -> vec4 {
24                return (THEME_COLOR_D_1)
25            }
26        }
27        text:""
28        icon_walk: {width: 250.0, height: Fit}
29        draw_bg: {
30            fn pixel(self) -> vec4 {
31                let sdf = Sdf2d::viewport(self.pos * self.rect_size);
32                return sdf.result
33            }
34        }
35    }
36
37    IconTab = <TabFlat> {
38        closeable: false
39        icon_walk: { width: 15., height: 15. }
40    }
41
42    Vr = <View> {
43        width: Fit, height: 27.,
44        flow: Right,
45        spacing: 0.,
46        margin: <THEME_MSPACE_V_2> {}
47        <View> {
48            width: (THEME_BEVELING * 2.0), height: Fill
49            show_bg: true,
50            draw_bg: { color: (THEME_COLOR_BEVEL_OUTSET_2) }
51        }
52        <View> {
53            width: (THEME_BEVELING), height: Fill,
54            show_bg: true,
55            draw_bg: { color: (THEME_COLOR_BEVEL_OUTSET_1) }
56        }
57    }
58
59    DockSettings = <View> {
60        align: { x: 0., y: 0. }
61        spacing: (THEME_SPACE_2)
62        <Filler> {}
63        <P> {
64            width: Fit,
65            text: "",
66            margin: 0.,
67            padding: <THEME_MSPACE_1> {}
68        }
69        <CheckBoxCustom> {
70            text:""
71            // text:"Apps"
72            draw_bg: { check_type: None }
73            icon_walk: {width: 11., margin: {top: 1.75, right: 3. }}
74            padding: { right: 0, left: 0.}
75            draw_icon: {
76                color: (THEME_COLOR_D_2),
77                color_active: (THEME_COLOR_LABEL_OUTER_ACTIVE),
78                svg_file: dep("crate://self/resources/icons/icon_tab_app.svg"),
79            }
80        }
81        <CheckBoxCustom> {
82            text:""
83            // text:"Designer"
84            draw_bg: { check_type: None }
85            icon_walk: {width: 12., margin: {top: 1.0 }}
86            padding: { right: 0, left: 0.}
87            draw_icon: {
88                color: (THEME_COLOR_D_2),
89                color_active: (THEME_COLOR_LABEL_OUTER_ACTIVE),
90                svg_file: dep("crate://self/resources/icons/icon_designer.svg"),
91            }
92        }
93        <CheckBoxCustom> {
94            text:""
95            // text:"Editor"
96            width: 13.
97            draw_bg: { check_type: None }
98            icon_walk: {width: 6., margin: {top: 0.5, left: 3. }}
99            padding: { right: 0., left: 0.}
100            draw_icon: {
101                color: (THEME_COLOR_D_2),
102                color_active: (THEME_COLOR_LABEL_OUTER_ACTIVE),
103                svg_file: dep("crate://self/resources/icons/icon_editor.svg"),
104            }
105        }
106        <CheckBoxCustom> {
107            text:""
108            // text:"Scene"
109            draw_bg: { check_type: None }
110            icon_walk: {width: 11.5, margin: {top: 1.5 } }
111            padding: { right: 5., left: 0.}
112            draw_icon: {
113                color: (THEME_COLOR_D_2),
114                color_active: (THEME_COLOR_LABEL_OUTER_ACTIVE),
115                svg_file: dep("crate://self/resources/icons/icon_outliner.svg"),
116            }
117        }
118    }
119
120    pub AppUI =  <Window> {
121        margin: 5.
122        caption_bar = { margin: {top: 2,left: -190}, visible: true, caption_label = {label = {text: "Makepad"}} 
123       /* <View>{
124            width: Fit,
125            spacing: (THEME_SPACE_2)
126            padding: <THEME_MSPACE_1> { right: (THEME_SPACE_2)  }
127            preset_1 = <ButtonFlatter> { text: "A" }
128            preset_2 = <ButtonFlatter> { text: "C" }
129            preset_3 = <ButtonFlatter> { text: "D" }
130            preset_4 = <ButtonFlatter> { text: "P" }
131            }*/
132        },
133        window: { inner_size: vec2(1600, 900), /*dpi_override:3.0 */},
134        show_bg: true,
135        draw_bg: { fn pixel(self) -> vec4 { return (THEME_COLOR_BG_APP) } }
136        window_menu = {
137            main = Main {items: [app, file, edit, selection, view, run, window, help]}
138
139            app = Sub {name: "Makepad Studio", items: [about, line, settings, line, quit]}
140            about = Item {name: "About Makepad Studio", enabled: false}
141            settings = Item {name: "Settings", enabled: false}
142            quit = Item {name: "Quit Makepad Studio", key: KeyQ}
143
144            file = Sub {name: "File", items: [new_file, new_window, line, save_as, line, rename, line, close_editor, close_window]}
145            new_file = Item {name: "New File", enabled: false, shift: true, key: KeyN}
146            new_window = Item {name: "New Window", enabled: false, shift: true, key: KeyN}
147            save_as = Item {name: "Save As", enabled: false}
148            rename = Item {name: "Rename", enabled: false}
149            close_editor = Item {name: "Close Editor", enabled: false}
150            close_window = Item {name: "Close Window", enabled: false}
151
152            edit = Sub {name: "Edit", items: [undo, redo, line, cut, copy, paste, line, find, replace, line, find_in_files, replace_in_files]}
153            undo = Item {name: "Undo", enabled: false}
154            redo = Item {name: "Redo", enabled: false}
155            cut = Item {name: "Cut", enabled: false}
156            copy = Item {name: "Copy", enabled: false}
157            paste = Item {name: "Paste", enabled: false}
158            find = Item {name: "Find", enabled: false}
159            replace = Item {name: "Replace", enabled: false}
160            find_in_files = Item {name: "Find in Files", enabled: false}
161            replace_in_files = Item {name: "Replace in Files", enabled: false}
162
163            selection = Sub {name: "Selection", items: [select_all]}
164            select_all = Item {name: "Select All", enabled: false}
165
166            view = Sub {name: "View", items: [select_all]}
167            zoom_in = Item {name: "Zoom In", enabled: false}
168            zoom_out = Item {name: "Zoom Out", enabled: false}
169            select_all = Item {name: "Enter Full Screen", enabled: false}
170
171            run = Sub {name: "Run", items: [run_program]}
172            run_program = Item {name: "Run Program", enabled: false}
173
174            window = Sub {name: "Window", items: [minimize, zoom, line, all_to_front]}
175            minimize = Item {name: "Minimize", enabled: false}
176            zoom = Item {name: "Zoom", enabled: false}
177            all_to_front = Item {name: "Bring All to Front", enabled: false}
178
179            help = Sub {name: "Help", items: [about]}
180
181            line = Line,
182        }
183        body = {
184            padding:5
185            dock = <DockFlat> {
186                width: Fill, height: Fill,
187                tab_bar:{
188                    OutlineFirstTab = <IconTab> {
189                        spacing: (THEME_SPACE_2)
190                        icon_walk: {
191                            width: 10.
192                            margin: { top: 3., left: 5. }
193                        }
194                        draw_icon: {
195                            color: (STUDIO_PALETTE_1)
196                            svg_file: dep("crate://self/resources/icons/icon_outliner.svg"),
197                        }
198                    }
199                    EditFirstTab = <IconTab> {
200                        spacing: (THEME_SPACE_2)
201                        icon_walk: {
202                            width: 5.
203                            margin: { top: 3., left: 5. }
204                        }
205                        draw_icon: {
206                            color: (STUDIO_PALETTE_6)
207                            svg_file: dep("crate://self/resources/icons/icon_editor.svg"),
208                        }
209                    }
210                    AiFirstTab = <IconTab> {
211                        spacing: (THEME_SPACE_2)
212                        icon_walk: {
213                            width: 8.
214                            margin: { top: 3.5, left: 5. }
215                        }
216                        draw_icon: {
217                            color: (STUDIO_PALETTE_6)
218                            svg_file: dep("crate://self/resources/icons/icon_auto.svg"),
219                        }
220                    }
221                    DesignFirstTab = <IconTab> {
222                        spacing: (THEME_SPACE_2)
223                        icon_walk: {
224                            width: 11.
225                            margin: { top: 3., left: 5. }
226                        }
227                        draw_icon: {
228                            color: (STUDIO_PALETTE_3)
229                            svg_file: dep("crate://self/resources/icons/icon_designer.svg"),
230                        }
231                    }
232                    FilesTab = <IconTab> {
233                        spacing: (THEME_SPACE_2)
234                        icon_walk: {
235                            width: 8.5,
236                            margin: { top: 4. }
237                        }
238                        draw_icon: {
239                            color: (STUDIO_PALETTE_2)
240                            svg_file: dep("crate://self/resources/icons/icon_file.svg"),
241                        }
242                    }
243                    RunFirstTab = <IconTab> {
244                        spacing: (THEME_SPACE_2)
245                        icon_walk: {
246                            width: 11.,
247                            margin: { top: 6., left: 5. }
248                        }
249                        draw_icon: {
250                            color: (STUDIO_PALETTE_4)
251                            svg_file: dep("crate://self/resources/icons/icon_tab_app.svg"),
252                        }
253                    }
254                    RunListTab = <IconTab> {
255                        spacing: (THEME_SPACE_2)
256                        icon_walk: {
257                            width: 7.
258                            margin: { top: 5. }
259                        }
260                        draw_icon: {
261                            color: (STUDIO_PALETTE_5)
262                            svg_file: dep("crate://self/resources/icons/icon_run.svg"),
263                        }
264                    }
265                    SnapshotTab = <IconTab> {
266                        spacing: (THEME_SPACE_2)
267                        icon_walk: {
268                            width: 7.
269                            margin: { top: 4. }
270                        }
271                        draw_icon: {
272                            color: (STUDIO_PALETTE_5)
273                            svg_file: dep("crate://self/resources/icons/icon_run.svg"),
274                        }
275                    }
276                    LogTab = <IconTab> {
277                        spacing: (THEME_SPACE_2)
278                        icon_walk:{
279                            width: 9.5
280                            margin: { top: 7. }
281                        }
282                        draw_icon: {
283                            color: (STUDIO_PALETTE_2)
284                            svg_file: dep("crate://self/resources/icons/icon_log.svg"),
285                        }
286                    }
287                    ProfilerTab = <IconTab> {
288                        spacing: (THEME_SPACE_2)
289                        icon_walk: {
290                            width: 9.
291                            margin: { top: 4. }
292                        }
293                        draw_icon: {
294                            color: (STUDIO_PALETTE_7)
295                            svg_file: dep("crate://self/resources/icons/icon_profiler.svg"),
296                        }
297                    }
298                    SearchTab = <IconTab> {
299                        spacing: (THEME_SPACE_2)
300                        icon_walk: {
301                            width: 10.5,
302                            margin: { top: 4. }
303                        }
304                        draw_icon: {
305                            color: (STUDIO_PALETTE_3)
306                            svg_file: dep("crate://self/resources/icons/icon_search.svg"),
307                        }
308                    }
309                }
310                root = Splitter {
311                    axis: Horizontal,
312                    align: FromA(250.0),
313                    a: file_tree_tabs,
314                    b: split1
315                }
316    
317                split1 = Splitter {
318                    axis: Vertical,
319                    align: FromB(200.0),
320                    a: split2,
321                    b: log_tabs
322                }
323    
324                split2 = Splitter {
325                    axis: Horizontal,
326                    align: Weighted(0.5),
327                    a: edit_tabs,
328                    b: split3
329                }
330                split3 = Splitter {
331                    axis: Horizontal,
332                    align: FromA(20),
333                    a: split4,
334                    b: run_tabs
335                }
336                split4 = Splitter {
337                    axis: Horizontal,
338                    align: Weighted(0.5),
339                    a: outline_tabs,
340                    b: design_tabs
341                }
342                /*
343                split3 = Splitter {
344                    axis: Horizontal,
345                    align: Weighted(0.5),
346                    a: design_tabs,
347                    b: run_tabs
348                }*/
349    
350                file_tree_tabs = Tabs {
351                    tabs: [file_tree_tab, run_list_tab, search, snapshot_tab],
352                    selected: 0
353                }
354    
355                edit_tabs = Tabs {
356                    tabs: [edit_first],
357                    selected: 0
358                }
359                
360                design_tabs = Tabs {
361                    tabs: [design_first],
362                    selected: 0
363                }
364                
365                outline_tabs = Tabs {
366                    tabs: [outline_first],
367                    selected: 0
368                }
369                
370                log_tabs = Tabs {
371                    tabs: [log_list_tab, profiler],
372                    selected: 0
373                }
374    
375                run_tabs = Tabs {
376                    tabs: [run_first,ai_first],
377                    selected: 0
378                }
379                /*
380                design_tabs = Tabs {
381                    tabs: [design_first],
382                    selected: 0
383                }*/
384    
385                file_tree_tab = Tab {
386                    name: "Files",
387                    template: FilesTab,
388                    kind: StudioFileTree
389                }
390    
391                search = Tab {
392                    name: "Search"
393                    template: SearchTab,
394                    kind: Search
395                }
396    
397                run_first = Tab {
398                    name: ""
399                    template: RunFirstTab,
400                    kind: RunFirst
401                }
402    
403                design_first = Tab {
404                    name: ""
405                    template: DesignFirstTab,
406                    kind: DesignFirst
407                }
408    
409                edit_first = Tab {
410                    name: ""
411                    template: EditFirstTab,
412                    kind: EditFirst
413                }
414                ai_first = Tab {
415                    name: ""
416                    template: AiFirstTab,
417                    kind: AiFirst
418                }
419                outline_first = Tab {
420                    name: ""
421                    template: OutlineFirstTab,
422                    kind: OutlineFirst
423                }
424    
425                run_list_tab = Tab {
426                    name: "Run"
427                    template: RunListTab,
428                    kind: RunList
429                }
430                snapshot_tab = Tab {
431                    name: "Snapshot"
432                    template: SnapshotTab,
433                    kind: Snapshot
434                }
435                log_list_tab = Tab {
436                    name: "Log",
437                    template: LogTab,
438                    kind: LogList
439                }
440    
441                profiler = Tab {
442                    name: "Profiler",
443                    template: ProfilerTab,
444                    kind: Profiler
445                }
446    
447                CodeEditor = <View> {
448                    flow: Down,
449                    <DockToolbar> {
450                        content = {
451                            height: Fit, width: Fill,
452                            spacing: (THEME_SPACE_1)
453                            flow: Right,
454                            margin: {left: (THEME_SPACE_1), right: (THEME_SPACE_1) },
455    
456                            <ButtonFlatter> { width: Fit, text: "File"}
457                            <ButtonFlatter> { width: Fit, text: "Edit"}
458                            <ButtonFlatter> { width: Fit, text: "Search"}
459                            <ButtonFlatter> { width: Fit, text: "Debug"}
460                            <Filler> {}
461                            <LinkLabel> { width: Fit, text: "Docs", url: "https://publish.obsidian.md/makepad-docs"}
462                        }
463                    }
464                    editor = <StudioCodeEditor> {} 
465                }
466                
467                AiChat = <AiChatView> {
468                    flow: Down,
469                }
470                
471                EditFirst = <RectView> {
472                    draw_bg: {color: (THEME_COLOR_BG_CONTAINER)}
473                    <View> {
474                        width: Fill, height: Fill,
475                        align: { x: 0., y: 0. }
476                        flow: Down
477                        <DockToolbar> { content = <DockSettings> {} }
478                        <View> {
479                            width: Fill, height: Fill,
480                            align: { x: 0.5, y: 0.5 }
481                            <Logo> {}
482                        }
483                        
484                        // <H3> {
485                        //     width: Fit,
486                        //     text: "Welcome to \nMakepad \n\n欢迎来到\nMakepad"
487                        //     margin: {left: 185}
488                        // }
489                    }
490                }
491                OutlineFirst = <RectView> {
492                    draw_bg: {color: (THEME_COLOR_BG_CONTAINER)}
493                    <View> {
494                        width: Fill, height: Fill,
495                        align: { x: 0.5, y: 0.5 }
496                        flow: Down
497                        <DockToolbar> { content = <DockSettings> {} }
498                        <View> {
499                            width: Fill, height: Fill,
500                            align: { x: 0.5, y: 0.5 }
501                            <Logo> {}
502                        }
503                    }
504                }
505                DesignFirst = <RectView> {
506                    draw_bg: {color: (THEME_COLOR_BG_CONTAINER)}
507                    <View> {
508                        width: Fill, height: Fill
509                        flow: Down
510                        <DockToolbar> { content = <DockSettings> {} }
511                        <View> {
512                            width: Fill, height: Fill,
513                            align: { x: 0.5, y: 0.5 }
514                            <Logo> {}
515                        }
516                    }
517                }
518                AiFirst = <RectView> {
519                    draw_bg: {color: (THEME_COLOR_BG_CONTAINER)}
520                    <View> {
521                        width: Fill, height: Fill
522                        flow: Down
523                        <DockToolbar> { content = <DockSettings> {} }
524                        <View> {
525                            width: Fill, height: Fill,
526                            align: { x: 0.5, y: 0.5 }
527                            <Logo> {}
528                        }
529                    }
530                }
531                RunFirst = <RectView> {
532                    draw_bg: {color: (THEME_COLOR_BG_CONTAINER)}
533                    <View> {
534                        width: Fill, height: Fill,
535                        flow: Down
536                        <DockToolbar> { content = <DockSettings> {} }
537                        <View> {
538                            width: Fill, height: Fill,
539                            align: { x: 0.5, y: 0.5 }
540                            <Logo> {}
541                        }
542                    }
543                }
544                RunList = <View> {
545                    flow: Down,
546                    margin: 0.,
547                    padding: 0.,
548                    <DockToolbar> {
549                        content = {
550                            <Pbold> {
551                                width: Fit,
552                                text: "Types",
553                                margin: 0.,
554                                padding: <THEME_MSPACE_1> {}
555                            }
556                            <ToggleFlat> { text: "Release", }
557                            <ToggleFlat> { text: "Debug"}
558                        }
559                    }
560                    <RunList> {}
561                }
562                Snapshot = <Snapshot> {}
563                Search = <Search> {}
564                RunView = <RunView> {}
565                StudioFileTree = <View> {
566                    flow: Down,
567                    <DockToolbar> {
568                        content = {
569                            <TextInputFlat> {
570                                width: Fill,
571                                empty_text: "Filter",
572                            }
573                        }
574                    }
575                    file_tree = <StudioFileTree> {}
576                }
577                LogList = <View> {
578                    flow: Down,
579                    <DockToolbar> {
580                        content = {
581                            align: { x: 0., y: 0.5 }
582                            <View> {
583                                width: Fit
584                                flow: Right,
585                                <CheckBoxCustom> {
586                                    text:"Error"
587                                    align: { y: 0.5 }
588                                    draw_bg: { check_type: None }
589                                    icon_walk: {width: 7.}
590                                    draw_icon: {
591                                        color: (THEME_COLOR_D_2),
592                                        color_active: (STUDIO_PALETTE_4),
593                                        svg_file: dep("crate://self/resources/icons/icon_log_bullet.svg"),
594                                    }
595                                }
596                                <CheckBoxCustom> {
597                                    text:"Warning"
598                                    align: { y: 0.5 }
599                                    draw_bg: { check_type: None }
600                                    icon_walk: {width: 7.}
601                                    draw_icon: {
602                                        color: (THEME_COLOR_D_2),
603                                        color_active: (STUDIO_PALETTE_1),
604                                        svg_file: dep("crate://self/resources/icons/icon_log_bullet.svg"),
605                                    }
606                                }
607                                <CheckBoxCustom> {
608                                    text:"Log"
609                                    align: { y: 0.5 }
610                                    draw_bg: { check_type: None }
611                                    icon_walk: {width: 7.}
612                                    draw_icon: {
613                                        color: (THEME_COLOR_D_2),
614                                        color_active: (THEME_COLOR_U_5),
615                                        svg_file: dep("crate://self/resources/icons/icon_log_bullet.svg"),
616                                    }
617                                }
618                                <CheckBoxCustom> {
619                                    text:"Wait"
620                                    align: { y: 0.5 }
621                                    draw_bg: { check_type: None }
622                                    icon_walk: {width: 7.}
623                                    draw_icon: {
624                                        color: (THEME_COLOR_D_2),
625                                        color_active: (STUDIO_PALETTE_2),
626                                        svg_file: dep("crate://self/resources/icons/icon_log_bullet.svg"),
627                                    }
628                                }
629                                <CheckBoxCustom> {
630                                    text:"Panic"
631                                    align: { y: 0.5 }
632                                    draw_bg: { check_type: None }
633                                    icon_walk: {width: 7.}
634                                    draw_icon: {
635                                        color: (THEME_COLOR_D_2),
636                                        color_active: (STUDIO_PALETTE_5),
637                                        svg_file: dep("crate://self/resources/icons/icon_log_bullet.svg"),
638                                    }
639                                }
640                            }
641                            <Filler> {}
642                            <TextInputFlat> {
643                                width: 200.
644                                empty_text: "Filter",
645                            }
646                        }
647                    }
648                    log_list = <LogList> {}
649                }
650                Profiler = <Profiler> {
651                    flow: Down,
652                }
653            }
654        }
655    }
656}
makepad_studio/app_ui.rs

makepad_studio/
app_ui.rs
