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

22
crates/collab_ui/src/collab_panel.rs
View file

@ -841,7 +841,7 @@ impl CollabPanel {
ListItem::new(SharedString::from(user.github_login.clone()))
.start_slot(Avatar::new(user.avatar_uri.clone()))
.child(Label::new(user.github_login.clone()))
.selected(is_selected)
.toggle_state(is_selected)
.end_slot(if is_pending {
Label::new("Calling").color(Color::Muted).into_any_element()
} else if is_current_user {
@ -894,7 +894,7 @@ impl CollabPanel {
.into();
ListItem::new(project_id as usize)
.selected(is_selected)
.toggle_state(is_selected)
.on_click(cx.listener(move |this, _, cx| {
this.workspace
.update(cx, |workspace, cx| {
@ -924,7 +924,7 @@ impl CollabPanel {
let id = peer_id.map_or(usize::MAX, |id| id.as_u64() as usize);
ListItem::new(("screen", id))
.selected(is_selected)
.toggle_state(is_selected)
.start_slot(
h_flex()
.gap_1()
@ -964,7 +964,7 @@ impl CollabPanel {
let channel_store = self.channel_store.read(cx);
let has_channel_buffer_changed = channel_store.has_channel_buffer_changed(channel_id);
ListItem::new("channel-notes")
.selected(is_selected)
.toggle_state(is_selected)
.on_click(cx.listener(move |this, _, cx| {
this.open_channel_notes(channel_id, cx);
}))
@ -996,7 +996,7 @@ impl CollabPanel {
let channel_store = self.channel_store.read(cx);
let has_messages_notification = channel_store.has_new_messages(channel_id);
ListItem::new("channel-chat")
.selected(is_selected)
.toggle_state(is_selected)
.on_click(cx.listener(move |this, _, cx| {
this.join_channel_chat(channel_id, cx);
}))
@ -2253,7 +2253,7 @@ impl CollabPanel {
})
.inset(true)
.end_slot::<AnyElement>(button)
.selected(is_selected),
.toggle_state(is_selected),
)
}
@ -2270,7 +2270,7 @@ impl CollabPanel {
let item = ListItem::new(github_login.clone())
.indent_level(1)
.indent_step_size(px(20.))
.selected(is_selected)
.toggle_state(is_selected)
.child(
h_flex()
.w_full()
@ -2381,7 +2381,7 @@ impl CollabPanel {
ListItem::new(github_login.clone())
.indent_level(1)
.indent_step_size(px(20.))
.selected(is_selected)
.toggle_state(is_selected)
.child(
h_flex()
.w_full()
@ -2425,7 +2425,7 @@ impl CollabPanel {
];
ListItem::new(("channel-invite", channel.id.0 as usize))
.selected(is_selected)
.toggle_state(is_selected)
.child(
h_flex()
.w_full()
@ -2448,7 +2448,7 @@ impl CollabPanel {
ListItem::new("contact-placeholder")
.child(Icon::new(IconName::Plus))
.child(Label::new("Add a Contact"))
.selected(is_selected)
.toggle_state(is_selected)
.on_click(cx.listener(|this, _, cx| this.toggle_contact_finder(cx)))
}
@ -2547,7 +2547,7 @@ impl CollabPanel {
// Add one level of depth for the disclosure arrow.
.indent_level(depth + 1)
.indent_step_size(px(20.))
.selected(is_selected || is_active)
.toggle_state(is_selected || is_active)
.toggle(disclosed)
.on_toggle(
cx.listener(move |this, _, cx| {

14
crates/collab_ui/src/collab_panel/channel_modal.rs
View file

@ -89,15 +89,15 @@ impl ChannelModal {
cx.notify()
}
fn set_channel_visibility(&mut self, selection: &Selection, cx: &mut ViewContext<Self>) {
fn set_channel_visibility(&mut self, selection: &ToggleState, cx: &mut ViewContext<Self>) {
self.channel_store.update(cx, |channel_store, cx| {
channel_store
.set_channel_visibility(
self.channel_id,
match selection {
Selection::Unselected => ChannelVisibility::Members,
Selection::Selected => ChannelVisibility::Public,
Selection::Indeterminate => return,
ToggleState::Unselected => ChannelVisibility::Members,
ToggleState::Selected => ChannelVisibility::Public,
ToggleState::Indeterminate => return,
},
cx,
)
@ -159,9 +159,9 @@ impl Render for ChannelModal {
"is-public",
Label::new("Public").size(LabelSize::Small),
if visibility == ChannelVisibility::Public {
ui::Selection::Selected
ui::ToggleState::Selected
} else {
ui::Selection::Unselected
ui::ToggleState::Unselected
},
cx.listener(Self::set_channel_visibility),
))
@ -386,7 +386,7 @@ impl PickerDelegate for ChannelModalDelegate {
ListItem::new(ix)
.inset(true)
.spacing(ListItemSpacing::Sparse)
.selected(selected)
.toggle_state(selected)
.start_slot(Avatar::new(user.avatar_uri.clone()))
.child(Label::new(user.github_login.clone()))
.end_slot(h_flex().gap_2().map(|slot| {

2
crates/collab_ui/src/collab_panel/contact_finder.rs
View file

@ -151,7 +151,7 @@ impl PickerDelegate for ContactFinderDelegate {
ListItem::new(ix)
.inset(true)
.spacing(ListItemSpacing::Sparse)
.selected(selected)
.toggle_state(selected)
.start_slot(Avatar::new(user.avatar_uri.clone()))
.child(Label::new(user.github_login.clone()))
.end_slot::<Icon>(icon_path.map(Icon::from_path)),