use gpui::{ AnyElement, AnyView, ElementId, Hsla, IntoElement, Styled, Window, div, hsla, prelude::*, }; use std::sync::Arc; use crate::utils::is_light; use crate::{Color, Icon, IconName, ToggleState}; use crate::{ElevationIndex, KeyBinding, prelude::*}; // TODO: Checkbox, CheckboxWithLabel, and Switch could all be // restructured to use a ToggleLike, similar to Button/Buttonlike, Label/Labellike /// Creates a new checkbox. pub fn checkbox(id: impl Into, toggle_state: ToggleState) -> Checkbox { Checkbox::new(id, toggle_state) } /// Creates a new switch. pub fn switch(id: impl Into, toggle_state: ToggleState) -> Switch { Switch::new(id, toggle_state) } /// The visual style of a toggle. #[derive(Debug, Default, Clone, PartialEq, Eq)] pub enum ToggleStyle { /// Toggle has a transparent background #[default] Ghost, /// Toggle has a filled background based on the /// elevation index of the parent container ElevationBased(ElevationIndex), /// A custom style using a color to tint the toggle Custom(Hsla), } /// # Checkbox /// /// Checkboxes are used for multiple choices, not for mutually exclusive choices. /// Each checkbox works independently from other checkboxes in the list, /// therefore checking an additional box does not affect any other selections. #[derive(IntoElement, IntoComponent)] #[component(scope = "Input")] pub struct Checkbox { id: ElementId, toggle_state: ToggleState, disabled: bool, placeholder: bool, on_click: Option>, filled: bool, style: ToggleStyle, tooltip: Option AnyView>>, label: Option, } impl Checkbox { /// Creates a new [`Checkbox`]. pub fn new(id: impl Into, checked: ToggleState) -> Self { Self { id: id.into(), toggle_state: checked, disabled: false, on_click: None, filled: false, style: ToggleStyle::default(), tooltip: None, label: None, placeholder: false, } } /// Sets the disabled state of the [`Checkbox`]. pub fn disabled(mut self, disabled: bool) -> Self { self.disabled = disabled; self } /// Sets the disabled state of the [`Checkbox`]. pub fn placeholder(mut self, placeholder: bool) -> Self { self.placeholder = placeholder; self } /// Binds a handler to the [`Checkbox`] that will be called when clicked. pub fn on_click( mut self, handler: impl Fn(&ToggleState, &mut Window, &mut App) + 'static, ) -> Self { self.on_click = Some(Box::new(handler)); self } /// Sets the `fill` setting of the checkbox, indicating whether it should be filled. pub fn fill(mut self) -> Self { self.filled = true; self } /// Sets the style of the checkbox using the specified [`ToggleStyle`]. pub fn style(mut self, style: ToggleStyle) -> Self { self.style = style; self } /// Match the style of the checkbox to the current elevation using [`ToggleStyle::ElevationBased`]. pub fn elevation(mut self, elevation: ElevationIndex) -> Self { self.style = ToggleStyle::ElevationBased(elevation); self } /// Sets the tooltip for the checkbox. pub fn tooltip(mut self, tooltip: impl Fn(&mut Window, &mut App) -> AnyView + 'static) -> Self { self.tooltip = Some(Box::new(tooltip)); self } /// Set the label for the checkbox. pub fn label(mut self, label: impl Into) -> Self { self.label = Some(label.into()); self } } impl Checkbox { fn bg_color(&self, cx: &App) -> Hsla { let style = self.style.clone(); match (style, self.filled) { (ToggleStyle::Ghost, false) => cx.theme().colors().ghost_element_background, (ToggleStyle::Ghost, true) => cx.theme().colors().element_background, (ToggleStyle::ElevationBased(_), false) => gpui::transparent_black(), (ToggleStyle::ElevationBased(elevation), true) => elevation.darker_bg(cx), (ToggleStyle::Custom(_), false) => gpui::transparent_black(), (ToggleStyle::Custom(color), true) => color.opacity(0.2), } } fn border_color(&self, cx: &App) -> Hsla { if self.disabled { return cx.theme().colors().border_variant; } match self.style.clone() { ToggleStyle::Ghost => cx.theme().colors().border, ToggleStyle::ElevationBased(_) => cx.theme().colors().border, ToggleStyle::Custom(color) => color.opacity(0.3), } } /// container size pub fn container_size() -> Pixels { px(20.0) } } impl RenderOnce for Checkbox { fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement { let group_id = format!("checkbox_group_{:?}", self.id); let color = if self.disabled { Color::Disabled } else { Color::Selected }; let icon = match self.toggle_state { ToggleState::Selected => { if self.placeholder { None } else { Some( Icon::new(IconName::Check) .size(IconSize::Small) .color(color), ) } } ToggleState::Indeterminate => { Some(Icon::new(IconName::Dash).size(IconSize::Small).color(color)) } ToggleState::Unselected => None, }; let bg_color = self.bg_color(cx); let border_color = self.border_color(cx); let hover_border_color = border_color.alpha(0.7); let size = Self::container_size(); let checkbox = h_flex() .id(self.id.clone()) .justify_center() .items_center() .size(size) .group(group_id.clone()) .child( div() .flex() .flex_none() .justify_center() .items_center() .m_1() .size_4() .rounded_xs() .bg(bg_color) .border_1() .border_color(border_color) .when(self.disabled, |this| this.cursor_not_allowed()) .when(self.disabled, |this| { this.bg(cx.theme().colors().element_disabled.opacity(0.6)) }) .when(!self.disabled, |this| { this.group_hover(group_id.clone(), |el| el.border_color(hover_border_color)) }) .when(self.placeholder, |this| { this.child( div() .flex_none() .rounded_full() .bg(color.color(cx).alpha(0.5)) .size(px(4.)), ) }) .children(icon), ); h_flex() .id(self.id) .gap(DynamicSpacing::Base06.rems(cx)) .child(checkbox) .when_some( self.on_click.filter(|_| !self.disabled), |this, on_click| { this.on_click(move |_, window, cx| { on_click(&self.toggle_state.inverse(), window, cx) }) }, ) // TODO: Allow label size to be different from default. // TODO: Allow label color to be different from muted. .when_some(self.label, |this, label| { this.child(Label::new(label).color(Color::Muted)) }) .when_some(self.tooltip, |this, tooltip| { this.tooltip(move |window, cx| tooltip(window, cx)) }) } } /// A [`Checkbox`] that has a [`Label`]. #[derive(IntoElement, IntoComponent)] #[component(scope = "Input")] pub struct CheckboxWithLabel { id: ElementId, label: Label, checked: ToggleState, on_click: Arc, filled: bool, style: ToggleStyle, } // TODO: Remove `CheckboxWithLabel` now that `label` is a method of `Checkbox`. impl CheckboxWithLabel { /// Creates a checkbox with an attached label. pub fn new( id: impl Into, label: Label, checked: ToggleState, on_click: impl Fn(&ToggleState, &mut Window, &mut App) + 'static, ) -> Self { Self { id: id.into(), label, checked, on_click: Arc::new(on_click), filled: false, style: ToggleStyle::default(), } } /// Sets the style of the checkbox using the specified [`ToggleStyle`]. pub fn style(mut self, style: ToggleStyle) -> Self { self.style = style; self } /// Match the style of the checkbox to the current elevation using [`ToggleStyle::ElevationBased`]. pub fn elevation(mut self, elevation: ElevationIndex) -> Self { self.style = ToggleStyle::ElevationBased(elevation); self } /// Sets the `fill` setting of the checkbox, indicating whether it should be filled. pub fn fill(mut self) -> Self { self.filled = true; self } } impl RenderOnce for CheckboxWithLabel { fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement { h_flex() .gap(DynamicSpacing::Base08.rems(cx)) .child( Checkbox::new(self.id.clone(), self.checked) .style(self.style) .when(self.filled, Checkbox::fill) .on_click({ let on_click = self.on_click.clone(); move |checked, window, cx| { (on_click)(checked, window, cx); } }), ) .child( div() .id(SharedString::from(format!("{}-label", self.id))) .on_click(move |_event, window, cx| { (self.on_click)(&self.checked.inverse(), window, cx); }) .child(self.label), ) } } /// # Switch /// /// Switches are used to represent opposite states, such as enabled or disabled. #[derive(IntoElement, IntoComponent)] #[component(scope = "Input")] pub struct Switch { id: ElementId, toggle_state: ToggleState, disabled: bool, on_click: Option>, label: Option, key_binding: Option, } impl Switch { /// Creates a new [`Switch`]. pub fn new(id: impl Into, state: ToggleState) -> Self { Self { id: id.into(), toggle_state: state, disabled: false, on_click: None, label: None, key_binding: None, } } /// Sets the disabled state of the [`Switch`]. pub fn disabled(mut self, disabled: bool) -> Self { self.disabled = disabled; self } /// Binds a handler to the [`Switch`] that will be called when clicked. pub fn on_click( mut self, handler: impl Fn(&ToggleState, &mut Window, &mut App) + 'static, ) -> Self { self.on_click = Some(Box::new(handler)); self } /// Sets the label of the [`Switch`]. pub fn label(mut self, label: impl Into) -> Self { self.label = Some(label.into()); self } /// Display the keybinding that triggers the switch action. pub fn key_binding(mut self, key_binding: impl Into>) -> Self { self.key_binding = key_binding.into(); self } } impl RenderOnce for Switch { fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement { let is_on = self.toggle_state == ToggleState::Selected; let adjust_ratio = if is_light(cx) { 1.5 } else { 1.0 }; let base_color = cx.theme().colors().text; let bg_color = if is_on { cx.theme() .colors() .element_background .blend(base_color.opacity(0.08)) } else { cx.theme().colors().element_background }; let thumb_color = base_color.opacity(0.8); let thumb_hover_color = base_color; let border_color = cx.theme().colors().border_variant; // Lighter themes need higher contrast borders let border_hover_color = if is_on { border_color.blend(base_color.opacity(0.16 * adjust_ratio)) } else { border_color.blend(base_color.opacity(0.05 * adjust_ratio)) }; let thumb_opacity = match (is_on, self.disabled) { (_, true) => 0.2, (true, false) => 1.0, (false, false) => 0.5, }; let group_id = format!("switch_group_{:?}", self.id); let switch = h_flex() .w(DynamicSpacing::Base32.rems(cx)) .h(DynamicSpacing::Base20.rems(cx)) .group(group_id.clone()) .child( h_flex() .when(is_on, |on| on.justify_end()) .when(!is_on, |off| off.justify_start()) .items_center() .size_full() .rounded_full() .px(DynamicSpacing::Base02.px(cx)) .bg(bg_color) .border_1() .border_color(border_color) .when(!self.disabled, |this| { this.group_hover(group_id.clone(), |el| el.border_color(border_hover_color)) }) .child( div() .size(DynamicSpacing::Base12.rems(cx)) .rounded_full() .bg(thumb_color) .when(!self.disabled, |this| { this.group_hover(group_id.clone(), |el| el.bg(thumb_hover_color)) }) .opacity(thumb_opacity), ), ); h_flex() .id(self.id) .gap(DynamicSpacing::Base06.rems(cx)) .cursor_pointer() .child(switch) .when_some( self.on_click.filter(|_| !self.disabled), |this, on_click| { this.on_click(move |_, window, cx| { on_click(&self.toggle_state.inverse(), window, cx) }) }, ) .when_some(self.label, |this, label| { this.child(Label::new(label).size(LabelSize::Small)) }) .children(self.key_binding) } } /// A [`Switch`] that has a [`Label`]. #[derive(IntoElement)] // #[component(scope = "input")] pub struct SwitchWithLabel { id: ElementId, label: Label, toggle_state: ToggleState, on_click: Arc, disabled: bool, } impl SwitchWithLabel { /// Creates a switch with an attached label. pub fn new( id: impl Into, label: Label, toggle_state: impl Into, on_click: impl Fn(&ToggleState, &mut Window, &mut App) + 'static, ) -> Self { Self { id: id.into(), label, toggle_state: toggle_state.into(), on_click: Arc::new(on_click), disabled: false, } } /// Sets the disabled state of the [`SwitchWithLabel`]. pub fn disabled(mut self, disabled: bool) -> Self { self.disabled = disabled; self } } impl RenderOnce for SwitchWithLabel { fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement { h_flex() .id(SharedString::from(format!("{}-container", self.id))) .gap(DynamicSpacing::Base08.rems(cx)) .child( Switch::new(self.id.clone(), self.toggle_state) .disabled(self.disabled) .on_click({ let on_click = self.on_click.clone(); move |checked, window, cx| { (on_click)(checked, window, cx); } }), ) .child( div() .id(SharedString::from(format!("{}-label", self.id))) .child(self.label), ) } } // View this component preview using `workspace: open component-preview` impl ComponentPreview for Checkbox { fn preview(_window: &mut Window, _cx: &mut App) -> AnyElement { v_flex() .gap_6() .children(vec![ example_group_with_title( "States", vec![ single_example( "Unselected", Checkbox::new("checkbox_unselected", ToggleState::Unselected) .into_any_element(), ), single_example( "Placeholder", Checkbox::new("checkbox_indeterminate", ToggleState::Selected) .placeholder(true) .into_any_element(), ), single_example( "Indeterminate", Checkbox::new("checkbox_indeterminate", ToggleState::Indeterminate) .into_any_element(), ), single_example( "Selected", Checkbox::new("checkbox_selected", ToggleState::Selected) .into_any_element(), ), ], ), example_group_with_title( "Styles", vec![ single_example( "Default", Checkbox::new("checkbox_default", ToggleState::Selected) .into_any_element(), ), single_example( "Filled", Checkbox::new("checkbox_filled", ToggleState::Selected) .fill() .into_any_element(), ), single_example( "ElevationBased", Checkbox::new("checkbox_elevation", ToggleState::Selected) .style(ToggleStyle::ElevationBased(ElevationIndex::EditorSurface)) .into_any_element(), ), single_example( "Custom Color", Checkbox::new("checkbox_custom", ToggleState::Selected) .style(ToggleStyle::Custom(hsla(142.0 / 360., 0.68, 0.45, 0.7))) .into_any_element(), ), ], ), example_group_with_title( "Disabled", vec![ single_example( "Unselected", Checkbox::new("checkbox_disabled_unselected", ToggleState::Unselected) .disabled(true) .into_any_element(), ), single_example( "Selected", Checkbox::new("checkbox_disabled_selected", ToggleState::Selected) .disabled(true) .into_any_element(), ), ], ), example_group_with_title( "With Label", vec![single_example( "Default", Checkbox::new("checkbox_with_label", ToggleState::Selected) .label("Always save on quit") .into_any_element(), )], ), ]) .into_any_element() } } // View this component preview using `workspace: open component-preview` impl ComponentPreview for Switch { fn preview(_window: &mut Window, _cx: &mut App) -> AnyElement { v_flex() .gap_6() .children(vec![ example_group_with_title( "States", vec![ single_example( "Off", Switch::new("switch_off", ToggleState::Unselected) .on_click(|_, _, _cx| {}) .into_any_element(), ), single_example( "On", Switch::new("switch_on", ToggleState::Selected) .on_click(|_, _, _cx| {}) .into_any_element(), ), ], ), example_group_with_title( "Disabled", vec![ single_example( "Off", Switch::new("switch_disabled_off", ToggleState::Unselected) .disabled(true) .into_any_element(), ), single_example( "On", Switch::new("switch_disabled_on", ToggleState::Selected) .disabled(true) .into_any_element(), ), ], ), example_group_with_title( "With Label", vec![ single_example( "Label", Switch::new("switch_with_label", ToggleState::Selected) .label("Always save on quit") .into_any_element(), ), // TODO: Where did theme_preview_keybinding go? // single_example( // "Keybinding", // Switch::new("switch_with_keybinding", ToggleState::Selected) // .key_binding(theme_preview_keybinding("cmd-shift-e")) // .into_any_element(), // ), ], ), ]) .into_any_element() } } // View this component preview using `workspace: open component-preview` impl ComponentPreview for CheckboxWithLabel { fn preview(_window: &mut Window, _cx: &mut App) -> AnyElement { v_flex() .gap_6() .children(vec![example_group_with_title( "States", vec![ single_example( "Unselected", CheckboxWithLabel::new( "checkbox_with_label_unselected", Label::new("Always save on quit"), ToggleState::Unselected, |_, _, _| {}, ) .into_any_element(), ), single_example( "Indeterminate", CheckboxWithLabel::new( "checkbox_with_label_indeterminate", Label::new("Always save on quit"), ToggleState::Indeterminate, |_, _, _| {}, ) .into_any_element(), ), single_example( "Selected", CheckboxWithLabel::new( "checkbox_with_label_selected", Label::new("Always save on quit"), ToggleState::Selected, |_, _, _| {}, ) .into_any_element(), ), ], )]) .into_any_element() } }