Fix minor buffer search bar design issues (#7715)

This PR fixes the buffer search bar design issues mentioned in #7703.

It doesn't affect the project search bar.

Changes:

<img width="943" alt="zed-search-bar-design-issues"
src="https://github.com/zed-industries/zed/assets/2101250/af3bd0da-36cb-46ee-9af6-6b69911863d0">

Release Notes:

- N/A
This commit is contained in:
Andrew Lygin 2024-02-13 11:45:24 +03:00 committed by GitHub
parent ea51536e0f
commit 98fff014da
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -299,7 +299,7 @@ impl Render for BufferSearchBar {
) )
.child( .child(
h_flex() h_flex()
.gap_0p5() .gap_2()
.flex_none() .flex_none()
.child( .child(
IconButton::new("select-all", ui::IconName::SelectAll) IconButton::new("select-all", ui::IconName::SelectAll)
@ -323,19 +323,18 @@ impl Render for BufferSearchBar {
)), )),
); );
let replace_line = self.replace_enabled.then(|| { let replace_line = should_show_replace_input.then(|| {
h_flex() h_flex()
.gap_0p5() .gap_2()
.flex_1() .flex_1()
.child( .child(
h_flex() h_flex()
.flex_1() .flex_1()
// We're giving this a fixed height to match the height of the search input, // We're giving this a fixed height to match the height of the search input,
// which has an icon inside that is increasing its height. // which has an icon inside that is increasing its height.
// .h_8() .h_8()
.px_2() .px_2()
.py_1() .py_1()
.gap_2()
.border_1() .border_1()
.border_color(cx.theme().colors().border) .border_color(cx.theme().colors().border)
.rounded_lg() .rounded_lg()
@ -347,8 +346,10 @@ impl Render for BufferSearchBar {
cx, cx,
)), )),
) )
.when(should_show_replace_input, |this| { .child(
this.child( h_flex()
.flex_none()
.child(
IconButton::new("search-replace-next", ui::IconName::ReplaceNext) IconButton::new("search-replace-next", ui::IconName::ReplaceNext)
.tooltip(move |cx| { .tooltip(move |cx| {
Tooltip::for_action("Replace next", &ReplaceNext, cx) Tooltip::for_action("Replace next", &ReplaceNext, cx)
@ -359,10 +360,14 @@ impl Render for BufferSearchBar {
) )
.child( .child(
IconButton::new("search-replace-all", ui::IconName::ReplaceAll) IconButton::new("search-replace-all", ui::IconName::ReplaceAll)
.tooltip(move |cx| Tooltip::for_action("Replace all", &ReplaceAll, cx)) .tooltip(move |cx| {
.on_click(cx.listener(|this, _, cx| this.replace_all(&ReplaceAll, cx))), Tooltip::for_action("Replace all", &ReplaceAll, cx)
)
}) })
.on_click(
cx.listener(|this, _, cx| this.replace_all(&ReplaceAll, cx)),
),
),
)
}); });
v_flex() v_flex()
@ -393,7 +398,7 @@ impl Render for BufferSearchBar {
.when(self.supported_options().word, |this| { .when(self.supported_options().word, |this| {
this.on_action(cx.listener(Self::toggle_whole_word)) this.on_action(cx.listener(Self::toggle_whole_word))
}) })
.gap_1() .gap_2()
.child( .child(
h_flex().child(search_line.w_full()).child( h_flex().child(search_line.w_full()).child(
IconButton::new(SharedString::from("Close"), IconName::Close) IconButton::new(SharedString::from("Close"), IconName::Close)