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 16:07:25 +00:00
committed by GitHub
parent 6af9e8ded8
commit 677868ba1a
6 changed files with 46 additions and 36 deletions
+34 -27
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(
+3 -2
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(),
+1 -1
View File
@@ -349,7 +349,7 @@ impl Render for QuickActionBar {
h_flex()
.id("quick action bar")
.gap(DynamicSpacing::Base06.rems(cx))
.gap(DynamicSpacing::Base04.rems(cx))
.children(self.render_repl_menu(cx))
.children(self.render_toggle_markdown_preview(self.workspace.clone(), cx))
.children(search_button)
@@ -309,6 +309,7 @@ impl QuickActionBar {
worktree_id,
ButtonLike::new("kernel-selector")
.style(ButtonStyle::Subtle)
.size(ButtonSize::Compact)
.child(
h_flex()
.w_full()
@@ -357,9 +358,10 @@ impl QuickActionBar {
.child(self.render_kernel_selector(cx))
.child(
IconButton::new("toggle_repl_icon", IconName::ReplNeutral)
.size(ButtonSize::Compact)
.icon_color(Color::Muted)
.style(ButtonStyle::Subtle)
.shape(ui::IconButtonShape::Square)
.icon_size(ui::IconSize::Small)
.icon_color(Color::Muted)
.tooltip(move |cx| Tooltip::text(tooltip.clone(), cx))
.on_click(|_, cx| {
cx.open_url(&format!("{}#installation", ZED_REPL_DOCUMENTATION))