clone/logseq
1
0
Fork 0
mirror of https://github.com/logseq/logseq.git synced 2026-06-01 19:01:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Address remaining should-fix items from pr-review

Browse Source 
- Extract animate-element!/highlight-row! helpers in shortcut-press! (was 4x duplication)
- Extract matches-keystroke? predicate (was duplicated in count + render)
- Replace <a> tags with <button> for all interactive elements (remove, clear, reset, undo, toggle, refresh)
- Add aria-label to icon-only buttons for screen reader support
- Add button reset CSS for elements changed from <a> to <button>
- Replace hardcoded rgba colors in CSS glow/shadow/row-pressed with theme variables
- Define press-animation-ms constant (was magic number 160)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
scheinriese
2026-03-10 11:17:57 +01:00
committed by Tienson Qin
parent 8048c30bca
commit 4c5b7ca511
4 changed files with 94 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
resources/css/shui.css
View File

@@ -283,13 +283,15 @@ div[data-radix-popper-content-wrapper] {
/* Glow effect for combo and separate keys */
/* Combo keys: glow on container (wraps all keys together) */
.shui-shortcut-combo.shui-shortcut-glow {
box-shadow: rgba(255, 255, 255, 0.15) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.15) 0px -1px 0px 0px inset;
box-shadow: var(--lx-gray-01-alpha, rgba(255, 255, 255, 0.15)) 0px 1px 0px 0px inset,
var(--lx-gray-12-alpha, rgba(0, 0, 0, 0.15)) 0px -1px 0px 0px inset;
border: none;
}
/* Separate keys: glow on individual keys (not container) */
.shui-shortcut-separate.shui-shortcut-glow kbd.shui-shortcut-key {
box-shadow: rgba(255, 255, 255, 0.15) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.15) 0px -1px 0px 0px inset;
box-shadow: var(--lx-gray-01-alpha, rgba(255, 255, 255, 0.15)) 0px 1px 0px 0px inset,
var(--lx-gray-12-alpha, rgba(0, 0, 0, 0.15)) 0px -1px 0px 0px inset;
border: none;
}
@@ -350,7 +352,7 @@ kbd.shui-shortcut-key,
line-height: 16px;
min-width: fit-content;
transition: transform 140ms ease-out, box-shadow 140ms ease-out;
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 0 0 transparent;
}
/* Keys in separate containers get their own styling */
@@ -383,23 +385,27 @@ kbd.shui-shortcut-key-pressed,
/* Key press animation with glow - preserve glow effect */
/* Combo keys: animate the container */
.shui-shortcut-combo.shui-shortcut-glow.shui-shortcut-key-pressed {
box-shadow: rgba(255, 255, 255, 0.15) 0px 2px 0px 0px inset, rgba(0, 0, 0, 0.15) 0px 0px 0px 0px inset, 0 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: var(--lx-gray-01-alpha, rgba(255, 255, 255, 0.15)) 0px 2px 0px 0px inset,
var(--lx-gray-12-alpha, rgba(0, 0, 0, 0.15)) 0px 0px 0px 0px inset,
0 1px 2px var(--lx-gray-12-alpha, rgba(0, 0, 0, 0.2));
}
/* Separate keys: animate individual keys */
.shui-shortcut-separate.shui-shortcut-glow kbd.shui-shortcut-key-pressed {
box-shadow: rgba(255, 255, 255, 0.15) 0px 2px 0px 0px inset, rgba(0, 0, 0, 0.15) 0px 0px 0px 0px inset, 0 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: var(--lx-gray-01-alpha, rgba(255, 255, 255, 0.15)) 0px 2px 0px 0px inset,
var(--lx-gray-12-alpha, rgba(0, 0, 0, 0.15)) 0px 0px 0px 0px inset,
0 1px 2px var(--lx-gray-12-alpha, rgba(0, 0, 0, 0.2));
}
/* Key press animation without glow */
.shui-shortcut-combo:not(.shui-shortcut-glow) kbd.shui-shortcut-key-pressed,
.shui-shortcut-separate:not(.shui-shortcut-glow) kbd.shui-shortcut-key-pressed {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px var(--lx-gray-12-alpha, rgba(0, 0, 0, 0.2));
}
/* Row highlight animation */
.shui-shortcut-row--pressed {
background-color: rgba(223, 239, 254, 0.1);
background-color: var(--lx-accent-04-alpha, rgba(223, 239, 254, 0.1));
transition: background-color 160ms ease-out;
}
@@ -417,7 +423,7 @@ kbd.shui-shortcut-key-pressed,
.shui-shortcut-row--pressed {
transition: none;
transform: none;
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 0 0 transparent;
}
.shui-shortcut-row--pressed {