Use icons instead of text in toggles

Piotr Osiewicz created

Change summary

assets/icons/filter_14.svg          |  6 ++++++
assets/icons/word_search_12.svg     |  4 ++++
crates/search/src/project_search.rs | 29 +++++++++++++++++++++++------
3 files changed, 33 insertions(+), 6 deletions(-)

Detailed changes

assets/icons/filter_14.svg 🔗

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14px" height="14px" viewBox="0 0 14 14" version="1.1">
+<g id="surface1">
+<path style="fill:none;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(47.058824%,49.019608%,52.941176%);stroke-opacity:1;stroke-miterlimit:4;" d="M 10.674107 1.40625 C 10.804688 1.242188 10.690848 1.001116 10.479911 1.001116 L 1.520089 1.001116 C 1.309152 1.001116 1.195312 1.242188 1.325893 1.40625 L 4.145089 4.93192 C 4.342634 5.176339 4.446429 5.481027 4.446429 5.795759 C 4.446429 6.46875 4.446429 9.334821 4.446429 10.503348 C 4.446429 10.777902 4.670759 10.998884 4.948661 10.998884 L 7.051339 10.998884 C 7.329241 10.998884 7.550223 10.777902 7.550223 10.503348 C 7.550223 9.334821 7.550223 6.46875 7.550223 5.795759 C 7.550223 5.481027 7.657366 5.176339 7.854911 4.93192 Z M 10.674107 1.40625 " transform="matrix(1.166667,0,0,1.166667,0,0)"/>
+</g>
+</svg>

assets/icons/word_search_12.svg 🔗

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12px" height="12px" viewBox="0 0 12 12" version="1.1">
+<g id="surface1">
+<path style=" stroke:none;fill-rule:evenodd;fill:rgb(47.058824%,49.019608%,52.941176%);fill-opacity:1;" d="M 4.070312 8.132812 L 3.488281 5.171875 L 2.902344 8.132812 L 1.867188 8.132812 L 0.859375 3.433594 L 1.949219 3.433594 L 2.414062 6.359375 L 2.988281 3.445312 L 3.992188 3.445312 L 4.558594 6.351562 L 5.019531 3.433594 L 6.113281 3.433594 L 5.105469 8.132812 Z M 4.070312 8.132812 "/>

crates/search/src/project_search.rs 🔗

@@ -1164,9 +1164,11 @@ impl ProjectSearchBar {
                 .option_button
                 .in_state(is_active)
                 .style_for(state);
-            Svg::new(icon).with_color(style.text.color.clone())
+            Svg::new(icon)
+                .with_color(style.text.color.clone())
                 .contained()
                 .with_style(style.container)
+                .constrained()
         })
         .on_click(MouseButton::Left, move |_, this, cx| {
             this.toggle_search_option(option, cx);
@@ -1335,7 +1337,7 @@ impl View for ProjectSearchBar {
                 .flex(1.0, true);
             let regex_button = self.render_option_button("Regex", SearchOptions::REGEX, cx);
             let row_spacing = theme.workspace.toolbar.container.padding.bottom;
-let search = _search.read(cx);
+            let search = _search.read(cx);
             let filter_button = {
                 let tooltip_style = theme::current(cx).tooltip.clone();
                 let is_active = search.filters_enabled;
@@ -1357,8 +1359,15 @@ let search = _search.read(cx);
                 .with_cursor_style(CursorStyle::PointingHand)
                 .with_tooltip::<Self>(0, "Toggle filters".into(), None, tooltip_style, cx)
                 .into_any()
-            };            let search = _search.read(cx);
+            };
+            let search = _search.read(cx);
             let query = Flex::row()
+                .with_child(
+                    Svg::new("icons/magnifying_glass_12.svg").with_color(gpui::color::Color::white())
+                        //.with_color(tab_theme.label.text.color)
+                        .contained().constrained()
+                    //.with_margin_right(tab_theme.spacing),
+                )
                 .with_child(
                     ChildView::new(&search.query_editor, cx)
                         .constrained()
@@ -1369,13 +1378,21 @@ let search = _search.read(cx);
                     Flex::row()
                         .with_children([
                             filter_button,
-                            self.render_option_button("Case", SearchOptions::CASE_SENSITIVE, cx),
-                            self.render_option_button_icon("icons/word_search_14.svg", SearchOptions::WHOLE_WORD, cx),
-
+                            self.render_option_button_icon(
+                                "icons/word_search_12.svg",
+                                SearchOptions::CASE_SENSITIVE,
+                                cx,
+                            ),
+                            self.render_option_button_icon(
+                                "icons/word_search_12.svg",
+                                SearchOptions::WHOLE_WORD,
+                                cx,
+                            ),
                         ])
                         .flex(1., true)
                         .contained(),
                 )
+                .align_children_center()
                 .aligned()
                 .left()
                 .flex(1., true);