refactor buffer_search to reduce redundancy and simplying height management

KCaverly and maxbrunsfeld created 2 years ago

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

Change summary

crates/search/src/buffer_search.rs  | 123 ++++++++++--------------------
crates/search/src/project_search.rs |   6 -
crates/search/src/search_bar.rs     |   8 +
styles/src/style_tree/search.ts     |  31 +++----
4 files changed, 63 insertions(+), 105 deletions(-)

Detailed changes

crates/search/src/buffer_search.rs

@@ -221,38 +221,23 @@ impl View for BufferSearchBar {
         };
 
         let icon_style = theme.search.editor_icon.clone();
-        let nav_column = Flex::column()
-            .with_child(
-                Flex::row()
-                    .align_children_center()
-                    .with_child(
-                        Flex::row()
-                            .with_child(nav_button_for_direction("<", Direction::Prev, cx))
-                            .with_child(nav_button_for_direction(">", Direction::Next, cx))
-                            .aligned(),
-                    )
-                    .with_children(match_count)
-                    .aligned()
-                    .left()
-                    .top()
-                    .flex(1., true)
-                    .constrained()
-                    .with_max_height(theme.search.search_bar_row_height),
-            )
-            .contained();
+        let side_column_min_width = 165.;
+        let button_height = 32.;
+        let nav_column = Flex::row()
+            .with_child(nav_button_for_direction("<", Direction::Prev, cx))
+            .with_child(nav_button_for_direction(">", Direction::Next, cx))
+            .with_children(match_count)
+            .constrained()
+            .with_height(theme.search.search_bar_row_height)
+            .with_min_width(side_column_min_width);
 
         let query = Flex::row()
             .with_child(
                 Svg::for_style(icon_style.icon)
                     .contained()
-                    .with_style(icon_style.container)
-                    .constrained(),
-            )
-            .with_child(
-                ChildView::new(&self.query_editor, cx)
-                    .constrained()
-                    .flex(1., true),
+                    .with_style(icon_style.container),
             )
+            .with_child(ChildView::new(&self.query_editor, cx).flex(1., true))
             .with_child(
                 Flex::row()
                     .with_children(render_search_option(
@@ -271,76 +256,53 @@ impl View for BufferSearchBar {
                     .contained(),
             )
             .align_children_center()
-            .aligned()
-            .left()
             .flex(1., true);
         let row_spacing = theme.workspace.toolbar.container.padding.bottom;
-        let editor_column = Flex::column()
-            .align_children_center()
+        let editor_column = Flex::row()
             .with_child(
-                Flex::row()
-                    .with_child(
-                        Flex::row()
-                            .with_child(query)
-                            .contained()
-                            .with_style(query_container_style)
-                            .aligned()
-                            .constrained()
-                            .with_min_width(theme.search.editor.min_width)
-                            .with_max_width(theme.search.editor.max_width)
-                            .with_max_height(theme.search.search_bar_row_height)
-                            .flex(1., false),
-                    )
-                    .with_child(
-                        Flex::row()
-                            .with_child(self.render_action_button("Select All", cx))
-                            .aligned(),
-                    )
+                query
                     .contained()
-                    .with_margin_bottom(row_spacing)
+                    .with_style(query_container_style)
+                    .constrained()
+                    .with_min_width(theme.search.editor.min_width)
+                    .with_max_width(theme.search.editor.max_width)
                     .flex(1., false),
             )
+            .with_child(self.render_action_button("Select All", cx))
             .contained()
+            .constrained()
+            .with_height(theme.search.search_bar_row_height)
             .aligned()
             .top()
             .flex(1., false);
-        let mode_column = Flex::column().with_child(
-            Flex::row()
-                .align_children_center()
-                .with_child(
-                    Flex::row()
-                        .with_child(search_button_for_mode(SearchMode::Text, cx))
-                        .with_child(search_button_for_mode(SearchMode::Regex, cx))
-                        .aligned()
-                        .left()
-                        .contained()
-                        .with_style(theme.search.modes_container),
-                )
-                .with_child(
-                    super::search_bar::render_close_button(
-                        "Dismiss Buffer Search",
-                        &theme.search,
-                        cx,
-                        |_, this, cx| this.dismiss(&Default::default(), cx),
-                        Some(Box::new(Dismiss)),
-                    )
-                    .aligned()
-                    .right(),
-                )
-                .constrained()
-                .with_height(theme.search.search_bar_row_height)
-                .aligned()
-                .right()
-                .top()
-                .flex(1., true),
-        );
+        let mode_column = Flex::row()
+            .with_child(
+                Flex::row()
+                    .with_child(search_button_for_mode(SearchMode::Text, cx))
+                    .with_child(search_button_for_mode(SearchMode::Regex, cx))
+                    .contained()
+                    .with_style(theme.search.modes_container),
+            )
+            .with_child(super::search_bar::render_close_button(
+                "Dismiss Buffer Search",
+                &theme.search,
+                cx,
+                |_, this, cx| this.dismiss(&Default::default(), cx),
+                Some(Box::new(Dismiss)),
+            ))
+            .constrained()
+            .with_height(theme.search.search_bar_row_height)
+            .aligned()
+            .right()
+            .constrained()
+            .with_min_width(side_column_min_width)
+            .flex_float();
         Flex::row()
             .with_child(nav_column)
             .with_child(editor_column)
             .with_child(mode_column)
             .contained()
             .with_style(theme.search.container)
-            .flex_float()
             .into_any_named("search bar")
     }
 }
@@ -536,6 +498,7 @@ impl BufferSearchBar {
             let theme = theme::current(cx);
             let style = theme.search.action_button.style_for(state);
             Label::new(icon, style.text.clone())
+                .aligned()
                 .contained()
                 .with_style(style.container)
         })

