refactor buffer_search to reduce redundancy and simplying height management
Co-authored-by: maxbrunsfeld <max@zed.dev>
This commit is contained in:
@@ -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)
|
||||
})
|
||||
|
||||
@@ -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()
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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: {
|
||||
|
||||
Reference in New Issue
Block a user