Style "Replace in project" input in project search (#3657)

Marshall Bowers created 2 years ago

This PR styles the "Replace in project" input in the project search.

Release Notes:

- N/A

Change summary

crates/search2/src/project_search.rs | 13 +++++++++----
crates/workspace2/src/toolbar.rs     | 18 ++++++++++++++++--
2 files changed, 25 insertions(+), 6 deletions(-)

Detailed changes

crates/search2/src/project_search.rs

@@ -1606,12 +1606,16 @@ impl Render for ProjectSearchBar {
         );
         let replace_column = if search.replace_enabled {
             h_stack()
-                .p_1()
                 .flex_1()
-                .border_2()
+                .h_full()
+                .gap_2()
+                .px_2()
+                .py_1()
+                .border_1()
+                .border_color(cx.theme().colors().border)
                 .rounded_lg()
                 .child(IconElement::new(Icon::Replace).size(ui::IconSize::Small))
-                .child(search.replacement_editor.clone())
+                .child(self.render_text_input(&search.replacement_editor, cx))
         } else {
             // Fill out the space if we don't have a replacement editor.
             h_stack().flex_1()
@@ -1674,10 +1678,10 @@ impl Render for ProjectSearchBar {
             ]);
         v_stack()
             .key_context(key_context)
+            .flex_grow()
             .p_1()
             .m_2()
             .gap_2()
-            .justify_between()
             .on_action(cx.listener(|this, _: &ToggleFilters, cx| {
                 this.toggle_filters(cx);
             }))
@@ -1731,6 +1735,7 @@ impl Render for ProjectSearchBar {
             })
             .child(
                 h_stack()
+                    .justify_between()
                     .child(query_column)
                     .child(mode_column)
                     .child(replace_column)

crates/workspace2/src/toolbar.rs

@@ -109,8 +109,22 @@ impl Render for Toolbar {
             .child(
                 h_stack()
                     .justify_between()
-                    .child(h_stack().children(self.left_items().map(|item| item.to_any())))
-                    .child(h_stack().children(self.right_items().map(|item| item.to_any()))),
+                    .when(self.left_items().count() > 0, |this| {
+                        this.child(
+                            h_stack()
+                                .flex_1()
+                                .justify_start()
+                                .children(self.left_items().map(|item| item.to_any())),
+                        )
+                    })
+                    .when(self.right_items().count() > 0, |this| {
+                        this.child(
+                            h_stack()
+                                .flex_1()
+                                .justify_end()
+                                .children(self.right_items().map(|item| item.to_any())),
+                        )
+                    }),
             )
             .children(secondary_item)
     }