Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Toggle & Switch (#21979)

Browse source 
![CleanShot 2024-12-13 at 11 27
39@2x](https://github.com/user-attachments/assets/7c7828c0-c5c7-4dc6-931e-722366d4f15a)

- Adds the Switch component
- Updates `Selected`, `Selectable` -> `ToggleState`, `Toggleable`
- Adds `checkbox` and `switch` functions to align better with other
elements in our layout system.

We decided not to merge Switch and Checkbox. However, in a followup I'll
introduce a Toggle or AnyToggle enum so we can update
`CheckboxWithLabel` -> `ToggleWithLabel` as this component will work
exactly the same with either a Checkbox or a Switch.

Release Notes:

- N/A
This commit is contained in:
Nate Butler 2024-12-13 14:23:02 -05:00 • committed by GitHub
parent 2f2e7f0317
commit 19d6e067af
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
77 changed files with 626 additions and 453 deletions
Download patch file Download diff file Expand all files Collapse all files

4
crates/ui/src/components.rs
View file

@ -1,6 +1,5 @@
mod avatar;
mod button;
mod checkbox;
mod content_group;
mod context_menu;
mod disclosure;
@ -28,6 +27,7 @@ mod stack;
mod tab;
mod tab_bar;
mod table;
mod toggle;
mod tool_strip;
mod tooltip;
@ -36,7 +36,6 @@ mod stories;
pub use avatar::*;
pub use button::*;
pub use checkbox::*;
pub use content_group::*;
pub use context_menu::*;
pub use disclosure::*;
@ -64,6 +63,7 @@ pub use stack::*;
pub use tab::*;
pub use tab_bar::*;
pub use table::*;
pub use toggle::*;
pub use tool_strip::*;
pub use tooltip::*;

12
crates/ui/src/components/button/button.rs
View file

@ -194,7 +194,7 @@ impl Button {
}
}
impl Selectable for Button {
impl Toggleable for Button {
/// Sets the selected state of the button.
///
/// This method allows the selection state of the button to be specified.
@ -213,8 +213,8 @@ impl Selectable for Button {
/// ```
///
/// Use [`selected_style`](Button::selected_style) to change the style of the button when it is selected.
fn selected(mut self, selected: bool) -> Self {
self.base = self.base.selected(selected);
fn toggle_state(mut self, selected: bool) -> Self {
self.base = self.base.toggle_state(selected);
self
}
}
@ -405,7 +405,7 @@ impl RenderOnce for Button {
this.children(self.icon.map(|icon| {
ButtonIcon::new(icon)
.disabled(is_disabled)
.selected(is_selected)
.toggle_state(is_selected)
.selected_icon(self.selected_icon)
.selected_icon_color(self.selected_icon_color)
.size(self.icon_size)
@ -429,7 +429,7 @@ impl RenderOnce for Button {
this.children(self.icon.map(|icon| {
ButtonIcon::new(icon)
.disabled(is_disabled)
.selected(is_selected)
.toggle_state(is_selected)
.selected_icon(self.selected_icon)
.selected_icon_color(self.selected_icon_color)
.size(self.icon_size)
@ -500,7 +500,7 @@ impl ComponentPreview for Button {
),
single_example(
"Selected",
Button::new("selected", "Selected").selected(true),
Button::new("selected", "Selected").toggle_state(true),
),
],
),

4
crates/ui/src/components/button/button_icon.rs
View file

@ -65,8 +65,8 @@ impl Disableable for ButtonIcon {
}
}
impl Selectable for ButtonIcon {
fn selected(mut self, selected: bool) -> Self {
impl Toggleable for ButtonIcon {
fn toggle_state(mut self, selected: bool) -> Self {
self.selected = selected;
self
}

6
crates/ui/src/components/button/button_like.rs
View file

@ -6,7 +6,7 @@ use smallvec::SmallVec;
use crate::{prelude::*, DynamicSpacing, ElevationIndex};
/// A trait for buttons that can be Selected. Enables setting the [`ButtonStyle`] of a button when it is selected.
pub trait SelectableButton: Selectable {
pub trait SelectableButton: Toggleable {
fn selected_style(self, style: ButtonStyle) -> Self;
}
@ -400,8 +400,8 @@ impl Disableable for ButtonLike {
}
}
impl Selectable for ButtonLike {
fn selected(mut self, selected: bool) -> Self {
impl Toggleable for ButtonLike {
fn toggle_state(mut self, selected: bool) -> Self {
self.selected = selected;
self
}

8
crates/ui/src/components/button/icon_button.rs
View file

@ -66,9 +66,9 @@ impl Disableable for IconButton {
}
}
impl Selectable for IconButton {
fn selected(mut self, selected: bool) -> Self {
self.base = self.base.selected(selected);
impl Toggleable for IconButton {
fn toggle_state(mut self, selected: bool) -> Self {
self.base = self.base.toggle_state(selected);
self
}
}
@ -157,7 +157,7 @@ impl RenderOnce for IconButton {
.child(
ButtonIcon::new(self.icon)
.disabled(is_disabled)
.selected(is_selected)
.toggle_state(is_selected)
.selected_icon(self.selected_icon)
.when_some(selected_style, |this, style| this.selected_style(style))
.size(self.icon_size)

6
crates/ui/src/components/button/toggle_button.rs
View file

@ -57,9 +57,9 @@ impl ToggleButton {
}
}
impl Selectable for ToggleButton {
fn selected(mut self, selected: bool) -> Self {
self.base = self.base.selected(selected);
impl Toggleable for ToggleButton {
fn toggle_state(mut self, selected: bool) -> Self {
self.base = self.base.toggle_state(selected);
self
}
}

248
crates/ui/src/components/checkbox.rs
View file

@ -1,248 +0,0 @@
#![allow(missing_docs)]
use gpui::{div, prelude::*, ElementId, IntoElement, Styled, WindowContext};
use crate::prelude::*;
use crate::{Color, Icon, IconName, Selection};
/// # 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)]
pub struct Checkbox {
id: ElementId,
checked: Selection,
disabled: bool,
on_click: Option<Box<dyn Fn(&Selection, &mut WindowContext) + 'static>>,
}
impl Checkbox {
pub fn new(id: impl Into<ElementId>, checked: Selection) -> Self {
Self {
id: id.into(),
checked,
disabled: false,
on_click: None,
}
}
pub fn disabled(mut self, disabled: bool) -> Self {
self.disabled = disabled;
self
}
pub fn on_click(mut self, handler: impl Fn(&Selection, &mut WindowContext) + 'static) -> Self {
self.on_click = Some(Box::new(handler));
self
}
}
impl RenderOnce for Checkbox {
fn render(self, cx: &mut WindowContext) -> impl IntoElement {
let group_id = format!("checkbox_group_{:?}", self.id);
let icon = match self.checked {
Selection::Selected => Some(Icon::new(IconName::Check).size(IconSize::Small).color(
if self.disabled {
Color::Disabled
} else {
Color::Selected
},
)),
Selection::Indeterminate => Some(
Icon::new(IconName::Dash)
.size(IconSize::Small)
.color(if self.disabled {
Color::Disabled
} else {
Color::Selected
}),
),
Selection::Unselected => None,
};
let selected =
self.checked == Selection::Selected || self.checked == Selection::Indeterminate;
let (bg_color, border_color) = match (self.disabled, selected) {
(true, _) => (
cx.theme().colors().ghost_element_disabled,
cx.theme().colors().border_disabled,
),
(false, true) => (
cx.theme().colors().element_selected,
cx.theme().colors().border,
),
(false, false) => (
cx.theme().colors().element_background,
cx.theme().colors().border,
),
};
h_flex()
.id(self.id)
.justify_center()
.items_center()
.size(DynamicSpacing::Base20.rems(cx))
.group(group_id.clone())
.child(
div()
.flex()
.flex_none()
.justify_center()
.items_center()
.m(DynamicSpacing::Base04.px(cx))
.size(DynamicSpacing::Base16.rems(cx))
.rounded_sm()
.bg(bg_color)
.border_1()
.border_color(border_color)
.when(!self.disabled, |this| {
this.group_hover(group_id.clone(), |el| {
el.bg(cx.theme().colors().element_hover)
})
})
.children(icon),
)
.when_some(
self.on_click.filter(|_| !self.disabled),
|this, on_click| this.on_click(move |_, cx| on_click(&self.checked.inverse(), cx)),
)
}
}
impl ComponentPreview for Checkbox {
fn description() -> impl Into<Option<&'static str>> {
"A checkbox lets people choose between a pair of opposing states, like enabled and disabled, using a different appearance to indicate each state."
}
fn examples(_: &mut WindowContext) -> Vec<ComponentExampleGroup<Self>> {
vec![
example_group_with_title(
"Default",
vec![
single_example(
"Unselected",
Checkbox::new("checkbox_unselected", Selection::Unselected),
),
single_example(
"Indeterminate",
Checkbox::new("checkbox_indeterminate", Selection::Indeterminate),
),
single_example(
"Selected",
Checkbox::new("checkbox_selected", Selection::Selected),
),
],
),
example_group_with_title(
"Disabled",
vec![
single_example(
"Unselected",
Checkbox::new("checkbox_disabled_unselected", Selection::Unselected)
.disabled(true),
),
single_example(
"Indeterminate",
Checkbox::new("checkbox_disabled_indeterminate", Selection::Indeterminate)
.disabled(true),
),
single_example(
"Selected",
Checkbox::new("checkbox_disabled_selected", Selection::Selected)
.disabled(true),
),
],
),
]
}
}
use std::sync::Arc;
/// A [`Checkbox`] that has a [`Label`].
#[derive(IntoElement)]
pub struct CheckboxWithLabel {
id: ElementId,
label: Label,
checked: Selection,
on_click: Arc<dyn Fn(&Selection, &mut WindowContext) + 'static>,
}
impl CheckboxWithLabel {
pub fn new(
id: impl Into<ElementId>,
label: Label,
checked: Selection,
on_click: impl Fn(&Selection, &mut WindowContext) + 'static,
) -> Self {
Self {
id: id.into(),
label,
checked,
on_click: Arc::new(on_click),
}
}
}
impl RenderOnce for CheckboxWithLabel {
fn render(self, cx: &mut WindowContext) -> impl IntoElement {
h_flex()
.gap(DynamicSpacing::Base08.rems(cx))
.child(Checkbox::new(self.id.clone(), self.checked).on_click({
let on_click = self.on_click.clone();
move |checked, cx| {
(on_click)(checked, cx);
}
}))
.child(
div()
.id(SharedString::from(format!("{}-label", self.id)))
.on_click(move |_event, cx| {
(self.on_click)(&self.checked.inverse(), cx);
})
.child(self.label),
)
}
}
impl ComponentPreview for CheckboxWithLabel {
fn description() -> impl Into<Option<&'static str>> {
"A checkbox with an associated label, allowing users to select an option while providing a descriptive text."
}
fn examples(_: &mut WindowContext) -> Vec<ComponentExampleGroup<Self>> {
vec![example_group(vec![
single_example(
"Unselected",
CheckboxWithLabel::new(
"checkbox_with_label_unselected",
Label::new("Always save on quit"),
Selection::Unselected,
|_, _| {},
),
),
single_example(
"Indeterminate",
CheckboxWithLabel::new(
"checkbox_with_label_indeterminate",
Label::new("Always save on quit"),
Selection::Indeterminate,
|_, _| {},
),
),
single_example(
"Selected",
CheckboxWithLabel::new(
"checkbox_with_label_selected",
Label::new("Always save on quit"),
Selection::Selected,
|_, _| {},
),
),
])]
}
}

4
crates/ui/src/components/context_menu.rs
View file

@ -434,7 +434,7 @@ impl Render for ContextMenu {
ListItem::new(ix)
.inset(true)
.disabled(*disabled)
.selected(Some(ix) == self.selected_index)
.toggle_state(Some(ix) == self.selected_index)
.when_some(*toggle, |list_item, (position, toggled)| {
let contents = if toggled {
v_flex().flex_none().child(
@ -495,7 +495,7 @@ impl Render for ContextMenu {
let selectable = *selectable;
ListItem::new(ix)
.inset(true)
.selected(if selectable {
.toggle_state(if selectable {
Some(ix) == self.selected_index
} else {
false

6
crates/ui/src/components/disclosure.rs
View file

@ -34,8 +34,8 @@ impl Disclosure {
}
}
impl Selectable for Disclosure {
fn selected(mut self, selected: bool) -> Self {
impl Toggleable for Disclosure {
fn toggle_state(mut self, selected: bool) -> Self {
self.selected = selected;
self
}
@ -65,7 +65,7 @@ impl RenderOnce for Disclosure {
.shape(IconButtonShape::Square)
.icon_color(Color::Muted)
.icon_size(IconSize::Small)
.selected(self.selected)
.toggle_state(self.selected)
.when_some(self.on_toggle, move |this, on_toggle| {
this.on_click(move |event, cx| on_toggle(event, cx))
})

4
crates/ui/src/components/dropdown_menu.rs
View file

@ -85,8 +85,8 @@ impl Disableable for DropdownMenuTrigger {
}
}
impl Selectable for DropdownMenuTrigger {
fn selected(mut self, selected: bool) -> Self {
impl Toggleable for DropdownMenuTrigger {
fn toggle_state(mut self, selected: bool) -> Self {
self.selected = selected;
self
}

4
crates/ui/src/components/list/list_header.rs
View file

@ -73,8 +73,8 @@ impl ListHeader {
}
}
impl Selectable for ListHeader {
fn selected(mut self, selected: bool) -> Self {
impl Toggleable for ListHeader {
fn toggle_state(mut self, selected: bool) -> Self {
self.selected = selected;
self
}

4
crates/ui/src/components/list/list_item.rs
View file

@ -156,8 +156,8 @@ impl Disableable for ListItem {
}
}
impl Selectable for ListItem {
fn selected(mut self, selected: bool) -> Self {
impl Toggleable for ListItem {
fn toggle_state(mut self, selected: bool) -> Self {
self.selected = selected;
self
}

4
crates/ui/src/components/list/list_sub_header.rs
View file

@ -32,8 +32,8 @@ impl ListSubHeader {
}
}
impl Selectable for ListSubHeader {
fn selected(mut self, selected: bool) -> Self {
impl Toggleable for ListSubHeader {
fn toggle_state(mut self, selected: bool) -> Self {
self.selected = selected;
self
}

6
crates/ui/src/components/popover_menu.rs
View file

@ -11,9 +11,9 @@ use gpui::{
use crate::prelude::*;
pub trait PopoverTrigger: IntoElement + Clickable + Selectable + 'static {}
pub trait PopoverTrigger: IntoElement + Clickable + Toggleable + 'static {}
impl<T: IntoElement + Clickable + Selectable + 'static> PopoverTrigger for T {}
impl<T: IntoElement + Clickable + Toggleable + 'static> PopoverTrigger for T {}
pub struct PopoverMenuHandle<M>(Rc<RefCell<Option<PopoverMenuHandleState<M>>>>);
@ -129,7 +129,7 @@ impl<M: ManagedView> PopoverMenu<M> {
pub fn trigger<T: PopoverTrigger>(mut self, t: T) -> Self {
self.child_builder = Some(Box::new(|menu, builder| {
let open = menu.borrow().is_some();
t.selected(open)
t.toggle_state(open)
.when_some(builder, |el, builder| {
el.on_click(move |_, cx| show_menu(&builder, &menu, cx))
})

6
crates/ui/src/components/stories/button.rs
View file

@ -13,11 +13,11 @@ impl Render for ButtonStory {
.child(Story::label("Default"))
.child(Button::new("default_filled", "Click me"))
.child(Story::label("Selected"))
.child(Button::new("selected_filled", "Click me").selected(true))
.child(Button::new("selected_filled", "Click me").toggle_state(true))
.child(Story::label("Selected with `selected_label`"))
.child(
Button::new("selected_label_filled", "Click me")
.selected(true)
.toggle_state(true)
.selected_label("I have been selected"),
)
.child(Story::label("With `label_color`"))
@ -27,7 +27,7 @@ impl Render for ButtonStory {
.child(Story::label("Selected with `icon`"))
.child(
Button::new("filled_and_selected_with_icon", "Click me")
.selected(true)
.toggle_state(true)
.icon(IconName::FileGit),
)
.child(Story::label("Default (Subtle)"))

6
crates/ui/src/components/stories/icon_button.rs
View file

@ -21,7 +21,7 @@ impl Render for IconButtonStory {
let selected_button = StoryItem::new(
"Selected",
IconButton::new("selected_icon_button", IconName::Hash).selected(true),
IconButton::new("selected_icon_button", IconName::Hash).toggle_state(true),
)
.description("Displays an icon button that is selected.")
.usage(
@ -33,7 +33,7 @@ impl Render for IconButtonStory {
let selected_with_selected_icon = StoryItem::new(
"Selected with `selected_icon`",
IconButton::new("selected_with_selected_icon_button", IconName::AudioOn)
.selected(true)
.toggle_state(true)
.selected_icon(IconName::AudioOff),
)
.description(
@ -89,7 +89,7 @@ impl Render for IconButtonStory {
let selected_with_tooltip_button = StoryItem::new(
"Selected with `tooltip`",
IconButton::new("selected_with_tooltip_button", IconName::InlayHint)
.selected(true)
.toggle_state(true)
.tooltip(|cx| Tooltip::text("Toggle inlay hints", cx)),
)
.description("Displays a selected icon button with tooltip.")

6
crates/ui/src/components/stories/tab.rs
View file

@ -48,7 +48,7 @@ impl Render for TabStory {
h_flex()
.child(
Tab::new("tab_1")
.selected(true)
.toggle_state(true)
.position(TabPosition::First)
.child("Tab 1"),
)
@ -85,7 +85,7 @@ impl Render for TabStory {
.child(
Tab::new("tab_4")
.position(TabPosition::Last)
.selected(true)
.toggle_state(true)
.child("Tab 4"),
),
)
@ -100,7 +100,7 @@ impl Render for TabStory {
.child(
Tab::new("tab_2")
.position(TabPosition::Middle(Ordering::Equal))
.selected(true)
.toggle_state(true)
.child("Tab 2"),
)
.child(

2
crates/ui/src/components/stories/tab_bar.rs
View file

@ -13,7 +13,7 @@ impl Render for TabBarStory {
let tabs = (0..tab_count)
.map(|index| {
Tab::new(index)
.selected(index == selected_tab_index)
.toggle_state(index == selected_tab_index)
.position(if index == 0 {
TabPosition::First
} else if index == tab_count - 1 {

2
crates/ui/src/components/stories/toggle_button.rs
View file

@ -68,7 +68,7 @@ impl Render for ToggleButtonStory {
ToggleButton::new(2, "Banana")
.style(ButtonStyle::Filled)
.size(ButtonSize::Large)
.selected(true)
.toggle_state(true)
.middle(),
)
.child(

4
crates/ui/src/components/tab.rs
View file

@ -91,8 +91,8 @@ impl InteractiveElement for Tab {
impl StatefulInteractiveElement for Tab {}
impl Selectable for Tab {
fn selected(mut self, selected: bool) -> Self {
impl Toggleable for Tab {
fn toggle_state(mut self, selected: bool) -> Self {
self.selected = selected;
self
}

409
crates/ui/src/components/toggle.rs Normal file
View file

@ -0,0 +1,409 @@
#![allow(missing_docs)]
use gpui::{div, prelude::*, ElementId, IntoElement, Styled, WindowContext};
use std::sync::Arc;
use crate::prelude::*;
use crate::utils::is_light;
use crate::{Color, Icon, IconName, ToggleState};
/// Creates a new checkbox
pub fn checkbox(id: impl Into<ElementId>, toggle_state: ToggleState) -> Checkbox {
Checkbox::new(id, toggle_state)
}
/// Creates a new switch
pub fn switch(id: impl Into<ElementId>, toggle_state: ToggleState) -> Switch {
Switch::new(id, toggle_state)
}
/// # 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)]
pub struct Checkbox {
id: ElementId,
toggle_state: ToggleState,
disabled: bool,
on_click: Option<Box<dyn Fn(&ToggleState, &mut WindowContext) + 'static>>,
}
impl Checkbox {
pub fn new(id: impl Into<ElementId>, checked: ToggleState) -> Self {
Self {
id: id.into(),
toggle_state: checked,
disabled: false,
on_click: None,
}
}
pub fn disabled(mut self, disabled: bool) -> Self {
self.disabled = disabled;
self
}
pub fn on_click(
mut self,
handler: impl Fn(&ToggleState, &mut WindowContext) + 'static,
) -> Self {
self.on_click = Some(Box::new(handler));
self
}
}
impl RenderOnce for Checkbox {
fn render(self, cx: &mut WindowContext) -> impl IntoElement {
let group_id = format!("checkbox_group_{:?}", self.id);
let icon = match self.toggle_state {
ToggleState::Selected => Some(Icon::new(IconName::Check).size(IconSize::Small).color(
if self.disabled {
Color::Disabled
} else {
Color::Selected
},
)),
ToggleState::Indeterminate => Some(
Icon::new(IconName::Dash)
.size(IconSize::Small)
.color(if self.disabled {
Color::Disabled
} else {
Color::Selected
}),
),
ToggleState::Unselected => None,
};
let selected = self.toggle_state == ToggleState::Selected
|| self.toggle_state == ToggleState::Indeterminate;
let (bg_color, border_color) = match (self.disabled, selected) {
(true, _) => (
cx.theme().colors().ghost_element_disabled,
cx.theme().colors().border_disabled,
),
(false, true) => (
cx.theme().colors().element_selected,
cx.theme().colors().border,
),
(false, false) => (
cx.theme().colors().element_background,
cx.theme().colors().border,
),
};
h_flex()
.id(self.id)
.justify_center()
.items_center()
.size(DynamicSpacing::Base20.rems(cx))
.group(group_id.clone())
.child(
div()
.flex()
.flex_none()
.justify_center()
.items_center()
.m(DynamicSpacing::Base04.px(cx))
.size(DynamicSpacing::Base16.rems(cx))
.rounded_sm()
.bg(bg_color)
.border_1()
.border_color(border_color)
.when(!self.disabled, |this| {
this.group_hover(group_id.clone(), |el| {
el.bg(cx.theme().colors().element_hover)
})
})
.children(icon),
)
.when_some(
self.on_click.filter(|_| !self.disabled),
|this, on_click| {
this.on_click(move |_, cx| on_click(&self.toggle_state.inverse(), cx))
},
)
}
}
/// A [`Checkbox`] that has a [`Label`].
#[derive(IntoElement)]
pub struct CheckboxWithLabel {
id: ElementId,
label: Label,
checked: ToggleState,
on_click: Arc<dyn Fn(&ToggleState, &mut WindowContext) + 'static>,
}
impl CheckboxWithLabel {
pub fn new(
id: impl Into<ElementId>,
label: Label,
checked: ToggleState,
on_click: impl Fn(&ToggleState, &mut WindowContext) + 'static,
) -> Self {
Self {
id: id.into(),
label,
checked,
on_click: Arc::new(on_click),
}
}
}
impl RenderOnce for CheckboxWithLabel {
fn render(self, cx: &mut WindowContext) -> impl IntoElement {
h_flex()
.gap(DynamicSpacing::Base08.rems(cx))
.child(Checkbox::new(self.id.clone(), self.checked).on_click({
let on_click = self.on_click.clone();
move |checked, cx| {
(on_click)(checked, cx);
}
}))
.child(
div()
.id(SharedString::from(format!("{}-label", self.id)))
.on_click(move |_event, cx| {
(self.on_click)(&self.checked.inverse(), cx);
})
.child(self.label),
)
}
}
/// # Switch
///
/// Switches are used to represent opposite states, such as enabled or disabled.
#[derive(IntoElement)]
pub struct Switch {
id: ElementId,
toggle_state: ToggleState,
disabled: bool,
on_click: Option<Box<dyn Fn(&ToggleState, &mut WindowContext) + 'static>>,
}
impl Switch {
pub fn new(id: impl Into<ElementId>, state: ToggleState) -> Self {
Self {
id: id.into(),
toggle_state: state,
disabled: false,
on_click: None,
}
}
pub fn disabled(mut self, disabled: bool) -> Self {
self.disabled = disabled;
self
}
pub fn on_click(
mut self,
handler: impl Fn(&ToggleState, &mut WindowContext) + 'static,
) -> Self {
self.on_click = Some(Box::new(handler));
self
}
}
impl RenderOnce for Switch {
fn render(self, cx: &mut WindowContext) -> 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);
h_flex()
.id(self.id)
.items_center()
.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),
),
)
.when_some(
self.on_click.filter(|_| !self.disabled),
|this, on_click| {
this.on_click(move |_, cx| on_click(&self.toggle_state.inverse(), cx))
},
)
}
}
impl ComponentPreview for Checkbox {
fn description() -> impl Into<Option<&'static str>> {
"A checkbox lets people choose between a pair of opposing states, like enabled and disabled, using a different appearance to indicate each state."
}
fn examples(_: &mut WindowContext) -> Vec<ComponentExampleGroup<Self>> {
vec![
example_group_with_title(
"Default",
vec![
single_example(
"Unselected",
Checkbox::new("checkbox_unselected", ToggleState::Unselected),
),
single_example(
"Indeterminate",
Checkbox::new("checkbox_indeterminate", ToggleState::Indeterminate),
),
single_example(
"Selected",
Checkbox::new("checkbox_selected", ToggleState::Selected),
),
],
),
example_group_with_title(
"Disabled",
vec![
single_example(
"Unselected",
Checkbox::new("checkbox_disabled_unselected", ToggleState::Unselected)
.disabled(true),
),
single_example(
"Indeterminate",
Checkbox::new(
"checkbox_disabled_indeterminate",
ToggleState::Indeterminate,
)
.disabled(true),
),
single_example(
"Selected",
Checkbox::new("checkbox_disabled_selected", ToggleState::Selected)
.disabled(true),
),
],
),
]
}
}
impl ComponentPreview for Switch {
fn description() -> impl Into<Option<&'static str>> {
"A switch toggles between two mutually exclusive states, typically used for enabling or disabling a setting."
}
fn examples(_cx: &mut WindowContext) -> Vec<ComponentExampleGroup<Self>> {
vec![
example_group_with_title(
"Default",
vec![
single_example(
"Off",
Switch::new("switch_off", ToggleState::Unselected).on_click(|_, _cx| {}),
),
single_example(
"On",
Switch::new("switch_on", ToggleState::Selected).on_click(|_, _cx| {}),
),
],
),
example_group_with_title(
"Disabled",
vec![
single_example(
"Off",
Switch::new("switch_disabled_off", ToggleState::Unselected).disabled(true),
),
single_example(
"On",
Switch::new("switch_disabled_on", ToggleState::Selected).disabled(true),
),
],
),
]
}
}
impl ComponentPreview for CheckboxWithLabel {
fn description() -> impl Into<Option<&'static str>> {
"A checkbox with an associated label, allowing users to select an option while providing a descriptive text."
}
fn examples(_: &mut WindowContext) -> Vec<ComponentExampleGroup<Self>> {
vec![example_group(vec![
single_example(
"Unselected",
CheckboxWithLabel::new(
"checkbox_with_label_unselected",
Label::new("Always save on quit"),
ToggleState::Unselected,
|_, _| {},
),
),
single_example(
"Indeterminate",
CheckboxWithLabel::new(
"checkbox_with_label_indeterminate",
Label::new("Always save on quit"),
ToggleState::Indeterminate,
|_, _| {},
),
),
single_example(
"Selected",
CheckboxWithLabel::new(
"checkbox_with_label_selected",
Label::new("Always save on quit"),
ToggleState::Selected,
|_, _| {},
),
),
])]
}
}

2
crates/ui/src/prelude.rs
View file

@ -12,8 +12,8 @@ pub use crate::traits::clickable::*;
pub use crate::traits::component_preview::*;
pub use crate::traits::disableable::*;
pub use crate::traits::fixed::*;
pub use crate::traits::selectable::*;
pub use crate::traits::styled_ext::*;
pub use crate::traits::toggleable::*;
pub use crate::traits::visible_on_hover::*;
pub use crate::DynamicSpacing;
pub use crate::{h_flex, h_group, v_flex, v_group};

2
crates/ui/src/traits.rs
View file

@ -2,6 +2,6 @@ pub mod clickable;
pub mod component_preview;
pub mod disableable;
pub mod fixed;
pub mod selectable;
pub mod styled_ext;
pub mod toggleable;
pub mod visible_on_hover;

17
crates/ui/src/traits/selectable.rs → crates/ui/src/traits/toggleable.rs
View file

@ -1,14 +1,15 @@
/// A trait for elements that can be selected.
/// A trait for elements that can be toggled.
///
/// Generally used to enable "toggle" or "active" behavior and styles on an element through the [`Selection`] status.
pub trait Selectable {
/// Implement this for elements that are visually distinct
/// when in two opposing states, like checkboxes or switches.
pub trait Toggleable {
/// Sets whether the element is selected.
fn selected(self, selected: bool) -> Self;
fn toggle_state(self, selected: bool) -> Self;
}
/// Represents the selection status of an element.
#[derive(Debug, Default, PartialEq, Eq, Hash, Clone, Copy)]
pub enum Selection {
pub enum ToggleState {
/// The element is not selected.
#[default]
Unselected,
@ -18,7 +19,7 @@ pub enum Selection {
Selected,
}
impl Selection {
impl ToggleState {
/// Returns the inverse of the current selection status.
///
/// Indeterminate states become selected if inverted.
@ -30,7 +31,7 @@ impl Selection {
}
}
impl From<bool> for Selection {
impl From<bool> for ToggleState {
fn from(selected: bool) -> Self {
if selected {
Self::Selected
@ -40,7 +41,7 @@ impl From<bool> for Selection {
}
}
impl From<Option<bool>> for Selection {
impl From<Option<bool>> for ToggleState {
fn from(selected: Option<bool>) -> Self {
match selected {
Some(true) => Self::Selected,

8
crates/ui/src/utils.rs
View file

@ -1,5 +1,8 @@
//! UI-related utilities
use gpui::WindowContext;
use theme::ActiveTheme;
mod color_contrast;
mod format_distance;
mod search_input;
@ -9,3 +12,8 @@ pub use color_contrast::*;
pub use format_distance::*;
pub use search_input::*;
pub use with_rem_size::*;
/// Returns true if the current theme is light or vibrant light.
pub fn is_light(cx: &WindowContext) -> bool {
cx.theme().appearance.is_light()
}