dan/gpui-component
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

menu: Improve Menu to avoid invalid or duplicate separators. (#276)

Browse source
This commit is contained in:
Jason Lee 2024-09-26 21:28:42 +08:00 committed by GitHub
parent 7a8eaefd30
commit 709c706adf
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 125 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
crates/story/src/popup_story.rs
View file

@ -162,10 +162,12 @@ impl Render for PopupStory {
})) }))
.context_menu({ .context_menu({
move |this, cx| { move |this, cx| {
this.menu("Cut", Box::new(Cut)) this.separator()
.menu("Cut", Box::new(Cut))
.menu("Copy", Box::new(Copy)) .menu("Copy", Box::new(Copy))
.menu("Paste", Box::new(Paste)) .menu("Paste", Box::new(Paste))
.separator() .separator()
.separator()
.submenu("Settings", cx, move |menu, _| { .submenu("Settings", cx, move |menu, _| {
menu.menu_with_check( menu.menu_with_check(
"Toggle Window Mode", "Toggle Window Mode",
@ -179,6 +181,7 @@ impl Render for PopupStory {
}) })
.separator() .separator()
.menu("Search All", Box::new(SearchAll)) .menu("Search All", Box::new(SearchAll))
.separator()
} }
}) })
.gap_6() .gap_6()

50
crates/ui/src/popup_menu.rs
View file

@ -59,6 +59,10 @@ impl PopupMenuItem {
!matches!(self, PopupMenuItem::Separator) !matches!(self, PopupMenuItem::Separator)
} }
fn is_separator(&self) -> bool {
matches!(self, PopupMenuItem::Separator)
}
fn has_icon(&self) -> bool { fn has_icon(&self) -> bool {
matches!(self, PopupMenuItem::Item { icon: Some(_), .. }) matches!(self, PopupMenuItem::Item { icon: Some(_), .. })
} }
@ -232,6 +236,14 @@ impl PopupMenu {
/// Add a separator Menu Item /// Add a separator Menu Item
pub fn separator(mut self) -> Self { pub fn separator(mut self) -> Self {
if self.menu_items.is_empty() {
return self;
}
if let Some(PopupMenuItem::Separator) = self.menu_items.last() {
return self;
}
self.menu_items.push(PopupMenuItem::Separator); self.menu_items.push(PopupMenuItem::Separator);
self self
} }
@ -411,6 +423,7 @@ impl Render for PopupMenu {
fn render(&mut self, cx: &mut gpui::ViewContext<Self>) -> impl gpui::IntoElement { fn render(&mut self, cx: &mut gpui::ViewContext<Self>) -> impl gpui::IntoElement {
let view = cx.view().clone(); let view = cx.view().clone();
let has_icon = self.menu_items.iter().any(|item| item.has_icon()); let has_icon = self.menu_items.iter().any(|item| item.has_icon());
let items_count = self.menu_items.len();
let max_width = self.max_width; let max_width = self.max_width;
let bounds = self.bounds; let bounds = self.bounds;
@ -438,8 +451,15 @@ impl Render for PopupMenu {
.absolute() .absolute()
.size_full() .size_full()
}) })
.children(self.menu_items.iter_mut().enumerate().map(|(ix, item)| { .children(
self.menu_items
.iter_mut()
.enumerate()
// Skip last separator
.filter(|(ix, item)| !(*ix == items_count - 1 && item.is_separator()))
.map(|(ix, item)| {
let group_id = format!("item:{}", ix); let group_id = format!("item:{}", ix);
let this = ListItem::new(("menu-item", ix)) let this = ListItem::new(("menu-item", ix))
.group(group_id.clone()) .group(group_id.clone())
.relative() .relative()
@ -453,6 +473,7 @@ impl Render for PopupMenu {
this.hovered_menu_ix = Some(ix); this.hovered_menu_ix = Some(ix);
cx.notify(); cx.notify();
})); }));
match item { match item {
PopupMenuItem::Separator => this.h_auto().p_0().disabled(true).child( PopupMenuItem::Separator => this.h_auto().p_0().disabled(true).child(
div() div()
@ -498,7 +519,11 @@ impl Render for PopupMenu {
.size_full() .size_full()
.items_center() .items_center()
.gap_x_1p5() .gap_x_1p5()
.children(Self::render_icon(has_icon, icon.clone(), cx)) .children(Self::render_icon(
has_icon,
icon.clone(),
cx,
))
.child( .child(
h_flex() h_flex()
.flex_1() .flex_1()
@ -510,8 +535,10 @@ impl Render for PopupMenu {
), ),
) )
.when_some(self.hovered_menu_ix, |this, hovered_ix| { .when_some(self.hovered_menu_ix, |this, hovered_ix| {
let (anchor, left) = let (anchor, left) = if cx.bounds().size.width
if cx.bounds().size.width - bounds.origin.x < max_width { - bounds.origin.x
< max_width
{
(AnchorCorner::TopRight, -px(15.)) (AnchorCorner::TopRight, -px(15.))
} else { } else {
(AnchorCorner::TopLeft, bounds.size.width - px(10.)) (AnchorCorner::TopLeft, bounds.size.width - px(10.))
@ -526,15 +553,22 @@ impl Render for PopupMenu {
}; };
if hovered_ix == ix { if hovered_ix == ix {
this.child(anchored().anchor(anchor).child( this.child(
div().occlude().top(top).left(left).child(menu.clone()), anchored().anchor(anchor).child(
)) div()
.occlude()
.top(top)
.left(left)
.child(menu.clone()),
),
)
} else { } else {
this this
} }
}), }),
), ),
} }
})) }),
)
} }
} }