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

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"
/>
This commit is contained in:
Conrad Irwin 2025-02-19 08:55:51 -07:00 committed by GitHub
parent 119bd896b0
commit ddec72ecbe
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -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()
);
}
}