From 70b1e0eec0f4118c15d908636b9a38591dcf43ea Mon Sep 17 00:00:00 2001 From: Conrad Irwin Date: Wed, 5 Feb 2025 11:48:33 -0700 Subject: [PATCH] Fix expand buttons adjacent to folded hunks (#24297) Release Notes: - Fix expand buttons adjacent to folded hunks --- crates/editor/src/element.rs | 292 ++++++++++++++--------------------- 1 file changed, 116 insertions(+), 176 deletions(-) diff --git a/crates/editor/src/element.rs b/crates/editor/src/element.rs index f0b0730ad5e9f75b87dff2e850535b4864476722..4669f5d57fbba7d5e62f030f9345e0288f8c1977 100644 --- a/crates/editor/src/element.rs +++ b/crates/editor/src/element.rs @@ -2403,35 +2403,18 @@ impl EditorElement { height, } => { let selected = selected_buffer_ids.contains(&first_excerpt.buffer_id); - let icon_offset = gutter_dimensions.width - - (gutter_dimensions.left_padding + gutter_dimensions.margin); let mut result = v_flex().id(block_id).w_full(); if let Some(prev_excerpt) = prev_excerpt { if *show_excerpt_controls { - result = - result.child( - h_flex() - .id("expand_down_hit_area") - .w(icon_offset) - .h(MULTI_BUFFER_EXCERPT_HEADER_HEIGHT as f32 - * window.line_height()) - .flex_none() - .justify_end() - .child(self.render_expand_excerpt_button( - IconName::ArrowDownFromLine, - None, - cx, - )) - .on_click(window.listener_for(&self.editor, { - let excerpt_id = prev_excerpt.id; - let direction = ExpandExcerptDirection::Down; - move |editor, _, _, cx| { - editor.expand_excerpt(excerpt_id, direction, cx); - cx.stop_propagation(); - } - })), - ); + result = result.child(self.render_expand_excerpt_control( + block_id, + ExpandExcerptDirection::Down, + prev_excerpt.id, + gutter_dimensions, + window, + cx, + )); } } @@ -2455,65 +2438,19 @@ impl EditorElement { height, starts_new_buffer, } => { - let icon_offset = gutter_dimensions.width - - (gutter_dimensions.left_padding + gutter_dimensions.margin); - let header_height = - MULTI_BUFFER_EXCERPT_HEADER_HEIGHT as f32 * window.line_height(); let color = cx.theme().colors().clone(); - let hover_color = color.border_variant.opacity(0.5); - let focus_handle = self.editor.focus_handle(cx).clone(); - let mut result = v_flex().id(block_id).w_full(); - let expand_area = |id: SharedString| { - h_flex() - .id(id) - .w_full() - .cursor_pointer() - .block_mouse_down() - .on_mouse_move(|_, _, cx| cx.stop_propagation()) - .hover(|style| style.bg(hover_color)) - .tooltip({ - let focus_handle = focus_handle.clone(); - move |window, cx| { - Tooltip::for_action_in( - "Expand Excerpt", - &ExpandExcerpts { lines: 0 }, - &focus_handle, - window, - cx, - ) - } - }) - }; if let Some(prev_excerpt) = prev_excerpt { if *show_excerpt_controls { - let group_name = "expand-down"; - - result = result.child( - expand_area(format!("block-{}-down", block_id).into()) - .group(group_name) - .child( - h_flex() - .w(icon_offset) - .h(header_height) - .flex_none() - .justify_end() - .child(self.render_expand_excerpt_button( - IconName::ArrowDownFromLine, - Some(group_name.to_string()), - cx, - )), - ) - .on_click(window.listener_for(&self.editor, { - let excerpt_id = prev_excerpt.id; - let direction = ExpandExcerptDirection::Down; - move |editor, _, _, cx| { - editor.expand_excerpt(excerpt_id, direction, cx); - cx.stop_propagation(); - } - })), - ); + result = result.child(self.render_expand_excerpt_control( + block_id, + ExpandExcerptDirection::Down, + prev_excerpt.id, + gutter_dimensions, + window, + cx, + )); } } @@ -2539,43 +2476,20 @@ impl EditorElement { } if *show_excerpt_controls { - let group_name = "expand-up-first"; - - result = result.child( - h_flex().group(group_name).child( - expand_area(format!("block-{}-up-first", block_id).into()) - .h(header_height) - .child( - h_flex() - .w(icon_offset) - .h(header_height) - .flex_none() - .justify_end() - .child(self.render_expand_excerpt_button( - IconName::ArrowUpFromLine, - Some(group_name.to_string()), - cx, - )), - ) - .on_click(window.listener_for(&self.editor, { - let excerpt_id = next_excerpt.id; - let direction = ExpandExcerptDirection::Up; - move |editor, _, _, cx| { - editor.expand_excerpt(excerpt_id, direction, cx); - cx.stop_propagation(); - } - })), - ), - ); + result = result.child(self.render_expand_excerpt_control( + block_id, + ExpandExcerptDirection::Up, + next_excerpt.id, + gutter_dimensions, + window, + cx, + )); } } else { - let group_name = "expand-up-subsequent"; - if *show_excerpt_controls { result = result.child( h_flex() .relative() - .group(group_name) .child( div() .top(px(0.)) @@ -2584,55 +2498,14 @@ impl EditorElement { .h_px() .bg(color.border_variant), ) - .child( - expand_area(format!("block-{}-up", block_id).into()) - .h(header_height) - .child( - h_flex() - .w(icon_offset) - .h(header_height) - .flex_none() - .justify_end() - .child(if *show_excerpt_controls { - self.render_expand_excerpt_button( - IconName::ArrowUpFromLine, - Some(group_name.to_string()), - cx, - ) - } else { - ButtonLike::new("jump-icon") - .style(ButtonStyle::Transparent) - .child( - svg() - .path( - IconName::ArrowUpRight - .path(), - ) - .size(IconSize::XSmall.rems()) - .text_color( - color.border_variant, - ) - .group_hover( - group_name, - |style| { - style.text_color( - color.border, - ) - }, - ), - ) - }), - ) - .on_click(window.listener_for(&self.editor, { - let excerpt_id = next_excerpt.id; - let direction = ExpandExcerptDirection::Up; - move |editor, _, _, cx| { - editor - .expand_excerpt(excerpt_id, direction, cx); - cx.stop_propagation(); - } - })), - ), + .child(self.render_expand_excerpt_control( + block_id, + ExpandExcerptDirection::Up, + next_excerpt.id, + gutter_dimensions, + window, + cx, + )), ); } }; @@ -2809,26 +2682,93 @@ impl EditorElement { ) } - fn render_expand_excerpt_button( + fn render_expand_excerpt_control( &self, - icon: IconName, - group_name: impl Into>, + block_id: BlockId, + direction: ExpandExcerptDirection, + excerpt_id: ExcerptId, + gutter_dimensions: &GutterDimensions, + window: &Window, cx: &mut App, - ) -> ButtonLike { - let group_name = group_name.into(); - ButtonLike::new("expand-icon") - .style(ButtonStyle::Transparent) - .child( - svg() - .path(icon.path()) - .size(IconSize::XSmall.rems()) - .text_color(cx.theme().colors().editor_line_number) - .when_some(group_name, |svg, group_name| { - svg.group_hover(group_name, |style| { - style.text_color(cx.theme().colors().editor_active_line_number) - }) - }), + ) -> impl IntoElement { + let color = cx.theme().colors().clone(); + let hover_color = color.border_variant.opacity(0.5); + let focus_handle = self.editor.focus_handle(cx).clone(); + + let icon_offset = + gutter_dimensions.width - (gutter_dimensions.left_padding + gutter_dimensions.margin); + let header_height = MULTI_BUFFER_EXCERPT_HEADER_HEIGHT as f32 * window.line_height(); + let group_name = if direction == ExpandExcerptDirection::Down { + "expand-down" + } else { + "expand-up" + }; + + let expand_area = |id: SharedString| { + h_flex() + .id(id) + .w_full() + .cursor_pointer() + .block_mouse_down() + .on_mouse_move(|_, _, cx| cx.stop_propagation()) + .hover(|style| style.bg(hover_color)) + .tooltip({ + let focus_handle = focus_handle.clone(); + move |window, cx| { + Tooltip::for_action_in( + "Expand Excerpt", + &ExpandExcerpts { lines: 0 }, + &focus_handle, + window, + cx, + ) + } + }) + }; + + expand_area( + format!( + "block-{}-{}", + block_id, + if direction == ExpandExcerptDirection::Down { + "down" + } else { + "up" + } ) + .into(), + ) + .group(group_name) + .child( + h_flex() + .w(icon_offset) + .h(header_height) + .flex_none() + .justify_end() + .child( + ButtonLike::new("expand-icon") + .style(ButtonStyle::Transparent) + .child( + svg() + .path(if direction == ExpandExcerptDirection::Down { + IconName::ArrowDownFromLine.path() + } else { + IconName::ArrowUpFromLine.path() + }) + .size(IconSize::XSmall.rems()) + .text_color(cx.theme().colors().editor_line_number) + .group_hover(group_name, |style| { + style.text_color(cx.theme().colors().editor_active_line_number) + }), + ), + ), + ) + .on_click(window.listener_for(&self.editor, { + move |editor, _, _, cx| { + editor.expand_excerpt(excerpt_id, direction, cx); + cx.stop_propagation(); + } + })) } #[allow(clippy::too_many_arguments)]