Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

zeta: Refine visuals for the completion popover (#22142)

Browse source 
Most notably, trying out a different icon and adding the "Completion"
word to the side of the provider name.

<img width="800" alt="Screenshot 2024-12-17 at 13 04 55"
src="https://github.com/user-attachments/assets/6dcaa699-f358-4242-9812-e1668f426207"
/>

Release Notes:

- N/A
This commit is contained in:
Danilo Leal 2024-12-17 15:45:58 -03:00 • committed by GitHub
parent 7425d242bc
commit c86cf2c3e1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 29 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

5
assets/icons/zed_predict.svg
View file

@ -1,4 +1,5 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 8.9V11C5.93097 11 5.06903 11 3 11V10.4L8 5.6V5H3V7.1" stroke="black" stroke-width="1.5"/> <path d="M7 8.9V11C5.34478 11 4.65522 11 3 11V10.4L7 5.6V5H3V7.1" stroke="black" stroke-width="1.5"/>
<path d="M11 5L13 8L11 11" stroke="black" stroke-width="1.5"/> <path d="M12 5L14 8L12 11" stroke="black" stroke-width="1.5"/>
<path d="M10 6.5L11 8L10 9.5" stroke="black" stroke-width="1.5"/>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 268 B

After

Width:  |  Height:  |  Size: 334 B

Before After
Before After

53
crates/editor/src/code_context_menus.rs
View file

@ -14,11 +14,7 @@ use multi_buffer::{Anchor, ExcerptId};
use ordered_float::OrderedFloat; use ordered_float::OrderedFloat;
use project::{CodeAction, Completion, TaskSourceKind}; use project::{CodeAction, Completion, TaskSourceKind};
use task::ResolvedTask; use task::ResolvedTask;
use ui::{ use ui::{prelude::*, Color, IntoElement, ListItem, Popover, Styled};
h_flex, ActiveTheme as _, Color, FluentBuilder as _, InteractiveElement as _, IntoElement,
Label, LabelCommon as _, LabelSize, ListItem, ParentElement as _, Popover,
StatefulInteractiveElement as _, Styled, Toggleable as _,
};
use util::ResultExt as _; use util::ResultExt as _;
use workspace::Workspace; use workspace::Workspace;
@ -425,8 +421,10 @@ impl CompletionsMenu {
CompletionEntry::InlineCompletionHint(hint) => Some(match &hint.text { CompletionEntry::InlineCompletionHint(hint) => Some(match &hint.text {
InlineCompletionText::Edit { text, highlights } => div() InlineCompletionText::Edit { text, highlights } => div()
.my_1() .my_1()
.rounded_md() .rounded(px(6.))
.bg(cx.theme().colors().editor_background) .bg(cx.theme().colors().editor_background)
.border_1()
.border_color(cx.theme().colors().border_variant)
.child( .child(
gpui::StyledText::new(text.clone()) gpui::StyledText::new(text.clone())
.with_highlights(&style.text, highlights.clone()), .with_highlights(&style.text, highlights.clone()),
@ -451,9 +449,8 @@ impl CompletionsMenu {
.flex_1() .flex_1()
.px_1p5() .px_1p5()
.py_1() .py_1()
.min_w(px(260.))
.max_w(px(640.)) .max_w(px(640.))
.w(px(500.)) .w(px(450.))
.overflow_y_scroll() .overflow_y_scroll()
.occlude() .occlude()
}); });
@ -513,6 +510,7 @@ impl CompletionsMenu {
(range, highlight) (range, highlight)
}), }),
); );
let completion_label = let completion_label =
StyledText::new(completion.label.text.clone()) StyledText::new(completion.label.text.clone())
.with_highlights(&style.text, highlights); .with_highlights(&style.text, highlights);
@ -559,25 +557,26 @@ impl CompletionsMenu {
CompletionEntry::InlineCompletionHint(InlineCompletionMenuHint { CompletionEntry::InlineCompletionHint(InlineCompletionMenuHint {
provider_name, provider_name,
.. ..
}) => div() }) => div().min_w(px(250.)).max_w(px(500.)).child(
.min_w(px(250.)) ListItem::new("inline-completion")
.max_w(px(500.)) .inset(true)
.pb_1() .toggle_state(item_ix == selected_item)
.border_b_1() .start_slot(Icon::new(IconName::ZedPredict))
.border_color(cx.theme().colors().border_variant) .child(
.child( StyledText::new(format!(
ListItem::new("inline-completion") "{} Completion",
.inset(true) SharedString::new_static(provider_name)
.toggle_state(item_ix == selected_item) ))
.on_click(cx.listener(move |editor, _event, cx| { .with_highlights(&style.text, None),
cx.stop_propagation(); )
editor.accept_inline_completion( .on_click(cx.listener(move |editor, _event, cx| {
&AcceptInlineCompletion {}, cx.stop_propagation();
cx, editor.accept_inline_completion(
); &AcceptInlineCompletion {},
})) cx,
.child(Label::new(SharedString::new_static(provider_name))), );
), })),
),
} }
}) })
.collect() .collect()