Finish up touchups for search UI.

Piotr Osiewicz and Nate created 2 years ago

Co-authored-by: Nate <[e-mail]>

Change summary

crates/search2/src/buffer_search.rs | 62 ++++++++++++++++++++-----------
crates/search2/src/search.rs        |  4 +
crates/workspace2/src/toolbar.rs    |  3 +
3 files changed, 46 insertions(+), 23 deletions(-)

Detailed changes

crates/search2/src/buffer_search.rs

@@ -117,7 +117,7 @@ impl Render for BufferSearchBar {
         //     }
         //     (None, None) => String::new(),
         // };
-        let new_placeholder_text = Arc::from("Fix this up!");
+        let new_placeholder_text = Arc::from("Search for..");
         self.query_editor.update(cx, |editor, cx| {
             editor.set_placeholder_text(new_placeholder_text, cx);
         });
@@ -172,18 +172,22 @@ impl Render for BufferSearchBar {
                 cx,
             )
         };
-        div()
-            .border()
-            .border_color(blue())
-            .flex()
-            .justify_between()
+        let should_show_replace_input = self.replace_enabled && supported_options.replacement;
+        let replace_all = should_show_replace_input.then(|| {
+            super::replace_action::<Self>(ReplaceAll, "Replace all", ui::Icon::ReplaceAll)
+        });
+        let replace_next = should_show_replace_input
+            .then(|| super::replace_action::<Self>(ReplaceNext, "Replace next", ui::Icon::Replace));
+        h_stack()
+            .w_full()
+            .p_1()
             .child(
                 div()
                     .flex()
+                    .flex_1()
                     .border_1()
                     .border_color(red())
                     .rounded_md()
-                    .w_96()
                     .items_center()
                     .child(IconElement::new(Icon::MagnifyingGlass))
                     .child(self.query_editor.clone())
@@ -198,21 +202,35 @@ impl Render for BufferSearchBar {
                             .then(|| search_option_button(SearchOptions::WHOLE_WORD)),
                     ),
             )
-            .child(ButtonGroup::new(vec![
-                search_button_for_mode(SearchMode::Text, Some(Side::Left), cx),
-                search_button_for_mode(SearchMode::Regex, Some(Side::Right), cx),
-            ]))
-            .when(supported_options.replacement, |this| {
-                this.child(super::toggle_replace_button(self.replace_enabled))
-            })
-            .when(self.replace_enabled, |this| {
-                this.child(div().w_80().child(self.replacement_editor.clone()))
-            })
-            .children(match_count)
-            .child(nav_button_for_direction("<", Direction::Prev, cx))
-            .child(nav_button_for_direction(">", Direction::Next, cx))
-            .flex()
-            .justify_between()
+            .child(
+                h_stack()
+                    .flex_none()
+                    .child(ButtonGroup::new(vec![
+                        search_button_for_mode(SearchMode::Text, Some(Side::Left), cx),
+                        search_button_for_mode(SearchMode::Regex, Some(Side::Right), cx),
+                    ]))
+                    .when(supported_options.replacement, |this| {
+                        this.child(super::toggle_replace_button(self.replace_enabled))
+                    }),
+            )
+            .child(
+                h_stack()
+                    .gap_0p5()
+                    .flex_1()
+                    .when(self.replace_enabled, |this| {
+                        this.child(self.replacement_editor.clone())
+                            .children(replace_next)
+                            .children(replace_all)
+                    }),
+            )
+            .child(
+                h_stack()
+                    .gap_0p5()
+                    .flex_none()
+                    .children(match_count)
+                    .child(nav_button_for_direction("<", Direction::Prev, cx))
+                    .child(nav_button_for_direction(">", Direction::Next, cx)),
+            )
 
         // let query_column = Flex::row()
         //     .with_child(

crates/search2/src/search.rs

@@ -109,8 +109,10 @@ fn toggle_replace_button<V: 'static>(active: bool) -> impl Component<V> {
 fn replace_action<V: 'static>(
     action: impl Action + 'static + Send + Sync,
     name: &'static str,
+    icon: ui::Icon,
 ) -> impl Component<V> {
-    ui::IconButton::new(0, ui::Icon::Replace).on_click(move |_: &mut V, cx| {
+    // todo: add tooltip
+    ui::IconButton::new(0, icon).on_click(move |_: &mut V, cx| {
         cx.dispatch_action(action.boxed_clone());
     })
 }

crates/workspace2/src/toolbar.rs

@@ -3,6 +3,7 @@ use gpui::{
     div, AnyView, Component, Div, Entity, EntityId, EventEmitter, ParentElement, Render, Styled,
     View, ViewContext, WindowContext,
 };
+use theme2::ActiveTheme;
 use ui::{h_stack, v_stack, Button, Icon, IconButton, Label, LabelColor, StyledExt};
 
 pub enum ToolbarItemEvent {
@@ -81,6 +82,8 @@ impl Render for Toolbar {
     fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
         //dbg!(&self.items.len());
         v_stack()
+            .border_b()
+            .border_color(cx.theme().colors().border)
             .child(
                 h_stack()
                     .justify_between()