Piotr Osiewicz created
crates/search/src/buffer_search.rs | 1
crates/search/src/project_search.rs | 2
crates/search/src/search_bar.rs | 18 +++++-
crates/theme/src/theme.rs | 2
styles/src/style_tree/search.ts | 84 ++++++++++++++++++++----------
5 files changed, 73 insertions(+), 34 deletions(-)
@@ -209,6 +209,7 @@ impl View for BufferSearchBar {
render_nav_button(
label,
direction,
+ self.active_match_index.is_some(),
move |_, this, cx| match direction {
Direction::Prev => this.select_prev_match(&Default::default(), cx),
Direction::Next => this.select_next_match(&Default::default(), cx),
@@ -1552,12 +1552,14 @@ impl View for ProjectSearchBar {
cx,
)
};
+ let is_active = search.active_match_index.is_some();
let semantic_index = SemanticIndex::enabled(cx)
.then(|| search_button_for_mode(SearchMode::Semantic, cx));
let nav_button_for_direction = |label, direction, cx: &mut ViewContext<Self>| {
render_nav_button(
label,
direction,
+ is_active,
move |_, this, cx| {
if let Some(search) = this.active_project_search.as_ref() {
search.update(cx, |search, cx| search.select_match(direction, cx));
@@ -1,5 +1,5 @@
use gpui::{
- elements::{Flex, Label, MouseEventHandler, ParentElement, Svg},
+ elements::{Label, MouseEventHandler, Svg},
platform::{CursorStyle, MouseButton},
scene::{CornerRadii, MouseClick},
Action, AnyElement, Element, EventContext, View, ViewContext,
@@ -42,6 +42,7 @@ pub(super) fn render_close_button<V: View>(
pub(super) fn render_nav_button<V: View>(
icon: &'static str,
direction: Direction,
+ active: bool,
on_click: impl Fn(MouseClick, &mut V, &mut EventContext<V>) + 'static,
cx: &mut ViewContext<V>,
) -> AnyElement<V> {
@@ -59,11 +60,20 @@ pub(super) fn render_nav_button<V: View>(
}
};
let tooltip_style = theme::current(cx).tooltip.clone();
-
+ let cursor_style = if active {
+ CursorStyle::PointingHand
+ } else {
+ CursorStyle::default()
+ };
enum NavButton {}
MouseEventHandler::<NavButton, _>::new(direction as usize, cx, |state, cx| {
let theme = theme::current(cx);
- let style = theme.search.nav_button.style_for(state).clone();
+ let style = theme
+ .search
+ .nav_button
+ .in_state(active)
+ .style_for(state)
+ .clone();
let mut container_style = style.container.clone();
let label = Label::new(icon, style.label.clone()).contained();
container_style.corner_radii = match direction {
@@ -81,7 +91,7 @@ pub(super) fn render_nav_button<V: View>(
label.with_style(container_style)
})
.on_click(MouseButton::Left, on_click)
- .with_cursor_style(CursorStyle::PointingHand)
+ .with_cursor_style(cursor_style)
.with_tooltip::<NavButton>(
direction as usize,
tooltip.to_string(),
@@ -388,7 +388,7 @@ pub struct Search {
pub dismiss_button: Interactive<IconButton>,
pub editor_icon: IconStyle,
pub mode_button: Toggleable<Interactive<ContainedText>>,
- pub nav_button: Interactive<ContainedLabel>,
+ pub nav_button: Toggleable<Interactive<ContainedLabel>>,
pub search_bar_row_height: f32,
}
@@ -250,36 +250,62 @@ export default function search(): any {
},
},
}),
- nav_button: interactive({
- base: {
- text: text(theme.highest, "mono", "on"),
- background: background(theme.highest, "on"),
- corner_radius: 6,
- border: {
- ...border(theme.highest, "on"),
- left: false,
- right: false,
- },
-
- padding: {
- bottom: 3,
- left: 10,
- right: 10,
- top: 3,
- },
- },
+ nav_button: toggleable({
state: {
- hovered: {
- ...text(theme.highest, "mono", "on", "hovered"),
- background: background(theme.highest, "on", "hovered"),
- border: border(theme.highest, "on", "hovered"),
- },
- clicked: {
- ...text(theme.highest, "mono", "on", "pressed"),
- background: background(theme.highest, "on", "pressed"),
- border: border(theme.highest, "on", "pressed"),
- },
- },
+ inactive: interactive({
+ base: {
+ background: background(theme.highest, "disabled"),
+ text: text(theme.highest, "mono", "disabled"),
+ corner_radius: 6,
+ border: {
+ ...border(theme.highest, "disabled"),
+ left: false,
+ right: false,
+ },
+
+ padding: {
+ bottom: 3,
+ left: 10,
+ right: 10,
+ top: 3,
+ },
+ },
+ state: {
+ hovered: {}
+ }
+ }),
+ active: interactive({
+ base: {
+ text: text(theme.highest, "mono", "on"),
+ background: background(theme.highest, "on"),
+ corner_radius: 6,
+ border: {
+ ...border(theme.highest, "on"),
+ left: false,
+ right: false,
+ },
+
+ padding: {
+ bottom: 3,
+ left: 10,
+ right: 10,
+ top: 3,
+ },
+ },
+ state: {
+ hovered: {
+ ...text(theme.highest, "mono", "on", "hovered"),
+ background: background(theme.highest, "on", "hovered"),
+ border: border(theme.highest, "on", "hovered"),
+ },
+ clicked: {
+ ...text(theme.highest, "mono", "on", "pressed"),
+ background: background(theme.highest, "on", "pressed"),
+ border: border(theme.highest, "on", "pressed"),
+ },
+ },
+ })
+ }
}),
search_bar_row_height: 32,