1import { with_opacity } from "../theme/color"
2import { background, border, foreground, text } from "./components"
3import { interactive, toggleable } from "../element"
4import { useTheme } from "../theme"
5import { text_button } from "../component/text_button"
6
7const search_results = () => {
8 const theme = useTheme()
9
10 return {
11 // TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive
12 match_background: with_opacity(
13 foreground(theme.highest, "accent"),
14 0.4
15 ),
16 }
17}
18
19export default function search(): any {
20 const theme = useTheme()
21 const SEARCH_ROW_SPACING = 12
22
23 // Search input
24 const editor = {
25 background: background(theme.highest),
26 corner_radius: 8,
27 min_width: 200,
28 max_width: 500,
29 placeholder_text: text(theme.highest, "mono", "disabled"),
30 selection: theme.players[0],
31 text: text(theme.highest, "mono", "default"),
32 border: border(theme.highest),
33 padding: {
34 top: 4,
35 bottom: 4,
36 left: 10,
37 right: 4,
38 },
39 margin: { right: SEARCH_ROW_SPACING }
40 }
41
42 const include_exclude_editor = {
43 ...editor,
44 min_width: 100,
45 max_width: 250,
46 }
47
48 return {
49 padding: { top: 4, bottom: 4 },
50
51 option_button: toggleable({
52 base: interactive({
53 base: {
54 icon_width: 14,
55 button_width: 32,
56 color: foreground(theme.highest, "variant"),
57 background: background(theme.highest, "on"),
58 corner_radius: 2,
59 margin: { right: 2 },
60 border: {
61 width: 1,
62 color: background(theme.highest, "on"),
63 },
64 padding: {
65 left: 4,
66 right: 4,
67 top: 4,
68 bottom: 4,
69 },
70 },
71 state: {
72 hovered: {
73 ...text(theme.highest, "mono", "variant", "hovered"),
74 background: background(theme.highest, "on", "hovered"),
75 border: {
76 width: 1,
77 color: background(theme.highest, "on", "hovered"),
78 },
79 },
80 clicked: {
81 ...text(theme.highest, "mono", "variant", "pressed"),
82 background: background(theme.highest, "on", "pressed"),
83 border: {
84 width: 1,
85 color: background(theme.highest, "on", "pressed"),
86 },
87 },
88 },
89 }),
90 state: {
91 active: {
92 default: {
93 icon_width: 14,
94 button_width: 32,
95 color: foreground(theme.highest, "variant"),
96 background: background(theme.highest, "accent"),
97 border: border(theme.highest, "accent"),
98 },
99 hovered: {
100 background: background(
101 theme.highest,
102 "accent",
103 "hovered"
104 ),
105 border: border(theme.highest, "accent", "hovered"),
106 },
107 clicked: {
108 background: background(
109 theme.highest,
110 "accent",
111 "pressed"
112 ),
113 border: border(theme.highest, "accent", "pressed"),
114 },
115 },
116 },
117 }),
118 option_button_component: toggleable({
119 base: interactive({
120 base: {
121 icon_size: 14,
122 color: foreground(theme.highest, "variant"),
123
124 button_width: 32,
125 background: background(theme.highest, "on"),
126 corner_radius: 6,
127 margin: { right: 2 },
128 border: {
129 width: 1,
130 color: background(theme.highest, "on"),
131 },
132 padding: {
133 left: 4,
134 right: 4,
135 top: 4,
136 bottom: 4,
137 },
138 },
139 state: {
140 hovered: {
141 ...text(theme.highest, "mono", "variant", "hovered"),
142 background: background(theme.highest, "on", "hovered"),
143 border: {
144 width: 1,
145 color: background(theme.highest, "on", "hovered"),
146 },
147 },
148 clicked: {
149 ...text(theme.highest, "mono", "variant", "pressed"),
150 background: background(theme.highest, "on", "pressed"),
151 border: {
152 width: 1,
153 color: background(theme.highest, "on", "pressed"),
154 },
155 },
156 },
157 }),
158 state: {
159 active: {
160 default: {
161 icon_size: 14,
162 button_width: 32,
163 color: foreground(theme.highest, "variant"),
164 background: background(theme.highest, "accent"),
165 border: border(theme.highest, "accent"),
166 },
167 hovered: {
168 background: background(
169 theme.highest,
170 "accent",
171 "hovered"
172 ),
173 border: border(theme.highest, "accent", "hovered"),
174 },
175 clicked: {
176 background: background(
177 theme.highest,
178 "accent",
179 "pressed"
180 ),
181 border: border(theme.highest, "accent", "pressed"),
182 },
183 },
184 },
185 }),
186 editor,
187 invalid_editor: {
188 ...editor,
189 border: border(theme.highest, "negative"),
190 },
191 include_exclude_editor,
192 invalid_include_exclude_editor: {
193 ...include_exclude_editor,
194 border: border(theme.highest, "negative"),
195 },
196 match_index: {
197 ...text(theme.highest, "mono", { size: "sm" }),
198 padding: {
199 left: SEARCH_ROW_SPACING,
200 right: SEARCH_ROW_SPACING,
201 },
202 },
203 option_button_group: {
204 padding: {
205 right: SEARCH_ROW_SPACING,
206 },
207 },
208 include_exclude_inputs: {
209 ...text(theme.highest, "mono", "variant"),
210 padding: {
211 right: 6,
212 },
213 },
214 major_results_status: {
215 ...text(theme.highest, "mono", "on"),
216 size: 15,
217 },
218 minor_results_status: {
219 ...text(theme.highest, "mono", "variant"),
220 size: 13,
221 },
222 // Input Icon
223 editor_icon: {
224 icon: {
225 color: foreground(theme.highest, "disabled"),
226 asset: "icons/magnifying_glass.svg",
227 dimensions: {
228 width: 14,
229 height: 14,
230 },
231 },
232 container: {
233 margin: { right: 4 },
234 padding: { left: 1, right: 1 },
235 },
236 },
237 // Toggle group buttons - Text | Regex | Semantic
238 mode_button: toggleable({
239 base: interactive({
240 base: {
241 ...text(theme.highest, "mono", "variant", { size: "sm" }),
242 background: background(theme.highest, "variant"),
243
244 border: {
245 ...border(theme.highest, "on"),
246 left: false,
247 right: false,
248 },
249 margin: {
250 top: 1,
251 bottom: 1,
252 },
253 padding: {
254 left: 10,
255 right: 10,
256 },
257 corner_radius: 6,
258 },
259 state: {
260 hovered: {
261 ...text(theme.highest, "mono", "variant", "hovered", {
262 size: "sm",
263 }),
264 background: background(
265 theme.highest,
266 "variant",
267 "hovered"
268 ),
269 border: border(theme.highest, "on", "hovered"),
270 },
271 clicked: {
272 ...text(theme.highest, "mono", "variant", "pressed", {
273 size: "sm",
274 }),
275 background: background(
276 theme.highest,
277 "variant",
278 "pressed"
279 ),
280 border: border(theme.highest, "on", "pressed"),
281 },
282 },
283 }),
284 state: {
285 active: {
286 default: {
287 ...text(theme.highest, "mono", "on", { size: "sm" }),
288 background: background(theme.highest, "on"),
289 },
290 hovered: {
291 ...text(theme.highest, "mono", "on", "hovered", {
292 size: "sm",
293 }),
294 background: background(theme.highest, "on", "hovered"),
295 },
296 clicked: {
297 ...text(theme.highest, "mono", "on", "pressed", {
298 size: "sm",
299 }),
300 background: background(theme.highest, "on", "pressed"),
301 },
302 },
303 },
304 }),
305 // Next/Previous Match buttons
306 // HACK: This is not how disabled elements should be created
307 // Disabled elements should use a disabled state of an interactive element, not a toggleable element with the inactive state being disabled
308 nav_button: toggleable({
309 state: {
310 inactive: interactive({
311 base: {
312 background: background(theme.highest, "disabled"),
313 text: text(theme.highest, "mono", "disabled"),
314 corner_radius: 6,
315 border: {
316 ...border(theme.highest, "disabled"),
317 left: false,
318 right: false,
319 },
320 margin: {
321 top: 1,
322 bottom: 1,
323 },
324 padding: {
325 left: 10,
326 right: 10,
327 },
328 },
329 state: {
330 hovered: {},
331 },
332 }),
333 active: interactive({
334 base: {
335 text: text(theme.highest, "mono", "on"),
336 background: background(theme.highest, "on"),
337 corner_radius: 6,
338 border: {
339 ...border(theme.highest, "on"),
340 left: false,
341 right: false,
342 },
343 margin: {
344 top: 1,
345 bottom: 1,
346 },
347 padding: {
348 left: 10,
349 right: 10,
350 },
351 },
352 state: {
353 hovered: {
354 ...text(theme.highest, "mono", "on", "hovered"),
355 background: background(
356 theme.highest,
357 "on",
358 "hovered"
359 ),
360 border: border(theme.highest, "on", "hovered"),
361 },
362 clicked: {
363 ...text(theme.highest, "mono", "on", "pressed"),
364 background: background(
365 theme.highest,
366 "on",
367 "pressed"
368 ),
369 border: border(theme.highest, "on", "pressed"),
370 },
371 },
372 }),
373 },
374 }),
375 search_bar_row_height: 34,
376 search_row_spacing: 8,
377 option_button_height: 22,
378 modes_container: {
379 padding: {
380 right: SEARCH_ROW_SPACING,
381 }
382 },
383 replace_icon: {
384 icon: {
385 color: foreground(theme.highest, "disabled"),
386 asset: "icons/replace.svg",
387 dimensions: {
388 width: 14,
389 height: 14,
390 },
391 },
392 container: {
393 margin: { right: 4 },
394 padding: { left: 1, right: 1 },
395 },
396 },
397 action_button: interactive({
398 base: {
399 icon_size: 14,
400 color: foreground(theme.highest, "variant"),
401
402 button_width: 32,
403 background: background(theme.highest, "on"),
404 corner_radius: 6,
405 margin: { right: 2 },
406 border: {
407 width: 1,
408 color: background(theme.highest, "on"),
409 },
410 padding: {
411 left: 4,
412 right: 4,
413 top: 4,
414 bottom: 4,
415 },
416 },
417 state: {
418 hovered: {
419 ...text(theme.highest, "mono", "variant", "hovered"),
420 background: background(theme.highest, "on", "hovered"),
421 border: {
422 width: 1,
423 color: background(theme.highest, "on", "hovered"),
424 },
425 },
426 clicked: {
427 ...text(theme.highest, "mono", "variant", "pressed"),
428 background: background(theme.highest, "on", "pressed"),
429 border: {
430 width: 1,
431 color: background(theme.highest, "on", "pressed"),
432 },
433 },
434 },
435 }),
436 ...search_results(),
437 }
438}