Merge pull request #935 from zed-industries/style-command-palette-active-keystroke

Allow the theme to style the keystroke of the active item in the command palette

crates/command_palette/src/command_palette.rs

@@ -1,7 +1,7 @@
 use fuzzy::{StringMatch, StringMatchCandidate};
 use gpui::{
     actions,
-    elements::{ChildView, Flex, Label, ParentElement},
+    elements::{ChildView, Flex, Label, MouseState, ParentElement},
     keymap::Keystroke,
     Action, Element, Entity, MutableAppContext, View, ViewContext, ViewHandle,
 };
@@ -200,17 +200,19 @@ impl PickerDelegate for CommandPalette {
         }
     }
 
-    fn render_match(&self, ix: usize, selected: bool, cx: &gpui::AppContext) -> gpui::ElementBox {
+    fn render_match(
+        &self,
+        ix: usize,
+        mouse_state: &MouseState,
+        selected: bool,
+        cx: &gpui::AppContext,
+    ) -> gpui::ElementBox {
         let mat = &self.matches[ix];
         let command = &self.actions[mat.candidate_id];
         let settings = cx.global::<Settings>();
         let theme = &settings.theme;
-        let style = if selected {
-            &theme.selector.active_item
-        } else {
-            &theme.selector.item
-        };
-        let key_style = &theme.command_palette.key;
+        let style = theme.picker.item.style_for(mouse_state, selected);
+        let key_style = &theme.command_palette.key.style_for(mouse_state, selected);
         let keystroke_spacing = theme.command_palette.keystroke_spacing;
 
         Flex::row()

crates/diagnostics/src/items.rs

@@ -95,12 +95,8 @@ impl View for DiagnosticIndicator {
                     .theme
                     .workspace
                     .status_bar
-                    .diagnostic_summary;
-                let style = if state.hovered {
-                    style.hover()
-                } else {
-                    &style.default
-                };
+                    .diagnostic_summary
+                    .style_for(state, false);
 
                 let mut summary_row = Flex::row();
                 if self.summary.error_count > 0 {
@@ -190,11 +186,7 @@ impl View for DiagnosticIndicator {
                 MouseEventHandler::new::<Message, _, _>(1, cx, |state, _| {
                     Label::new(
                         diagnostic.message.split('\n').next().unwrap().to_string(),
-                        if state.hovered {
-                            message_style.hover().text.clone()
-                        } else {
-                            message_style.default.text.clone()
-                        },
+                        message_style.style_for(state, false).text.clone(),
                     )
                     .aligned()
                     .contained()

crates/file_finder/src/file_finder.rs

@@ -223,14 +223,16 @@ impl PickerDelegate for FileFinder {
         cx.emit(Event::Dismissed);
     }
 
-    fn render_match(&self, ix: usize, selected: bool, cx: &AppContext) -> ElementBox {
+    fn render_match(
+        &self,
+        ix: usize,
+        mouse_state: &MouseState,
+        selected: bool,
+        cx: &AppContext,
+    ) -> ElementBox {
         let path_match = &self.matches[ix];
         let settings = cx.global::<Settings>();
-        let style = if selected {
-            &settings.theme.selector.active_item
-        } else {
-            &settings.theme.selector.item
-        };
+        let style = settings.theme.picker.item.style_for(mouse_state, selected);
         let (file_name, file_name_positions, full_path, full_path_positions) =
             self.labels_for_match(path_match);
         Flex::column()

crates/go_to_line/src/go_to_line.rs

@@ -33,7 +33,7 @@ pub enum Event {
 impl GoToLine {
     pub fn new(active_editor: ViewHandle<Editor>, cx: &mut ViewContext<Self>) -> Self {
         let line_editor = cx.add_view(|cx| {
-            Editor::single_line(Some(|theme| theme.selector.input_editor.clone()), cx)
+            Editor::single_line(Some(|theme| theme.picker.input_editor.clone()), cx)
         });
         cx.subscribe(&line_editor, Self::on_line_editor_event)
             .detach();
@@ -152,7 +152,7 @@ impl View for GoToLine {
     }
 
     fn render(&mut self, cx: &mut RenderContext<Self>) -> ElementBox {
-        let theme = &cx.global::<Settings>().theme.selector;
+        let theme = &cx.global::<Settings>().theme.picker;
 
         let label = format!(
             "{},{} of {} lines",

crates/outline/src/outline.rs

@@ -228,14 +228,16 @@ impl PickerDelegate for OutlineView {
         cx.emit(Event::Dismissed);
     }
 
-    fn render_match(&self, ix: usize, selected: bool, cx: &AppContext) -> ElementBox {
+    fn render_match(
+        &self,
+        ix: usize,
+        mouse_state: &MouseState,
+        selected: bool,
+        cx: &AppContext,
+    ) -> ElementBox {
         let settings = cx.global::<Settings>();
         let string_match = &self.matches[ix];
-        let style = if selected {
-            &settings.theme.selector.active_item
-        } else {
-            &settings.theme.selector.item
-        };
+        let style = settings.theme.picker.item.style_for(mouse_state, selected);
         let outline_item = &self.outline.items[string_match.candidate_id];
 
         Text::new(outline_item.text.clone(), style.label.text.clone())

crates/picker/src/picker.rs

@@ -1,12 +1,14 @@
 use editor::Editor;
 use gpui::{
     elements::{
-        ChildView, EventHandler, Flex, Label, ParentElement, ScrollTarget, UniformList,
-        UniformListState,
+        ChildView, Flex, Label, MouseEventHandler, MouseState, ParentElement, ScrollTarget,
+        UniformList, UniformListState,
     },
     geometry::vector::{vec2f, Vector2F},
-    keymap, AppContext, Axis, Element, ElementBox, Entity, MutableAppContext, RenderContext, Task,
-    View, ViewContext, ViewHandle, WeakViewHandle,
+    keymap,
+    platform::CursorStyle,
+    AppContext, Axis, Element, ElementBox, Entity, MutableAppContext, RenderContext, Task, View,
+    ViewContext, ViewHandle, WeakViewHandle,
 };
 use settings::Settings;
 use std::cmp;
@@ -29,7 +31,13 @@ pub trait PickerDelegate: View {
     fn update_matches(&mut self, query: String, cx: &mut ViewContext<Self>) -> Task<()>;
     fn confirm(&mut self, cx: &mut ViewContext<Self>);
     fn dismiss(&mut self, cx: &mut ViewContext<Self>);
-    fn render_match(&self, ix: usize, selected: bool, cx: &AppContext) -> ElementBox;
+    fn render_match(
+        &self,
+        ix: usize,
+        state: &MouseState,
+        selected: bool,
+        cx: &AppContext,
+    ) -> ElementBox;
     fn center_selection_after_match_updates(&self) -> bool {
         false
     }
@@ -57,34 +65,34 @@ impl<D: PickerDelegate> View for Picker<D> {
             .with_child(
                 ChildView::new(&self.query_editor)
                     .contained()
-                    .with_style(settings.theme.selector.input_editor.container)
+                    .with_style(settings.theme.picker.input_editor.container)
                     .boxed(),
             )
             .with_child(
                 if match_count == 0 {
                     Label::new(
                         "No matches".into(),
-                        settings.theme.selector.empty.label.clone(),
+                        settings.theme.picker.empty.label.clone(),
                     )
                     .contained()
-                    .with_style(settings.theme.selector.empty.container)
+                    .with_style(settings.theme.picker.empty.container)
                 } else {
                     UniformList::new(
                         self.list_state.clone(),
                         match_count,
                         move |mut range, items, cx| {
-                            let cx = cx.as_ref();
                             let delegate = delegate.upgrade(cx).unwrap();
-                            let delegate = delegate.read(cx);
-                            let selected_ix = delegate.selected_index();
-                            range.end = cmp::min(range.end, delegate.match_count());
+                            let selected_ix = delegate.read(cx).selected_index();
+                            range.end = cmp::min(range.end, delegate.read(cx).match_count());
                             items.extend(range.map(move |ix| {
-                                EventHandler::new(delegate.render_match(ix, ix == selected_ix, cx))
-                                    .on_mouse_down(move |cx| {
-                                        cx.dispatch_action(SelectIndex(ix));
-                                        true
-                                    })
-                                    .boxed()
+                                MouseEventHandler::new::<D, _, _>(ix, cx, |state, cx| {
+                                    delegate
+                                        .read(cx)
+                                        .render_match(ix, state, ix == selected_ix, cx)
+                                })
+                                .on_mouse_down(move |cx| cx.dispatch_action(SelectIndex(ix)))
+                                .with_cursor_style(CursorStyle::PointingHand)
+                                .boxed()
                             }));
                         },
                     )
@@ -95,7 +103,7 @@ impl<D: PickerDelegate> View for Picker<D> {
                 .boxed(),
             )
             .contained()
-            .with_style(settings.theme.selector.container)
+            .with_style(settings.theme.picker.container)
             .constrained()
             .with_max_width(self.max_size.x())
             .with_max_height(self.max_size.y())
@@ -126,7 +134,7 @@ impl<D: PickerDelegate> Picker<D> {
 
     pub fn new(delegate: WeakViewHandle<D>, cx: &mut ViewContext<Self>) -> Self {
         let query_editor = cx.add_view(|cx| {
-            Editor::single_line(Some(|theme| theme.selector.input_editor.clone()), cx)
+            Editor::single_line(Some(|theme| theme.picker.input_editor.clone()), cx)
         });
         cx.subscribe(&query_editor, Self::on_query_editor_event)
             .detach();

crates/project_symbols/src/project_symbols.rs

@@ -220,14 +220,17 @@ impl PickerDelegate for ProjectSymbolsView {
         Task::ready(())
     }
 
-    fn render_match(&self, ix: usize, selected: bool, cx: &AppContext) -> ElementBox {
+    fn render_match(
+        &self,
+        ix: usize,
+        mouse_state: &MouseState,
+        selected: bool,
+        cx: &AppContext,
+    ) -> ElementBox {
         let string_match = &self.matches[ix];
         let settings = cx.global::<Settings>();
-        let style = if selected {
-            &settings.theme.selector.active_item
-        } else {
-            &settings.theme.selector.item
-        };
+        let style = &settings.theme.picker.item;
+        let current_style = style.style_for(mouse_state, selected);
         let symbol = &self.symbols[string_match.candidate_id];
         let syntax_runs = styled_runs_for_code_label(&symbol.label, &settings.theme.editor.syntax);
 
@@ -246,11 +249,11 @@ impl PickerDelegate for ProjectSymbolsView {
 
         Flex::column()
             .with_child(
-                Text::new(symbol.label.text.clone(), style.label.text.clone())
+                Text::new(symbol.label.text.clone(), current_style.label.text.clone())
                     .with_soft_wrap(false)
                     .with_highlights(combine_syntax_and_fuzzy_match_highlights(
                         &symbol.label.text,
-                        style.label.text.clone().into(),
+                        current_style.label.text.clone().into(),
                         syntax_runs,
                         &string_match.positions,
                     ))
@@ -259,10 +262,10 @@ impl PickerDelegate for ProjectSymbolsView {
             .with_child(
                 // Avoid styling the path differently when it is selected, since
                 // the symbol's syntax highlighting doesn't change when selected.
-                Label::new(path.to_string(), settings.theme.selector.item.label.clone()).boxed(),
+                Label::new(path.to_string(), style.default.label.clone()).boxed(),
             )
             .contained()
-            .with_style(style.container)
+            .with_style(current_style.container)
             .boxed()
     }
 }

crates/search/src/buffer_search.rs

@@ -281,13 +281,12 @@ impl BufferSearchBar {
     ) -> ElementBox {
         let is_active = self.is_search_option_enabled(search_option);
         MouseEventHandler::new::<Self, _, _>(search_option as usize, cx, |state, cx| {
-            let theme = &cx.global::<Settings>().theme.search;
-            let style = match (is_active, state.hovered) {
-                (false, false) => &theme.option_button,
-                (false, true) => &theme.hovered_option_button,
-                (true, false) => &theme.active_option_button,
-                (true, true) => &theme.active_hovered_option_button,
-            };
+            let style = &cx
+                .global::<Settings>()
+                .theme
+                .search
+                .option_button
+                .style_for(state, is_active);
             Label::new(icon.to_string(), style.text.clone())
                 .contained()
                 .with_style(style.container)
@@ -306,12 +305,12 @@ impl BufferSearchBar {
     ) -> ElementBox {
         enum NavButton {}
         MouseEventHandler::new::<NavButton, _, _>(direction as usize, cx, |state, cx| {
-            let theme = &cx.global::<Settings>().theme.search;
-            let style = if state.hovered {
-                &theme.hovered_option_button
-            } else {
-                &theme.option_button
-            };
+            let style = &cx
+                .global::<Settings>()
+                .theme
+                .search
+                .option_button
+                .style_for(state, false);
             Label::new(icon.to_string(), style.text.clone())
                 .contained()
                 .with_style(style.container)

crates/search/src/project_search.rs

@@ -655,12 +655,12 @@ impl ProjectSearchBar {
     ) -> ElementBox {
         enum NavButton {}
         MouseEventHandler::new::<NavButton, _, _>(direction as usize, cx, |state, cx| {
-            let theme = &cx.global::<Settings>().theme.search;
-            let style = if state.hovered {
-                &theme.hovered_option_button
-            } else {
-                &theme.option_button
-            };
+            let style = &cx
+                .global::<Settings>()
+                .theme
+                .search
+                .option_button
+                .style_for(state, false);
             Label::new(icon.to_string(), style.text.clone())
                 .contained()
                 .with_style(style.container)
@@ -682,13 +682,12 @@ impl ProjectSearchBar {
     ) -> ElementBox {
         let is_active = self.is_option_enabled(option, cx);
         MouseEventHandler::new::<ProjectSearchBar, _, _>(option as usize, cx, |state, cx| {
-            let theme = &cx.global::<Settings>().theme.search;
-            let style = match (is_active, state.hovered) {
-                (false, false) => &theme.option_button,
-                (false, true) => &theme.hovered_option_button,
-                (true, false) => &theme.active_option_button,
-                (true, true) => &theme.active_hovered_option_button,
-            };
+            let style = &cx
+                .global::<Settings>()
+                .theme
+                .search
+                .option_button
+                .style_for(state, is_active);
             Label::new(icon.to_string(), style.text.clone())
                 .contained()
                 .with_style(style.container)

crates/theme/src/theme.rs

@@ -2,7 +2,7 @@ mod theme_registry;
 
 use gpui::{
     color::Color,
-    elements::{ContainerStyle, ImageStyle, LabelStyle},
+    elements::{ContainerStyle, ImageStyle, LabelStyle, MouseState},
     fonts::{HighlightStyle, TextStyle},
     Border,
 };
@@ -23,7 +23,7 @@ pub struct Theme {
     pub contacts_panel: ContactsPanel,
     pub project_panel: ProjectPanel,
     pub command_palette: CommandPalette,
-    pub selector: Selector,
+    pub picker: Picker,
     pub editor: Editor,
     pub search: Search,
     pub project_diagnostics: ProjectDiagnostics,
@@ -114,10 +114,7 @@ pub struct Search {
     pub editor: FindEditor,
     pub invalid_editor: ContainerStyle,
     pub option_button_group: ContainerStyle,
-    pub option_button: ContainedText,
-    pub active_option_button: ContainedText,
-    pub hovered_option_button: ContainedText,
-    pub active_hovered_option_button: ContainedText,
+    pub option_button: Interactive<ContainedText>,
     pub match_background: Color,
     pub match_index: ContainedText,
     pub results_status: TextStyle,
@@ -229,7 +226,7 @@ pub struct ProjectPanelEntry {
 
 #[derive(Debug, Deserialize, Default)]
 pub struct CommandPalette {
-    pub key: ContainedLabel,
+    pub key: Interactive<ContainedLabel>,
     pub keystroke_spacing: f32,
 }
 
@@ -288,13 +285,12 @@ pub struct ChannelName {
 }
 
 #[derive(Deserialize, Default)]
-pub struct Selector {
+pub struct Picker {
     #[serde(flatten)]
     pub container: ContainerStyle,
     pub empty: ContainedLabel,
     pub input_editor: FieldEditor,
-    pub item: ContainedLabel,
-    pub active_item: ContainedLabel,
+    pub item: Interactive<ContainedLabel>,
 }
 
 #[derive(Clone, Debug, Deserialize, Default)]
@@ -410,7 +406,7 @@ pub struct FieldEditor {
     pub selection: SelectionStyle,
 }
 
-#[derive(Default, Clone, Copy)]
+#[derive(Debug, Default, Clone, Copy)]
 pub struct Interactive<T> {
     pub default: T,
     pub hover: Option<T>,
@@ -419,16 +415,23 @@ pub struct Interactive<T> {
 }
 
 impl<T> Interactive<T> {
-    pub fn active(&self) -> &T {
-        self.active.as_ref().unwrap_or(&self.default)
-    }
-
-    pub fn hover(&self) -> &T {
-        self.hover.as_ref().unwrap_or(&self.default)
-    }
-
-    pub fn active_hover(&self) -> &T {
-        self.active_hover.as_ref().unwrap_or(self.active())
+    pub fn style_for(&self, state: &MouseState, active: bool) -> &T {
+        if active {
+            if state.hovered {
+                self.active_hover
+                    .as_ref()
+                    .or(self.active.as_ref())
+                    .unwrap_or(&self.default)
+            } else {
+                self.active.as_ref().unwrap_or(&self.default)
+            }
+        } else {
+            if state.hovered {
+                self.hover.as_ref().unwrap_or(&self.default)
+            } else {
+                &self.default
+            }
+        }
     }
 }
 

crates/theme_selector/src/theme_selector.rs

@@ -203,15 +203,17 @@ impl PickerDelegate for ThemeSelector {
         })
     }
 
-    fn render_match(&self, ix: usize, selected: bool, cx: &AppContext) -> ElementBox {
+    fn render_match(
+        &self,
+        ix: usize,
+        mouse_state: &MouseState,
+        selected: bool,
+        cx: &AppContext,
+    ) -> ElementBox {
         let settings = cx.global::<Settings>();
         let theme = &settings.theme;
         let theme_match = &self.matches[ix];
-        let style = if selected {
-            &theme.selector.active_item
-        } else {
-            &theme.selector.item
-        };
+        let style = theme.picker.item.style_for(mouse_state, selected);
 
         Label::new(theme_match.string.clone(), style.label.clone())
             .with_highlights(theme_match.positions.clone())

crates/workspace/src/sidebar.rs

@@ -193,13 +193,7 @@ impl View for SidebarButtons {
         Flex::row()
             .with_children(items.iter().enumerate().map(|(ix, item)| {
                 MouseEventHandler::new::<Self, _, _>(ix, cx, move |state, _| {
-                    let style = if Some(ix) == active_ix {
-                        item_style.active()
-                    } else if state.hovered {
-                        item_style.hover()
-                    } else {
-                        &item_style.default
-                    };
+                    let style = item_style.style_for(state, Some(ix) == active_ix);
                     Svg::new(item.icon_path)
                         .with_color(style.icon_color)
                         .constrained()

crates/workspace/src/workspace.rs

@@ -1574,11 +1574,11 @@ impl Workspace {
         } else {
             Some(
                 MouseEventHandler::new::<Authenticate, _, _>(0, cx, |state, _| {
-                    let style = if state.hovered {
-                        &theme.workspace.titlebar.sign_in_prompt.hover()
-                    } else {
-                        &theme.workspace.titlebar.sign_in_prompt.default
-                    };
+                    let style = theme
+                        .workspace
+                        .titlebar
+                        .sign_in_prompt
+                        .style_for(state, false);
                     Label::new("Sign in".to_string(), style.text.clone())
                         .contained()
                         .with_style(style.container)
@@ -1649,18 +1649,11 @@ impl Workspace {
         {
             Some(
                 MouseEventHandler::new::<ToggleShare, _, _>(0, cx, |state, cx| {
-                    let style = &theme.workspace.titlebar.share_icon;
-                    let style = if self.project().read(cx).is_shared() {
-                        if state.hovered {
-                            style.active_hover()
-                        } else {
-                            &style.active()
-                        }
-                    } else if state.hovered {
-                        &style.active()
-                    } else {
-                        &style.default
-                    };
+                    let style = &theme
+                        .workspace
+                        .titlebar
+                        .share_icon
+                        .style_for(state, self.project().read(cx).is_shared());
                     Svg::new("icons/share.svg")
                         .with_color(style.color)
                         .constrained()