Checkpoint - try using overlay for completions popover

Nate Butler created 2 years ago

[no ci]

Change summary

crates/editor2/src/editor.rs         | 37 ++++++++++++++++++++---------
crates/gpui2/src/elements/overlay.rs |  1 
crates/ui2/src/components/popover.rs | 19 ++++++--------
3 files changed, 34 insertions(+), 23 deletions(-)

Detailed changes

crates/editor2/src/editor.rs

@@ -39,12 +39,13 @@ use futures::FutureExt;
 use fuzzy::{StringMatch, StringMatchCandidate};
 use git::diff_hunk_to_display;
 use gpui::{
-    actions, div, point, prelude::*, px, relative, rems, size, uniform_list, Action, AnyElement,
-    AppContext, AsyncWindowContext, BackgroundExecutor, Bounds, ClipboardItem, Context, ElementId,
-    EventEmitter, FocusHandle, FocusableView, FontFeatures, FontStyle, FontWeight, HighlightStyle,
-    Hsla, InputHandler, InteractiveText, KeyContext, Model, MouseButton, ParentElement, Pixels,
-    Render, RenderOnce, SharedString, Styled, StyledText, Subscription, Task, TextRun, TextStyle,
-    UniformListScrollHandle, View, ViewContext, VisualContext, WeakView, WhiteSpace, WindowContext,
+    actions, div, overlay, point, prelude::*, px, relative, rems, size, uniform_list, Action,
+    AnyElement, AppContext, AsyncWindowContext, BackgroundExecutor, Bounds, ClipboardItem, Context,
+    ElementId, EventEmitter, FocusHandle, FocusableView, FontFeatures, FontStyle, FontWeight,
+    HighlightStyle, Hsla, InputHandler, InteractiveText, KeyContext, Model, MouseButton,
+    ParentElement, Pixels, Render, RenderOnce, SharedString, Styled, StyledText, Subscription,
+    Task, TextRun, TextStyle, UniformListScrollHandle, View, ViewContext, VisualContext, WeakView,
+    WhiteSpace, WindowContext,
 };
 use highlight_matching_bracket::refresh_matching_bracket_highlights;
 use hover_popover::{hide_hover, HoverState};
@@ -1335,7 +1336,7 @@ impl CompletionsMenu {
                         div()
                             .id(mat.candidate_id)
                             .min_w(px(220.))
-                            .max_w(px(640.))
+                            .max_w(px(540.))
                             .whitespace_nowrap()
                             .overflow_hidden()
                             .text_ui()
@@ -1370,11 +1371,23 @@ impl CompletionsMenu {
         .track_scroll(self.scroll_handle.clone())
         .with_width_from_item(widest_completion_ix);
 
-        Popover::new()
-            .child(list)
-            .when_some(multiline_docs, |popover, multiline_docs| {
-                popover.aside(multiline_docs)
-            })
+        // Old:
+        // Popover::new()
+        //     .child(list)
+        //     .when_some(multiline_docs, |popover, multiline_docs| {
+        //         popover.aside(multiline_docs)
+        //     })
+        //     .into_any_element()
+
+        overlay()
+            .anchor(gpui::AnchorCorner::TopLeft)
+            .child(
+                Popover::new()
+                    .child(list)
+                    .when_some(multiline_docs, |popover, multiline_docs| {
+                        popover.aside(multiline_docs)
+                    }),
+            )
             .into_any_element()
     }
 

crates/gpui2/src/elements/overlay.rs

@@ -105,6 +105,7 @@ impl Element for Overlay {
             origin: Point::zero(),
             size: cx.viewport_size(),
         };
+        dbg!(limits);
 
         match self.fit_mode {
             OverlayFitMode::SnapToWindow => {

crates/ui2/src/components/popover.rs

@@ -1,11 +1,11 @@
 use gpui::{
-    AnyElement, Div, Element, ElementId, IntoElement, ParentElement, RenderOnce, Styled,
+    div, AnyElement, Div, Element, ElementId, IntoElement, ParentElement, RenderOnce, Styled,
     WindowContext,
 };
 use smallvec::SmallVec;
 use theme2::ActiveTheme;
 
-use crate::{v_stack, StyledExt};
+use crate::{h_stack, v_stack, StyledExt};
 
 /// A popover is used to display a menu or show some options.
 ///
@@ -44,21 +44,18 @@ impl RenderOnce for Popover {
     type Rendered = Div;
 
     fn render(self, cx: &mut WindowContext) -> Self::Rendered {
-        v_stack()
-            .relative()
-            .elevation_2(cx)
-            .p_1()
-            .children(self.children)
+        div()
+            .flex()
+            .flex_none()
+            .gap_1()
+            .child(v_stack().elevation_2(cx).p_1().children(self.children))
             .when_some(self.aside, |this, aside| {
                 // TODO: This will statically position the aside to the top right of the popover.
                 // We should update this to use gpui2::overlay avoid collisions with the window edges.
                 this.child(
                     v_stack()
-                        .top_0()
-                        .left_full()
-                        .ml_1()
-                        .absolute()
                         .elevation_2(cx)
+                        .flex_1()
                         .bg(cx.theme().colors().surface_background)
                         .p_1()
                         .child(aside),