From 1e8a7c7caa0928011d7ce036db913327a6f9f7df Mon Sep 17 00:00:00 2001 From: KCaverly Date: Tue, 15 Aug 2023 20:04:14 +0100 Subject: [PATCH] refactor buffer_search to reduce redundancy and simplying height management Co-authored-by: maxbrunsfeld --- 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(-) diff --git a/crates/search/src/buffer_search.rs b/crates/search/src/buffer_search.rs index 702bafe975355571e44845f34f8a1a77b1251e20..c634a71297a211fc68dd234b31c3574f7aec3397 100644 --- a/crates/search/src/buffer_search.rs +++ b/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) }) diff --git a/crates/search/src/project_search.rs b/crates/search/src/project_search.rs index f216efb46bf244f8be36e5af9d08a2ded701ccad..338e52eeddfce17c70d543f4036a17d9b5a80420 100644 --- a/crates/search/src/project_search.rs +++ b/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() diff --git a/crates/search/src/search_bar.rs b/crates/search/src/search_bar.rs index 088a96b27982f247ff9139ca1a349f91010796ea..47892c0ca66b53f35ce7296c39ff022c81e1abc1 100644 --- a/crates/search/src/search_bar.rs +++ b/crates/search/src/search_bar.rs @@ -77,7 +77,7 @@ pub(super) fn render_nav_button( .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( 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( 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) diff --git a/styles/src/style_tree/search.ts b/styles/src/style_tree/search.ts index 11c69490a4b11e675e94f1080af1c95629cc21d4..24d09308632d9da6531a2252b7f933041ee1a46a 100644 --- a/styles/src/style_tree/search.ts +++ b/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: {