Piotr Osiewicz created
Fix clipping in nav buttons and mode buttons. Add missing borders to outskirts of mode buttons.crates/search/src/mode.rs | 4 +-
crates/search/src/project_search.rs | 49 ++++++++++++++++++----------
crates/search/src/search_bar.rs | 53 ++++++++++--------------------
styles/src/style_tree/search.ts | 27 ++++++++++-----
4 files changed, 69 insertions(+), 64 deletions(-)
@@ -49,14 +49,14 @@ impl SearchMode {
}
}
- pub(crate) fn border_left(&self) -> bool {
+ pub(crate) fn border_right(&self) -> bool {
match self {
SearchMode::Text => false,
_ => true,
}
}
- pub(crate) fn border_right(&self) -> bool {
+ pub(crate) fn border_left(&self) -> bool {
match self {
SearchMode::Regex => false,
_ => true,
@@ -1590,10 +1590,10 @@ impl View for ProjectSearchBar {
.with_children(matches)
.aligned()
.top()
- .left(),
+ .left()
+ .constrained()
+ .with_height(theme.search.search_bar_row_height),
)
- .constrained()
- .with_height(theme.search.search_bar_row_height)
.flex(1., true),
)
.with_child(
@@ -1627,23 +1627,36 @@ impl View for ProjectSearchBar {
.with_child(
Flex::row()
.align_children_center()
- .with_child(search_button_for_mode(SearchMode::Text, cx))
- .with_children(semantic_index)
- .with_child(search_button_for_mode(SearchMode::Regex, cx))
- .with_child(super::search_bar::render_close_button(
- "Dismiss Project Search",
- &theme.search,
- cx,
- |_, this, cx| {
- if let Some(search) = this.active_project_search.as_mut() {
- search.update(cx, |_, cx| cx.emit(ViewEvent::Dismiss))
- }
- },
- None,
- ))
+ .with_child(
+ Flex::row()
+ .with_child(search_button_for_mode(SearchMode::Text, cx))
+ .with_children(semantic_index)
+ .with_child(search_button_for_mode(SearchMode::Regex, cx))
+ .aligned()
+ .left()
+ .contained()
+ .with_margin_right(3.),
+ )
+ .with_child(
+ super::search_bar::render_close_button(
+ "Dismiss Project Search",
+ &theme.search,
+ cx,
+ |_, this, cx| {
+ if let Some(search) =
+ this.active_project_search.as_mut()
+ {
+ search
+ .update(cx, |_, cx| cx.emit(ViewEvent::Dismiss))
+ }
+ },
+ None,
+ )
+ .aligned()
+ .right(),
+ )
.constrained()
.with_height(theme.search.search_bar_row_height)
- .contained()
.aligned()
.right()
.top()
@@ -28,10 +28,10 @@ pub(super) fn render_close_button<V: View>(
.constrained()
.with_width(style.icon_width)
.aligned()
- .constrained()
- .with_width(style.button_width)
.contained()
.with_style(style.container)
+ .constrained()
+ .with_height(theme.search_bar_row_height)
})
.on_click(MouseButton::Left, on_click)
.with_cursor_style(CursorStyle::PointingHand)
@@ -66,30 +66,19 @@ pub(super) fn render_nav_button<V: View>(
let style = theme.search.nav_button.style_for(state).clone();
let mut container_style = style.container.clone();
let label = Label::new(icon, style.label.clone()).contained();
- match direction {
- Direction::Prev => {
- container_style.corner_radii = CornerRadii {
- bottom_right: 0.,
- top_right: 0.,
- ..container_style.corner_radii
- };
- Flex::row()
- .with_child(label.with_style(container_style))
- .constrained()
- //.with_height(theme.workspace.toolbar.height)
- }
- Direction::Next => {
- container_style.corner_radii = CornerRadii {
- bottom_left: 0.,
- top_left: 0.,
- ..container_style.corner_radii
- };
- Flex::row()
- .with_child(label.with_style(container_style))
- .constrained()
- // .with_height(theme.workspace.toolbar.height)
- }
- }
+ container_style.corner_radii = match direction {
+ Direction::Prev => CornerRadii {
+ bottom_right: 0.,
+ top_right: 0.,
+ ..container_style.corner_radii
+ },
+ Direction::Next => CornerRadii {
+ bottom_left: 0.,
+ top_left: 0.,
+ ..container_style.corner_radii
+ },
+ };
+ label.with_style(container_style)
})
.on_click(MouseButton::Left, on_click)
.with_cursor_style(CursorStyle::PointingHand)
@@ -132,24 +121,18 @@ pub(crate) fn render_search_mode_button<V: View>(
top_right: 0.,
..container_style.corner_radii
};
- Flex::row()
- .align_children_center()
- .with_child(label.with_style(container_style))
- .into_any()
+ label.with_style(container_style)
} else {
container_style.corner_radii = CornerRadii {
bottom_left: 0.,
top_left: 0.,
..container_style.corner_radii
};
- Flex::row()
- .align_children_center()
- .with_child(label.with_style(container_style))
- .into_any()
+ label.with_style(container_style)
}
} else {
container_style.corner_radii = CornerRadii::default();
- label.with_style(container_style).into_any()
+ label.with_style(container_style)
}
})
.on_click(MouseButton::Left, on_click)
@@ -161,19 +161,28 @@ export default function search(): any {
dismiss_button: interactive({
base: {
color: foreground(theme.highest, "variant"),
- icon_width: 12,
- button_width: 14,
+ icon_width: 14,
+ button_width: 32,
+ corner_radius: 6,
padding: {
- left: 10,
- right: 10,
+ top: 8,
+ bottom: 8,
+ left: 8,
+ right: 8,
},
+
+ background: background(theme.highest, "variant"),
+
+ border: border(theme.highest, "on"),
},
state: {
hovered: {
color: foreground(theme.highest, "hovered"),
+ background: background(theme.highest, "variant", "hovered")
},
clicked: {
color: foreground(theme.highest, "pressed"),
+ background: background(theme.highest, "variant", "pressed")
},
},
}),
@@ -245,7 +254,7 @@ export default function search(): any {
base: {
text: text(theme.highest, "mono", "on"),
background: background(theme.highest, "on"),
- corner_radius: { top_left: 6, top_right: 6, bottom_right: 6, bottom_left: 6 },
+ corner_radius: 6,
border: {
...border(theme.highest, "on"),
left: false,
@@ -253,10 +262,10 @@ export default function search(): any {
},
padding: {
- bottom: 6,
- left: 6,
- right: 6,
- top: 6,
+ bottom: 3,
+ left: 10,
+ right: 10,
+ top: 3,
},
},
state: {