Use sparse spacing for ListItems in Pickers

This commit is contained in:
Marshall Bowers 2023-12-21 16:33:41 -05:00
parent dc09dbc98c
commit 71a222abcb
14 changed files with 110 additions and 61 deletions

View File

@ -11,7 +11,7 @@ use gpui::{
};
use picker::{Picker, PickerDelegate};
use std::sync::Arc;
use ui::{prelude::*, Avatar, Checkbox, ContextMenu, ListItem};
use ui::{prelude::*, Avatar, Checkbox, ContextMenu, ListItem, ListItemSpacing};
use util::TryFutureExt;
use workspace::ModalView;
@ -366,6 +366,7 @@ impl PickerDelegate for ChannelModalDelegate {
Some(
ListItem::new(ix)
.inset(true)
.spacing(ListItemSpacing::Sparse)
.selected(selected)
.start_slot(Avatar::new(user.avatar_uri.clone()))
.child(Label::new(user.github_login.clone()))

View File

@ -6,7 +6,7 @@ use gpui::{
use picker::{Picker, PickerDelegate};
use std::sync::Arc;
use theme::ActiveTheme as _;
use ui::{prelude::*, Avatar, ListItem};
use ui::{prelude::*, Avatar, ListItem, ListItemSpacing};
use util::{ResultExt as _, TryFutureExt};
use workspace::ModalView;
@ -153,6 +153,7 @@ impl PickerDelegate for ContactFinderDelegate {
Some(
ListItem::new(ix)
.inset(true)
.spacing(ListItemSpacing::Sparse)
.selected(selected)
.start_slot(Avatar::new(user.avatar_uri.clone()))
.child(Label::new(user.github_login.clone()))

View File

@ -11,7 +11,7 @@ use gpui::{
};
use picker::{Picker, PickerDelegate};
use ui::{h_stack, prelude::*, v_stack, HighlightedLabel, KeyBinding, ListItem};
use ui::{h_stack, prelude::*, v_stack, HighlightedLabel, KeyBinding, ListItem, ListItemSpacing};
use util::{
channel::{parse_zed_link, ReleaseChannel, RELEASE_CHANNEL},
ResultExt,
@ -308,20 +308,24 @@ impl PickerDelegate for CommandPaletteDelegate {
let r#match = self.matches.get(ix)?;
let command = self.commands.get(r#match.candidate_id)?;
Some(
ListItem::new(ix).inset(true).selected(selected).child(
h_stack()
.w_full()
.justify_between()
.child(HighlightedLabel::new(
command.name.clone(),
r#match.positions.clone(),
))
.children(KeyBinding::for_action_in(
&*command.action,
&self.previous_focus_handle,
cx,
)),
),
ListItem::new(ix)
.inset(true)
.spacing(ListItemSpacing::Sparse)
.selected(selected)
.child(
h_stack()
.w_full()
.justify_between()
.child(HighlightedLabel::new(
command.name.clone(),
r#match.positions.clone(),
))
.children(KeyBinding::for_action_in(
&*command.action,
&self.previous_focus_handle,
cx,
)),
),
)
}
}

View File

@ -15,7 +15,7 @@ use std::{
},
};
use text::Point;
use ui::{prelude::*, HighlightedLabel, ListItem};
use ui::{prelude::*, HighlightedLabel, ListItem, ListItemSpacing};
use util::{paths::PathLikeWithPosition, post_inc, ResultExt};
use workspace::{ModalView, Workspace};
@ -714,13 +714,18 @@ impl PickerDelegate for FileFinderDelegate {
self.labels_for_match(path_match, cx, ix);
Some(
ListItem::new(ix).inset(true).selected(selected).child(
v_stack()
.child(HighlightedLabel::new(file_name, file_name_positions))
.child(
HighlightedLabel::new(full_path, full_path_positions).color(Color::Muted),
),
),
ListItem::new(ix)
.spacing(ListItemSpacing::Sparse)
.inset(true)
.selected(selected)
.child(
v_stack()
.child(HighlightedLabel::new(file_name, file_name_positions))
.child(
HighlightedLabel::new(full_path, full_path_positions)
.color(Color::Muted),
),
),
)
}
}

View File

@ -12,7 +12,7 @@ use language::{Buffer, LanguageRegistry};
use picker::{Picker, PickerDelegate};
use project::Project;
use std::sync::Arc;
use ui::{prelude::*, HighlightedLabel, ListItem};
use ui::{prelude::*, HighlightedLabel, ListItem, ListItemSpacing};
use util::ResultExt;
use workspace::{ModalView, Workspace};
@ -226,6 +226,7 @@ impl PickerDelegate for LanguageSelectorDelegate {
Some(
ListItem::new(ix)
.inset(true)
.spacing(ListItemSpacing::Sparse)
.selected(selected)
.child(HighlightedLabel::new(label, mat.positions.clone())),
)

View File

@ -18,7 +18,7 @@ use std::{
};
use theme::{color_alpha, ActiveTheme, ThemeSettings};
use ui::{prelude::*, ListItem};
use ui::{prelude::*, ListItem, ListItemSpacing};
use util::ResultExt;
use workspace::ModalView;
@ -296,12 +296,16 @@ impl PickerDelegate for OutlineViewDelegate {
StyledText::new(outline_item.text.clone()).with_highlights(&text_style, highlights);
Some(
ListItem::new(ix).inset(true).selected(selected).child(
div()
.text_ui()
.pl(rems(outline_item.depth as f32))
.child(styled_text),
),
ListItem::new(ix)
.inset(true)
.spacing(ListItemSpacing::Sparse)
.selected(selected)
.child(
div()
.text_ui()
.pl(rems(outline_item.depth as f32))
.child(styled_text),
),
)
}
}

View File

@ -5,7 +5,7 @@ use gpui::{
View, ViewContext, WindowContext,
};
use std::{cmp, sync::Arc};
use ui::{prelude::*, v_stack, Color, Divider, Label, ListItem};
use ui::{prelude::*, v_stack, Color, Divider, Label, ListItem, ListItemSpacing};
use workspace::ModalView;
pub struct Picker<D: PickerDelegate> {
@ -293,6 +293,7 @@ impl<D: PickerDelegate> Render for Picker<D> {
el.child(
ListItem::new("empty_state")
.inset(true)
.spacing(ListItemSpacing::Sparse)
.disabled(true)
.child(Label::new("No matches").color(Color::Muted)),
)

View File

@ -11,7 +11,7 @@ use std::{borrow::Cow, cmp::Reverse, sync::Arc};
use theme::ActiveTheme;
use util::ResultExt;
use workspace::{
ui::{v_stack, Color, Label, LabelCommon, LabelLike, ListItem, Selectable},
ui::{v_stack, Color, Label, LabelCommon, LabelLike, ListItem, ListItemSpacing, Selectable},
Workspace,
};
@ -237,17 +237,21 @@ impl PickerDelegate for ProjectSymbolsDelegate {
);
Some(
ListItem::new(ix).inset(true).selected(selected).child(
// todo!() combine_syntax_and_fuzzy_match_highlights()
v_stack()
.child(
LabelLike::new().child(
StyledText::new(label)
.with_highlights(&cx.text_style().clone(), highlights),
),
)
.child(Label::new(path).color(Color::Muted)),
),
ListItem::new(ix)
.inset(true)
.spacing(ListItemSpacing::Sparse)
.selected(selected)
.child(
// todo!() combine_syntax_and_fuzzy_match_highlights()
v_stack()
.child(
LabelLike::new().child(
StyledText::new(label)
.with_highlights(&cx.text_style().clone(), highlights),
),
)
.child(Label::new(path).color(Color::Muted)),
),
)
}
}

View File

@ -10,7 +10,7 @@ use highlighted_workspace_location::HighlightedWorkspaceLocation;
use ordered_float::OrderedFloat;
use picker::{Picker, PickerDelegate};
use std::sync::Arc;
use ui::{prelude::*, ListItem};
use ui::{prelude::*, ListItem, ListItemSpacing};
use util::paths::PathExt;
use workspace::{
notifications::simple_message_notification::MessageNotification, ModalView, Workspace,
@ -251,13 +251,17 @@ impl PickerDelegate for RecentProjectsDelegate {
);
Some(
ListItem::new(ix).inset(true).selected(selected).child(
v_stack()
.child(highlighted_location.names)
.when(self.render_paths, |this| {
this.children(highlighted_location.paths)
}),
),
ListItem::new(ix)
.inset(true)
.spacing(ListItemSpacing::Sparse)
.selected(selected)
.child(
v_stack()
.child(highlighted_location.names)
.when(self.render_paths, |this| {
this.children(highlighted_location.paths)
}),
),
)
}
}

View File

@ -4,7 +4,7 @@ use gpui::{
};
use picker::{Picker, PickerDelegate};
use std::sync::Arc;
use ui::prelude::*;
use ui::{prelude::*, ListItemSpacing};
use ui::{Label, ListItem};
pub struct PickerStory {
@ -62,6 +62,7 @@ impl PickerDelegate for Delegate {
Some(
ListItem::new(ix)
.inset(true)
.spacing(ListItemSpacing::Sparse)
.selected(selected)
.child(Label::new(candidate)),
)

View File

@ -9,7 +9,7 @@ use picker::{Picker, PickerDelegate};
use settings::{update_settings_file, SettingsStore};
use std::sync::Arc;
use theme::{Theme, ThemeMeta, ThemeRegistry, ThemeSettings};
use ui::{prelude::*, v_stack, ListItem};
use ui::{prelude::*, v_stack, ListItem, ListItemSpacing};
use util::ResultExt;
use workspace::{ui::HighlightedLabel, ModalView, Workspace};
@ -276,6 +276,7 @@ impl PickerDelegate for ThemeSelectorDelegate {
Some(
ListItem::new(ix)
.inset(true)
.spacing(ListItemSpacing::Sparse)
.selected(selected)
.child(HighlightedLabel::new(
theme_match.string.clone(),

View File

@ -5,11 +5,19 @@ use smallvec::SmallVec;
use crate::{prelude::*, Disclosure};
#[derive(Debug, PartialEq, Eq, PartialOrd, Ord, Hash, Clone, Copy, Default)]
pub enum ListItemSpacing {
#[default]
Dense,
Sparse,
}
#[derive(IntoElement)]
pub struct ListItem {
id: ElementId,
disabled: bool,
selected: bool,
spacing: ListItemSpacing,
indent_level: usize,
indent_step_size: Pixels,
/// A slot for content that appears before the children, like an icon or avatar.
@ -35,6 +43,7 @@ impl ListItem {
id: id.into(),
disabled: false,
selected: false,
spacing: ListItemSpacing::Dense,
indent_level: 0,
indent_step_size: px(12.),
start_slot: None,
@ -50,6 +59,11 @@ impl ListItem {
}
}
pub fn spacing(mut self, spacing: ListItemSpacing) -> Self {
self.spacing = spacing;
self
}
pub fn on_click(mut self, handler: impl Fn(&ClickEvent, &mut WindowContext) + 'static) -> Self {
self.on_click = Some(Box::new(handler));
self
@ -165,6 +179,10 @@ impl RenderOnce for ListItem {
.relative()
.gap_1()
.px_2()
.map(|this| match self.spacing {
ListItemSpacing::Dense => this,
ListItemSpacing::Sparse => this.py_1(),
})
.group("list_item")
.when(self.inset && !self.disabled, |this| {
this

View File

@ -8,7 +8,7 @@ use gpui::{
};
use picker::{Picker, PickerDelegate};
use std::sync::Arc;
use ui::{v_stack, HighlightedLabel, ListItem, Selectable};
use ui::{v_stack, HighlightedLabel, ListItem, ListItemSpacing, Selectable};
use util::ResultExt;
use workspace::{ModalView, Toast, Workspace};
@ -134,6 +134,7 @@ impl BranchListDelegate {
impl PickerDelegate for BranchListDelegate {
type ListItem = ListItem;
fn placeholder_text(&self) -> Arc<str> {
"Select branch...".into()
}
@ -281,8 +282,10 @@ impl PickerDelegate for BranchListDelegate {
.collect();
Some(
ListItem::new(SharedString::from(format!("vcs-menu-{ix}")))
.start_slot(HighlightedLabel::new(shortened_branch_name, highlights))
.selected(selected),
.inset(true)
.spacing(ListItemSpacing::Sparse)
.selected(selected)
.start_slot(HighlightedLabel::new(shortened_branch_name, highlights)),
)
}
// fn render_header(

View File

@ -8,7 +8,7 @@ use picker::{Picker, PickerDelegate};
use project::Fs;
use settings::{update_settings_file, Settings};
use std::sync::Arc;
use ui::{prelude::*, ListItem};
use ui::{prelude::*, ListItem, ListItemSpacing};
use util::ResultExt;
use workspace::{ui::HighlightedLabel, ModalView, Workspace};
@ -198,8 +198,9 @@ impl PickerDelegate for BaseKeymapSelectorDelegate {
Some(
ListItem::new(ix)
.selected(selected)
.inset(true)
.spacing(ListItemSpacing::Sparse)
.selected(selected)
.child(HighlightedLabel::new(
keymap_match.string.clone(),
keymap_match.positions.clone(),