From 5aaaed52fc46fdc3029133fac4f96a7652681ea9 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Wed, 2 Oct 2024 18:57:03 +0200 Subject: [PATCH] Adjust spacing and sizing of buffer search bar icon buttons (#18638) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This PR mostly makes all of the search bar icon buttons all squared and adjusts the spacing between them, as well as the additional input that appears when you toggle the "Replace all" action. Screenshot 2024-10-02 at 6 08 30 PM --- Release Notes: - N/A --- crates/search/src/buffer_search.rs | 133 +++++++++++++++------------- crates/search/src/project_search.rs | 2 +- crates/search/src/search.rs | 3 +- crates/search/src/search_bar.rs | 3 +- 4 files changed, 76 insertions(+), 65 deletions(-) diff --git a/crates/search/src/buffer_search.rs b/crates/search/src/buffer_search.rs index 42b267c3c9..5846a6efc5 100644 --- a/crates/search/src/buffer_search.rs +++ b/crates/search/src/buffer_search.rs @@ -27,7 +27,7 @@ use settings::Settings; use std::sync::Arc; use theme::ThemeSettings; -use ui::{h_flex, prelude::*, IconButton, IconName, Tooltip, BASE_REM_SIZE_IN_PX}; +use ui::{h_flex, prelude::*, IconButton, IconButtonShape, IconName, Tooltip, BASE_REM_SIZE_IN_PX}; use util::ResultExt; use workspace::{ item::ItemHandle, @@ -200,7 +200,7 @@ impl Render for BufferSearchBar { }; let search_line = h_flex() - .mb_1() + .gap_2() .child( h_flex() .id("editor-scroll") @@ -208,7 +208,6 @@ impl Render for BufferSearchBar { .flex_1() .h_8() .px_2() - .mr_2() .py_1() .border_1() .border_color(editor_border) @@ -244,66 +243,70 @@ impl Render for BufferSearchBar { })) }), ) - .when(supported_options.replacement, |this| { - this.child( - IconButton::new("buffer-search-bar-toggle-replace-button", IconName::Replace) - .style(ButtonStyle::Subtle) - .when(self.replace_enabled, |button| { - button.style(ButtonStyle::Filled) - }) - .on_click(cx.listener(|this, _: &ClickEvent, cx| { - this.toggle_replace(&ToggleReplace, cx); - })) - .selected(self.replace_enabled) - .size(ButtonSize::Compact) - .tooltip({ - let focus_handle = focus_handle.clone(); - move |cx| { - Tooltip::for_action_in( - "Toggle replace", - &ToggleReplace, - &focus_handle, - cx, - ) - } - }), - ) - }) - .when(supported_options.selection, |this| { - this.child( - IconButton::new( - "buffer-search-bar-toggle-search-selection-button", - IconName::SearchSelection, - ) - .style(ButtonStyle::Subtle) - .when(self.selection_search_enabled, |button| { - button.style(ButtonStyle::Filled) - }) - .on_click(cx.listener(|this, _: &ClickEvent, cx| { - this.toggle_selection(&ToggleSelection, cx); - })) - .selected(self.selection_search_enabled) - .size(ButtonSize::Compact) - .tooltip({ - let focus_handle = focus_handle.clone(); - move |cx| { - Tooltip::for_action_in( - "Toggle Search Selection", - &ToggleSelection, - &focus_handle, - cx, - ) - } - }), - ) - }) .child( h_flex() .flex_none() + .gap_0p5() + .when(supported_options.replacement, |this| { + this.child( + IconButton::new( + "buffer-search-bar-toggle-replace-button", + IconName::Replace, + ) + .style(ButtonStyle::Subtle) + .shape(IconButtonShape::Square) + .when(self.replace_enabled, |button| { + button.style(ButtonStyle::Filled) + }) + .on_click(cx.listener(|this, _: &ClickEvent, cx| { + this.toggle_replace(&ToggleReplace, cx); + })) + .selected(self.replace_enabled) + .tooltip({ + let focus_handle = focus_handle.clone(); + move |cx| { + Tooltip::for_action_in( + "Toggle Replace", + &ToggleReplace, + &focus_handle, + cx, + ) + } + }), + ) + }) + .when(supported_options.selection, |this| { + this.child( + IconButton::new( + "buffer-search-bar-toggle-search-selection-button", + IconName::SearchSelection, + ) + .style(ButtonStyle::Subtle) + .shape(IconButtonShape::Square) + .when(self.selection_search_enabled, |button| { + button.style(ButtonStyle::Filled) + }) + .on_click(cx.listener(|this, _: &ClickEvent, cx| { + this.toggle_selection(&ToggleSelection, cx); + })) + .selected(self.selection_search_enabled) + .tooltip({ + let focus_handle = focus_handle.clone(); + move |cx| { + Tooltip::for_action_in( + "Toggle Search Selection", + &ToggleSelection, + &focus_handle, + cx, + ) + } + }), + ) + }) .child( IconButton::new("select-all", ui::IconName::SelectAll) .on_click(|_, cx| cx.dispatch_action(SelectAllMatches.boxed_clone())) - .size(ButtonSize::Compact) + .shape(IconButtonShape::Square) .tooltip({ let focus_handle = focus_handle.clone(); move |cx| { @@ -332,11 +335,13 @@ impl Render for BufferSearchBar { )) .when(!narrow_mode, |this| { this.child(h_flex().ml_2().min_w(rems_from_px(40.)).child( - Label::new(match_text).color(if self.active_match_index.is_some() { - Color::Default - } else { - Color::Disabled - }), + Label::new(match_text).size(LabelSize::Small).color( + if self.active_match_index.is_some() { + Color::Default + } else { + Color::Disabled + }, + ), )) }), ); @@ -367,8 +372,10 @@ impl Render for BufferSearchBar { .child( h_flex() .flex_none() + .gap_0p5() .child( IconButton::new("search-replace-next", ui::IconName::ReplaceNext) + .shape(IconButtonShape::Square) .tooltip({ let focus_handle = focus_handle.clone(); move |cx| { @@ -386,6 +393,7 @@ impl Render for BufferSearchBar { ) .child( IconButton::new("search-replace-all", ui::IconName::ReplaceAll) + .shape(IconButtonShape::Square) .tooltip({ let focus_handle = focus_handle.clone(); move |cx| { @@ -441,6 +449,7 @@ impl Render for BufferSearchBar { .when(!narrow_mode, |div| { div.child( IconButton::new(SharedString::from("Close"), IconName::Close) + .shape(IconButtonShape::Square) .tooltip(move |cx| { Tooltip::for_action("Close Search Bar", &Dismiss, cx) }) diff --git a/crates/search/src/project_search.rs b/crates/search/src/project_search.rs index 12e6ccc12d..693d4b2658 100644 --- a/crates/search/src/project_search.rs +++ b/crates/search/src/project_search.rs @@ -1634,7 +1634,7 @@ impl Render for ProjectSearchBar { let focus_handle = focus_handle.clone(); move |cx| { Tooltip::for_action_in( - "Toggle replace", + "Toggle Replace", &ToggleReplace, &focus_handle, cx, diff --git a/crates/search/src/search.rs b/crates/search/src/search.rs index 0ceb8e710b..60ff80834f 100644 --- a/crates/search/src/search.rs +++ b/crates/search/src/search.rs @@ -5,7 +5,7 @@ use gpui::{actions, Action, AppContext, FocusHandle, IntoElement}; use project::search::SearchQuery; pub use project_search::ProjectSearchView; use ui::{prelude::*, Tooltip}; -use ui::{ButtonStyle, IconButton}; +use ui::{ButtonStyle, IconButton, IconButtonShape}; use workspace::notifications::NotificationId; use workspace::{Toast, Workspace}; @@ -112,6 +112,7 @@ impl SearchOptions { IconButton::new(self.label(), self.icon()) .on_click(action) .style(ButtonStyle::Subtle) + .shape(IconButtonShape::Square) .selected(active) .tooltip({ let action = self.to_toggle_action(); diff --git a/crates/search/src/search_bar.rs b/crates/search/src/search_bar.rs index 102f04c4b9..080679663d 100644 --- a/crates/search/src/search_bar.rs +++ b/crates/search/src/search_bar.rs @@ -1,6 +1,6 @@ use gpui::{Action, FocusHandle, IntoElement}; -use ui::IconButton; use ui::{prelude::*, Tooltip}; +use ui::{IconButton, IconButtonShape}; pub(super) fn render_nav_button( icon: ui::IconName, @@ -13,6 +13,7 @@ pub(super) fn render_nav_button( SharedString::from(format!("search-nav-button-{}", action.name())), icon, ) + .shape(IconButtonShape::Square) .on_click(|_, cx| cx.dispatch_action(action.boxed_clone())) .tooltip(move |cx| Tooltip::for_action_in(tooltip, action, &focus_handle, cx)) .disabled(!active)