Render `+` separators for keybindings on non-macOS platforms (#9194)

Marshall Bowers created 2 years ago

This PR adjusts the rendering of keybindings on non-macOS platforms to
have a `+` separator instead of just a blank space.

<img width="952" alt="Screenshot 2024-03-11 at 3 18 17 PM"
src="https://github.com/zed-industries/zed/assets/1486634/1573823d-4329-41f0-bef4-7a6c09f3e632">

<img width="584" alt="Screenshot 2024-03-11 at 3 16 25 PM"
src="https://github.com/zed-industries/zed/assets/1486634/aae41b22-dfde-40a6-9e0e-cee855522d3a">

Release Notes:

- N/A

Change summary

crates/ui/src/components/keybinding.rs | 21 ++++++++++++++-------
1 file changed, 14 insertions(+), 7 deletions(-)

Detailed changes

crates/ui/src/components/keybinding.rs

@@ -97,37 +97,44 @@ impl RenderOnce for KeyBinding {
 
                 h_flex()
                     .flex_none()
-                    .gap_0p5()
+                    .map(|el| match self.display {
+                        KeyBindingDisplay::Mac => el.gap_0p5(),
+                        KeyBindingDisplay::Linux | KeyBindingDisplay::Windows => el,
+                    })
                     .p_0p5()
                     .rounded_sm()
                     .text_color(cx.theme().colors().text_muted)
                     .when(keystroke.modifiers.function, |el| match self.display {
                         KeyBindingDisplay::Mac => el.child(Key::new("fn")),
                         KeyBindingDisplay::Linux | KeyBindingDisplay::Windows => {
-                            el.child(Key::new("Fn"))
+                            el.child(Key::new("Fn")).child(Key::new("+"))
                         }
                     })
                     .when(keystroke.modifiers.control, |el| match self.display {
                         KeyBindingDisplay::Mac => el.child(KeyIcon::new(IconName::Control)),
                         KeyBindingDisplay::Linux | KeyBindingDisplay::Windows => {
-                            el.child(Key::new("Ctrl"))
+                            el.child(Key::new("Ctrl")).child(Key::new("+"))
                         }
                     })
                     .when(keystroke.modifiers.alt, |el| match self.display {
                         KeyBindingDisplay::Mac => el.child(KeyIcon::new(IconName::Option)),
                         KeyBindingDisplay::Linux | KeyBindingDisplay::Windows => {
-                            el.child(Key::new("Alt"))
+                            el.child(Key::new("Alt")).child(Key::new("+"))
                         }
                     })
                     .when(keystroke.modifiers.command, |el| match self.display {
                         KeyBindingDisplay::Mac => el.child(KeyIcon::new(IconName::Command)),
-                        KeyBindingDisplay::Linux => el.child(Key::new("Super")),
-                        KeyBindingDisplay::Windows => el.child(Key::new("Win")),
+                        KeyBindingDisplay::Linux => {
+                            el.child(Key::new("Super")).child(Key::new("+"))
+                        }
+                        KeyBindingDisplay::Windows => {
+                            el.child(Key::new("Win")).child(Key::new("+"))
+                        }
                     })
                     .when(keystroke.modifiers.shift, |el| match self.display {
                         KeyBindingDisplay::Mac => el.child(KeyIcon::new(IconName::Option)),
                         KeyBindingDisplay::Linux | KeyBindingDisplay::Windows => {
-                            el.child(Key::new("Shift"))
+                            el.child(Key::new("Shift")).child(Key::new("+"))
                         }
                     })
                     .map(|el| match key_icon {