From b586601cab24255466b7b593d7d509a334855217 Mon Sep 17 00:00:00 2001 From: Piotr Osiewicz <24362066+osiewicz@users.noreply.github.com> Date: Sun, 13 Aug 2023 01:29:35 +0200 Subject: [PATCH] Style nav buttons --- 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(-) diff --git a/crates/search/src/buffer_search.rs b/crates/search/src/buffer_search.rs index 505e871af7d228cba3fd7796ad53f91a4c6f9517..5c02874f97b11f5a564bb1927ecf9fbb59c7d9c5 100644 --- a/crates/search/src/buffer_search.rs +++ b/crates/search/src/buffer_search.rs @@ -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), diff --git a/crates/search/src/project_search.rs b/crates/search/src/project_search.rs index a462327ec0315b47f34467b3e04dba3528967e6e..7bc7741882a7b0cb26acd37b12575faf403e2e5c 100644 --- a/crates/search/src/project_search.rs +++ b/crates/search/src/project_search.rs @@ -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| { 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)); diff --git a/crates/search/src/search_bar.rs b/crates/search/src/search_bar.rs index f0ab9a99fbbd581ed0078db1d693d41e875969e6..19a40a4a78a85f9992224725c022d97bfb75ab19 100644 --- a/crates/search/src/search_bar.rs +++ b/crates/search/src/search_bar.rs @@ -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( pub(super) fn render_nav_button( icon: &'static str, direction: Direction, + active: bool, on_click: impl Fn(MouseClick, &mut V, &mut EventContext) + 'static, cx: &mut ViewContext, ) -> AnyElement { @@ -59,11 +60,20 @@ pub(super) fn render_nav_button( } }; let tooltip_style = theme::current(cx).tooltip.clone(); - + let cursor_style = if active { + CursorStyle::PointingHand + } else { + CursorStyle::default() + }; enum NavButton {} MouseEventHandler::::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( label.with_style(container_style) }) .on_click(MouseButton::Left, on_click) - .with_cursor_style(CursorStyle::PointingHand) + .with_cursor_style(cursor_style) .with_tooltip::( direction as usize, tooltip.to_string(), diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs index dbcffe0382d9be9cef59768c35602bdfcf8f1ee7..41a9eaaba54e60a276a935db95f7d1cc52cc4077 100644 --- a/crates/theme/src/theme.rs +++ b/crates/theme/src/theme.rs @@ -388,7 +388,7 @@ pub struct Search { pub dismiss_button: Interactive, pub editor_icon: IconStyle, pub mode_button: Toggleable>, - pub nav_button: Interactive, + pub nav_button: Toggleable>, pub search_bar_row_height: f32, } diff --git a/styles/src/style_tree/search.ts b/styles/src/style_tree/search.ts index a4428fe4a864db792fccddceca4aa4cc94c71109..16de861310bf61dbf2554f0d573cb6a2bb667271 100644 --- a/styles/src/style_tree/search.ts +++ b/styles/src/style_tree/search.ts @@ -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,