oak-team/oak-gpui
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Increase spacing of ListItems inside Pickers (#3764)

Browse Source 
This PR increases the spacing of `ListItem`s inside of `Picker`s to give
the UI some more breathing room.

#### Before

<img width="584" alt="Screenshot 2023-12-21 at 4 36 21 PM"
src="https://github.com/zed-industries/zed/assets/1486634/ed324c0d-e606-4844-b30a-7d5b8b8c9e47">

#### After

<img width="592" alt="Screenshot 2023-12-21 at 4 36 31 PM"
src="https://github.com/zed-industries/zed/assets/1486634/fbbcb230-0048-4310-8e06-07943af6a38e">

Release Notes:

- N/A
This commit is contained in:
Marshall Bowers
2023-12-21 16:43:38 -05:00
committed by GitHub
parent dabc98690c 71a222abcb
commit be08a0b2fd
14 changed files with 128 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
crates/collab_ui2/src/collab_panel/channel_modal.rs
+2 -1
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()))
crates/collab_ui2/src/collab_panel/contact_finder.rs
+2 -1
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()))
crates/command_palette2/src/command_palette.rs
+19 -15
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,
)),
),
)
}
}
crates/file_finder2/src/file_finder.rs
+13 -8
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),
),
),
)
}
}
crates/language_selector2/src/language_selector.rs
+2 -1
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())),
)
crates/outline2/src/outline.rs
+11 -7
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),
),
)
}
}
crates/picker2/src/picker2.rs
+9 -19
View File
@@ -1,11 +1,11 @@
use editor::Editor;
use gpui::{
div, prelude::*, rems, uniform_list, AppContext, DismissEvent, Div, EventEmitter, FocusHandle,
div, prelude::*, uniform_list, AppContext, DismissEvent, Div, EventEmitter, FocusHandle,
FocusableView, Length, MouseButton, MouseDownEvent, Render, Task, UniformListScrollHandle,
View, ViewContext, WindowContext,
};
use std::{cmp, sync::Arc};
use ui::{prelude::*, v_stack, Color, Divider, Label};
use ui::{prelude::*, v_stack, Color, Divider, Label, ListItem, ListItemSpacing};
use workspace::ModalView;
pub struct Picker<D: PickerDelegate> {
@@ -229,21 +229,10 @@ impl<D: PickerDelegate> Render for Picker<D> {
.px_3()
.child(self.editor.clone());
let empty_state = div().p_1().child(
h_stack()
// TODO: This number matches the height of the uniform list items.
// Align these two with a less magic number.
.h(rems(1.4375))
.px_2()
.child(Label::new("No matches").color(Color::Muted)),
);
div()
.key_context("Picker")
.size_full()
.when_some(self.width, |el, width| {
el.w(width)
})
.when_some(self.width, |el, width| el.w(width))
.overflow_hidden()
// This is a bit of a hack to remove the modal styling when we're rendering the `Picker`
// as a part of a modal rather than the entire modal.
@@ -257,9 +246,7 @@ impl<D: PickerDelegate> Render for Picker<D> {
.on_action(cx.listener(Self::cancel))
.on_action(cx.listener(Self::confirm))
.on_action(cx.listener(Self::secondary_confirm))
.child(
picker_editor
)
.child(picker_editor)
.child(Divider::horizontal())
.when(self.delegate.match_count() > 0, |el| {
el.child(
@@ -272,7 +259,6 @@ impl<D: PickerDelegate> Render for Picker<D> {
self.delegate.match_count(),
{
let selected_index = self.delegate.selected_index();
move |picker, visible_range, cx| {
visible_range
.map(|ix| {
@@ -305,7 +291,11 @@ impl<D: PickerDelegate> Render for Picker<D> {
})
.when(self.delegate.match_count() == 0, |el| {
el.child(
empty_state
ListItem::new("empty_state")
.inset(true)
.spacing(ListItemSpacing::Sparse)
.disabled(true)
.child(Label::new("No matches").color(Color::Muted)),
)
})
}
crates/project_symbols2/src/project_symbols.rs
+16 -12
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)),
),
)
}
}
crates/recent_projects2/src/recent_projects.rs
+12 -8
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)
}),
),
)
}
}
crates/storybook2/src/stories/picker.rs
+2 -1
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)),
)
crates/theme_selector2/src/theme_selector.rs
+2 -1
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(),
crates/ui2/src/components/list/list_item.rs
+29 -2
View File
@@ -5,10 +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.
@@ -32,7 +41,9 @@ impl ListItem {
pub fn new(id: impl Into<ElementId>) -> Self {
Self {
id: id.into(),
disabled: false,
selected: false,
spacing: ListItemSpacing::Dense,
indent_level: 0,
indent_step_size: px(12.),
start_slot: None,
@@ -48,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
@@ -110,6 +126,13 @@ impl ListItem {
}
}
impl Disableable for ListItem {
fn disabled(mut self, disabled: bool) -> Self {
self.disabled = disabled;
self
}
}
impl Selectable for ListItem {
fn selected(mut self, selected: bool) -> Self {
self.selected = selected;
@@ -134,7 +157,7 @@ impl RenderOnce for ListItem {
// When an item is inset draw the indent spacing outside of the item
.when(self.inset, |this| {
this.ml(self.indent_level as f32 * self.indent_step_size)
.px_1()
.px_2()
})
.when(!self.inset, |this| {
this
@@ -156,8 +179,12 @@ 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, |this| {
.when(self.inset && !self.disabled, |this| {
this
// TODO: Add focus state
// .when(self.state == InteractionState::Focused, |this| {
crates/vcs_menu2/src/lib.rs
+6 -3
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(
crates/welcome2/src/base_keymap_picker.rs
+3 -2
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(),