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 42b267c3c9563a3bb03880880145e11536425158..5846a6efc51dd29b8e25ee243d3d6248f5511fac 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 12e6ccc12dc4967ed5db20f95562ee99b7ee2f00..693d4b265867fb106e8bd994455a12cdb7a82734 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 0ceb8e710b5f41e3dbeb64fbeaf33581940cb444..60ff80834feed42648d014959fa1f24debbbf2b9 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 102f04c4b95c28a1f0beaedd7e2f6c1667adb52e..080679663d0ba456399d48da623b68c4451fbe71 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)