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 0000000000..9d82151798
--- /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 40068ea5f9..d4b44a1611 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 ddc36b1170..fbd723cd27 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,