paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-04 05:53:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: Center the ⌘ symbol by replacing it with an icon.

Browse Source 
This commit updates the keyboard shortcuts UI by replacing
the ⌘ symbol with a more symmetrically aligned icon.

Fixes: #32926
This commit is contained in:
Jitendra Kumar
2025-01-18 14:16:47 +00:00
committed by Tim Abbott
parent f81e514d07
commit f96484eed5
2 changed files with 19 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/common.ts
View File

@@ -58,6 +58,14 @@ export function adjust_mac_kbd_tags(kbd_elem_class: string): void {
const $kbd_elem = $("<kbd>").text(following_key); const $kbd_elem = $("<kbd>").text(following_key);
$(this).after($("<span>").text(" + ").contents(), $kbd_elem); $(this).after($("<span>").text(" + ").contents(), $kbd_elem);
} }
// The ⌘ symbol isn't vertically centered, so we use an icon.
if (key_text === "⌘") {
const $icon = $("<i>")
.addClass("zulip-icon zulip-icon-mac-command")
.attr("aria-label", key_text);
$(this).empty().append($icon); // Use .append() to safely add the icon
}
}); });
} }

12
web/styles/app_components.css
View File

@@ -32,10 +32,20 @@ kbd {
background-color: var(--color-kbd-background); background-color: var(--color-kbd-background);
color: var(--color-kbd-text); color: var(--color-kbd-text);
margin: 0.25em 0.1em; margin: 0.25em 0.1em;
padding: 0.1em 0.4em; padding: 0.2em 0.4em;
text-shadow: 0 1px 0 hsl(0deg 0% 100%); text-shadow: 0 1px 0 hsl(0deg 0% 100%);
/* Prevent selection */ /* Prevent selection */
user-select: none; user-select: none;
position: relative;
min-height: 1em;
min-width: 1em;
.zulip-icon::before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
} }
@media (width < $sm_min) { @media (width < $sm_min) {