popover.rs

 1use gpui::{
 2    AnyElement, Component, Div, Element, ElementId, ParentElement, RenderOnce, Styled,
 3    WindowContext,
 4};
 5use smallvec::SmallVec;
 6
 7use crate::{v_stack, StyledExt};
 8
 9/// A popover is used to display a menu or show some options.
10///
11/// Clicking the element that launches the popover should not change the current view,
12/// and the popover should be statically positioned relative to that element (not the
13/// user's mouse.)
14///
15/// Example: A "new" menu with options like "new file", "new folder", etc,
16/// Linear's "Display" menu, a profile menu that appers when you click your avatar.
17///
18/// Related elements:
19///
20/// `ContextMenu`:
21///
22/// Used to display a popover menu that only contains a list of items. Context menus are always
23/// launched by secondary clicking on an element. The menu is positioned relative to the user's cursor.
24///
25/// Example: Right clicking a file in the file tree to get a list of actions, right clicking
26/// a tab to in the tab bar to get a list of actions.
27///
28/// `Dropdown`:
29///
30/// Used to display a list of options when the user clicks an element. The menu is
31/// positioned relative the element that was clicked, and clicking an item in the
32/// dropdown should change the value of the element that was clicked.
33///
34/// Example: A theme select control. Displays "One Dark", clicking it opens a list of themes.
35/// When one is selected, the theme select control displays the selected theme.
36#[derive(RenderOnce)]
37pub struct Popover {
38    children: SmallVec<[AnyElement; 2]>,
39    aside: Option<AnyElement>,
40}
41
42impl Component for Popover {
43    type Rendered = Div;
44
45    fn render(self, cx: &mut WindowContext) -> Self::Rendered {
46        v_stack()
47            .relative()
48            .elevation_2(cx)
49            .p_1()
50            .children(self.children)
51            .when_some(self.aside, |this, aside| {
52                // TODO: This will statically position the aside to the top right of the popover.
53                // We should update this to use gpui2::overlay avoid collisions with the window edges.
54                this.child(
55                    v_stack()
56                        .top_0()
57                        .left_full()
58                        .ml_1()
59                        .absolute()
60                        .elevation_2(cx)
61                        .p_1()
62                        .child(aside),
63                )
64            })
65    }
66}
67
68impl Popover {
69    pub fn new() -> Self {
70        Self {
71            children: SmallVec::new(),
72            aside: None,
73        }
74    }
75
76    pub fn aside(mut self, aside: impl RenderOnce) -> Self
77    where
78        Self: Sized,
79    {
80        self.aside = Some(aside.render_once().into_any());
81        self
82    }
83}
84
85impl ParentElement for Popover {
86    fn children_mut(&mut self) -> &mut SmallVec<[AnyElement; 2]> {
87        &mut self.children
88    }
89}