From 1acc6b462f4c671031faefe02c240ed32dcec0dd Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Mon, 27 Nov 2023 10:29:29 -0500 Subject: [PATCH 1/5] Start on completions styles --- crates/editor2/src/editor.rs | 22 +++++++++++++++++----- crates/ui2/src/components/popover.rs | 2 ++ crates/ui2/src/styled_ext.rs | 4 ++-- 3 files changed, 21 insertions(+), 7 deletions(-) diff --git a/crates/editor2/src/editor.rs b/crates/editor2/src/editor.rs index 3a9a40328d..a0f074221c 100644 --- a/crates/editor2/src/editor.rs +++ b/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(640.)) .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| { diff --git a/crates/ui2/src/components/popover.rs b/crates/ui2/src/components/popover.rs index ac407d2335..3838e40bec 100644 --- a/crates/ui2/src/components/popover.rs +++ b/crates/ui2/src/components/popover.rs @@ -3,6 +3,7 @@ use gpui::{ WindowContext, }; use smallvec::SmallVec; +use theme2::ActiveTheme; use crate::{v_stack, StyledExt}; @@ -58,6 +59,7 @@ impl RenderOnce for Popover { .ml_1() .absolute() .elevation_2(cx) + .bg(cx.theme().colors().surface_background) .p_1() .child(aside), ) diff --git a/crates/ui2/src/styled_ext.rs b/crates/ui2/src/styled_ext.rs index 9e81ab19ee..d064312c32 100644 --- a/crates/ui2/src/styled_ext.rs +++ b/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(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()) From 8a35a028637e943d594526ef9b29e7c30b5a465d Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Mon, 27 Nov 2023 11:22:19 -0500 Subject: [PATCH 2/5] Checkpoint - try using overlay for completions popover [no ci] --- 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(-) diff --git a/crates/editor2/src/editor.rs b/crates/editor2/src/editor.rs index a0f074221c..3aa5307718 100644 --- a/crates/editor2/src/editor.rs +++ b/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() } diff --git a/crates/gpui2/src/elements/overlay.rs b/crates/gpui2/src/elements/overlay.rs index d8aad4a42f..3d5c7ac0b5 100644 --- a/crates/gpui2/src/elements/overlay.rs +++ b/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 => { diff --git a/crates/ui2/src/components/popover.rs b/crates/ui2/src/components/popover.rs index 3838e40bec..62b624de0e 100644 --- a/crates/ui2/src/components/popover.rs +++ b/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), From ab83f4319baa5af2307802aba88e901bce51b673 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Mon, 27 Nov 2023 11:51:42 -0500 Subject: [PATCH 3/5] revert popover changes [no ci] --- crates/ui2/src/components/popover.rs | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/crates/ui2/src/components/popover.rs b/crates/ui2/src/components/popover.rs index 62b624de0e..925fb30a5e 100644 --- a/crates/ui2/src/components/popover.rs +++ b/crates/ui2/src/components/popover.rs @@ -44,18 +44,21 @@ impl RenderOnce for Popover { type Rendered = Div; fn render(self, cx: &mut WindowContext) -> Self::Rendered { - div() - .flex() - .flex_none() - .gap_1() - .child(v_stack().elevation_2(cx).p_1().children(self.children)) + v_stack() + .relative() + .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), From 82f6f771172e123f1d853a2fe9de0d4dda03e51c Mon Sep 17 00:00:00 2001 From: Conrad Irwin Date: Mon, 27 Nov 2023 11:48:10 -0700 Subject: [PATCH 4/5] Use editor's overlay implementation --- crates/editor2/src/editor.rs | 35 +++++++++------------------- crates/ui2/src/components/popover.rs | 4 ++-- 2 files changed, 13 insertions(+), 26 deletions(-) diff --git a/crates/editor2/src/editor.rs b/crates/editor2/src/editor.rs index a15d18f030..c713ab085b 100644 --- a/crates/editor2/src/editor.rs +++ b/crates/editor2/src/editor.rs @@ -39,13 +39,12 @@ use futures::FutureExt; use fuzzy::{StringMatch, StringMatchCandidate}; use git::diff_hunk_to_display; use gpui::{ - 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, + 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, }; use highlight_matching_bracket::refresh_matching_bracket_highlights; use hover_popover::{hide_hover, HoverState}; @@ -1369,23 +1368,11 @@ impl CompletionsMenu { .track_scroll(self.scroll_handle.clone()) .with_width_from_item(widest_completion_ix); - // 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) - }), - ) + Popover::new() + .child(list) + .when_some(multiline_docs, |popover, multiline_docs| { + popover.aside(multiline_docs) + }) .into_any_element() } diff --git a/crates/ui2/src/components/popover.rs b/crates/ui2/src/components/popover.rs index 925fb30a5e..3838e40bec 100644 --- a/crates/ui2/src/components/popover.rs +++ b/crates/ui2/src/components/popover.rs @@ -1,11 +1,11 @@ use gpui::{ - div, AnyElement, Div, Element, ElementId, IntoElement, ParentElement, RenderOnce, Styled, + AnyElement, Div, Element, ElementId, IntoElement, ParentElement, RenderOnce, Styled, WindowContext, }; use smallvec::SmallVec; use theme2::ActiveTheme; -use crate::{h_stack, v_stack, StyledExt}; +use crate::{v_stack, StyledExt}; /// A popover is used to display a menu or show some options. /// From 979ff70196ddd7286dedf8d2a27ebba3b160a57f Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Mon, 27 Nov 2023 20:12:20 -0500 Subject: [PATCH 5/5] Update popover.rs --- crates/ui2/src/components/popover.rs | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/crates/ui2/src/components/popover.rs b/crates/ui2/src/components/popover.rs index 3838e40bec..d9269b0ac4 100644 --- a/crates/ui2/src/components/popover.rs +++ b/crates/ui2/src/components/popover.rs @@ -1,5 +1,5 @@ use gpui::{ - AnyElement, Div, Element, ElementId, IntoElement, ParentElement, RenderOnce, Styled, + div, AnyElement, Div, Element, ElementId, IntoElement, ParentElement, RenderOnce, Styled, WindowContext, }; use smallvec::SmallVec; @@ -44,23 +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) .bg(cx.theme().colors().surface_background) - .p_1() + .px_1() .child(aside), ) })