1// Copyright © SixtyFPS GmbH <info@slint.dev>
2// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0
3
4import { Button, HorizontalBox, Switch, Palette, ComboBox } from "std-widgets.slint";
5import { BodyText } from "../components/body-text.slint";
6import { HeaderText } from "../components/header-text.slint";
7import { Api, ComponentItem } from "../api.slint";
8import { EditorSpaceSettings, Icons } from "../components/styling.slint";
9
10
11export component HeaderView {
12 in-out property <bool> show-left-sidebar <=> left-panel-button.checked;
13 in-out property <bool> show-right-sidebar <=> right-panel-button.checked;
14 in-out property <bool> edit-mode <=> interaction-switch.checked;
15 in-out property <string> current-style <=> style-combobox.current-value;
16 in property <[string]> known-styles <=> style-combobox.model;
17
18 callback style-selected();
19 callback edit-mode-toggled();
20
21 background-layer := Rectangle {
22 background: Palette.alternate-background;
23
24 content-layer := HorizontalBox {
25 horizontal-stretch: 1;
26
27 HorizontalLayout {
28 alignment: start;
29 horizontal-stretch: 0;
30 spacing: EditorSpaceSettings.default-spacing / 2;
31
32 Button {
33 icon: Icons.sync;
34 colorize-icon: true;
35 clicked => {
36 Api.reload-preview();
37 }
38 }
39
40 HeaderText {
41 text: @tr("Preview");
42 }
43 }
44
45 HorizontalLayout {
46 alignment: start;
47 spacing: EditorSpaceSettings.default-spacing;
48
49 HorizontalLayout {
50 visible: false;
51 spacing: EditorSpaceSettings.default-spacing / 2;
52 horizontal-stretch: 1;
53
54 BodyText {
55 text: @tr("Interact");
56 }
57
58 interaction-switch := Switch {
59 checked: true;
60 toggled => {
61 root.edit-mode-toggled();
62 }
63 }
64
65 BodyText {
66 text: @tr("Edit");
67 }
68 }
69 @children
70
71 left-panel-button := Button {
72 horizontal-stretch: 0;
73
74 checkable: true;
75 icon: self.checked ? Icons.sidebar-left : Icons.sidebar-left-off;
76 colorize-icon: true;
77 }
78
79 right-panel-button := Button {
80 horizontal-stretch: 0;
81
82 checkable: true;
83 icon: self.checked ? Icons.sidebar-right : Icons.sidebar-right-off;
84 colorize-icon: true;
85 // visible: root.edit-mode;
86 }
87 }
88
89 HorizontalLayout {
90 alignment: end;
91 spacing:4px;
92
93 BodyText {
94 horizontal-stretch: 0;
95
96 visible: Api.uses-widgets;
97 horizontal-alignment: right;
98 text: @tr("Style");
99 }
100
101 style-combobox := ComboBox {
102 horizontal-stretch: 0;
103
104 visible: Api.uses-widgets;
105
106 selected => {
107 root.style-selected();
108 }
109 }
110 }
111 }
112
113 Rectangle {
114 y: parent.height - self.height;
115 height: 1px;
116
117 background: Palette.border;
118 }
119 }
120}
121