Add additional keybinding icons (#3861)
Note: There is still some consistency work to do between all the keybinding icons. I'll tackle this at a later time. - Adds `return`, `space`, `tab`, `escape`, `pgup` and `pgdn` - Simplifies keybinding rendering (due to theme changes) - Standardizes icon naming convention to use `_` everywhere. Release Notes: - Zed 2: Added additional keybinding icons
This commit is contained in:
Nate Butler
GitHub
commit
afeae56fab
18 changed files with 84 additions and 48 deletions
|
|
@ -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,32 @@ pub enum Icon {
|
|||
MagnifyingGlass,
|
||||
MailOpen,
|
||||
Maximize,
|
||||
Minimize,
|
||||
Menu,
|
||||
MessageBubbles,
|
||||
Mic,
|
||||
MicMute,
|
||||
Minimize,
|
||||
Option,
|
||||
PageDown,
|
||||
PageUp,
|
||||
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,40 +114,43 @@ 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",
|
||||
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",
|
||||
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",
|
||||
|
|
@ -159,34 +167,36 @@ 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::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::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",
|
||||
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::SelectAll => "icons/select_all.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",
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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),
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue