Add ContextMenu (#107)

https://github.com/user-attachments/assets/1534bb31-1d32-40b8-8871-f41fb182c8e9

README.md

@@ -63,6 +63,9 @@ A UI components for building desktop application by using [GPUI](https://gpui.rs
   - [x] Column resizing
   - [x] Column ordering
   - [x] Column sorting
+- [x] Menu
+  - [x] Popup Menu
+  - [x] Context Menu
 - [ ] Drawer
 - [ ] Modal
 

crates/app/src/story_workspace.rs

@@ -2,7 +2,7 @@ use gpui::*;
 use prelude::FluentBuilder as _;
 use story::{
     ButtonStory, DropdownStory, IconStory, ImageStory, InputStory, ListStory, PickerStory,
-    PopoverStory, ProgressStory, ResizableStory, ScrollableStory, StoryContainer, SwitchStory,
+    PopupStory, ProgressStory, ResizableStory, ScrollableStory, StoryContainer, SwitchStory,
     TableStory, TextStory, TooltipStory,
 };
 use workspace::{TitleBar, Workspace};
@@ -96,9 +96,9 @@ impl StoryWorkspace {
         .detach();
 
         StoryContainer::add_pane(
-            "Popover",
+            "Popup",
-            "Displays rich content in a portal, triggered by a button.",
+            "A popup displays content on top of the main page.",
-            PopoverStory::view(cx).into(),
+            PopupStory::view(cx).into(),
             workspace.clone(),
             cx,
         )

crates/story/src/lib.rs

@@ -5,7 +5,7 @@ mod image_story;
 mod input_story;
 mod list_story;
 mod picker_story;
-mod popover_story;
+mod popup_story;
 mod progress_story;
 mod resizable_story;
 mod scrollable_story;
@@ -22,7 +22,7 @@ pub use image_story::ImageStory;
 pub use input_story::InputStory;
 pub use list_story::ListStory;
 pub use picker_story::PickerStory;
-pub use popover_story::PopoverStory;
+pub use popup_story::PopupStory;
 pub use progress_story::ProgressStory;
 pub use resizable_story::ResizableStory;
 pub use scrollable_story::ScrollableStory;

crates/story/src/popup_story.rs

@@ -5,6 +5,7 @@ use gpui::{
 };
 use ui::{
     button::Button,
+    context_menu::ContextMenuExt,
     divider::Divider,
     h_flex,
     input::TextInput,
@@ -50,20 +51,21 @@ impl Render for Form {
             .child(self.input1.clone())
             .child(
                 Button::new("submit", cx)
+                    .label("Submit")
                     .primary()
                     .on_click(cx.listener(|_, _, cx| cx.emit(DismissEvent))),
             )
     }
 }
 
-pub struct PopoverStory {
+pub struct PopupStory {
     focus_handle: FocusHandle,
     form: View<Form>,
     message: String,
     window_mode: bool,
 }
 
-impl PopoverStory {
+impl PopupStory {
     pub fn view(cx: &mut WindowContext) -> View<Self> {
         cx.new_view(Self::new)
     }
@@ -92,13 +94,13 @@ impl PopoverStory {
     }
 }
 
-impl FocusableView for PopoverStory {
+impl FocusableView for PopupStory {
     fn focus_handle(&self, _cx: &AppContext) -> FocusHandle {
         self.focus_handle.clone()
     }
 }
 
-impl Render for PopoverStory {
+impl Render for PopupStory {
     fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
         let form = self.form.clone();
         let focus_handle = self.focus_handle.clone();
@@ -117,6 +119,17 @@ impl Render for PopoverStory {
             .on_any_mouse_down(cx.listener(|this, _: &MouseDownEvent, cx| {
                 cx.focus(&this.focus_handle);
             }))
+            .context_menu({
+                let focus_handle = focus_handle.clone();
+                move |menu, _cx| {
+                    menu.track_focus(focus_handle.clone())
+                        .menu("Cut", Box::new(Cut))
+                        .menu("Copy", Box::new(Copy))
+                        .menu("Paste", Box::new(Paste))
+                        .separator()
+                        .menu("About", Box::new(SearchAll))
+                }
+            })
             .gap_6()
             .child(
                 Switch::new("switch-window-mode")
@@ -184,8 +197,8 @@ impl Render for PopoverStory {
                             .trigger(Button::new("popup-menu-1", cx).icon(IconName::Ellipsis))
                             .content(move |cx| {
                                 let focus_handle = focus_handle.clone();
-                                PopupMenu::build(cx, |mut this, _cx| {
+                                PopupMenu::build(cx, |menu, _cx| {
-                                    this.content(focus_handle)
+                                    menu.track_focus(focus_handle)
                                         .menu("Copy", Box::new(Copy))
                                         .menu("Cut", Box::new(Cut))
                                         .menu("Paste", Box::new(Paste))
@@ -196,14 +209,13 @@ impl Render for PopoverStory {
                                             Box::new(SearchAll),
                                         )
                                         .separator()
-                                        .menu_with_check("Check Menu", true, Box::new(SearchAll));
+                                        .menu_with_check("Check Menu", true, Box::new(SearchAll))
-
-                                    this
                                 })
                             }),
                     )
                     .child(self.message.clone()),
             )
+            .child("Right click to open ContextMenu")
             .child(
                 div().absolute().bottom_4().left_0().w_full().h_10().child(
                     h_flex()

crates/ui/src/context_menu.rs

@@ -0,0 +1,236 @@
+use std::{cell::RefCell, rc::Rc};
+
+use gpui::{
+    anchored, deferred, div, prelude::FluentBuilder, relative, AnchorCorner, AnyElement,
+    AppContext, DismissEvent, DispatchPhase, Element, ElementId, Focusable, GlobalElementId,
+    InteractiveElement, IntoElement, MouseButton, MouseDownEvent, ParentElement, Pixels, Point,
+    Position, Stateful, Style, Styled as _, View, WindowContext,
+};
+
+use crate::{popup_menu::PopupMenu, theme::ActiveTheme as _, StyledExt as _};
+
+pub fn init(_cx: &mut AppContext) {}
+
+pub trait ContextMenuExt: ParentElement + Sized {
+    fn context_menu(
+        self,
+        f: impl Fn(PopupMenu, &mut WindowContext) -> PopupMenu + 'static,
+    ) -> Self {
+        self.child(ContextMenu::new("context_menu").menu(f))
+    }
+}
+
+impl<E> ContextMenuExt for Stateful<E> where E: ParentElement {}
+impl<E> ContextMenuExt for Focusable<E> where E: ParentElement {}
+
+pub struct ContextMenu {
+    id: ElementId,
+    menu: Option<Box<dyn Fn(PopupMenu, &mut WindowContext) -> PopupMenu + 'static>>,
+    anchor: AnchorCorner,
+}
+
+impl ContextMenu {
+    pub fn new(id: impl Into<ElementId>) -> Self {
+        Self {
+            id: id.into(),
+            menu: None,
+            anchor: AnchorCorner::TopLeft,
+        }
+    }
+
+    #[must_use]
+    pub fn menu<F>(mut self, builder: F) -> Self
+    where
+        F: Fn(PopupMenu, &mut WindowContext) -> PopupMenu + 'static,
+    {
+        self.menu = Some(Box::new(builder));
+        self
+    }
+
+    fn with_element_state<R>(
+        &mut self,
+        id: &GlobalElementId,
+        cx: &mut WindowContext,
+        f: impl FnOnce(&mut Self, &mut ContextMenuState, &mut WindowContext) -> R,
+    ) -> R {
+        cx.with_optional_element_state::<ContextMenuState, _>(Some(id), |element_state, cx| {
+            let mut element_state = element_state.unwrap().unwrap_or_default();
+            let result = f(self, &mut element_state, cx);
+            (result, Some(element_state))
+        })
+    }
+}
+
+impl IntoElement for ContextMenu {
+    type Element = Self;
+
+    fn into_element(self) -> Self::Element {
+        self
+    }
+}
+
+pub struct ContextMenuState {
+    menu_view: Rc<RefCell<Option<View<PopupMenu>>>>,
+    menu_element: Option<AnyElement>,
+    open: Rc<RefCell<bool>>,
+    position: Rc<RefCell<Point<Pixels>>>,
+}
+
+impl Default for ContextMenuState {
+    fn default() -> Self {
+        Self {
+            menu_view: Rc::new(RefCell::new(None)),
+            menu_element: None,
+            open: Rc::new(RefCell::new(false)),
+            position: Default::default(),
+        }
+    }
+}
+
+impl Element for ContextMenu {
+    type RequestLayoutState = ContextMenuState;
+    type PrepaintState = ();
+
+    fn id(&self) -> Option<ElementId> {
+        Some(self.id.clone())
+    }
+
+    fn request_layout(
+        &mut self,
+        id: Option<&gpui::GlobalElementId>,
+        cx: &mut WindowContext,
+    ) -> (gpui::LayoutId, Self::RequestLayoutState) {
+        let mut style = Style::default();
+        // Set the layout style relative to the table view to get same size.
+        style.position = Position::Absolute;
+        style.flex_grow = 1.0;
+        style.flex_shrink = 1.0;
+        style.size.width = relative(1.).into();
+        style.size.height = relative(1.).into();
+
+        let anchor = self.anchor;
+
+        self.with_element_state(id.unwrap(), cx, |_, state: &mut ContextMenuState, cx| {
+            let position = state.position.clone();
+            let position = position.borrow();
+            let open = state.open.clone();
+            let menu_view = state.menu_view.borrow().clone();
+
+            let (menu_element, menu_layout_id) = if *open.borrow() {
+                let mut menu_element = deferred(
+                    anchored()
+                        .position(*position)
+                        .snap_to_window()
+                        .anchor(anchor)
+                        .when_some(menu_view, |this, menu| {
+                            // Focus the menu, so that can be handle the action.
+                            menu.focus_handle(cx).focus(cx);
+
+                            this.child(
+                                div()
+                                    .elevation_2(cx)
+                                    .bg(cx.theme().popover)
+                                    .border_1()
+                                    .border_color(cx.theme().border)
+                                    .child(menu)
+                                    .on_mouse_down_out(move |_, cx| {
+                                        *open.borrow_mut() = false;
+                                        cx.refresh();
+                                    }),
+                            )
+                        }),
+                )
+                .with_priority(1)
+                .into_any();
+
+                let menu_layout_id = menu_element.request_layout(cx);
+                (Some(menu_element), Some(menu_layout_id))
+            } else {
+                (None, None)
+            };
+
+            let mut layout_ids = vec![];
+            if let Some(menu_layout_id) = menu_layout_id {
+                layout_ids.push(menu_layout_id);
+            }
+
+            let layout_id = cx.request_layout(style, layout_ids);
+
+            (
+                layout_id,
+                ContextMenuState {
+                    menu_element,
+
+                    ..Default::default()
+                },
+            )
+        })
+    }
+
+    fn prepaint(
+        &mut self,
+        _: Option<&gpui::GlobalElementId>,
+        _: gpui::Bounds<gpui::Pixels>,
+        request_layout: &mut Self::RequestLayoutState,
+        cx: &mut WindowContext,
+    ) -> Self::PrepaintState {
+        if let Some(menu_element) = &mut request_layout.menu_element {
+            menu_element.prepaint(cx);
+        }
+    }
+
+    fn paint(
+        &mut self,
+        id: Option<&gpui::GlobalElementId>,
+        bounds: gpui::Bounds<gpui::Pixels>,
+        request_layout: &mut Self::RequestLayoutState,
+        _: &mut Self::PrepaintState,
+        cx: &mut WindowContext,
+    ) {
+        if let Some(menu_element) = &mut request_layout.menu_element {
+            menu_element.paint(cx);
+        }
+
+        let Some(builder) = self.menu.take() else {
+            return;
+        };
+
+        self.with_element_state(
+            id.unwrap(),
+            cx,
+            |_view, state: &mut ContextMenuState, cx| {
+                let position = state.position.clone();
+                let open = state.open.clone();
+                let menu_view = state.menu_view.clone();
+
+                // When right mouse click, to build content menu, and show it at the mouse position.
+                cx.on_mouse_event(move |event: &MouseDownEvent, phase, cx| {
+                    if phase == DispatchPhase::Bubble
+                        && event.button == MouseButton::Right
+                        && bounds.contains(&event.position)
+                    {
+                        cx.prevent_default();
+                        cx.stop_propagation();
+
+                        *position.borrow_mut() = event.position;
+                        *open.borrow_mut() = true;
+
+                        let menu =
+                            PopupMenu::build(cx, |menu, cx| (builder)(menu, cx)).into_element();
+
+                        let open = open.clone();
+                        cx.subscribe(&menu, move |_, _: &DismissEvent, cx| {
+                            *open.borrow_mut() = false;
+                            cx.refresh();
+                        })
+                        .detach();
+
+                        *menu_view.borrow_mut() = Some(menu);
+
+                        cx.refresh();
+                    }
+                });
+            },
+        );
+    }
+}

crates/ui/src/lib.rs

@@ -13,6 +13,7 @@ mod svg_img;
 pub mod button;
 pub mod checkbox;
 pub mod clipboard;
+pub mod context_menu;
 pub mod divider;
 pub mod dropdown;
 pub mod indicator;
@@ -57,6 +58,7 @@ pub fn init(cx: &mut gpui::AppContext) {
     dropdown::init(cx);
     popover::init(cx);
     popup_menu::init(cx);
+    context_menu::init(cx);
     table::init(cx);
     webview::init(cx)
 }

crates/ui/src/popup_menu.rs

@@ -77,51 +77,56 @@ impl PopupMenu {
     }
 
     /// Set min width of the popup menu, default is 120px
-    pub fn min_w(&mut self, width: impl Into<Pixels>) -> &mut Self {
+    pub fn min_w(mut self, width: impl Into<Pixels>) -> Self {
         self.min_width = width.into();
         self
     }
 
     /// Set max width of the popup menu, default is 500px
-    pub fn max_w(&mut self, height: impl Into<Pixels>) -> &mut Self {
+    pub fn max_w(mut self, height: impl Into<Pixels>) -> Self {
         self.max_width = height.into();
         self
     }
 
     /// You must set content (FocusHandle) with the parent view, if the menu action is listening on the parent view.
     /// When the Menu Item confirmed, the parent view will be focused again to ensure to receive the action.
-    pub fn content(&mut self, focus_handle: FocusHandle) -> &mut Self {
+    #[must_use]
+    pub fn track_focus(mut self, focus_handle: FocusHandle) -> Self {
         self.action_context = Some(focus_handle);
         self
     }
 
     /// Add Menu Item
-    pub fn menu(&mut self, label: impl Into<SharedString>, action: Box<dyn Action>) -> &mut Self {
+    pub fn menu(mut self, label: impl Into<SharedString>, action: Box<dyn Action>) -> Self {
-        self.add_menu_item(None, label, action)
+        self.add_menu_item(None, label, action);
+        self
     }
 
     /// Add Menu Item with Icon
     pub fn menu_with_icon(
-        &mut self,
+        mut self,
         icon: impl Into<Icon>,
         label: impl Into<SharedString>,
         action: Box<dyn Action>,
-    ) -> &mut Self {
+    ) -> Self {
-        self.add_menu_item(Some(icon.into()), label, action)
+        self.add_menu_item(Some(icon.into()), label, action);
+        self
     }
 
     /// Add Menu Item with check icon
     pub fn menu_with_check(
-        &mut self,
+        mut self,
         label: impl Into<SharedString>,
         checked: bool,
         action: Box<dyn Action>,
-    ) -> &mut Self {
+    ) -> Self {
         if checked {
-            self.add_menu_item(Some(IconName::Check.into()), label, action)
+            self.add_menu_item(Some(IconName::Check.into()), label, action);
         } else {
-            self.add_menu_item(None, label, action)
+            self.add_menu_item(None, label, action);
         }
+
+        self
     }
 
     fn add_menu_item(
@@ -153,9 +158,8 @@ impl PopupMenu {
     }
 
     /// Add a separator Menu Item
-    pub fn separator(&mut self) -> &mut Self {
+    pub fn separator(mut self) -> Self {
         self.menu_items.push(PopupMenuItem::Separator);
-
         self
     }
 
@@ -248,6 +252,7 @@ impl Render for PopupMenu {
             .min_w(self.min_width)
             .p_0p5()
             .gap_y_0p5()
+            .bg(cx.theme().menu)
             .children(self.menu_items.iter_mut().enumerate().map(|(ix, item)| {
                 let this = ListItem::new(("menu-item", ix))
                     .p_0()
@@ -262,7 +267,7 @@ impl Render for PopupMenu {
                             .bg(cx.theme().border),
                     ),
                     PopupMenuItem::Item { icon, label, .. } => {
-                        this.py(px(3.)).px_3().rounded_md().text_sm().child(
+                        this.py(px(2.)).px_2().rounded_md().text_sm().child(
                             h_flex()
                                 .size_full()
                                 .items_center()

crates/ui/src/theme.rs

@@ -162,6 +162,7 @@ struct Colors {
     pub list_active: Hsla,
     pub list_head: Hsla,
     pub link: Hsla,
+    pub menu: Hsla,
 }
 
 impl Colors {
@@ -203,6 +204,7 @@ impl Colors {
             list_active: hsl(240.0, 7., 88.0),
             list_head: hsl(240.0, 0., 94.),
             link: hsl(221.0, 83.0, 53.0),
+            menu: hsl(0.0, 0.0, 97.0),
         }
     }
 
@@ -244,6 +246,7 @@ impl Colors {
             list_active: hsl(240.0, 3.7, 15.0),
             list_head: hsl(240.0, 3.7, 10.9),
             link: hsl(221.0, 83.0, 53.0),
+            menu: hsl(300.0, 2.0, 12.),
         }
     }
 }
@@ -309,6 +312,7 @@ pub struct Theme {
     pub link: Hsla,
     pub link_hover: Hsla,
     pub link_active: Hsla,
+    pub menu: Hsla,
 }
 
 impl Global for Theme {}
@@ -382,10 +386,11 @@ impl From<Colors> for Theme {
             table: colors.list,
             table_even: colors.list_even,
             table_active: colors.list_active,
-            table_hover: colors.list_active.opacity(0.6),
+            table_hover: colors.list_active.opacity(0.8),
             link: colors.link,
             link_hover: colors.link.lighten(0.2),
             link_active: colors.link.darken(0.2),
+            menu: colors.menu,
         }
     }
 }