🚧 Completion & Popover Styles 🚧 (#3406)

Nate Butler created 2 years ago

TODO:

- [ ] Add y axis padding to list instead of popover container
- [x] Combined max-width between completions list and docs
- [ ] Allow docs to be taller than completion list
- [x] Use the workspace bounds to set doc position
- [ ] Clean up markdown styles
- [x] (🐜) Changing items should set doc scroll position to the top
- [x] (🐜) popovers should render on top of all panes
- [ ] (extra) Try adding code block backgrounds to md rendering
- [ ] (extra) Use ui font for markdown text, buffer font for markdown
code.
- [ ] (extra) Try lining up inline code in completions menu

[[PR Description]]

Release Notes:

- N/A

Change summary

crates/editor2/src/editor.rs         | 22 +++++++++++++++++-----
crates/gpui2/src/elements/overlay.rs |  1 +
crates/ui2/src/components/popover.rs | 21 ++++++++-------------
crates/ui2/src/styled_ext.rs         |  4 ++--
4 files changed, 28 insertions(+), 20 deletions(-)

Detailed changes

crates/editor2/src/editor.rs

@@ -1273,6 +1273,13 @@ impl CompletionsMenu {
             multiline_docs.map(|div| {
                 div.id("multiline_docs")
                     .max_h(max_height)
+                    .flex_1()
+                    .px_1p5()
+                    .py_1()
+                    .min_w(px(260.))
+                    .max_w(px(640.))
+                    .w(px(500.))
+                    .text_ui()
                     .overflow_y_scroll()
                     // Prevent a mouse down on documentation from being propagated to the editor,
                     // because that would move the cursor.
@@ -1327,13 +1334,18 @@ impl CompletionsMenu {
 
                         div()
                             .id(mat.candidate_id)
-                            .min_w(px(300.))
-                            .max_w(px(700.))
+                            .min_w(px(220.))
+                            .max_w(px(540.))
                             .whitespace_nowrap()
                             .overflow_hidden()
-                            .bg(gpui::green())
-                            .hover(|style| style.bg(gpui::blue()))
-                            .when(item_ix == selected_item, |div| div.bg(gpui::red()))
+                            .text_ui()
+                            .px_1()
+                            .rounded(px(4.))
+                            .bg(cx.theme().colors().ghost_element_background)
+                            .hover(|style| style.bg(cx.theme().colors().ghost_element_hover))
+                            .when(item_ix == selected_item, |div| {
+                                div.bg(cx.theme().colors().ghost_element_selected)
+                            })
                             .on_mouse_down(
                                 MouseButton::Left,
                                 cx.listener(move |editor, event, cx| {

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,8 +1,9 @@
 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};
 
@@ -43,22 +44,16 @@ 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()
+            .gap_1()
+            .child(v_stack().elevation_2(cx).px_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)
-                        .p_1()
+                        .bg(cx.theme().colors().surface_background)
+                        .px_1()
                         .child(aside),
                 )
             })

crates/ui2/src/styled_ext.rs

@@ -1,4 +1,4 @@
-use gpui::{Styled, WindowContext};
+use gpui::{px, Styled, WindowContext};
 use theme2::ActiveTheme;
 
 use crate::{ElevationIndex, UITextSize};
@@ -6,7 +6,7 @@ use crate::{ElevationIndex, UITextSize};
 fn elevated<E: Styled>(this: E, cx: &mut WindowContext, index: ElevationIndex) -> E {
     this.bg(cx.theme().colors().elevated_surface_background)
         .z_index(index.z_index())
-        .rounded_lg()
+        .rounded(px(8.))
         .border()
         .border_color(cx.theme().colors().border_variant)
         .shadow(index.shadow())