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

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

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