From 677868ba1a7a48cc299286ae7fad3e009c2b35d9 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Tue, 7 Jan 2025 13:07:25 -0300 Subject: [PATCH] Add toolbar spacing and alignment improvements (#22771) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 | |--------|--------| | Screenshot 2025-01-07 at 10 23 31 AM | Screenshot 2025-01-07 at 10 26 11 AM | | Screenshot 2025-01-07 at 10 23 36 AM | Screenshot 2025-01-07 at 10 26 08 AM | Release Notes: - N/A --- assets/icons/filter.svg | 4 +- assets/icons/magnifying_glass.svg | 4 +- crates/search/src/buffer_search.rs | 61 +++++++++++-------- crates/search/src/project_search.rs | 5 +- crates/zed/src/zed/quick_action_bar.rs | 2 +- .../zed/src/zed/quick_action_bar/repl_menu.rs | 6 +- 6 files changed, 46 insertions(+), 36 deletions(-) diff --git a/assets/icons/filter.svg b/assets/icons/filter.svg index 80ce656f57199246dc036f39e2fead4e19e53168..7391fea132eac0e394cce97f0b1e630e2255f87d 100644 --- a/assets/icons/filter.svg +++ b/assets/icons/filter.svg @@ -1,3 +1,3 @@ - - + + diff --git a/assets/icons/magnifying_glass.svg b/assets/icons/magnifying_glass.svg index 0b539adb6c764451234b898a5e6306baabc64d57..75c3e76c80b5c1c577881d9fb7a942f162e395d3 100644 --- a/assets/icons/magnifying_glass.svg +++ b/assets/icons/magnifying_glass.svg @@ -1,3 +1,3 @@ - - + + diff --git a/crates/search/src/buffer_search.rs b/crates/search/src/buffer_search.rs index c2e4f1292d7f49d094a69a1d90103f185e3ef7fd..a81ddc1a6a9c2a6e5de1e7e0642101a1959c06ea 100644 --- a/crates/search/src/buffer_search.rs +++ b/crates/search/src/buffer_search.rs @@ -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( diff --git a/crates/search/src/project_search.rs b/crates/search/src/project_search.rs index ca6d83a87fd6eae4410e0388d17bf269f42db7e3..321cbcc3ae80d3b9b3ea2e2e6ec2453862139e75 100644 --- a/crates/search/src/project_search.rs +++ b/crates/search/src/project_search.rs @@ -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(), diff --git a/crates/zed/src/zed/quick_action_bar.rs b/crates/zed/src/zed/quick_action_bar.rs index 817c241e7361ba8224c82329d2533bf6948bae7e..ca48f024a80eb929bb2ce5d844199dea82bd7654 100644 --- a/crates/zed/src/zed/quick_action_bar.rs +++ b/crates/zed/src/zed/quick_action_bar.rs @@ -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) diff --git a/crates/zed/src/zed/quick_action_bar/repl_menu.rs b/crates/zed/src/zed/quick_action_bar/repl_menu.rs index 43c7c2f45a3fe50880101e5b31451d25bbc790ee..35a1f15771cec7b2f3b59975d4fe75ad4b1fcdeb 100644 --- a/crates/zed/src/zed/quick_action_bar/repl_menu.rs +++ b/crates/zed/src/zed/quick_action_bar/repl_menu.rs @@ -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))