zeta: Adjust the "Jump To Edit" button visuals (#21933)
Danilo Leal
created
| One Dark | One Light |
|--------|--------|
| <img width="1495" alt="Screenshot 2024-12-12 at 16 27 12"
src="https://github.com/user-attachments/assets/897ee786-a6f7-4d4e-8722-301ac13e6d8c"
/> | <img width="1495" alt="Screenshot 2024-12-12 at 16 27 18"
src="https://github.com/user-attachments/assets/a78aa5e4-f327-41da-bc9c-6e102bc67fe2"
/> |
| One Dark | One Light |
|--------|--------|
| <img width="1495" alt="Screenshot 2024-12-12 at 16 26 54"
src="https://github.com/user-attachments/assets/0357468e-7b5f-4f92-bcdb-5f94e353d8b2"
/> | <img width="1495" alt="Screenshot 2024-12-12 at 16 26 59"
src="https://github.com/user-attachments/assets/20e0f47e-e20f-46a7-b053-8e528b0975d7"
/> |
Release Notes:
- N/A
Change summary
crates/editor/src/element.rs | 47 +++++++++++++++++++++----------------
1 file changed, 27 insertions(+), 20 deletions(-)
Detailed changes
@@ -2755,22 +2755,34 @@ impl EditorElement {
match &active_inline_completion.completion {
InlineCompletion::Move(target_position) => {
- let container_element = div()
- .bg(cx.theme().colors().editor_background)
+ let tab_kbd = h_flex()
+ .px_0p5()
+ .font(theme::ThemeSettings::get_global(cx).buffer_font.clone())
+ .text_size(TextSize::XSmall.rems(cx))
+ .text_color(cx.theme().colors().text.opacity(0.8))
+ .child("tab");
+
+ let icon_container = div().mt(px(2.5)); // For optical alignment
+
+ let container_element = h_flex()
+ .items_center()
+ .py_0p5()
+ .px_1()
+ .gap_1()
+ .bg(cx.theme().colors().editor_subheader_background)
.border_1()
- .border_color(cx.theme().colors().border)
+ .border_color(cx.theme().colors().text_accent.opacity(0.2))
.rounded_md()
- .px_1();
+ .shadow_sm();
let target_display_point = target_position.to_display_point(editor_snapshot);
if target_display_point.row().as_f32() < scroll_top {
let mut element = container_element
+ .child(tab_kbd)
+ .child(Label::new("Jump to Edit").size(LabelSize::Small))
.child(
- h_flex()
- .gap_1()
- .child(Icon::new(IconName::Tab))
- .child(Label::new("Jump to Edit"))
- .child(Icon::new(IconName::ArrowUp)),
+ icon_container
+ .child(Icon::new(IconName::ArrowUp).size(IconSize::Small)),
)
.into_any();
let size = element.layout_as_root(AvailableSpace::min_size(), cx);
@@ -2779,12 +2791,11 @@ impl EditorElement {
Some(element)
} else if (target_display_point.row().as_f32() + 1.) > scroll_bottom {
let mut element = container_element
+ .child(tab_kbd)
+ .child(Label::new("Jump to Edit").size(LabelSize::Small))
.child(
- h_flex()
- .gap_1()
- .child(Icon::new(IconName::Tab))
- .child(Label::new("Jump to Edit"))
- .child(Icon::new(IconName::ArrowDown)),
+ icon_container
+ .child(Icon::new(IconName::ArrowDown).size(IconSize::Small)),
)
.into_any();
let size = element.layout_as_root(AvailableSpace::min_size(), cx);
@@ -2796,12 +2807,8 @@ impl EditorElement {
Some(element)
} else {
let mut element = container_element
- .child(
- h_flex()
- .gap_1()
- .child(Icon::new(IconName::Tab))
- .child(Label::new("Jump to Edit")),
- )
+ .child(tab_kbd)
+ .child(Label::new("Jump to Edit").size(LabelSize::Small))
.into_any();
let target_line_end = DisplayPoint::new(