refactor buffer_search to reduce redundancy and simplying height management

Co-authored-by: maxbrunsfeld <max@zed.dev>
This commit is contained in:
KCaverly
2023-08-15 20:04:14 +01:00
co-authored by maxbrunsfeld
parent 695e6d2f2e
commit 1e8a7c7caa
4 changed files with 63 additions and 105 deletions
+43 -80
View File
@@ -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)
})
+1 -5
View File
@@ -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()
+6 -2
View File
@@ -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)
+13 -18
View File
@@ -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: {