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

menu: Improve MenuItem paddings and fix submenu support. (#1339)

Browse source 
Fix #1332 was broken submenu selection.
This commit is contained in:
Jason Lee 2025-10-09 10:52:33 +08:00 committed by GitHub
parent 1db3e03fc3
commit 1fce2e1ac4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 37 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
crates/ui/src/menu/menu_item.rs
View file

@ -1,32 +1,32 @@
use crate::{h_flex, ActiveTheme, Disableable, Selectable, StyledExt}; use crate::{h_flex, ActiveTheme, Disableable, StyledExt};
use gpui::{ use gpui::{
prelude::FluentBuilder as _, AnyElement, App, ClickEvent, ElementId, InteractiveElement, prelude::FluentBuilder as _, AnyElement, App, ClickEvent, ElementId, InteractiveElement,
IntoElement, MouseButton, ParentElement, RenderOnce, StatefulInteractiveElement as _, IntoElement, MouseButton, ParentElement, RenderOnce, SharedString,
StyleRefinement, Styled, Window, StatefulInteractiveElement as _, StyleRefinement, Styled, Window,
}; };
use smallvec::SmallVec; use smallvec::SmallVec;
#[derive(IntoElement)] #[derive(IntoElement)]
pub struct MenuItem { pub struct MenuItem {
id: ElementId, id: ElementId,
group_name: SharedString,
style: StyleRefinement, style: StyleRefinement,
disabled: bool, disabled: bool,
selected: bool, selected: bool,
hovered: bool,
on_click: Option<Box<dyn Fn(&ClickEvent, &mut Window, &mut App) + 'static>>, on_click: Option<Box<dyn Fn(&ClickEvent, &mut Window, &mut App) + 'static>>,
on_hover: Option<Box<dyn Fn(&bool, &mut Window, &mut App) + 'static>>, on_hover: Option<Box<dyn Fn(&bool, &mut Window, &mut App) + 'static>>,
children: SmallVec<[AnyElement; 2]>, children: SmallVec<[AnyElement; 2]>,
} }
impl MenuItem { impl MenuItem {
pub fn new(id: impl Into<ElementId>) -> Self { pub fn new(id: impl Into<ElementId>, group_name: impl Into<SharedString>) -> Self {
let id: ElementId = id.into(); let id: ElementId = id.into();
Self { Self {
id: id.clone(), id: id.clone(),
group_name: group_name.into(),
style: StyleRefinement::default(), style: StyleRefinement::default(),
disabled: false, disabled: false,
selected: false, selected: false,
hovered: false,
on_click: None, on_click: None,
on_hover: None, on_hover: None,
children: SmallVec::new(), children: SmallVec::new(),
@ -44,11 +44,6 @@ impl MenuItem {
self self
} }
pub fn hovered(mut self, hovered: bool) -> Self {
self.hovered = hovered;
self
}
pub fn on_click( pub fn on_click(
mut self, mut self,
handler: impl Fn(&ClickEvent, &mut Window, &mut App) + 'static, handler: impl Fn(&ClickEvent, &mut Window, &mut App) + 'static,
@ -72,17 +67,6 @@ impl Disableable for MenuItem {
} }
} }
impl Selectable for MenuItem {
fn selected(mut self, selected: bool) -> Self {
self.selected = selected;
self
}
fn is_selected(&self) -> bool {
self.selected
}
}
impl Styled for MenuItem { impl Styled for MenuItem {
fn style(&mut self) -> &mut gpui::StyleRefinement { fn style(&mut self) -> &mut gpui::StyleRefinement {
&mut self.style &mut self.style
@ -99,6 +83,7 @@ impl RenderOnce for MenuItem {
fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement { fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
h_flex() h_flex()
.id(self.id) .id(self.id)
.group(&self.group_name)
.gap_x_1() .gap_x_1()
.py_1() .py_1()
.px_2() .px_2()
@ -112,11 +97,11 @@ impl RenderOnce for MenuItem {
this.on_hover(move |hovered, window, cx| (on_hover)(hovered, window, cx)) this.on_hover(move |hovered, window, cx| (on_hover)(hovered, window, cx))
}) })
.when(!self.disabled, |this| { .when(!self.disabled, |this| {
this.when(self.hovered, |this| { this.group_hover(self.group_name, |this| {
this.bg(cx.theme().accent) this.bg(cx.theme().accent)
.text_color(cx.theme().accent_foreground) .text_color(cx.theme().accent_foreground)
}) })
.hover(|this| { .when(self.selected, |this| {
this.bg(cx.theme().accent) this.bg(cx.theme().accent)
.text_color(cx.theme().accent_foreground) .text_color(cx.theme().accent_foreground)
}) })

52
crates/ui/src/menu/popup_menu.rs
View file

@ -792,9 +792,9 @@ impl PopupMenu {
let bounds = self.bounds; let bounds = self.bounds;
let max_width = self.max_width(); let max_width = self.max_width();
let (anchor, left) = if max_width + bounds.origin.x > window.bounds().size.width { let (anchor, left) = if max_width + bounds.origin.x > window.bounds().size.width {
(Corner::TopRight, -px(14.)) (Corner::TopRight, -px(16.))
} else { } else {
(Corner::TopLeft, bounds.size.width) (Corner::TopLeft, bounds.size.width - px(8.))
}; };
let is_bottom_pos = bounds.origin.y + bounds.size.height > window.bounds().size.height; let is_bottom_pos = bounds.origin.y + bounds.size.height > window.bounds().size.height;
@ -815,29 +815,31 @@ impl PopupMenu {
) -> impl IntoElement { ) -> impl IntoElement {
let has_icon = self.has_icon; let has_icon = self.has_icon;
let selected = self.selected_index == Some(ix); let selected = self.selected_index == Some(ix);
const EDGE_PADDING: Pixels = px(8.); const EDGE_PADDING: Pixels = px(4.);
const INNER_PADDING: Pixels = px(4.); const INNER_PADDING: Pixels = px(8.);
let is_submenu = matches!(item, PopupMenuItem::Submenu { .. });
let group_name = format!("popup-menu-item-{}", ix);
let (item_height, radius) = match self.size { let (item_height, radius) = match self.size {
Size::Small => (px(20.), state.radius.half()), Size::Small => (px(20.), state.radius.half()),
_ => (px(26.), state.radius), _ => (px(26.), state.radius),
}; };
let this = MenuItem::new(ix) let this = MenuItem::new(ix, &group_name)
.relative() .relative()
.text_sm() .text_sm()
.py_0() .py_0()
.px(INNER_PADDING) .px(INNER_PADDING)
.rounded(radius) .rounded(radius)
.items_center() .items_center()
.hovered(selected) .selected(selected)
.on_hover(cx.listener(move |this, hovered, _, cx| { .on_hover(cx.listener(move |this, hovered, _, cx| {
if *hovered { if *hovered {
this.selected_index = Some(ix); this.selected_index = Some(ix);
} else { } else if !is_submenu && this.selected_index == Some(ix) {
if this.selected_index == Some(ix) { // TODO: Better handle the submenu unselection when hover out
this.selected_index = None; this.selected_index = None;
}
} }
cx.notify(); cx.notify();
@ -951,23 +953,25 @@ impl PopupMenu {
.child(IconName::ChevronRight), .child(IconName::ChevronRight),
), ),
) )
.when(selected, |this| { .child({
let (anchor, left) = self.child_menu_anchor(window); let (anchor, left) = self.child_menu_anchor(window);
let is_bottom_pos = matches!(anchor, Corner::BottomLeft | Corner::BottomRight); let is_bottom_pos = matches!(anchor, Corner::BottomLeft | Corner::BottomRight);
this.child( anchored()
anchored() .anchor(anchor)
.anchor(anchor) .child(
.child( div()
div() .id("submenu")
.occlude() .group(&group_name)
.when(is_bottom_pos, |this| this.bottom_0()) .when(!selected, |this| this.invisible())
.when(!is_bottom_pos, |this| this.top_neg_1()) .group_hover(&group_name, |this| this.visible())
.left(left) .occlude()
.child(menu.clone()), .when(is_bottom_pos, |this| this.bottom_0())
) .when(!is_bottom_pos, |this| this.top_neg_1())
.snap_to_window_with_margin(Edges::all(EDGE_PADDING)), .left(left)
) .child(menu.clone()),
)
.snap_to_window_with_margin(Edges::all(EDGE_PADDING))
}), }),
} }
} }