Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add toolbar spacing and alignment improvements (#22771)

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

4
assets/icons/filter.svg
View file

@ -1,3 +1,3 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.6749 2.40608C11.8058 2.24239 11.6893 1.99991 11.4796 1.99991H2.51996C2.31033 1.99991 2.19379 2.24239 2.32474 2.40608L5.14583 5.93246C5.34148 6.17701 5.44808 6.48087 5.44808 6.79412C5.44808 7.46881 5.44808 10.334 5.44808 11.5016C5.44808 11.7778 5.67194 11.9999 5.94808 11.9999H8.05153C8.32767 11.9999 8.55153 11.7778 8.55153 11.5016C8.55153 10.334 8.55153 7.46881 8.55153 6.79412C8.55153 6.48087 8.65815 6.17701 8.8538 5.93246L11.6749 2.40608Z" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.9416 2.99643C13.08 2.79636 12.9568 2.5 12.7352 2.5H3.26475C3.04317 2.5 2.91999 2.79636 3.0584 2.99643L6.04033 7.30646C6.24713 7.60535 6.35981 7.97674 6.35981 8.3596C6.35981 9.18422 6.35981 11.4639 6.35981 12.891C6.35981 13.2285 6.59643 13.5 6.88831 13.5H9.11168C9.40357 13.5 9.64019 13.2285 9.64019 12.891C9.64019 11.4639 9.64019 9.18422 9.64019 8.3596C9.64019 7.97674 9.75289 7.60535 9.95969 7.30646L12.9416 2.99643Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 644 B

After

Width:  |  Height:  |  Size: 618 B

Before After
Before After

4
assets/icons/magnifying_glass.svg
View file

@ -1,3 +1,3 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 12L9.41379 9.41379M2 6.31034C2 3.92981 3.92981 2 6.31034 2C8.6909 2 10.6207 3.92981 10.6207 6.31034C10.6207 8.6909 8.6909 10.6207 6.31034 10.6207C3.92981 10.6207 2 8.6909 2 6.31034Z" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13 13L10.4138 10.4138M3 7.31034C3 4.92981 4.92981 3 7.31034 3C9.6909 3 11.6207 4.92981 11.6207 7.31034C11.6207 9.6909 9.6909 11.6207 7.31034 11.6207C4.92981 11.6207 3 9.6909 3 7.31034Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 383 B

After

Width:  |  Height:  |  Size: 382 B

Before After
Before After

61
crates/search/src/buffer_search.rs
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(

5
crates/search/src/project_search.rs
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(),

2
crates/zed/src/zed/quick_action_bar.rs
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)

6
crates/zed/src/zed/quick_action_bar/repl_menu.rs
View file

@ -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))