Flesh out a popover control

crates/collab_ui2/src/collab_titlebar_item.rs

@@ -38,8 +38,8 @@ use gpui::{
 use project::{Project, RepositoryEntry};
 use theme::ActiveTheme;
 use ui::{
-    h_stack, prelude::*, Avatar, Button, ButtonLike, ButtonStyle2, Icon, IconButton, IconElement,
+    h_stack, popover_menu, prelude::*, Avatar, Button, ButtonLike, ButtonStyle2, ContextMenu, Icon,
-    KeyBinding, PopoverMenu, Tooltip,
+    IconButton, IconElement, KeyBinding, Tooltip,
 };
 use util::ResultExt;
 use workspace::{notifications::NotifyResultExt, Workspace};
@@ -290,19 +290,20 @@ impl Render for CollabTitlebarItem {
                         // TODO: Finish implementing user menu popover
                         //
                         this.child(
-                            PopoverMenu::new(
+                            popover_menu("user-menu")
-                                ButtonLike::new("user-menu")
+                                .menu(|cx| ContextMenu::build(cx, |menu, cx| menu.header("ADADA")))
-                                    .child(h_stack().gap_0p5().child(Avatar::data(avatar)).child(
+                                .trigger(
-                                        IconElement::new(Icon::ChevronDown).color(Color::Muted),
+                                    ButtonLike::new("user-menu")
-                                    ))
+                                        .child(
-                                    .style(ButtonStyle2::Subtle)
+                                            h_stack().gap_0p5().child(Avatar::data(avatar)).child(
-                                    .tooltip(move |cx| Tooltip::text("Toggle User Menu", cx))
+                                                IconElement::new(Icon::ChevronDown)
-                                    .into_any_element(),
+                                                    .color(Color::Muted),
-                            )
+                                            ),
-                            .anchor(gpui::AnchorCorner::TopRight)
+                                        )
-                            // TODO: Show when trigger is clicked
+                                        .style(ButtonStyle2::Subtle)
-                            .show_menu(true)
+                                        .tooltip(move |cx| Tooltip::text("Toggle User Menu", cx)),
-                            .children(vec![div().w_96().h_96().bg(gpui::red())]),
+                                )
+                                .anchor(gpui::AnchorCorner::TopRight),
                         )
                         // this.child(
                         //     ButtonLike::new("user-menu")

crates/ui2/src/components/button/button_like.rs

@@ -261,7 +261,11 @@ impl RenderOnce for ButtonLike {
                 |this, on_click| this.on_click(move |event, cx| (on_click)(event, cx)),
             )
             .when_some(self.tooltip, |this, tooltip| {
-                this.tooltip(move |cx| tooltip(cx))
+                if !self.selected {
+                    this.tooltip(move |cx| tooltip(cx))
+                } else {
+                    this
+                }
             })
             .children(self.children)
     }

crates/ui2/src/components/popover_menu.rs

@@ -1,96 +1,231 @@
+use std::{cell::RefCell, rc::Rc};
+
 use gpui::{
-    div, overlay, rems, AnchorCorner, AnyElement, Div, ParentElement, RenderOnce, Styled,
+    overlay, point, px, rems, AnchorCorner, AnyElement, Bounds, DismissEvent, DispatchPhase,
-    WindowContext,
+    Element, ElementId, InteractiveBounds, IntoElement, LayoutId, ManagedView, MouseDownEvent,
+    ParentElement, Pixels, Point, View, VisualContext, WindowContext,
 };
-use smallvec::SmallVec;
 
-use crate::{prelude::*, Popover};
+use crate::{Clickable, Selectable};
 
-#[derive(IntoElement)]
+pub trait PopoverTrigger: IntoElement + Clickable + Selectable + 'static {}
-pub struct PopoverMenu {
+
-    /// The element that triggers the popover menu when clicked
+impl<T: IntoElement + Clickable + Selectable + 'static> PopoverTrigger for T {}
-    /// Usually a button
+
-    trigger: AnyElement,
+pub struct PopoverMenu<M: ManagedView> {
-    /// The content of the popover menu
+    id: ElementId,
-    /// This will automatically be wrapped in a [Popover] element
+    child_builder: Option<
-    children: SmallVec<[AnyElement; 2]>,
+        Box<
-    /// The direction the popover menu will open by default
+            dyn FnOnce(
-    ///
+                    Rc<RefCell<Option<View<M>>>>,
-    /// When not enough space is available in the default direction,
+                    Option<Rc<dyn Fn(&mut WindowContext) -> View<M> + 'static>>,
-    /// the popover menu will follow the rules of [gpui2::elements::overlay]
+                ) -> AnyElement
+                + 'static,
+        >,
+    >,
+    menu_builder: Option<Rc<dyn Fn(&mut WindowContext) -> View<M> + 'static>>,
     anchor: AnchorCorner,
-    /// Whether the popover menu is currently open
+    attach: Option<AnchorCorner>,
-    show_menu: bool,
+    offset: Option<Point<Pixels>>,
 }
 
-impl RenderOnce for PopoverMenu {
+impl<M: ManagedView> PopoverMenu<M> {
-    type Rendered = Div;
+    pub fn menu(mut self, f: impl Fn(&mut WindowContext) -> View<M> + 'static) -> Self {
-
+        self.menu_builder = Some(Rc::new(f));
-    fn render(self, _cx: &mut WindowContext) -> Self::Rendered {
+        self
-        // Default offset = 4px padding + 1px border
-        let offset = 5. / 16.;
-
-        let (top, right, bottom, left) = match self.anchor {
-            AnchorCorner::TopRight => (None, Some(-offset), Some(-offset), None),
-            AnchorCorner::TopLeft => (None, None, Some(-offset), Some(-offset)),
-            AnchorCorner::BottomRight => (Some(-offset), Some(-offset), None, None),
-            AnchorCorner::BottomLeft => (Some(-offset), None, None, Some(-offset)),
-        };
-
-        div()
-            .flex()
-            .flex_none()
-            .bg(gpui::green())
-            .relative()
-            .child(
-                div()
-                    .flex_none()
-                    .relative()
-                    .bg(gpui::blue())
-                    .child(self.trigger),
-            )
-            .when(self.show_menu, |this| {
-                this.child(
-                    div()
-                        .absolute()
-                        .size_0()
-                        .when_some(top, |this, t| this.top(rems(t)))
-                        .when_some(right, |this, r| this.right(rems(r)))
-                        .when_some(bottom, |this, b| this.bottom(rems(b)))
-                        .when_some(left, |this, l| this.left(rems(l)))
-                        .child(
-                            overlay()
-                                .anchor(AnchorCorner::TopRight)
-                                .child(Popover::new().children(self.children)),
-                        ),
-                )
-            })
-    }
-}
-
-impl PopoverMenu {
-    pub fn new(trigger: AnyElement) -> Self {
-        Self {
-            trigger,
-            children: SmallVec::new(),
-            anchor: AnchorCorner::TopLeft,
-            show_menu: false,
-        }
     }
 
+    pub fn trigger<T: PopoverTrigger>(mut self, t: T) -> Self {
+        self.child_builder = Some(Box::new(|menu, builder| {
+            let open = menu.borrow().is_some();
+            t.selected(open)
+                .when_some(builder, |el, builder| {
+                    el.on_click({
+                        move |_, cx| {
+                            let new_menu = (builder)(cx);
+                            let menu2 = menu.clone();
+                            let previous_focus_handle = cx.focused();
+
+                            cx.subscribe(&new_menu, move |modal, _: &DismissEvent, cx| {
+                                if modal.focus_handle(cx).contains_focused(cx) {
+                                    if previous_focus_handle.is_some() {
+                                        cx.focus(&previous_focus_handle.as_ref().unwrap())
+                                    }
+                                }
+                                *menu2.borrow_mut() = None;
+                                cx.notify();
+                            })
+                            .detach();
+                            cx.focus_view(&new_menu);
+                            *menu.borrow_mut() = Some(new_menu);
+                        }
+                    })
+                })
+                .into_any_element()
+        }));
+        self
+    }
+
+    /// anchor defines which corner of the menu to anchor to the attachment point
+    /// (by default the cursor position, but see attach)
     pub fn anchor(mut self, anchor: AnchorCorner) -> Self {
         self.anchor = anchor;
         self
     }
 
-    pub fn show_menu(mut self, show_menu: bool) -> Self {
+    /// attach defines which corner of the handle to attach the menu's anchor to
-        self.show_menu = show_menu;
+    pub fn attach(mut self, attach: AnchorCorner) -> Self {
+        self.attach = Some(attach);
         self
     }
+
+    /// offset offsets the position of the content by that many pixels.
+    pub fn offset(mut self, offset: Point<Pixels>) -> Self {
+        self.offset = Some(offset);
+        self
+    }
+
+    fn resolved_attach(&self) -> AnchorCorner {
+        self.attach.unwrap_or_else(|| match self.anchor {
+            AnchorCorner::TopLeft => AnchorCorner::BottomLeft,
+            AnchorCorner::TopRight => AnchorCorner::BottomRight,
+            AnchorCorner::BottomLeft => AnchorCorner::TopLeft,
+            AnchorCorner::BottomRight => AnchorCorner::TopRight,
+        })
+    }
+
+    fn resolved_offset(&self, cx: &WindowContext) -> Point<Pixels> {
+        self.offset.unwrap_or_else(|| {
+            // Default offset = 4px padding + 1px border
+            let offset = rems(5. / 16.) * cx.rem_size();
+            match self.anchor {
+                AnchorCorner::TopRight | AnchorCorner::BottomRight => point(offset, px(0.)),
+                AnchorCorner::TopLeft | AnchorCorner::BottomLeft => point(-offset, px(0.)),
+            }
+        })
+    }
 }
 
-impl ParentElement for PopoverMenu {
+pub fn popover_menu<M: ManagedView>(id: impl Into<ElementId>) -> PopoverMenu<M> {
-    fn children_mut(&mut self) -> &mut SmallVec<[AnyElement; 2]> {
+    PopoverMenu {
-        &mut self.children
+        id: id.into(),
+        child_builder: None,
+        menu_builder: None,
+        anchor: AnchorCorner::TopLeft,
+        attach: None,
+        offset: None,
+    }
+}
+
+pub struct PopoverMenuState<M> {
+    child_layout_id: Option<LayoutId>,
+    child_element: Option<AnyElement>,
+    child_bounds: Option<Bounds<Pixels>>,
+    menu_element: Option<AnyElement>,
+    menu: Rc<RefCell<Option<View<M>>>>,
+}
+
+impl<M: ManagedView> Element for PopoverMenu<M> {
+    type State = PopoverMenuState<M>;
+
+    fn layout(
+        &mut self,
+        element_state: Option<Self::State>,
+        cx: &mut WindowContext,
+    ) -> (gpui::LayoutId, Self::State) {
+        let mut menu_layout_id = None;
+
+        let (menu, child_bounds) = if let Some(element_state) = element_state {
+            (element_state.menu, element_state.child_bounds)
+        } else {
+            (Rc::default(), None)
+        };
+
+        let menu_element = menu.borrow_mut().as_mut().map(|menu| {
+            let mut overlay = overlay().snap_to_window().anchor(self.anchor);
+
+            if let Some(child_bounds) = child_bounds {
+                overlay = overlay.position(
+                    self.resolved_attach().corner(child_bounds) + self.resolved_offset(cx),
+                );
+            }
+
+            let mut element = overlay.child(menu.clone()).into_any();
+            menu_layout_id = Some(element.layout(cx));
+            element
+        });
+
+        let mut child_element = self
+            .child_builder
+            .take()
+            .map(|child_builder| (child_builder)(menu.clone(), self.menu_builder.clone()));
+
+        let child_layout_id = child_element
+            .as_mut()
+            .map(|child_element| child_element.layout(cx));
+
+        let layout_id = cx.request_layout(
+            &gpui::Style::default(),
+            menu_layout_id.into_iter().chain(child_layout_id),
+        );
+
+        (
+            layout_id,
+            PopoverMenuState {
+                menu,
+                child_element,
+                child_layout_id,
+                menu_element,
+                child_bounds,
+            },
+        )
+    }
+
+    fn paint(
+        self,
+        _: Bounds<gpui::Pixels>,
+        element_state: &mut Self::State,
+        cx: &mut WindowContext,
+    ) {
+        if let Some(child) = element_state.child_element.take() {
+            child.paint(cx);
+        }
+
+        if let Some(child_layout_id) = element_state.child_layout_id.take() {
+            element_state.child_bounds = Some(cx.layout_bounds(child_layout_id));
+        }
+
+        if let Some(menu) = element_state.menu_element.take() {
+            menu.paint(cx);
+
+            if let Some(child_bounds) = element_state.child_bounds {
+                let interactive_bounds = InteractiveBounds {
+                    bounds: child_bounds,
+                    stacking_order: cx.stacking_order().clone(),
+                };
+
+                // Mouse-downing outside the menu dismisses it, so we don't
+                // want a click on the toggle to re-open it.
+                cx.on_mouse_event(move |e: &MouseDownEvent, phase, cx| {
+                    if phase == DispatchPhase::Bubble
+                        && interactive_bounds.visibly_contains(&e.position, cx)
+                    {
+                        cx.stop_propagation()
+                    }
+                })
+            }
+        }
+    }
+}
+
+impl<M: ManagedView> IntoElement for PopoverMenu<M> {
+    type Element = Self;
+
+    fn element_id(&self) -> Option<gpui::ElementId> {
+        Some(self.id.clone())
+    }
+
+    fn into_element(self) -> Self::Element {
+        self
     }
 }