crates/search/src/project_search.rs

@@ -1556,17 +1556,13 @@ impl View for ProjectSearchBar {
                     Flex::row()
                         .align_children_center()
                         .with_child(
-                            Flex::row()
+                            Flex::row().align_children_center()
                                 .with_child(nav_button_for_direction("<", Direction::Prev, cx))
                                 .with_child(nav_button_for_direction(">", Direction::Next, cx))
                                 .aligned(),
                         )
                         .with_children(matches)
                         .aligned()
-                        .top()
-                        .left()
-                        .constrained()
-                        .with_height(theme.search.search_bar_row_height),
                 )
                 .flex(1., true);
             let editor_column = Flex::column()

crates/search/src/search_bar.rs

@@ -77,7 +77,7 @@ pub(super) fn render_nav_button<V: View>(
             .style_for(state)
             .clone();
         let mut container_style = style.container.clone();
-        let label = Label::new(icon, style.label.clone()).contained();
+        let label = Label::new(icon, style.label.clone()).aligned().contained();
         container_style.corner_radii = match direction {
             Direction::Prev => CornerRadii {
                 bottom_right: 0.,
@@ -128,7 +128,9 @@ pub(crate) fn render_search_mode_button<V: View>(
         style.container.border.left = mode.border_left();
         style.container.border.right = mode.border_right();
 
-        let label = Label::new(mode.label(), style.text.clone()).contained();
+        let label = Label::new(mode.label(), style.text.clone())
+            .aligned()
+            .contained();
         let mut container_style = style.container.clone();
         if let Some(button_side) = mode.button_side() {
             if button_side == Side::Left {
@@ -150,6 +152,8 @@ pub(crate) fn render_search_mode_button<V: View>(
             container_style.corner_radii = CornerRadii::default();
             label.with_style(container_style)
         }
+        .constrained()
+        .with_height(theme.search.search_bar_row_height)
     })
     .on_click(MouseButton::Left, on_click)
     .with_cursor_style(CursorStyle::PointingHand)

styles/src/style_tree/search.ts

@@ -17,7 +17,7 @@ export default function search(): any {
         text: text(theme.highest, "mono", "default"),
         border: border(theme.highest),
         margin: {
-            right: 12,
+            right: 9,
         },
         padding: {
             top: 4,
@@ -51,10 +51,8 @@ export default function search(): any {
                         width: 1., color: background(theme.highest, "on")
                     },
                     padding: {
-                        bottom: 4,
                         left: 4,
                         right: 4,
-                        top: 4,
                     },
                 },
                 state: {
@@ -97,14 +95,11 @@ export default function search(): any {
                 background: background(theme.highest, "on"),
                 corner_radius: 6,
                 border: border(theme.highest, "on"),
-                margin: {
-                    right: 4,
-                },
                 padding: {
-                    bottom: 2,
+                    // bottom: 2,
                     left: 10,
                     right: 10,
-                    top: 2,
+                    // top: 2,
                 },
             },
             state: {
@@ -140,8 +135,8 @@ export default function search(): any {
             padding: {
                 left: 12,
                 right: 12,
-                top: 3,
-                bottom: 3,
+                // top: 3,
+                // bottom: 3,
             },
         },
         include_exclude_inputs: {
@@ -165,8 +160,8 @@ export default function search(): any {
                 button_width: 32,
                 corner_radius: 6,
                 padding: {
-                    top: 10,
-                    bottom: 10,
+                    // // top: 10,
+                    // bottom: 10,
                     left: 10,
                     right: 10,
                 },
@@ -213,10 +208,10 @@ export default function search(): any {
                     },
 
                     padding: {
-                        bottom: 4,
+                        // bottom: 4,
                         left: 10,
                         right: 10,
-                        top: 5,
+                        // top: 5,
                     },
                     corner_radius: 6,
                 },
@@ -264,10 +259,10 @@ export default function search(): any {
                         },
 
                         padding: {
-                            bottom: 3,
+                            bottom: 0,
                             left: 10,
                             right: 10,
-                            top: 3,
+                            top: 0,
                         },
                     },
                     state: {
@@ -286,10 +281,10 @@ export default function search(): any {
                         },
 
                         padding: {
-                            bottom: 3,
+                            bottom: 0,
                             left: 10,
                             right: 10,
-                            top: 3,
+                            top: 0,
                         },
                     },
                     state: {