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, LineEdit, Palette } from "std-widgets.slint";
5
6import { PropertyValue } from "../../api.slint";
7import { BodyText } from "../../components/body-text.slint";
8import { EditorAnimationSettings, EditorFontSettings, EditorSizeSettings, EditorSpaceSettings, Icons } from "../../components/styling.slint";
9
10export component CodeButton inherits Button {
11 text: @tr("Code");
12}
13
14export component ResetButton inherits Button {
15 text: @tr("Reset");
16}
17
18export component NameLabel inherits HorizontalLayout {
19 in property <string> property-name;
20 in property <PropertyValue> property-value;
21
22 horizontal-stretch: 0;
23
24 BodyText {
25 min-width: EditorSizeSettings.min-prefix-text-width;
26 height: root.property-name != "" ? self.preferred-height : 0;
27 text: root.property-name;
28
29 font-size: 1rem;
30 font-weight: root.property-value.code != "" ? EditorFontSettings.bold-font-weight : EditorFontSettings.light-font-weight;
31 font-italic: root.property-value.code == "";
32
33 overflow: elide;
34 }
35}
36
37export component ResettingLineEdit {
38 in property <string> default-text;
39 in-out property <bool> can-compile: true;
40
41 in property <bool> enabled;
42 in property <InputType> input-type <=> le.input-type;
43 in property <TextHorizontalAlignment> horizontal-alignment <=> le.horizontal-alignment;
44 in property <string> placeholder-text <=> le.placeholder-text;
45 out property <bool> has-focus <=> le.has-focus;
46 in-out property <string> text <=> le.text;
47
48 property <length> border: 3px;
49
50 callback accepted <=> le.accepted;
51 callback edited <=> le.edited;
52
53 changed default-text => {
54 if !le.has-focus {
55 le.text = root.default-text;
56 }
57 }
58
59 VerticalLayout {
60 le := LineEdit {
61 enabled: root.enabled;
62 text: root.default-text;
63 font-size: 1rem;
64
65 // Reset on focus loss:
66 changed has-focus => {
67 if !self.has_focus && text != default-text {
68 if root.can-compile {
69 root.accepted(self.text);
70 }
71 } else {
72 // self.text = root.default-text;
73 root.can-compile = true;
74 }
75 }
76 }
77 }
78
79 Rectangle {
80 visible: !root.can-compile;
81
82 background: Colors.red.transparentize(0.94);
83 x: root.border;
84 y: root.border;
85 width: root.width - 2 * root.border;
86 height: root.height - 2 * root.border;
87
88 border-radius: root.border;
89 }
90}
91
92export component ChildIndicator inherits Rectangle {
93 out property <bool> open: false;
94 in property <bool> control-hover: false;
95
96 width: 16px;
97
98 indicator := Image {
99 vertical-alignment: center;
100
101 colorize: Palette.foreground;
102 visible: expand.has-hover || root.control-hover;
103 source: Icons.chevron-down;
104 rotation-angle: root.open ? 0deg : -90deg;
105 }
106
107 expand := TouchArea {
108 width: 1cm;
109 height: 1cm;
110
111 clicked => {
112 root.open = !root.open;
113 }
114 }
115}
116
117export component SecondaryContent inherits Rectangle {
118 in property <bool> enabled;
119 in property <bool> open: false;
120 in property <bool> has-code-action: true;
121 in property <bool> has-reset-action: true;
122
123 callback reset();
124
125 callback code-action();
126 callback reset-action();
127
128 background: Palette.background;
129 clip: true;
130 height: open ? content.preferred-height : 0px;
131
132 animate height { duration: EditorAnimationSettings.rotation-duration; }
133
134 content := HorizontalLayout {
135 Rectangle {
136 height: 100%;
137 width: 1px;
138 background: Palette.border;
139 }
140
141 VerticalLayout {
142 padding: EditorSpaceSettings.default-padding;
143 spacing: EditorSpaceSettings.default-padding;
144
145 @children
146
147 HorizontalLayout {
148 spacing: EditorSpaceSettings.default-spacing;
149
150 ResetButton {
151 height: root.has-reset-action ? self.preferred-height : 0px;
152 enabled: root.enabled;
153 clicked() => {
154 root.reset-action();
155 root.reset();
156 }
157 }
158
159 CodeButton {
160 height: root.has-code-action ? self.preferred-height : 0px;
161 enabled: root.enabled;
162 clicked() => {
163 root.code-action();
164 }
165 }
166 }
167 }
168 }
169}
170
171