Better key-rendering for linux/windows (#25139)

Conrad Irwin created 10 months ago

Release Notes:

- linux: Render keystrokes more consistently

Before (note the added extra vertical padding, the + instead of the -,
and the misalignment between the text and the icons)

<img width="354" alt="Screenshot 2025-02-18 at 23 17 57"
src="https://github.com/user-attachments/assets/924cf08f-8204-4503-8052-abaa7686e644"
/>

After (note the lack of those things):

<img width="322" alt="Screenshot 2025-02-18 at 23 15 48"
src="https://github.com/user-attachments/assets/5b20a6f2-757b-44d2-a888-f495523b688d"
/>


I still think we might want to go "vim-mode" always, because the capital
letters are pretty noisy, but that does mean the letters don't match
what's on the keyboard (though they *do* match the keyboard config
files)

<img width="312" alt="Screenshot 2025-02-18 at 23 16 59"
src="https://github.com/user-attachments/assets/cf6f150c-20bc-4492-adb9-fb5c5bdce351"
/>

Change summary

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

Detailed changes

crates/ui/src/components/keybinding.rs

@@ -101,6 +101,11 @@ impl KeyBinding {
 
 impl RenderOnce for KeyBinding {
     fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
+        let use_text = self.vim_mode
+            || matches!(
+                self.platform_style,
+                PlatformStyle::Linux | PlatformStyle::Windows
+            );
         h_flex()
             .debug_selector(|| {
                 format!(
@@ -121,7 +126,7 @@ impl RenderOnce for KeyBinding {
                     .py_0p5()
                     .rounded_sm()
                     .text_color(cx.theme().colors().text_muted)
-                    .when(self.vim_mode, |el| {
+                    .when(use_text, |el| {
                         el.child(
                             Key::new(
                                 keystroke_text(&keystroke, self.platform_style, self.vim_mode),
@@ -130,7 +135,7 @@ impl RenderOnce for KeyBinding {
                             .size(self.size),
                         )
                     })
-                    .when(!self.vim_mode, |el| {
+                    .when(!use_text, |el| {
                         el.children(render_modifiers(
                             &keystroke.modifiers,
                             self.platform_style,
@@ -367,7 +372,7 @@ fn keystroke_text(keystroke: &Keystroke, platform_style: PlatformStyle, vim_mode
 
     let delimiter = match (platform_style, vim_mode) {
         (PlatformStyle::Mac, false) => '-',
-        (PlatformStyle::Linux | PlatformStyle::Windows, false) => '+',
+        (PlatformStyle::Linux | PlatformStyle::Windows, false) => '-',
         (_, true) => '-',
     };
 
@@ -455,7 +460,7 @@ mod tests {
                 PlatformStyle::Linux,
                 false
             ),
-            "Super+C".to_string()
+            "Super-C".to_string()
         );
         assert_eq!(
             keystroke_text(
@@ -463,7 +468,7 @@ mod tests {
                 PlatformStyle::Windows,
                 false
             ),
-            "Win+C".to_string()
+            "Win-C".to_string()
         );
 
         assert_eq!(
@@ -480,7 +485,7 @@ mod tests {
                 PlatformStyle::Linux,
                 false
             ),
-            "Ctrl+Alt+Delete".to_string()
+            "Ctrl-Alt-Delete".to_string()
         );
         assert_eq!(
             keystroke_text(
@@ -488,7 +493,7 @@ mod tests {
                 PlatformStyle::Windows,
                 false
             ),
-            "Ctrl+Alt+Delete".to_string()
+            "Ctrl-Alt-Delete".to_string()
         );
 
         assert_eq!(
@@ -505,7 +510,7 @@ mod tests {
                 PlatformStyle::Linux,
                 false,
             ),
-            "Shift+PageUp".to_string()
+            "Shift-PageUp".to_string()
         );
         assert_eq!(
             keystroke_text(
@@ -513,7 +518,7 @@ mod tests {
                 PlatformStyle::Windows,
                 false
             ),
-            "Shift+PageUp".to_string()
+            "Shift-PageUp".to_string()
         );
     }
 }