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

Refine interaction in foldable multibuffer header (#22084)

Browse source 
- Ensuring that the fold button is big enough to avoid clicking on the
header as a whole (and then moving to the actual file)
- Adding tooltips to the fold button
- Refining the container structure so that the tooltip for the folder
button and the header click don't overlap
- Adding keybindings to tooltips


https://github.com/user-attachments/assets/82284b59-3025-4d6d-b916-ad4d1ecdb119

Release Notes:

- N/A
This commit is contained in:
Danilo Leal 2024-12-16 12:54:06 -03:00 • committed by GitHub
parent bc113e4b51
commit 2562b488b1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 63 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

94
crates/editor/src/element.rs
View file

@ -22,7 +22,7 @@ use crate::{
EditorSnapshot, EditorStyle, ExpandExcerpts, FocusedBlock, GutterDimensions, HalfPageDown, EditorSnapshot, EditorStyle, ExpandExcerpts, FocusedBlock, GutterDimensions, HalfPageDown,
HalfPageUp, HandleInput, HoveredCursor, HoveredHunk, InlineCompletion, JumpData, LineDown, HalfPageUp, HandleInput, HoveredCursor, HoveredHunk, InlineCompletion, JumpData, LineDown,
LineUp, OpenExcerpts, PageDown, PageUp, Point, RowExt, RowRangeExt, SelectPhase, Selection, LineUp, OpenExcerpts, PageDown, PageUp, Point, RowExt, RowRangeExt, SelectPhase, Selection,
SoftWrap, ToPoint, CURSORS_VISIBLE_FOR, FILE_HEADER_HEIGHT, SoftWrap, ToPoint, ToggleFold, CURSORS_VISIBLE_FOR, FILE_HEADER_HEIGHT,
GIT_BLAME_MAX_AUTHOR_CHARS_DISPLAYED, MAX_LINE_LEN, MULTI_BUFFER_EXCERPT_HEADER_HEIGHT, GIT_BLAME_MAX_AUTHOR_CHARS_DISPLAYED, MAX_LINE_LEN, MULTI_BUFFER_EXCERPT_HEADER_HEIGHT,
}; };
use client::ParticipantIndex; use client::ParticipantIndex;
@ -2398,6 +2398,8 @@ impl EditorElement {
.as_ref() .as_ref()
.and_then(|path| Some(path.parent()?.to_string_lossy().to_string() + "/")); .and_then(|path| Some(path.parent()?.to_string_lossy().to_string() + "/"));
let focus_handle = self.editor.focus_handle(cx);
div() div()
.px(header_padding) .px(header_padding)
.pt(header_padding) .pt(header_padding)
@ -2405,29 +2407,43 @@ impl EditorElement {
.h(FILE_HEADER_HEIGHT as f32 * cx.line_height()) .h(FILE_HEADER_HEIGHT as f32 * cx.line_height())
.child( .child(
h_flex() h_flex()
.id("path header block")
.size_full() .size_full()
.gap_2()
.flex_basis(Length::Definite(DefiniteLength::Fraction(0.667))) .flex_basis(Length::Definite(DefiniteLength::Fraction(0.667)))
.px(gpui::px(12.)) .pl_0p5()
.pr_4()
.rounded_md() .rounded_md()
.shadow_md() .shadow_md()
.border_1() .border_1()
.border_color(cx.theme().colors().border) .border_color(cx.theme().colors().border)
.bg(cx.theme().colors().editor_subheader_background) .bg(cx.theme().colors().editor_subheader_background)
.justify_between()
.hover(|style| style.bg(cx.theme().colors().element_hover)) .hover(|style| style.bg(cx.theme().colors().element_hover))
.child( .map(|header| {
h_flex() let editor = self.editor.clone();
.gap_3() let buffer_id = for_excerpt.buffer_id;
.map(|header| { let toggle_chevron_icon =
let editor = self.editor.clone(); FileIcons::get_chevron_icon(!is_folded, cx).map(Icon::from_path);
let buffer_id = for_excerpt.buffer_id; header.child(
let toggle_chevron_icon = div()
FileIcons::get_chevron_icon(!is_folded, cx) .hover(|style| style.bg(cx.theme().colors().element_selected))
.map(Icon::from_path); .rounded_sm()
header.child( .child(
ButtonLike::new("toggle-buffer-fold") ButtonLike::new("toggle-buffer-fold")
.style(ui::ButtonStyle::Transparent)
.size(ButtonSize::Large)
.width(px(30.).into())
.children(toggle_chevron_icon) .children(toggle_chevron_icon)
.tooltip({
let focus_handle = focus_handle.clone();
move |cx| {
Tooltip::for_action_in(
"Toggle Excerpt Fold",
&ToggleFold,
&focus_handle,
cx,
)
}
})
.on_click(move |_, cx| { .on_click(move |_, cx| {
if is_folded { if is_folded {
editor.update(cx, |editor, cx| { editor.update(cx, |editor, cx| {
@ -2439,8 +2455,14 @@ impl EditorElement {
}); });
} }
}), }),
) ),
}) )
})
.child(
h_flex()
.id("path header block")
.size_full()
.justify_between()
.child( .child(
h_flex() h_flex()
.gap_2() .gap_2()
@ -2456,21 +2478,31 @@ impl EditorElement {
.text_color(cx.theme().colors().text_muted), .text_color(cx.theme().colors().text_muted),
) )
}), }),
), )
) .child(Icon::new(IconName::ArrowUpRight))
.child(Icon::new(IconName::ArrowUpRight)) .cursor_pointer()
.cursor_pointer() .tooltip({
.tooltip(|cx| Tooltip::for_action("Jump to File", &OpenExcerpts, cx)) let focus_handle = focus_handle.clone();
.on_mouse_down(MouseButton::Left, |_, cx| cx.stop_propagation()) move |cx| {
.on_click(cx.listener_for(&self.editor, { Tooltip::for_action_in(
move |editor, e: &ClickEvent, cx| { "Jump To File",
editor.open_excerpts_common( &OpenExcerpts,
Some(jump_data.clone()), &focus_handle,
e.down.modifiers.secondary(), cx,
cx, )
); }
} })
})), .on_mouse_down(MouseButton::Left, |_, cx| cx.stop_propagation())
.on_click(cx.listener_for(&self.editor, {
move |editor, e: &ClickEvent, cx| {
editor.open_excerpts_common(
Some(jump_data.clone()),
e.down.modifiers.secondary(),
cx,
);
}
})),
),
) )
} }