ui: Add Backspace/Delete icons and use them for keybindings.

Piotr Osiewicz created 2 years ago

Change summary

assets/icons/backspace.svg              |  3 +++
assets/icons/delete.svg                 |  4 ++++
crates/ui2/src/components/icon.rs       |  4 ++++
crates/ui2/src/components/keybinding.rs | 20 ++++++++------------
4 files changed, 19 insertions(+), 12 deletions(-)

Detailed changes

assets/icons/backspace.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="11" viewBox="0 0 15 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.24432 11L0.183239 5.90909L5.24432 0.818182H14.75V11H5.24432ZM5.68679 9.90625H13.6761V1.91193H5.68679L1.70952 5.90909L5.68679 9.90625ZM11.7223 8.15625L10.9964 8.89205L5.75639 3.66193L6.48224 2.92614L11.7223 8.15625ZM6.48224 8.89205L5.75639 8.15625L10.9964 2.92614L11.7223 3.66193L6.48224 8.89205Z" fill="black"/>
+</svg>

assets/icons/delete.svg

@@ -0,0 +1,4 @@
+<svg width="15" height="11" viewBox="0 0 15 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.272727 11V0.818182H9.77841L14.8395 5.90909L9.77841 11H0.272727ZM4.03125 8.89205L3.3054 8.15625L8.54545 2.92614L9.27131 3.66193L4.03125 8.89205ZM8.54545 8.89205L3.3054 3.66193L4.03125 2.92614L9.27131 8.15625L8.54545 8.89205ZM1.34659 9.90625H9.34091L13.3182 5.90909L9.34091 1.91193H1.34659V9.90625Z" fill="black"/>
+</svg>
+

crates/ui2/src/components/icon.rs

@@ -32,6 +32,7 @@ pub enum Icon {
     AtSign,
     AudioOff,
     AudioOn,
+    Backspace,
     Bell,
     BellOff,
     BellRing,
@@ -50,6 +51,7 @@ pub enum Icon {
     CopilotError,
     CopilotDisabled,
     Dash,
+    Delete,
     Disconnected,
     Ellipsis,
     Envelope,
@@ -115,6 +117,7 @@ impl Icon {
             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",
@@ -133,6 +136,7 @@ impl Icon {
             Icon::CopilotError => "icons/copilot_error.svg",
             Icon::CopilotDisabled => "icons/copilot_disabled.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",

crates/ui2/src/components/keybinding.rs

@@ -65,19 +65,15 @@ impl KeyBinding {
     }
 
     fn icon_for_key(keystroke: &Keystroke) -> Option<Icon> {
-        let mut icon: Option<Icon> = None;
-
-        if keystroke.key == "left".to_string() {
-            icon = Some(Icon::ArrowLeft);
-        } else if keystroke.key == "right".to_string() {
-            icon = Some(Icon::ArrowRight);
-        } else if keystroke.key == "up".to_string() {
-            icon = Some(Icon::ArrowUp);
-        } else if keystroke.key == "down".to_string() {
-            icon = Some(Icon::ArrowDown);
+        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),
+            _ => None,
         }
-
-        icon
     }
 
     pub fn new(key_binding: gpui::KeyBinding) -> Self {