From b0bbb742ab0412e4a31f5dee4c066460a77ff69e Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Wed, 3 Jan 2024 11:14:33 -0500 Subject: [PATCH 1/5] Add return, space, tab, escape keybinding icons --- assets/icons/delete.svg | 5 +-- assets/icons/escape.svg | 1 + assets/icons/return.svg | 4 +- assets/icons/space.svg | 1 + assets/icons/tab.svg | 1 + crates/ui2/src/components/icon.rs | 60 ++++++++++++++----------- crates/ui2/src/components/keybinding.rs | 5 +++ 7 files changed, 43 insertions(+), 34 deletions(-) create mode 100644 assets/icons/escape.svg create mode 100644 assets/icons/space.svg create mode 100644 assets/icons/tab.svg diff --git a/assets/icons/delete.svg b/assets/icons/delete.svg index 1068cb65f2..a7edbb6158 100644 --- a/assets/icons/delete.svg +++ b/assets/icons/delete.svg @@ -1,4 +1 @@ - - - - + diff --git a/assets/icons/escape.svg b/assets/icons/escape.svg new file mode 100644 index 0000000000..00c772a2ad --- /dev/null +++ b/assets/icons/escape.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/return.svg b/assets/icons/return.svg index 683519c306..16cfeeda2e 100644 --- a/assets/icons/return.svg +++ b/assets/icons/return.svg @@ -1,3 +1 @@ - - - + diff --git a/assets/icons/space.svg b/assets/icons/space.svg new file mode 100644 index 0000000000..63718fb4aa --- /dev/null +++ b/assets/icons/space.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/tab.svg b/assets/icons/tab.svg new file mode 100644 index 0000000000..49a3536bed --- /dev/null +++ b/assets/icons/tab.svg @@ -0,0 +1 @@ + diff --git a/crates/ui2/src/components/icon.rs b/crates/ui2/src/components/icon.rs index 0c618f2915..d445b3d702 100644 --- a/crates/ui2/src/components/icon.rs +++ b/crates/ui2/src/components/icon.rs @@ -24,10 +24,10 @@ impl IconSize { #[derive(Debug, PartialEq, Copy, Clone, EnumIter)] pub enum Icon { Ai, - ArrowLeft, - ArrowUp, ArrowDown, + ArrowLeft, ArrowRight, + ArrowUp, ArrowUpRight, AtSign, AudioOff, @@ -39,25 +39,28 @@ pub enum Icon { Bolt, CaseSensitive, Check, - Copy, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Close, Collab, + Command, + Control, Copilot, - CopilotInit, - CopilotError, CopilotDisabled, + CopilotError, + CopilotInit, + Copy, Dash, Delete, Disconnected, Ellipsis, Envelope, - ExternalLink, + Escape, ExclamationTriangle, Exit, + ExternalLink, File, FileDoc, FileGeneric, @@ -78,30 +81,30 @@ pub enum Icon { MagnifyingGlass, MailOpen, Maximize, - Minimize, Menu, MessageBubbles, Mic, MicMute, + Minimize, + Option, Plus, Public, Quote, Replace, ReplaceAll, ReplaceNext, + Return, Screen, SelectAll, - Split, + Shift, Snip, + Space, + Split, + Tab, Terminal, + Update, WholeWord, XCircle, - Command, - Control, - Shift, - Option, - Return, - Update, ZedXCopilot, } @@ -109,10 +112,10 @@ impl Icon { pub fn path(self) -> &'static str { match self { Icon::Ai => "icons/ai.svg", + Icon::ArrowDown => "icons/arrow_down.svg", Icon::ArrowLeft => "icons/arrow_left.svg", Icon::ArrowRight => "icons/arrow_right.svg", Icon::ArrowUp => "icons/arrow_up.svg", - Icon::ArrowDown => "icons/arrow_down.svg", Icon::ArrowUpRight => "icons/arrow_up_right.svg", Icon::AtSign => "icons/at-sign.svg", Icon::AudioOff => "icons/speaker-off.svg", @@ -124,25 +127,28 @@ impl Icon { Icon::Bolt => "icons/bolt.svg", Icon::CaseSensitive => "icons/case_insensitive.svg", Icon::Check => "icons/check.svg", - Icon::Copy => "icons/copy.svg", Icon::ChevronDown => "icons/chevron_down.svg", Icon::ChevronLeft => "icons/chevron_left.svg", Icon::ChevronRight => "icons/chevron_right.svg", Icon::ChevronUp => "icons/chevron_up.svg", Icon::Close => "icons/x.svg", Icon::Collab => "icons/user_group_16.svg", + Icon::Command => "icons/command.svg", + Icon::Control => "icons/control.svg", Icon::Copilot => "icons/copilot.svg", - Icon::CopilotInit => "icons/copilot_init.svg", - Icon::CopilotError => "icons/copilot_error.svg", Icon::CopilotDisabled => "icons/copilot_disabled.svg", + Icon::CopilotError => "icons/copilot_error.svg", + Icon::CopilotInit => "icons/copilot_init.svg", + Icon::Copy => "icons/copy.svg", Icon::Dash => "icons/dash.svg", Icon::Delete => "icons/delete.svg", Icon::Disconnected => "icons/disconnected.svg", Icon::Ellipsis => "icons/ellipsis.svg", Icon::Envelope => "icons/feedback.svg", + Icon::Escape => "icons/escape.svg", Icon::ExclamationTriangle => "icons/warning.svg", - Icon::ExternalLink => "icons/external_link.svg", Icon::Exit => "icons/exit.svg", + Icon::ExternalLink => "icons/external_link.svg", Icon::File => "icons/file.svg", Icon::FileDoc => "icons/file_icons/book.svg", Icon::FileGeneric => "icons/file_icons/file.svg", @@ -163,30 +169,30 @@ impl Icon { Icon::MagnifyingGlass => "icons/magnifying_glass.svg", Icon::MailOpen => "icons/mail-open.svg", Icon::Maximize => "icons/maximize.svg", - Icon::Minimize => "icons/minimize.svg", Icon::Menu => "icons/menu.svg", Icon::MessageBubbles => "icons/conversations.svg", Icon::Mic => "icons/mic.svg", Icon::MicMute => "icons/mic-mute.svg", + Icon::Minimize => "icons/minimize.svg", + Icon::Option => "icons/option.svg", Icon::Plus => "icons/plus.svg", Icon::Public => "icons/public.svg", Icon::Quote => "icons/quote.svg", Icon::Replace => "icons/replace.svg", Icon::ReplaceAll => "icons/replace_all.svg", Icon::ReplaceNext => "icons/replace_next.svg", + Icon::Return => "icons/return.svg", Icon::Screen => "icons/desktop.svg", Icon::SelectAll => "icons/select-all.svg", - Icon::Split => "icons/split.svg", + Icon::Shift => "icons/shift.svg", Icon::Snip => "icons/snip.svg", + Icon::Space => "icons/space.svg", + Icon::Split => "icons/split.svg", + Icon::Tab => "icons/tab.svg", Icon::Terminal => "icons/terminal.svg", + Icon::Update => "icons/update.svg", Icon::WholeWord => "icons/word_search.svg", Icon::XCircle => "icons/error.svg", - Icon::Command => "icons/command.svg", - Icon::Control => "icons/control.svg", - Icon::Shift => "icons/shift.svg", - Icon::Option => "icons/option.svg", - Icon::Return => "icons/return.svg", - Icon::Update => "icons/update.svg", Icon::ZedXCopilot => "icons/zed_x_copilot.svg", } } diff --git a/crates/ui2/src/components/keybinding.rs b/crates/ui2/src/components/keybinding.rs index 6f63885489..434f3aeb5e 100644 --- a/crates/ui2/src/components/keybinding.rs +++ b/crates/ui2/src/components/keybinding.rs @@ -72,6 +72,11 @@ impl KeyBinding { "down" => Some(Icon::ArrowDown), "backspace" => Some(Icon::Backspace), "delete" => Some(Icon::Delete), + "enter" => Some(Icon::Return), + "escape" => Some(Icon::Escape), + "return" => Some(Icon::Return), + "space" => Some(Icon::Space), + "tab" => Some(Icon::Tab), _ => None, } } From 124604c019a1359f7445fedca2b1f3a1438386e9 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Wed, 3 Jan 2024 11:28:31 -0500 Subject: [PATCH 2/5] Add pageup and pagedown icons and keybinding icons --- assets/icons/page-down.svg | 6 ++++++ assets/icons/page-up.svg | 13 +++++++++++++ crates/ui2/src/components/icon.rs | 4 ++++ crates/ui2/src/components/keybinding.rs | 10 ++++++---- 4 files changed, 29 insertions(+), 4 deletions(-) create mode 100644 assets/icons/page-down.svg create mode 100644 assets/icons/page-up.svg diff --git a/assets/icons/page-down.svg b/assets/icons/page-down.svg new file mode 100644 index 0000000000..765f36b26a --- /dev/null +++ b/assets/icons/page-down.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/icons/page-up.svg b/assets/icons/page-up.svg new file mode 100644 index 0000000000..f555165d2d --- /dev/null +++ b/assets/icons/page-up.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/crates/ui2/src/components/icon.rs b/crates/ui2/src/components/icon.rs index d445b3d702..b252715aad 100644 --- a/crates/ui2/src/components/icon.rs +++ b/crates/ui2/src/components/icon.rs @@ -87,6 +87,8 @@ pub enum Icon { MicMute, Minimize, Option, + PageDown, + PageUp, Plus, Public, Quote, @@ -175,6 +177,8 @@ impl Icon { Icon::MicMute => "icons/mic-mute.svg", Icon::Minimize => "icons/minimize.svg", Icon::Option => "icons/option.svg", + Icon::PageDown => "icons/page-down.svg", + Icon::PageUp => "icons/page-up.svg", Icon::Plus => "icons/plus.svg", Icon::Public => "icons/public.svg", Icon::Quote => "icons/quote.svg", diff --git a/crates/ui2/src/components/keybinding.rs b/crates/ui2/src/components/keybinding.rs index 434f3aeb5e..4c51e0f742 100644 --- a/crates/ui2/src/components/keybinding.rs +++ b/crates/ui2/src/components/keybinding.rs @@ -66,17 +66,19 @@ impl KeyBinding { fn icon_for_key(keystroke: &Keystroke) -> Option { match keystroke.key.as_str() { - "left" => Some(Icon::ArrowLeft), - "right" => Some(Icon::ArrowRight), - "up" => Some(Icon::ArrowUp), - "down" => Some(Icon::ArrowDown), "backspace" => Some(Icon::Backspace), "delete" => Some(Icon::Delete), + "down" => Some(Icon::ArrowDown), "enter" => Some(Icon::Return), "escape" => Some(Icon::Escape), + "left" => Some(Icon::ArrowLeft), + "pagedown" => Some(Icon::PageDown), + "pageup" => Some(Icon::PageUp), "return" => Some(Icon::Return), + "right" => Some(Icon::ArrowRight), "space" => Some(Icon::Space), "tab" => Some(Icon::Tab), + "up" => Some(Icon::ArrowUp), _ => None, } } From 127acede25906e3ba781304d79eb8c71fe94772f Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Wed, 3 Jan 2024 11:37:49 -0500 Subject: [PATCH 3/5] Update keybinding rendering --- crates/ui2/src/components/keybinding.rs | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/crates/ui2/src/components/keybinding.rs b/crates/ui2/src/components/keybinding.rs index 4c51e0f742..2ffab23bb1 100644 --- a/crates/ui2/src/components/keybinding.rs +++ b/crates/ui2/src/components/keybinding.rs @@ -23,9 +23,9 @@ impl RenderOnce for KeyBinding { h_stack() .flex_none() .gap_0p5() - .bg(cx.theme().colors().element_background) .p_0p5() .rounded_sm() + .text_color(cx.theme().colors().text_muted) .when(keystroke.modifiers.function, |el| el.child(Key::new("fn"))) .when(keystroke.modifiers.control, |el| { el.child(KeyIcon::new(Icon::Control)) @@ -111,7 +111,7 @@ impl RenderOnce for Key { .h(rems(14. / 16.)) .text_ui() .line_height(relative(1.)) - .text_color(cx.theme().colors().text) + .text_color(cx.theme().colors().text_muted) .child(self.key.clone()) } } @@ -131,9 +131,11 @@ impl RenderOnce for KeyIcon { type Output = Div; fn render(self, _cx: &mut WindowContext) -> Self::Output { - div() - .w(rems(14. / 16.)) - .child(IconElement::new(self.icon).size(IconSize::Small)) + div().w(rems(14. / 16.)).child( + IconElement::new(self.icon) + .size(IconSize::Small) + .color(Color::Muted), + ) } } From 15fb9d91955a98765d193a938b286b08dca82e91 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Wed, 3 Jan 2024 11:45:41 -0500 Subject: [PATCH 4/5] Standardize icon naming --- assets/icons/{at-sign.svg => at_sign.svg} | 2 +- assets/icons/{bell-off.svg => bell_off.svg} | 0 assets/icons/{bell-ring.svg => bell_ring.svg} | 0 .../icons/{magic-wand.svg => magic_wand.svg} | 0 assets/icons/{mail-open.svg => mail_open.svg} | 0 assets/icons/{mic-mute.svg => mic_mute.svg} | 0 assets/icons/{page-down.svg => page_down.svg} | 0 assets/icons/{page-up.svg => page_up.svg} | 0 .../icons/{select-all.svg => select_all.svg} | 0 .../{speaker-loud.svg => speaker_loud.svg} | 0 .../{speaker-off.svg => speaker_off.svg} | 0 crates/collab_ui/src/collab_titlebar_item.rs | 4 ++-- crates/ui2/src/components/icon.rs | 20 +++++++++---------- 13 files changed, 13 insertions(+), 13 deletions(-) rename assets/icons/{at-sign.svg => at_sign.svg} (85%) rename assets/icons/{bell-off.svg => bell_off.svg} (100%) rename assets/icons/{bell-ring.svg => bell_ring.svg} (100%) rename assets/icons/{magic-wand.svg => magic_wand.svg} (100%) rename assets/icons/{mail-open.svg => mail_open.svg} (100%) rename assets/icons/{mic-mute.svg => mic_mute.svg} (100%) rename assets/icons/{page-down.svg => page_down.svg} (100%) rename assets/icons/{page-up.svg => page_up.svg} (100%) rename assets/icons/{select-all.svg => select_all.svg} (100%) rename assets/icons/{speaker-loud.svg => speaker_loud.svg} (100%) rename assets/icons/{speaker-off.svg => speaker_off.svg} (100%) diff --git a/assets/icons/at-sign.svg b/assets/icons/at_sign.svg similarity index 85% rename from assets/icons/at-sign.svg rename to assets/icons/at_sign.svg index 5adac38f62..4cf8cd468f 100644 --- a/assets/icons/at-sign.svg +++ b/assets/icons/at_sign.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/assets/icons/bell-off.svg b/assets/icons/bell_off.svg similarity index 100% rename from assets/icons/bell-off.svg rename to assets/icons/bell_off.svg diff --git a/assets/icons/bell-ring.svg b/assets/icons/bell_ring.svg similarity index 100% rename from assets/icons/bell-ring.svg rename to assets/icons/bell_ring.svg diff --git a/assets/icons/magic-wand.svg b/assets/icons/magic_wand.svg similarity index 100% rename from assets/icons/magic-wand.svg rename to assets/icons/magic_wand.svg diff --git a/assets/icons/mail-open.svg b/assets/icons/mail_open.svg similarity index 100% rename from assets/icons/mail-open.svg rename to assets/icons/mail_open.svg diff --git a/assets/icons/mic-mute.svg b/assets/icons/mic_mute.svg similarity index 100% rename from assets/icons/mic-mute.svg rename to assets/icons/mic_mute.svg diff --git a/assets/icons/page-down.svg b/assets/icons/page_down.svg similarity index 100% rename from assets/icons/page-down.svg rename to assets/icons/page_down.svg diff --git a/assets/icons/page-up.svg b/assets/icons/page_up.svg similarity index 100% rename from assets/icons/page-up.svg rename to assets/icons/page_up.svg diff --git a/assets/icons/select-all.svg b/assets/icons/select_all.svg similarity index 100% rename from assets/icons/select-all.svg rename to assets/icons/select_all.svg diff --git a/assets/icons/speaker-loud.svg b/assets/icons/speaker_loud.svg similarity index 100% rename from assets/icons/speaker-loud.svg rename to assets/icons/speaker_loud.svg diff --git a/assets/icons/speaker-off.svg b/assets/icons/speaker_off.svg similarity index 100% rename from assets/icons/speaker-off.svg rename to assets/icons/speaker_off.svg diff --git a/crates/collab_ui/src/collab_titlebar_item.rs b/crates/collab_ui/src/collab_titlebar_item.rs index cef8faf601..3a05ee901a 100644 --- a/crates/collab_ui/src/collab_titlebar_item.rs +++ b/crates/collab_ui/src/collab_titlebar_item.rs @@ -647,10 +647,10 @@ impl CollabTitlebarItem { let tooltip; let is_deafened = room.read(cx).is_deafened().unwrap_or(false); if is_deafened { - icon = "icons/speaker-off.svg"; + icon = "icons/speaker_off.svg"; tooltip = "Unmute speakers"; } else { - icon = "icons/speaker-loud.svg"; + icon = "icons/speaker_loud.svg"; tooltip = "Mute speakers"; } diff --git a/crates/ui2/src/components/icon.rs b/crates/ui2/src/components/icon.rs index b252715aad..7354467fcf 100644 --- a/crates/ui2/src/components/icon.rs +++ b/crates/ui2/src/components/icon.rs @@ -119,13 +119,13 @@ impl Icon { Icon::ArrowRight => "icons/arrow_right.svg", Icon::ArrowUp => "icons/arrow_up.svg", Icon::ArrowUpRight => "icons/arrow_up_right.svg", - Icon::AtSign => "icons/at-sign.svg", - Icon::AudioOff => "icons/speaker-off.svg", + Icon::AtSign => "icons/at_sign.svg", + Icon::AudioOff => "icons/speaker_off.svg", Icon::AudioOn => "icons/speaker-loud.svg", Icon::Backspace => "icons/backspace.svg", Icon::Bell => "icons/bell.svg", - Icon::BellOff => "icons/bell-off.svg", - Icon::BellRing => "icons/bell-ring.svg", + Icon::BellOff => "icons/bell_off.svg", + Icon::BellRing => "icons/bell_ring.svg", Icon::Bolt => "icons/bolt.svg", Icon::CaseSensitive => "icons/case_insensitive.svg", Icon::Check => "icons/check.svg", @@ -167,18 +167,18 @@ impl Icon { Icon::Hash => "icons/hash.svg", Icon::InlayHint => "icons/inlay_hint.svg", Icon::Link => "icons/link.svg", - Icon::MagicWand => "icons/magic-wand.svg", + Icon::MagicWand => "icons/magic_wand.svg", Icon::MagnifyingGlass => "icons/magnifying_glass.svg", - Icon::MailOpen => "icons/mail-open.svg", + Icon::MailOpen => "icons/mail_open.svg", Icon::Maximize => "icons/maximize.svg", Icon::Menu => "icons/menu.svg", Icon::MessageBubbles => "icons/conversations.svg", Icon::Mic => "icons/mic.svg", - Icon::MicMute => "icons/mic-mute.svg", + Icon::MicMute => "icons/mic_mute.svg", Icon::Minimize => "icons/minimize.svg", Icon::Option => "icons/option.svg", - Icon::PageDown => "icons/page-down.svg", - Icon::PageUp => "icons/page-up.svg", + Icon::PageDown => "icons/page_down.svg", + Icon::PageUp => "icons/page_up.svg", Icon::Plus => "icons/plus.svg", Icon::Public => "icons/public.svg", Icon::Quote => "icons/quote.svg", @@ -187,7 +187,7 @@ impl Icon { Icon::ReplaceNext => "icons/replace_next.svg", Icon::Return => "icons/return.svg", Icon::Screen => "icons/desktop.svg", - Icon::SelectAll => "icons/select-all.svg", + Icon::SelectAll => "icons/select_all.svg", Icon::Shift => "icons/shift.svg", Icon::Snip => "icons/snip.svg", Icon::Space => "icons/space.svg", From 46e44f98536026dd7557db3545b5a2638df8d174 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Wed, 3 Jan 2024 16:55:56 -0500 Subject: [PATCH 5/5] Restore keybinding changes --- crates/ui/src/components/keybinding.rs | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/crates/ui/src/components/keybinding.rs b/crates/ui/src/components/keybinding.rs index a07ce1116c..671f981083 100644 --- a/crates/ui/src/components/keybinding.rs +++ b/crates/ui/src/components/keybinding.rs @@ -21,9 +21,9 @@ impl RenderOnce for KeyBinding { h_stack() .flex_none() .gap_0p5() - .bg(cx.theme().colors().element_background) .p_0p5() .rounded_sm() + .text_color(cx.theme().colors().text_muted) .when(keystroke.modifiers.function, |el| el.child(Key::new("fn"))) .when(keystroke.modifiers.control, |el| { el.child(KeyIcon::new(Icon::Control)) @@ -70,6 +70,13 @@ impl KeyBinding { "down" => Some(Icon::ArrowDown), "backspace" => Some(Icon::Backspace), "delete" => Some(Icon::Delete), + "return" => Some(Icon::Return), + "enter" => Some(Icon::Return), + "tab" => Some(Icon::Tab), + "space" => Some(Icon::Space), + "escape" => Some(Icon::Escape), + "pagedown" => Some(Icon::PageDown), + "pageup" => Some(Icon::PageUp), _ => None, } } @@ -100,7 +107,7 @@ impl RenderOnce for Key { .h(rems(14. / 16.)) .text_ui() .line_height(relative(1.)) - .text_color(cx.theme().colors().text) + .text_color(cx.theme().colors().text_muted) .child(self.key.clone()) } } @@ -118,9 +125,11 @@ pub struct KeyIcon { impl RenderOnce for KeyIcon { fn render(self, _cx: &mut WindowContext) -> impl IntoElement { - div() - .w(rems(14. / 16.)) - .child(IconElement::new(self.icon).size(IconSize::Small)) + div().w(rems(14. / 16.)).child( + IconElement::new(self.icon) + .size(IconSize::Small) + .color(Color::Muted), + ) } }