workspace: Remove layout shift from multibuffer toolbar (#48472)

Danilo Leal created 2 months ago

The icons in the far left of the multibuffer toolbar were shifting a bit
to the side when toggling the buffer search, so this PR fixes that. I'm
also removing the labeled button for the expand/collapse all excerpts;
relying only on the icon-button version of it, given it's simpler and
similarly clear.


https://github.com/user-attachments/assets/8ee44c9f-3082-4160-ac77-a3cf489b318a

Release Notes:

- N/A

Change summary

assets/icons/diff_split.svg        |  8 +-
assets/icons/diff_stacked.svg      |  7 +-
crates/search/src/buffer_search.rs | 67 ++++++++-----------------------
3 files changed, 25 insertions(+), 57 deletions(-)

Detailed changes

assets/icons/diff_split.svg

@@ -1,5 +1,5 @@
-<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="2.25" y="2.25" width="2.25" height="7.5" rx="0.5625" fill="black" style="fill:black;fill-opacity:1;"/>
-<rect opacity="0.7" x="5.625" y="1.5" width="0.75" height="9" rx="0.375" fill="black" style="fill:black;fill-opacity:1;"/>
-<rect x="7.5" y="2.25" width="2.25" height="7.5" rx="0.5625" fill="black" style="fill:black;fill-opacity:1;"/>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.25 3H3.75C3.33579 3 3 3.33579 3 3.75V12.25C3 12.6642 3.33579 13 3.75 13H5.25C5.66421 13 6 12.6642 6 12.25V3.75C6 3.33579 5.66421 3 5.25 3Z" fill="#C6CAD0"/>
+<path opacity="0.7" d="M8.5 2.5C8.5 2.22386 8.27614 2 8 2C7.72386 2 7.5 2.22386 7.5 2.5V13.5C7.5 13.7761 7.72386 14 8 14C8.27614 14 8.5 13.7761 8.5 13.5V2.5Z" fill="#C6CAD0"/>
+<path d="M12.25 3H10.75C10.3358 3 10 3.33579 10 3.75V12.25C10 12.6642 10.3358 13 10.75 13H12.25C12.6642 13 13 12.6642 13 12.25V3.75C13 3.33579 12.6642 3 12.25 3Z" fill="#C6CAD0"/>
 </svg>

assets/icons/diff_stacked.svg

@@ -1,5 +1,4 @@
-<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect opacity="0.12" x="2.25" y="6.75" width="7.5" height="3" rx="0.75" fill="black" style="fill:black;fill-opacity:1;"/>
-<rect x="2.25" y="2.25" width="7.5" height="3" rx="0.75" fill="black" style="fill:black;fill-opacity:1;"/>
-<rect x="2.625" y="7.125" width="6.75" height="2.25" rx="0.375" stroke="black" style="stroke:black;stroke-opacity:1;" stroke-width="0.75"/>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 3H4C3.44772 3 3 3.44772 3 4V6C3 6.55228 3.44772 7 4 7H12C12.5523 7 13 6.55228 13 6V4C13 3.44772 12.5523 3 12 3Z" fill="#C6CAD0"/>
+<path d="M12 9.5H4C3.72386 9.5 3.5 9.72386 3.5 10V12C3.5 12.2761 3.72386 12.5 4 12.5H12C12.2761 12.5 12.5 12.2761 12.5 12V10C12.5 9.72386 12.2761 9.5 12 9.5Z" fill="#C6CAD0" fill-opacity="0.12" stroke="#C6CAD0" stroke-width="1.2"/>
 </svg>

crates/search/src/buffer_search.rs

@@ -154,7 +154,7 @@ impl Render for BufferSearchBar {
                     let is_split = splittable_editor.read(cx).is_split();
                     let focus_handle = splittable_editor.focus_handle(cx);
                     h_flex()
-                        .gap_0p5()
+                        .gap_1()
                         .child(
                             IconButton::new("diff-stacked", IconName::DiffStacked)
                                 .shape(IconButtonShape::Square)
@@ -196,42 +196,15 @@ impl Render for BufferSearchBar {
         let collapse_expand_button = if self.needs_expand_collapse_option(cx) {
             let query_editor_focus = self.query_editor.focus_handle(cx);
 
-            let (icon, label, tooltip_label) = if self.is_collapsed {
-                (IconName::ChevronUpDown, "Expand All", "Expand All Files")
+            let (icon, tooltip_label) = if self.is_collapsed {
+                (IconName::ChevronUpDown, "Expand All Files")
             } else {
-                (
-                    IconName::ChevronDownUp,
-                    "Collapse All",
-                    "Collapse All Files",
-                )
+                (IconName::ChevronDownUp, "Collapse All Files")
             };
 
-            if self.dismissed {
-                if has_splittable_editor {
-                    return h_flex()
-                        .gap_1()
-                        .child(
-                            IconButton::new("multibuffer-collapse-expand-empty", icon)
-                                .shape(IconButtonShape::Square)
-                                .tooltip(move |_, cx| {
-                                    Tooltip::for_action_in(
-                                        tooltip_label,
-                                        &ToggleFoldAll,
-                                        &query_editor_focus,
-                                        cx,
-                                    )
-                                })
-                                .on_click(|_event, window, cx| {
-                                    window.dispatch_action(ToggleFoldAll.boxed_clone(), cx)
-                                }),
-                        )
-                        .children(split_buttons)
-                        .into_any_element();
-                }
-
-                return Button::new("multibuffer-collapse-expand-empty", label)
-                    .icon_position(IconPosition::Start)
-                    .icon(icon)
+            let collapse_expand_icon_button = |id| {
+                IconButton::new(id, icon)
+                    .shape(IconButtonShape::Square)
                     .tooltip(move |_, cx| {
                         Tooltip::for_action_in(
                             tooltip_label,
@@ -243,27 +216,23 @@ impl Render for BufferSearchBar {
                     .on_click(|_event, window, cx| {
                         window.dispatch_action(ToggleFoldAll.boxed_clone(), cx)
                     })
+            };
+
+            if self.dismissed {
+                return h_flex()
+                    .pl_0p5()
+                    .gap_1()
+                    .child(collapse_expand_icon_button(
+                        "multibuffer-collapse-expand-empty",
+                    ))
+                    .when(has_splittable_editor, |this| this.children(split_buttons))
                     .into_any_element();
             }
 
             Some(
                 h_flex()
                     .gap_1()
-                    .child(
-                        IconButton::new("multibuffer-collapse-expand", icon)
-                            .shape(IconButtonShape::Square)
-                            .tooltip(move |_, cx| {
-                                Tooltip::for_action_in(
-                                    tooltip_label,
-                                    &ToggleFoldAll,
-                                    &query_editor_focus,
-                                    cx,
-                                )
-                            })
-                            .on_click(|_event, window, cx| {
-                                window.dispatch_action(ToggleFoldAll.boxed_clone(), cx)
-                            }),
-                    )
+                    .child(collapse_expand_icon_button("multibuffer-collapse-expand"))
                     .children(split_buttons)
                     .into_any_element(),
             )