mirror of
https://github.com/zed-industries/zed.git
synced 2024-10-07 11:28:37 +03:00
Adjust spacing and sizing of buffer search bar icon buttons (#18638)
This PR mostly makes all of the search bar icon buttons all squared and adjusts the spacing between them, as well as the additional input that appears when you toggle the "Replace all" action. <img width="900" alt="Screenshot 2024-10-02 at 6 08 30 PM" src="https://github.com/user-attachments/assets/86d50a3b-94bd-4c6a-822e-5f7f7b2e2707"> --- Release Notes: - N/A
This commit is contained in:
Danilo Leal
GitHub
parent
845991c0e5
commit
5aaaed52fc
@ -27,7 +27,7 @@ use settings::Settings;
|
||||
use std::sync::Arc;
|
||||
use theme::ThemeSettings;
|
||||
|
||||
use ui::{h_flex, prelude::*, IconButton, IconName, Tooltip, BASE_REM_SIZE_IN_PX};
|
||||
use ui::{h_flex, prelude::*, IconButton, IconButtonShape, IconName, Tooltip, BASE_REM_SIZE_IN_PX};
|
||||
use util::ResultExt;
|
||||
use workspace::{
|
||||
item::ItemHandle,
|
||||
@ -200,7 +200,7 @@ impl Render for BufferSearchBar {
|
||||
};
|
||||
|
||||
let search_line = h_flex()
|
||||
.mb_1()
|
||||
.gap_2()
|
||||
.child(
|
||||
h_flex()
|
||||
.id("editor-scroll")
|
||||
@ -208,7 +208,6 @@ impl Render for BufferSearchBar {
|
||||
.flex_1()
|
||||
.h_8()
|
||||
.px_2()
|
||||
.mr_2()
|
||||
.py_1()
|
||||
.border_1()
|
||||
.border_color(editor_border)
|
||||
@ -244,66 +243,70 @@ impl Render for BufferSearchBar {
|
||||
}))
|
||||
}),
|
||||
)
|
||||
.when(supported_options.replacement, |this| {
|
||||
this.child(
|
||||
IconButton::new("buffer-search-bar-toggle-replace-button", IconName::Replace)
|
||||
.style(ButtonStyle::Subtle)
|
||||
.when(self.replace_enabled, |button| {
|
||||
button.style(ButtonStyle::Filled)
|
||||
})
|
||||
.on_click(cx.listener(|this, _: &ClickEvent, cx| {
|
||||
this.toggle_replace(&ToggleReplace, cx);
|
||||
}))
|
||||
.selected(self.replace_enabled)
|
||||
.size(ButtonSize::Compact)
|
||||
.tooltip({
|
||||
let focus_handle = focus_handle.clone();
|
||||
move |cx| {
|
||||
Tooltip::for_action_in(
|
||||
"Toggle replace",
|
||||
&ToggleReplace,
|
||||
&focus_handle,
|
||||
cx,
|
||||
)
|
||||
}
|
||||
}),
|
||||
)
|
||||
})
|
||||
.when(supported_options.selection, |this| {
|
||||
this.child(
|
||||
IconButton::new(
|
||||
"buffer-search-bar-toggle-search-selection-button",
|
||||
IconName::SearchSelection,
|
||||
)
|
||||
.style(ButtonStyle::Subtle)
|
||||
.when(self.selection_search_enabled, |button| {
|
||||
button.style(ButtonStyle::Filled)
|
||||
})
|
||||
.on_click(cx.listener(|this, _: &ClickEvent, cx| {
|
||||
this.toggle_selection(&ToggleSelection, cx);
|
||||
}))
|
||||
.selected(self.selection_search_enabled)
|
||||
.size(ButtonSize::Compact)
|
||||
.tooltip({
|
||||
let focus_handle = focus_handle.clone();
|
||||
move |cx| {
|
||||
Tooltip::for_action_in(
|
||||
"Toggle Search Selection",
|
||||
&ToggleSelection,
|
||||
&focus_handle,
|
||||
cx,
|
||||
)
|
||||
}
|
||||
}),
|
||||
)
|
||||
})
|
||||
.child(
|
||||
h_flex()
|
||||
.flex_none()
|
||||
.gap_0p5()
|
||||
.when(supported_options.replacement, |this| {
|
||||
this.child(
|
||||
IconButton::new(
|
||||
"buffer-search-bar-toggle-replace-button",
|
||||
IconName::Replace,
|
||||
)
|
||||
.style(ButtonStyle::Subtle)
|
||||
.shape(IconButtonShape::Square)
|
||||
.when(self.replace_enabled, |button| {
|
||||
button.style(ButtonStyle::Filled)
|
||||
})
|
||||
.on_click(cx.listener(|this, _: &ClickEvent, cx| {
|
||||
this.toggle_replace(&ToggleReplace, cx);
|
||||
}))
|
||||
.selected(self.replace_enabled)
|
||||
.tooltip({
|
||||
let focus_handle = focus_handle.clone();
|
||||
move |cx| {
|
||||
Tooltip::for_action_in(
|
||||
"Toggle Replace",
|
||||
&ToggleReplace,
|
||||
&focus_handle,
|
||||
cx,
|
||||
)
|
||||
}
|
||||
}),
|
||||
)
|
||||
})
|
||||
.when(supported_options.selection, |this| {
|
||||
this.child(
|
||||
IconButton::new(
|
||||
"buffer-search-bar-toggle-search-selection-button",
|
||||
IconName::SearchSelection,
|
||||
)
|
||||
.style(ButtonStyle::Subtle)
|
||||
.shape(IconButtonShape::Square)
|
||||
.when(self.selection_search_enabled, |button| {
|
||||
button.style(ButtonStyle::Filled)
|
||||
})
|
||||
.on_click(cx.listener(|this, _: &ClickEvent, cx| {
|
||||
this.toggle_selection(&ToggleSelection, cx);
|
||||
}))
|
||||
.selected(self.selection_search_enabled)
|
||||
.tooltip({
|
||||
let focus_handle = focus_handle.clone();
|
||||
move |cx| {
|
||||
Tooltip::for_action_in(
|
||||
"Toggle Search Selection",
|
||||
&ToggleSelection,
|
||||
&focus_handle,
|
||||
cx,
|
||||
)
|
||||
}
|
||||
}),
|
||||
)
|
||||
})
|
||||
.child(
|
||||
IconButton::new("select-all", ui::IconName::SelectAll)
|
||||
.on_click(|_, cx| cx.dispatch_action(SelectAllMatches.boxed_clone()))
|
||||
.size(ButtonSize::Compact)
|
||||
.shape(IconButtonShape::Square)
|
||||
.tooltip({
|
||||
let focus_handle = focus_handle.clone();
|
||||
move |cx| {
|
||||
@ -332,11 +335,13 @@ impl Render for BufferSearchBar {
|
||||
))
|
||||
.when(!narrow_mode, |this| {
|
||||
this.child(h_flex().ml_2().min_w(rems_from_px(40.)).child(
|
||||
Label::new(match_text).color(if self.active_match_index.is_some() {
|
||||
Color::Default
|
||||
} else {
|
||||
Color::Disabled
|
||||
}),
|
||||
Label::new(match_text).size(LabelSize::Small).color(
|
||||
if self.active_match_index.is_some() {
|
||||
Color::Default
|
||||
} else {
|
||||
Color::Disabled
|
||||
},
|
||||
),
|
||||
))
|
||||
}),
|
||||
);
|
||||
@ -367,8 +372,10 @@ impl Render for BufferSearchBar {
|
||||
.child(
|
||||
h_flex()
|
||||
.flex_none()
|
||||
.gap_0p5()
|
||||
.child(
|
||||
IconButton::new("search-replace-next", ui::IconName::ReplaceNext)
|
||||
.shape(IconButtonShape::Square)
|
||||
.tooltip({
|
||||
let focus_handle = focus_handle.clone();
|
||||
move |cx| {
|
||||
@ -386,6 +393,7 @@ impl Render for BufferSearchBar {
|
||||
)
|
||||
.child(
|
||||
IconButton::new("search-replace-all", ui::IconName::ReplaceAll)
|
||||
.shape(IconButtonShape::Square)
|
||||
.tooltip({
|
||||
let focus_handle = focus_handle.clone();
|
||||
move |cx| {
|
||||
@ -441,6 +449,7 @@ impl Render for BufferSearchBar {
|
||||
.when(!narrow_mode, |div| {
|
||||
div.child(
|
||||
IconButton::new(SharedString::from("Close"), IconName::Close)
|
||||
.shape(IconButtonShape::Square)
|
||||
.tooltip(move |cx| {
|
||||
Tooltip::for_action("Close Search Bar", &Dismiss, cx)
|
||||
})
|
||||
|
||||
@ -1634,7 +1634,7 @@ impl Render for ProjectSearchBar {
|
||||
let focus_handle = focus_handle.clone();
|
||||
move |cx| {
|
||||
Tooltip::for_action_in(
|
||||
"Toggle replace",
|
||||
"Toggle Replace",
|
||||
&ToggleReplace,
|
||||
&focus_handle,
|
||||
cx,
|
||||
|
||||
@ -5,7 +5,7 @@ use gpui::{actions, Action, AppContext, FocusHandle, IntoElement};
|
||||
use project::search::SearchQuery;
|
||||
pub use project_search::ProjectSearchView;
|
||||
use ui::{prelude::*, Tooltip};
|
||||
use ui::{ButtonStyle, IconButton};
|
||||
use ui::{ButtonStyle, IconButton, IconButtonShape};
|
||||
use workspace::notifications::NotificationId;
|
||||
use workspace::{Toast, Workspace};
|
||||
|
||||
@ -112,6 +112,7 @@ impl SearchOptions {
|
||||
IconButton::new(self.label(), self.icon())
|
||||
.on_click(action)
|
||||
.style(ButtonStyle::Subtle)
|
||||
.shape(IconButtonShape::Square)
|
||||
.selected(active)
|
||||
.tooltip({
|
||||
let action = self.to_toggle_action();
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
use gpui::{Action, FocusHandle, IntoElement};
|
||||
use ui::IconButton;
|
||||
use ui::{prelude::*, Tooltip};
|
||||
use ui::{IconButton, IconButtonShape};
|
||||
|
||||
pub(super) fn render_nav_button(
|
||||
icon: ui::IconName,
|
||||
@ -13,6 +13,7 @@ pub(super) fn render_nav_button(
|
||||
SharedString::from(format!("search-nav-button-{}", action.name())),
|
||||
icon,
|
||||
)
|
||||
.shape(IconButtonShape::Square)
|
||||
.on_click(|_, cx| cx.dispatch_action(action.boxed_clone()))
|
||||
.tooltip(move |cx| Tooltip::for_action_in(tooltip, action, &focus_handle, cx))
|
||||
.disabled(!active)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user