Add toolbar spacing and alignment improvements (#22771)

Tackles some of the points here:
https://github.com/zed-industries/zed/issues/22673. However, this is not
doing anything yet to treat misalignment when with odd-number UI font
sizes. Here are some screenshots with a theme that makes easier to spot
them. It's subtle:

| Before | After |
|--------|--------|
| <img width="1313" alt="Screenshot 2025-01-07 at 10 23 31 AM"
src="https://github.com/user-attachments/assets/fdf125a7-ef1c-4368-aea8-579f916b9c34"
/> | <img width="1313" alt="Screenshot 2025-01-07 at 10 26 11 AM"
src="https://github.com/user-attachments/assets/9728fd47-3c17-4c42-9cf6-11083eb32980"
/> |
| <img width="1313" alt="Screenshot 2025-01-07 at 10 23 36 AM"
src="https://github.com/user-attachments/assets/dc2010e9-4ae4-451c-afd1-6bd13750dc66"
/> | <img width="1313" alt="Screenshot 2025-01-07 at 10 26 08 AM"
src="https://github.com/user-attachments/assets/a71ef2ef-3ac7-4b0a-8d50-1c3c4f17d5cb"
/> |

Release Notes:

- N/A
This commit is contained in:
Danilo Leal 2025-01-07 13:07:25 -03:00 committed by GitHub
parent 6af9e8ded8
commit 677868ba1a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 46 additions and 36 deletions

View file

@ -212,7 +212,8 @@ impl Render for BufferSearchBar {
.min_w_32()
.w(input_width)
.h_8()
.px_2()
.pl_2()
.pr_1()
.py_1()
.border_1()
.border_color(editor_border)
@ -227,31 +228,37 @@ impl Render for BufferSearchBar {
.track_scroll(&self.editor_scroll_handle)
.child(self.render_text_input(&self.query_editor, text_color.color(cx), cx))
.when(!hide_inline_icons, |div| {
div.children(supported_options.case.then(|| {
self.render_search_option_button(
SearchOptions::CASE_SENSITIVE,
focus_handle.clone(),
cx.listener(|this, _, cx| {
this.toggle_case_sensitive(&ToggleCaseSensitive, cx)
}),
)
}))
.children(supported_options.word.then(|| {
self.render_search_option_button(
SearchOptions::WHOLE_WORD,
focus_handle.clone(),
cx.listener(|this, _, cx| {
this.toggle_whole_word(&ToggleWholeWord, cx)
}),
)
}))
.children(supported_options.regex.then(|| {
self.render_search_option_button(
SearchOptions::REGEX,
focus_handle.clone(),
cx.listener(|this, _, cx| this.toggle_regex(&ToggleRegex, cx)),
)
}))
div.child(
h_flex()
.gap_1()
.children(supported_options.case.then(|| {
self.render_search_option_button(
SearchOptions::CASE_SENSITIVE,
focus_handle.clone(),
cx.listener(|this, _, cx| {
this.toggle_case_sensitive(&ToggleCaseSensitive, cx)
}),
)
}))
.children(supported_options.word.then(|| {
self.render_search_option_button(
SearchOptions::WHOLE_WORD,
focus_handle.clone(),
cx.listener(|this, _, cx| {
this.toggle_whole_word(&ToggleWholeWord, cx)
}),
)
}))
.children(supported_options.regex.then(|| {
self.render_search_option_button(
SearchOptions::REGEX,
focus_handle.clone(),
cx.listener(|this, _, cx| {
this.toggle_regex(&ToggleRegex, cx)
}),
)
})),
)
}),
)
.child(
@ -333,7 +340,7 @@ impl Render for BufferSearchBar {
.child(
h_flex()
.pl_2()
.ml_2()
.ml_1()
.border_l_1()
.border_color(cx.theme().colors().border_variant)
.child(render_nav_button(

View file

@ -1596,7 +1596,8 @@ impl Render for ProjectSearchBar {
.min_w_32()
.w(input_width)
.h_8()
.px_2()
.pl_2()
.pr_1()
.py_1()
.border_1()
.border_color(search.border_color_for(InputPanel::Query, cx))
@ -1610,7 +1611,7 @@ impl Render for ProjectSearchBar {
.child(self.render_text_input(&search.query_editor, cx))
.child(
h_flex()
.gap_0p5()
.gap_1()
.child(SearchOptions::CASE_SENSITIVE.as_button(
self.is_option_enabled(SearchOptions::CASE_SENSITIVE, cx),
focus_handle.clone(),