Add basic styling to keystrokes in command palette

Max Brunsfeld created 3 years ago

Change summary

assets/themes/dark.json                       | 23 +++++++++++++++
assets/themes/light.json                      | 23 +++++++++++++++
crates/command_palette/src/command_palette.rs | 31 ++++++++++++--------
crates/theme/src/theme.rs                     |  9 +++++
styles/src/styleTree/app.ts                   |  2 +
styles/src/styleTree/commandPalette.ts        | 21 ++++++++++++++
styles/src/styleTree/selectorModal.ts         |  2 
7 files changed, 96 insertions(+), 15 deletions(-)

Detailed changes

assets/themes/dark.json

@@ -708,6 +708,29 @@
       }
     }
   },
+  "command_palette": {
+    "keystroke_spacing": 8,
+    "key": {
+      "text": {
+        "family": "Zed Mono",
+        "color": "#9c9c9c",
+        "size": 12
+      },
+      "corner_radius": 3,
+      "background": "#2472f2",
+      "border": {
+        "color": "#2472f2",
+        "width": 1
+      },
+      "padding": {
+        "left": 3,
+        "right": 3
+      },
+      "margin": {
+        "left": 3
+      }
+    }
+  },
   "project_panel": {
     "padding": {
       "top": 6,

assets/themes/light.json

@@ -708,6 +708,29 @@
       }
     }
   },
+  "command_palette": {
+    "keystroke_spacing": 8,
+    "key": {
+      "text": {
+        "family": "Zed Mono",
+        "color": "#474747",
+        "size": 12
+      },
+      "corner_radius": 3,
+      "background": "#c5dafc",
+      "border": {
+        "color": "#9ec1fa",
+        "width": 1
+      },
+      "padding": {
+        "left": 3,
+        "right": 3
+      },
+      "margin": {
+        "left": 3
+      }
+    }
+  },
   "project_panel": {
     "padding": {
       "top": 6,

crates/command_palette/src/command_palette.rs

@@ -35,7 +35,6 @@ struct Command {
     name: &'static str,
     action: Box<dyn Action>,
     keystrokes: Vec<Keystroke>,
-    has_multiple_bindings: bool,
 }
 
 impl CommandPalette {
@@ -49,7 +48,6 @@ impl CommandPalette {
                 keystrokes: bindings
                     .last()
                     .map_or(Vec::new(), |binding| binding.keystrokes().to_vec()),
-                has_multiple_bindings: bindings.len() > 1,
             })
             .collect();
         let selector = cx.add_view(|cx| SelectorModal::new(this, cx));
@@ -180,12 +178,14 @@ impl SelectorModalDelegate for CommandPalette {
         let mat = &self.matches[ix];
         let command = &self.actions[mat.candidate_id];
         let settings = cx.global::<Settings>();
-        let theme = &settings.theme.selector;
+        let theme = &settings.theme;
         let style = if selected {
-            &theme.active_item
+            &theme.selector.active_item
         } else {
-            &theme.item
+            &theme.selector.item
         };
+        let key_style = &theme.command_palette.key;
+        let keystroke_spacing = theme.command_palette.keystroke_spacing;
 
         Flex::row()
             .with_child(Label::new(mat.string.clone(), style.label.clone()).boxed())
@@ -201,23 +201,28 @@ impl SelectorModalDelegate for CommandPalette {
                         .into_iter()
                         .filter_map(|(modifier, label)| {
                             if modifier {
-                                Some(Label::new(label.into(), style.label.clone()).boxed())
+                                Some(
+                                    Label::new(label.into(), key_style.label.clone())
+                                        .contained()
+                                        .with_style(key_style.container)
+                                        .boxed(),
+                                )
                             } else {
                                 None
                             }
                         }),
                     )
-                    .with_child(Label::new(keystroke.key.clone(), style.label.clone()).boxed())
+                    .with_child(
+                        Label::new(keystroke.key.clone(), key_style.label.clone())
+                            .contained()
+                            .with_style(key_style.container)
+                            .boxed(),
+                    )
                     .contained()
-                    .with_margin_left(5.0)
+                    .with_margin_left(keystroke_spacing)
                     .flex_float()
                     .boxed()
             }))
-            .with_children(if command.has_multiple_bindings {
-                Some(Label::new("+".into(), style.label.clone()).boxed())
-            } else {
-                None
-            })
             .contained()
             .with_style(style.container)
             .boxed()

crates/theme/src/theme.rs

@@ -21,6 +21,7 @@ pub struct Theme {
     pub chat_panel: ChatPanel,
     pub contacts_panel: ContactsPanel,
     pub project_panel: ProjectPanel,
+    pub command_palette: CommandPalette,
     pub selector: Selector,
     pub editor: Editor,
     pub search: Search,
@@ -187,6 +188,12 @@ pub struct ProjectPanelEntry {
     pub icon_spacing: f32,
 }
 
+#[derive(Debug, Deserialize, Default)]
+pub struct CommandPalette {
+    pub key: ContainedLabel,
+    pub keystroke_spacing: f32,
+}
+
 #[derive(Deserialize, Default)]
 pub struct ContactsPanel {
     #[serde(flatten)]
@@ -259,7 +266,7 @@ pub struct ContainedText {
     pub text: TextStyle,
 }
 
-#[derive(Clone, Deserialize, Default)]
+#[derive(Clone, Debug, Deserialize, Default)]
 pub struct ContainedLabel {
     #[serde(flatten)]
     pub container: ContainerStyle,

styles/src/styleTree/app.ts

@@ -2,6 +2,7 @@ import Theme from "../themes/theme";
 import chatPanel from "./chatPanel";
 import { text } from "./components";
 import contactsPanel from "./contactsPanel";
+import commandPalette from "./commandPalette";
 import editor from "./editor";
 import projectPanel from "./projectPanel";
 import search from "./search";
@@ -29,6 +30,7 @@ export default function app(theme: Theme): Object {
         },
       },
     },
+    commandPalette: commandPalette(theme),
     projectPanel: projectPanel(theme),
     chatPanel: chatPanel(theme),
     contactsPanel: contactsPanel(theme),

styles/src/styleTree/commandPalette.ts

@@ -0,0 +1,21 @@
+import Theme from "../themes/theme";
+import { text, backgroundColor, border } from "./components";
+
+export default function commandPalette(theme: Theme) {
+  return {
+    keystrokeSpacing: 8,
+    key: {
+      text: text(theme, "mono", "secondary", { size: "xs" }),
+      cornerRadius: 3,
+      background: backgroundColor(theme, "info", "base"),
+      border: border(theme, "info"),
+      padding: {
+        left: 3,
+        right: 3,
+      },
+      margin: {
+        left: 3
+      },
+    }
+  }
+}

styles/src/styleTree/selectorModal.ts

@@ -38,7 +38,7 @@ export default function selectorModal(theme: Theme): Object {
     },
     inputEditor: {
       background: backgroundColor(theme, 500),
-      corner_radius: 6,
+      cornerRadius: 6,
       placeholderText: text(theme, "sans", "placeholder"),
       selection: player(theme, 1).selection,
       text: text(theme, "mono", "primary"),