From bde52d5c938c2770dbaf026d2e08b11cab50b156 Mon Sep 17 00:00:00 2001 From: Max Brunsfeld Date: Thu, 14 Apr 2022 16:04:32 -0700 Subject: [PATCH] Add basic styling to keystrokes in command palette --- 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(-) create mode 100644 styles/src/styleTree/commandPalette.ts diff --git a/assets/themes/dark.json b/assets/themes/dark.json index 96f1ee0efc..e8a082d2ca 100644 --- a/assets/themes/dark.json +++ b/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, diff --git a/assets/themes/light.json b/assets/themes/light.json index c942dbb39b..bf9b287a37 100644 --- a/assets/themes/light.json +++ b/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, diff --git a/crates/command_palette/src/command_palette.rs b/crates/command_palette/src/command_palette.rs index d8b83ce328..b75c54bdf0 100644 --- a/crates/command_palette/src/command_palette.rs +++ b/crates/command_palette/src/command_palette.rs @@ -35,7 +35,6 @@ struct Command { name: &'static str, action: Box, keystrokes: Vec, - 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::(); - 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() diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs index b3c239b4b9..c831738423 100644 --- a/crates/theme/src/theme.rs +++ b/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, diff --git a/styles/src/styleTree/app.ts b/styles/src/styleTree/app.ts index 03e527d03d..1f98f8ba9c 100644 --- a/styles/src/styleTree/app.ts +++ b/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), diff --git a/styles/src/styleTree/commandPalette.ts b/styles/src/styleTree/commandPalette.ts new file mode 100644 index 0000000000..f7a0f51f6e --- /dev/null +++ b/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 + }, + } + } +} diff --git a/styles/src/styleTree/selectorModal.ts b/styles/src/styleTree/selectorModal.ts index 90570cc093..1bb44a776f 100644 --- a/styles/src/styleTree/selectorModal.ts +++ b/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"),