From 2b1118f59736aab11028349138e82cb30d9005ae Mon Sep 17 00:00:00 2001 From: Julia Date: Sun, 1 Jan 2023 23:50:46 -0500 Subject: [PATCH] Add dismiss buffer search button & fix some faulty icon button styling Co-Authored-By: Nate Butler --- crates/gpui/src/app.rs | 2 +- crates/search/src/buffer_search.rs | 166 ++++++++++++-------- crates/theme/src/theme.rs | 1 + styles/src/styleTree/contactNotification.ts | 4 +- styles/src/styleTree/editor.ts | 1 - styles/src/styleTree/search.ts | 12 ++ styles/src/styleTree/tabBar.ts | 2 +- 7 files changed, 119 insertions(+), 69 deletions(-) diff --git a/crates/gpui/src/app.rs b/crates/gpui/src/app.rs index f5ced700b63c370814caa4b538c99366d654395f..76b9fb1aa68db86f3197947a7bfe4be6d756d009 100644 --- a/crates/gpui/src/app.rs +++ b/crates/gpui/src/app.rs @@ -4038,7 +4038,7 @@ pub struct RenderContext<'a, T: View> { pub refreshing: bool, } -#[derive(Clone, Default)] +#[derive(Debug, Clone, Default)] pub struct MouseState { hovered: bool, clicked: Option, diff --git a/crates/search/src/buffer_search.rs b/crates/search/src/buffer_search.rs index 5877322feb64c96d843dffbec0f328af93e4ac97..fa95dda1af924c3c005b282afd97b34d5a149e3e 100644 --- a/crates/search/src/buffer_search.rs +++ b/crates/search/src/buffer_search.rs @@ -106,73 +106,79 @@ impl View for BufferSearchBar { .with_child( Flex::row() .with_child( - ChildView::new(&self.query_editor, cx) - .aligned() - .left() - .flex(1., true) - .boxed(), - ) - .with_children(self.active_searchable_item.as_ref().and_then( - |searchable_item| { - let matches = self - .seachable_items_with_matches - .get(&searchable_item.downgrade())?; - let message = if let Some(match_ix) = self.active_match_index { - format!("{}/{}", match_ix + 1, matches.len()) - } else { - "No matches".to_string() - }; - - Some( - Label::new(message, theme.search.match_index.text.clone()) - .contained() - .with_style(theme.search.match_index.container) + Flex::row() + .with_child( + ChildView::new(&self.query_editor, cx) .aligned() + .left() + .flex(1., true) .boxed(), ) - }, - )) - .contained() - .with_style(editor_container) - .aligned() - .constrained() - .with_min_width(theme.search.editor.min_width) - .with_max_width(theme.search.editor.max_width) - .flex(1., false) - .boxed(), - ) - .with_child( - Flex::row() - .with_child(self.render_nav_button("<", Direction::Prev, cx)) - .with_child(self.render_nav_button(">", Direction::Next, cx)) - .aligned() - .boxed(), - ) - .with_child( - Flex::row() - .with_children(self.render_search_option( - supported_options.case, - "Case", - SearchOption::CaseSensitive, - cx, - )) - .with_children(self.render_search_option( - supported_options.word, - "Word", - SearchOption::WholeWord, - cx, - )) - .with_children(self.render_search_option( - supported_options.regex, - "Regex", - SearchOption::Regex, - cx, - )) - .contained() - .with_style(theme.search.option_button_group) - .aligned() + .with_children(self.active_searchable_item.as_ref().and_then( + |searchable_item| { + let matches = self + .seachable_items_with_matches + .get(&searchable_item.downgrade())?; + let message = if let Some(match_ix) = self.active_match_index { + format!("{}/{}", match_ix + 1, matches.len()) + } else { + "No matches".to_string() + }; + + Some( + Label::new(message, theme.search.match_index.text.clone()) + .contained() + .with_style(theme.search.match_index.container) + .aligned() + .boxed(), + ) + }, + )) + .contained() + .with_style(editor_container) + .aligned() + .constrained() + .with_min_width(theme.search.editor.min_width) + .with_max_width(theme.search.editor.max_width) + .flex(1., false) + .boxed(), + ) + .with_child( + Flex::row() + .with_child(self.render_nav_button("<", Direction::Prev, cx)) + .with_child(self.render_nav_button(">", Direction::Next, cx)) + .aligned() + .boxed(), + ) + .with_child( + Flex::row() + .with_children(self.render_search_option( + supported_options.case, + "Case", + SearchOption::CaseSensitive, + cx, + )) + .with_children(self.render_search_option( + supported_options.word, + "Word", + SearchOption::WholeWord, + cx, + )) + .with_children(self.render_search_option( + supported_options.regex, + "Regex", + SearchOption::Regex, + cx, + )) + .contained() + .with_style(theme.search.option_button_group) + .aligned() + .boxed(), + ) + .flex(1., true) .boxed(), ) + .with_child(self.render_close_button(&theme.search, cx)) .contained() .with_style(theme.search.container) .named("search bar") @@ -325,7 +331,7 @@ impl BufferSearchBar { let is_active = self.is_search_option_enabled(option); Some( MouseEventHandler::::new(option as usize, cx, |state, cx| { - let style = &cx + let style = cx .global::() .theme .search @@ -373,7 +379,7 @@ impl BufferSearchBar { enum NavButton {} MouseEventHandler::::new(direction as usize, cx, |state, cx| { - let style = &cx + let style = cx .global::() .theme .search @@ -399,6 +405,38 @@ impl BufferSearchBar { .boxed() } + fn render_close_button( + &self, + theme: &theme::Search, + cx: &mut RenderContext, + ) -> ElementBox { + let action = Box::new(Dismiss); + let tooltip = "Dismiss Buffer Search"; + let tooltip_style = cx.global::().theme.tooltip.clone(); + + enum CloseButton {} + MouseEventHandler::::new(0, cx, |state, _| { + let style = theme.dismiss_button.style_for(state, false); + Svg::new("icons/x_mark_8.svg") + .with_color(style.color) + .constrained() + .with_width(style.icon_width) + .aligned() + .constrained() + .with_width(style.button_width) + .contained() + .with_style(style.container) + .boxed() + }) + .on_click(MouseButton::Left, { + let action = action.boxed_clone(); + move |_, cx| cx.dispatch_any_action(action.boxed_clone()) + }) + .with_cursor_style(CursorStyle::PointingHand) + .with_tooltip::(0, tooltip.to_string(), Some(action), tooltip_style, cx) + .boxed() + } + fn deploy(pane: &mut Pane, action: &Deploy, cx: &mut ViewContext) { if let Some(search_bar) = pane.toolbar().read(cx).item_of_type::() { if search_bar.update(cx, |search_bar, cx| search_bar.show(action.focus, true, cx)) { diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs index bf6cb57adb3ce6378fed2bc5db3f4ed2d8b22962..e463310b9810eb2d6f30e924b1b66166c9b2e295 100644 --- a/crates/theme/src/theme.rs +++ b/crates/theme/src/theme.rs @@ -247,6 +247,7 @@ pub struct Search { pub results_status: TextStyle, pub tab_icon_width: f32, pub tab_icon_spacing: f32, + pub dismiss_button: Interactive, } #[derive(Clone, Deserialize, Default)] diff --git a/styles/src/styleTree/contactNotification.ts b/styles/src/styleTree/contactNotification.ts index e0b967203d1f72a3eb2fd40c6f88786e6376aafc..e3f15baa32285ce202a279736f1d5f9ed45850cb 100644 --- a/styles/src/styleTree/contactNotification.ts +++ b/styles/src/styleTree/contactNotification.ts @@ -32,13 +32,13 @@ export default function contactNotification(colorScheme: ColorScheme): Object { }, }, dismissButton: { - color: foreground(layer, "on"), + color: foreground(layer, "variant"), iconWidth: 8, iconHeight: 8, buttonWidth: 8, buttonHeight: 8, hover: { - color: foreground(layer, "on", "hovered"), + color: foreground(layer, "hovered"), }, }, }; diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts index 63d86c8f471f3574e87cb05414c75e5a39c33c04..e96cab0316a4116d7738efeb7f2336b78cb6c532 100644 --- a/styles/src/styleTree/editor.ts +++ b/styles/src/styleTree/editor.ts @@ -257,7 +257,6 @@ export default function editor(colorScheme: ColorScheme) { right: 6, }, hover: { - color: foreground(layer, "on", "hovered"), background: background(layer, "on", "hovered"), }, }, diff --git a/styles/src/styleTree/search.ts b/styles/src/styleTree/search.ts index 4f12c42c0c267e2ec98578ae46955f915ed9f974..2edd3807a53928bf01b796e0e9d306f27c03a420 100644 --- a/styles/src/styleTree/search.ts +++ b/styles/src/styleTree/search.ts @@ -80,5 +80,17 @@ export default function search(colorScheme: ColorScheme) { ...text(layer, "mono", "on"), size: 18, }, + dismissButton: { + color: foreground(layer, "variant"), + iconWidth: 12, + buttonWidth: 14, + padding: { + left: 10, + right: 10, + }, + hover: { + color: foreground(layer, "hovered"), + }, + }, }; } diff --git a/styles/src/styleTree/tabBar.ts b/styles/src/styleTree/tabBar.ts index fcf78dc73f26854b73ef13113c2856e96f7c490c..a4875cec06a57bafde5455bff1d9d2bd9322f4f0 100644 --- a/styles/src/styleTree/tabBar.ts +++ b/styles/src/styleTree/tabBar.ts @@ -26,7 +26,7 @@ export default function tabBar(colorScheme: ColorScheme) { // Close icons iconWidth: 8, iconClose: foreground(layer, "variant"), - iconCloseActive: foreground(layer), + iconCloseActive: foreground(layer, "hovered"), // Indicators iconConflict: foreground(layer, "warning"),