From 20b60e8dd25f4469af9c6feb8a0aaf614d93aac3 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Thu, 7 Nov 2024 10:56:10 -0300
Subject: [PATCH] Ensure project search actions are always aligned (#20353)
Follow up to https://github.com/zed-industries/zed/pull/20242
This PR ensures all the actions to the right of the project search
inputs have the same minimum width, ensuring that the inputs themselves
are always aligned. In the previous PR, I didn't considered the scenario
where the project search numbers where beyond 4 or 5 digits, which then
increased their width. This should be treated now!
Release Notes:
- N/A
---
assets/icons/file_search.svg | 1 +
crates/search/src/project_search.rs | 108 ++++++++++++++--------------
crates/ui/src/components/icon.rs | 1 +
3 files changed, 57 insertions(+), 53 deletions(-)
create mode 100644 assets/icons/file_search.svg
diff --git a/assets/icons/file_search.svg b/assets/icons/file_search.svg
new file mode 100644
index 0000000000000000000000000000000000000000..9d82151798f513cdfce0eb2d50a261b859063ce4
--- /dev/null
+++ b/assets/icons/file_search.svg
@@ -0,0 +1 @@
+
diff --git a/crates/search/src/project_search.rs b/crates/search/src/project_search.rs
index 40068ea5f919efb81399f4ad2f01a62bc7d2684d..d4b44a1611c1a31b487c94a261e5d706de197f0d 100644
--- a/crates/search/src/project_search.rs
+++ b/crates/search/src/project_search.rs
@@ -1747,7 +1747,7 @@ impl Render for ProjectSearchBar {
.child(
div()
.id("matches")
- .ml_0p5()
+ .ml_1()
.child(
Label::new(match_text).color(if search.active_match_index.is_some() {
Color::Default
@@ -1765,10 +1765,8 @@ impl Render for ProjectSearchBar {
let search_line = h_flex()
.w_full()
.gap_1p5()
- .pr_6()
.child(query_column)
- .child(mode_column)
- .child(matches_column);
+ .child(h_flex().min_w_40().child(mode_column).child(matches_column));
let replace_line = search.replace_enabled.then(|| {
let replace_column =
@@ -1776,57 +1774,60 @@ impl Render for ProjectSearchBar {
let focus_handle = search.replacement_editor.read(cx).focus_handle(cx);
- let replace_actions = h_flex().gap_1().when(search.replace_enabled, |this| {
- this.child(
- IconButton::new("project-search-replace-next", IconName::ReplaceNext)
- .shape(IconButtonShape::Square)
- .on_click(cx.listener(|this, _, cx| {
- if let Some(search) = this.active_project_search.as_ref() {
- search.update(cx, |this, cx| {
- this.replace_next(&ReplaceNext, cx);
- })
- }
- }))
- .tooltip({
- let focus_handle = focus_handle.clone();
- move |cx| {
- Tooltip::for_action_in(
- "Replace Next Match",
- &ReplaceNext,
- &focus_handle,
- cx,
- )
- }
- }),
- )
- .child(
- IconButton::new("project-search-replace-all", IconName::ReplaceAll)
- .shape(IconButtonShape::Square)
- .on_click(cx.listener(|this, _, cx| {
- if let Some(search) = this.active_project_search.as_ref() {
- search.update(cx, |this, cx| {
- this.replace_all(&ReplaceAll, cx);
- })
- }
- }))
- .tooltip({
- let focus_handle = focus_handle.clone();
- move |cx| {
- Tooltip::for_action_in(
- "Replace All Matches",
- &ReplaceAll,
- &focus_handle,
- cx,
- )
- }
- }),
- )
- });
+ let replace_actions =
+ h_flex()
+ .min_w_40()
+ .gap_1()
+ .when(search.replace_enabled, |this| {
+ this.child(
+ IconButton::new("project-search-replace-next", IconName::ReplaceNext)
+ .shape(IconButtonShape::Square)
+ .on_click(cx.listener(|this, _, cx| {
+ if let Some(search) = this.active_project_search.as_ref() {
+ search.update(cx, |this, cx| {
+ this.replace_next(&ReplaceNext, cx);
+ })
+ }
+ }))
+ .tooltip({
+ let focus_handle = focus_handle.clone();
+ move |cx| {
+ Tooltip::for_action_in(
+ "Replace Next Match",
+ &ReplaceNext,
+ &focus_handle,
+ cx,
+ )
+ }
+ }),
+ )
+ .child(
+ IconButton::new("project-search-replace-all", IconName::ReplaceAll)
+ .shape(IconButtonShape::Square)
+ .on_click(cx.listener(|this, _, cx| {
+ if let Some(search) = this.active_project_search.as_ref() {
+ search.update(cx, |this, cx| {
+ this.replace_all(&ReplaceAll, cx);
+ })
+ }
+ }))
+ .tooltip({
+ let focus_handle = focus_handle.clone();
+ move |cx| {
+ Tooltip::for_action_in(
+ "Replace All Matches",
+ &ReplaceAll,
+ &focus_handle,
+ cx,
+ )
+ }
+ }),
+ )
+ });
h_flex()
.w_full()
.gap_1p5()
- .pr_24()
.child(replace_column)
.child(replace_actions)
});
@@ -1835,7 +1836,6 @@ impl Render for ProjectSearchBar {
h_flex()
.w_full()
.gap_1p5()
- .pr_24()
.child(
input_base_styles()
.on_action(
@@ -1858,10 +1858,12 @@ impl Render for ProjectSearchBar {
)
.child(
h_flex()
+ .min_w_40()
.gap_1()
.child(
- IconButton::new("project-search-opened-only", IconName::FileDoc)
+ IconButton::new("project-search-opened-only", IconName::FileSearch)
.shape(IconButtonShape::Square)
+ .icon_size(IconSize::XSmall)
.selected(self.is_opened_only_enabled(cx))
.tooltip(|cx| Tooltip::text("Only Search Open Files", cx))
.on_click(cx.listener(|this, _, cx| {
diff --git a/crates/ui/src/components/icon.rs b/crates/ui/src/components/icon.rs
index ddc36b11709e9e30a26400fd8e5b7109a58cc4b0..fbd723cd27f7778d7a8bb1a5bdb5c150a3b4043b 100644
--- a/crates/ui/src/components/icon.rs
+++ b/crates/ui/src/components/icon.rs
@@ -192,6 +192,7 @@ pub enum IconName {
FileGit,
FileLock,
FileRust,
+ FileSearch,
FileText,
FileToml,
FileTree,