1use gpui::{
2 AnyElement, AnyView, ElementId, Hsla, IntoElement, Styled, Window, div, hsla, prelude::*,
3};
4use std::sync::Arc;
5
6use crate::utils::is_light;
7use crate::{Color, Icon, IconName, ToggleState};
8use crate::{ElevationIndex, KeyBinding, prelude::*};
9
10// TODO: Checkbox, CheckboxWithLabel, and Switch could all be
11// restructured to use a ToggleLike, similar to Button/Buttonlike, Label/Labellike
12
13/// Creates a new checkbox.
14pub fn checkbox(id: impl Into<ElementId>, toggle_state: ToggleState) -> Checkbox {
15 Checkbox::new(id, toggle_state)
16}
17
18/// Creates a new switch.
19pub fn switch(id: impl Into<ElementId>, toggle_state: ToggleState) -> Switch {
20 Switch::new(id, toggle_state)
21}
22
23/// The visual style of a toggle.
24#[derive(Debug, Default, Clone, PartialEq, Eq)]
25pub enum ToggleStyle {
26 /// Toggle has a transparent background
27 #[default]
28 Ghost,
29 /// Toggle has a filled background based on the
30 /// elevation index of the parent container
31 ElevationBased(ElevationIndex),
32 /// A custom style using a color to tint the toggle
33 Custom(Hsla),
34}
35
36/// # Checkbox
37///
38/// Checkboxes are used for multiple choices, not for mutually exclusive choices.
39/// Each checkbox works independently from other checkboxes in the list,
40/// therefore checking an additional box does not affect any other selections.
41#[derive(IntoElement, IntoComponent)]
42#[component(scope = "Input")]
43pub struct Checkbox {
44 id: ElementId,
45 toggle_state: ToggleState,
46 disabled: bool,
47 placeholder: bool,
48 on_click: Option<Box<dyn Fn(&ToggleState, &mut Window, &mut App) + 'static>>,
49 filled: bool,
50 style: ToggleStyle,
51 tooltip: Option<Box<dyn Fn(&mut Window, &mut App) -> AnyView>>,
52 label: Option<SharedString>,
53}
54
55impl Checkbox {
56 /// Creates a new [`Checkbox`].
57 pub fn new(id: impl Into<ElementId>, checked: ToggleState) -> Self {
58 Self {
59 id: id.into(),
60 toggle_state: checked,
61 disabled: false,
62 on_click: None,
63 filled: false,
64 style: ToggleStyle::default(),
65 tooltip: None,
66 label: None,
67 placeholder: false,
68 }
69 }
70
71 /// Sets the disabled state of the [`Checkbox`].
72 pub fn disabled(mut self, disabled: bool) -> Self {
73 self.disabled = disabled;
74 self
75 }
76
77 /// Sets the disabled state of the [`Checkbox`].
78 pub fn placeholder(mut self, placeholder: bool) -> Self {
79 self.placeholder = placeholder;
80 self
81 }
82
83 /// Binds a handler to the [`Checkbox`] that will be called when clicked.
84 pub fn on_click(
85 mut self,
86 handler: impl Fn(&ToggleState, &mut Window, &mut App) + 'static,
87 ) -> Self {
88 self.on_click = Some(Box::new(handler));
89 self
90 }
91
92 /// Sets the `fill` setting of the checkbox, indicating whether it should be filled.
93 pub fn fill(mut self) -> Self {
94 self.filled = true;
95 self
96 }
97
98 /// Sets the style of the checkbox using the specified [`ToggleStyle`].
99 pub fn style(mut self, style: ToggleStyle) -> Self {
100 self.style = style;
101 self
102 }
103
104 /// Match the style of the checkbox to the current elevation using [`ToggleStyle::ElevationBased`].
105 pub fn elevation(mut self, elevation: ElevationIndex) -> Self {
106 self.style = ToggleStyle::ElevationBased(elevation);
107 self
108 }
109
110 /// Sets the tooltip for the checkbox.
111 pub fn tooltip(mut self, tooltip: impl Fn(&mut Window, &mut App) -> AnyView + 'static) -> Self {
112 self.tooltip = Some(Box::new(tooltip));
113 self
114 }
115
116 /// Set the label for the checkbox.
117 pub fn label(mut self, label: impl Into<SharedString>) -> Self {
118 self.label = Some(label.into());
119 self
120 }
121}
122
123impl Checkbox {
124 fn bg_color(&self, cx: &App) -> Hsla {
125 let style = self.style.clone();
126 match (style, self.filled) {
127 (ToggleStyle::Ghost, false) => cx.theme().colors().ghost_element_background,
128 (ToggleStyle::Ghost, true) => cx.theme().colors().element_background,
129 (ToggleStyle::ElevationBased(_), false) => gpui::transparent_black(),
130 (ToggleStyle::ElevationBased(elevation), true) => elevation.darker_bg(cx),
131 (ToggleStyle::Custom(_), false) => gpui::transparent_black(),
132 (ToggleStyle::Custom(color), true) => color.opacity(0.2),
133 }
134 }
135
136 fn border_color(&self, cx: &App) -> Hsla {
137 if self.disabled {
138 return cx.theme().colors().border_variant;
139 }
140
141 match self.style.clone() {
142 ToggleStyle::Ghost => cx.theme().colors().border,
143 ToggleStyle::ElevationBased(_) => cx.theme().colors().border,
144 ToggleStyle::Custom(color) => color.opacity(0.3),
145 }
146 }
147
148 /// container size
149 pub fn container_size() -> Pixels {
150 px(20.0)
151 }
152}
153
154impl RenderOnce for Checkbox {
155 fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
156 let group_id = format!("checkbox_group_{:?}", self.id);
157 let color = if self.disabled {
158 Color::Disabled
159 } else {
160 Color::Selected
161 };
162 let icon = match self.toggle_state {
163 ToggleState::Selected => {
164 if self.placeholder {
165 None
166 } else {
167 Some(
168 Icon::new(IconName::Check)
169 .size(IconSize::Small)
170 .color(color),
171 )
172 }
173 }
174 ToggleState::Indeterminate => {
175 Some(Icon::new(IconName::Dash).size(IconSize::Small).color(color))
176 }
177 ToggleState::Unselected => None,
178 };
179
180 let bg_color = self.bg_color(cx);
181 let border_color = self.border_color(cx);
182 let hover_border_color = border_color.alpha(0.7);
183
184 let size = Self::container_size();
185
186 let checkbox = h_flex()
187 .id(self.id.clone())
188 .justify_center()
189 .items_center()
190 .size(size)
191 .group(group_id.clone())
192 .child(
193 div()
194 .flex()
195 .flex_none()
196 .justify_center()
197 .items_center()
198 .m_1()
199 .size_4()
200 .rounded_xs()
201 .bg(bg_color)
202 .border_1()
203 .border_color(border_color)
204 .when(self.disabled, |this| this.cursor_not_allowed())
205 .when(self.disabled, |this| {
206 this.bg(cx.theme().colors().element_disabled.opacity(0.6))
207 })
208 .when(!self.disabled, |this| {
209 this.group_hover(group_id.clone(), |el| el.border_color(hover_border_color))
210 })
211 .when(self.placeholder, |this| {
212 this.child(
213 div()
214 .flex_none()
215 .rounded_full()
216 .bg(color.color(cx).alpha(0.5))
217 .size(px(4.)),
218 )
219 })
220 .children(icon),
221 );
222
223 h_flex()
224 .id(self.id)
225 .gap(DynamicSpacing::Base06.rems(cx))
226 .child(checkbox)
227 .when_some(
228 self.on_click.filter(|_| !self.disabled),
229 |this, on_click| {
230 this.on_click(move |_, window, cx| {
231 on_click(&self.toggle_state.inverse(), window, cx)
232 })
233 },
234 )
235 // TODO: Allow label size to be different from default.
236 // TODO: Allow label color to be different from muted.
237 .when_some(self.label, |this, label| {
238 this.child(Label::new(label).color(Color::Muted))
239 })
240 .when_some(self.tooltip, |this, tooltip| {
241 this.tooltip(move |window, cx| tooltip(window, cx))
242 })
243 }
244}
245
246/// A [`Checkbox`] that has a [`Label`].
247#[derive(IntoElement, IntoComponent)]
248#[component(scope = "Input")]
249pub struct CheckboxWithLabel {
250 id: ElementId,
251 label: Label,
252 checked: ToggleState,
253 on_click: Arc<dyn Fn(&ToggleState, &mut Window, &mut App) + 'static>,
254 filled: bool,
255 style: ToggleStyle,
256}
257
258// TODO: Remove `CheckboxWithLabel` now that `label` is a method of `Checkbox`.
259impl CheckboxWithLabel {
260 /// Creates a checkbox with an attached label.
261 pub fn new(
262 id: impl Into<ElementId>,
263 label: Label,
264 checked: ToggleState,
265 on_click: impl Fn(&ToggleState, &mut Window, &mut App) + 'static,
266 ) -> Self {
267 Self {
268 id: id.into(),
269 label,
270 checked,
271 on_click: Arc::new(on_click),
272 filled: false,
273 style: ToggleStyle::default(),
274 }
275 }
276
277 /// Sets the style of the checkbox using the specified [`ToggleStyle`].
278 pub fn style(mut self, style: ToggleStyle) -> Self {
279 self.style = style;
280 self
281 }
282
283 /// Match the style of the checkbox to the current elevation using [`ToggleStyle::ElevationBased`].
284 pub fn elevation(mut self, elevation: ElevationIndex) -> Self {
285 self.style = ToggleStyle::ElevationBased(elevation);
286 self
287 }
288
289 /// Sets the `fill` setting of the checkbox, indicating whether it should be filled.
290 pub fn fill(mut self) -> Self {
291 self.filled = true;
292 self
293 }
294}
295
296impl RenderOnce for CheckboxWithLabel {
297 fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
298 h_flex()
299 .gap(DynamicSpacing::Base08.rems(cx))
300 .child(
301 Checkbox::new(self.id.clone(), self.checked)
302 .style(self.style)
303 .when(self.filled, Checkbox::fill)
304 .on_click({
305 let on_click = self.on_click.clone();
306 move |checked, window, cx| {
307 (on_click)(checked, window, cx);
308 }
309 }),
310 )
311 .child(
312 div()
313 .id(SharedString::from(format!("{}-label", self.id)))
314 .on_click(move |_event, window, cx| {
315 (self.on_click)(&self.checked.inverse(), window, cx);
316 })
317 .child(self.label),
318 )
319 }
320}
321
322/// # Switch
323///
324/// Switches are used to represent opposite states, such as enabled or disabled.
325#[derive(IntoElement, IntoComponent)]
326#[component(scope = "Input")]
327pub struct Switch {
328 id: ElementId,
329 toggle_state: ToggleState,
330 disabled: bool,
331 on_click: Option<Box<dyn Fn(&ToggleState, &mut Window, &mut App) + 'static>>,
332 label: Option<SharedString>,
333 key_binding: Option<KeyBinding>,
334}
335
336impl Switch {
337 /// Creates a new [`Switch`].
338 pub fn new(id: impl Into<ElementId>, state: ToggleState) -> Self {
339 Self {
340 id: id.into(),
341 toggle_state: state,
342 disabled: false,
343 on_click: None,
344 label: None,
345 key_binding: None,
346 }
347 }
348
349 /// Sets the disabled state of the [`Switch`].
350 pub fn disabled(mut self, disabled: bool) -> Self {
351 self.disabled = disabled;
352 self
353 }
354
355 /// Binds a handler to the [`Switch`] that will be called when clicked.
356 pub fn on_click(
357 mut self,
358 handler: impl Fn(&ToggleState, &mut Window, &mut App) + 'static,
359 ) -> Self {
360 self.on_click = Some(Box::new(handler));
361 self
362 }
363
364 /// Sets the label of the [`Switch`].
365 pub fn label(mut self, label: impl Into<SharedString>) -> Self {
366 self.label = Some(label.into());
367 self
368 }
369
370 /// Display the keybinding that triggers the switch action.
371 pub fn key_binding(mut self, key_binding: impl Into<Option<KeyBinding>>) -> Self {
372 self.key_binding = key_binding.into();
373 self
374 }
375}
376
377impl RenderOnce for Switch {
378 fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
379 let is_on = self.toggle_state == ToggleState::Selected;
380 let adjust_ratio = if is_light(cx) { 1.5 } else { 1.0 };
381 let base_color = cx.theme().colors().text;
382
383 let bg_color = if is_on {
384 cx.theme()
385 .colors()
386 .element_background
387 .blend(base_color.opacity(0.08))
388 } else {
389 cx.theme().colors().element_background
390 };
391 let thumb_color = base_color.opacity(0.8);
392 let thumb_hover_color = base_color;
393 let border_color = cx.theme().colors().border_variant;
394 // Lighter themes need higher contrast borders
395 let border_hover_color = if is_on {
396 border_color.blend(base_color.opacity(0.16 * adjust_ratio))
397 } else {
398 border_color.blend(base_color.opacity(0.05 * adjust_ratio))
399 };
400 let thumb_opacity = match (is_on, self.disabled) {
401 (_, true) => 0.2,
402 (true, false) => 1.0,
403 (false, false) => 0.5,
404 };
405
406 let group_id = format!("switch_group_{:?}", self.id);
407
408 let switch = h_flex()
409 .w(DynamicSpacing::Base32.rems(cx))
410 .h(DynamicSpacing::Base20.rems(cx))
411 .group(group_id.clone())
412 .child(
413 h_flex()
414 .when(is_on, |on| on.justify_end())
415 .when(!is_on, |off| off.justify_start())
416 .items_center()
417 .size_full()
418 .rounded_full()
419 .px(DynamicSpacing::Base02.px(cx))
420 .bg(bg_color)
421 .border_1()
422 .border_color(border_color)
423 .when(!self.disabled, |this| {
424 this.group_hover(group_id.clone(), |el| el.border_color(border_hover_color))
425 })
426 .child(
427 div()
428 .size(DynamicSpacing::Base12.rems(cx))
429 .rounded_full()
430 .bg(thumb_color)
431 .when(!self.disabled, |this| {
432 this.group_hover(group_id.clone(), |el| el.bg(thumb_hover_color))
433 })
434 .opacity(thumb_opacity),
435 ),
436 );
437
438 h_flex()
439 .id(self.id)
440 .gap(DynamicSpacing::Base06.rems(cx))
441 .cursor_pointer()
442 .child(switch)
443 .when_some(
444 self.on_click.filter(|_| !self.disabled),
445 |this, on_click| {
446 this.on_click(move |_, window, cx| {
447 on_click(&self.toggle_state.inverse(), window, cx)
448 })
449 },
450 )
451 .when_some(self.label, |this, label| {
452 this.child(Label::new(label).size(LabelSize::Small))
453 })
454 .children(self.key_binding)
455 }
456}
457
458/// A [`Switch`] that has a [`Label`].
459#[derive(IntoElement)]
460// #[component(scope = "input")]
461pub struct SwitchWithLabel {
462 id: ElementId,
463 label: Label,
464 toggle_state: ToggleState,
465 on_click: Arc<dyn Fn(&ToggleState, &mut Window, &mut App) + 'static>,
466 disabled: bool,
467}
468
469impl SwitchWithLabel {
470 /// Creates a switch with an attached label.
471 pub fn new(
472 id: impl Into<ElementId>,
473 label: Label,
474 toggle_state: impl Into<ToggleState>,
475 on_click: impl Fn(&ToggleState, &mut Window, &mut App) + 'static,
476 ) -> Self {
477 Self {
478 id: id.into(),
479 label,
480 toggle_state: toggle_state.into(),
481 on_click: Arc::new(on_click),
482 disabled: false,
483 }
484 }
485
486 /// Sets the disabled state of the [`SwitchWithLabel`].
487 pub fn disabled(mut self, disabled: bool) -> Self {
488 self.disabled = disabled;
489 self
490 }
491}
492
493impl RenderOnce for SwitchWithLabel {
494 fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
495 h_flex()
496 .id(SharedString::from(format!("{}-container", self.id)))
497 .gap(DynamicSpacing::Base08.rems(cx))
498 .child(
499 Switch::new(self.id.clone(), self.toggle_state)
500 .disabled(self.disabled)
501 .on_click({
502 let on_click = self.on_click.clone();
503 move |checked, window, cx| {
504 (on_click)(checked, window, cx);
505 }
506 }),
507 )
508 .child(
509 div()
510 .id(SharedString::from(format!("{}-label", self.id)))
511 .child(self.label),
512 )
513 }
514}
515
516// View this component preview using `workspace: open component-preview`
517impl ComponentPreview for Checkbox {
518 fn preview(_window: &mut Window, _cx: &mut App) -> AnyElement {
519 v_flex()
520 .gap_6()
521 .children(vec![
522 example_group_with_title(
523 "States",
524 vec![
525 single_example(
526 "Unselected",
527 Checkbox::new("checkbox_unselected", ToggleState::Unselected)
528 .into_any_element(),
529 ),
530 single_example(
531 "Placeholder",
532 Checkbox::new("checkbox_indeterminate", ToggleState::Selected)
533 .placeholder(true)
534 .into_any_element(),
535 ),
536 single_example(
537 "Indeterminate",
538 Checkbox::new("checkbox_indeterminate", ToggleState::Indeterminate)
539 .into_any_element(),
540 ),
541 single_example(
542 "Selected",
543 Checkbox::new("checkbox_selected", ToggleState::Selected)
544 .into_any_element(),
545 ),
546 ],
547 ),
548 example_group_with_title(
549 "Styles",
550 vec![
551 single_example(
552 "Default",
553 Checkbox::new("checkbox_default", ToggleState::Selected)
554 .into_any_element(),
555 ),
556 single_example(
557 "Filled",
558 Checkbox::new("checkbox_filled", ToggleState::Selected)
559 .fill()
560 .into_any_element(),
561 ),
562 single_example(
563 "ElevationBased",
564 Checkbox::new("checkbox_elevation", ToggleState::Selected)
565 .style(ToggleStyle::ElevationBased(ElevationIndex::EditorSurface))
566 .into_any_element(),
567 ),
568 single_example(
569 "Custom Color",
570 Checkbox::new("checkbox_custom", ToggleState::Selected)
571 .style(ToggleStyle::Custom(hsla(142.0 / 360., 0.68, 0.45, 0.7)))
572 .into_any_element(),
573 ),
574 ],
575 ),
576 example_group_with_title(
577 "Disabled",
578 vec![
579 single_example(
580 "Unselected",
581 Checkbox::new("checkbox_disabled_unselected", ToggleState::Unselected)
582 .disabled(true)
583 .into_any_element(),
584 ),
585 single_example(
586 "Selected",
587 Checkbox::new("checkbox_disabled_selected", ToggleState::Selected)
588 .disabled(true)
589 .into_any_element(),
590 ),
591 ],
592 ),
593 example_group_with_title(
594 "With Label",
595 vec![single_example(
596 "Default",
597 Checkbox::new("checkbox_with_label", ToggleState::Selected)
598 .label("Always save on quit")
599 .into_any_element(),
600 )],
601 ),
602 ])
603 .into_any_element()
604 }
605}
606
607// View this component preview using `workspace: open component-preview`
608impl ComponentPreview for Switch {
609 fn preview(_window: &mut Window, _cx: &mut App) -> AnyElement {
610 v_flex()
611 .gap_6()
612 .children(vec![
613 example_group_with_title(
614 "States",
615 vec![
616 single_example(
617 "Off",
618 Switch::new("switch_off", ToggleState::Unselected)
619 .on_click(|_, _, _cx| {})
620 .into_any_element(),
621 ),
622 single_example(
623 "On",
624 Switch::new("switch_on", ToggleState::Selected)
625 .on_click(|_, _, _cx| {})
626 .into_any_element(),
627 ),
628 ],
629 ),
630 example_group_with_title(
631 "Disabled",
632 vec![
633 single_example(
634 "Off",
635 Switch::new("switch_disabled_off", ToggleState::Unselected)
636 .disabled(true)
637 .into_any_element(),
638 ),
639 single_example(
640 "On",
641 Switch::new("switch_disabled_on", ToggleState::Selected)
642 .disabled(true)
643 .into_any_element(),
644 ),
645 ],
646 ),
647 example_group_with_title(
648 "With Label",
649 vec![
650 single_example(
651 "Label",
652 Switch::new("switch_with_label", ToggleState::Selected)
653 .label("Always save on quit")
654 .into_any_element(),
655 ),
656 // TODO: Where did theme_preview_keybinding go?
657 // single_example(
658 // "Keybinding",
659 // Switch::new("switch_with_keybinding", ToggleState::Selected)
660 // .key_binding(theme_preview_keybinding("cmd-shift-e"))
661 // .into_any_element(),
662 // ),
663 ],
664 ),
665 ])
666 .into_any_element()
667 }
668}
669
670// View this component preview using `workspace: open component-preview`
671impl ComponentPreview for CheckboxWithLabel {
672 fn preview(_window: &mut Window, _cx: &mut App) -> AnyElement {
673 v_flex()
674 .gap_6()
675 .children(vec![example_group_with_title(
676 "States",
677 vec![
678 single_example(
679 "Unselected",
680 CheckboxWithLabel::new(
681 "checkbox_with_label_unselected",
682 Label::new("Always save on quit"),
683 ToggleState::Unselected,
684 |_, _, _| {},
685 )
686 .into_any_element(),
687 ),
688 single_example(
689 "Indeterminate",
690 CheckboxWithLabel::new(
691 "checkbox_with_label_indeterminate",
692 Label::new("Always save on quit"),
693 ToggleState::Indeterminate,
694 |_, _, _| {},
695 )
696 .into_any_element(),
697 ),
698 single_example(
699 "Selected",
700 CheckboxWithLabel::new(
701 "checkbox_with_label_selected",
702 Label::new("Always save on quit"),
703 ToggleState::Selected,
704 |_, _, _| {},
705 )
706 .into_any_element(),
707 ),
708 ],
709 )])
710 .into_any_element()
711 }
712}