clone/logseq
1
0
Fork 0
mirror of https://github.com/logseq/logseq.git synced 2026-05-24 04:34:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

Replace flat row flash with accent shimmer sweep and fix combo key press animation

Browse Source 
- Row highlight on shortcut trigger now uses a horizontal gradient sweep
  (background-position animation) instead of a static background flash,
  providing a distinct visual language from the focus ring
- Shimmer uses theme-aware accent color via color-mix on keymap page,
  with a neutral fallback in shui.css base styles
- Guard against animation spam: clearTimeout+reset pattern prevents
  stale timeout accumulation during rapid key repeat; reflow only
  forced on first trigger, class stays applied until last trigger ends
- Fix combo key press animation: animate the container (the keycap)
  instead of individual kbd elements, so translateY and box-shadow
  follow the container's border-radius correctly
- Scope row shimmer to .shui-shortcut-row/.shortcut-row elements
  to prevent accidental shimmer on standalone badge containers
- Respect prefers-reduced-motion for all new animations

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
scheinriese
2026-03-11 17:11:55 +01:00
committed by Tienson Qin
parent e45fb29061
commit 4dcdbcc44c
3 changed files with 104 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/main/frontend/components/shortcut.css
View File

@@ -215,9 +215,19 @@ button.shortcut-feedback-action {
background-color: var(--lx-gray-05-alpha, var(--rx-gray-05-alpha));
}
/* Shortcut keypress highlight — briefly flashes the row when the user presses a shortcut */
/* Shortcut keypress shimmer — accent band sweeps left-to-right across the row */
&.shui-shortcut-row--pressed {
background-color: var(--lx-gray-05-alpha, var(--rx-gray-05-alpha));
background-image: linear-gradient(
90deg,
transparent 0%,
transparent 35%,
color-mix(in srgb, var(--lx-accent-09, hsl(var(--primary))) 10%, transparent) 50%,
transparent 65%,
transparent 100%
);
background-size: 300% 100%;
background-repeat: no-repeat;
animation: shortcut-row-sweep 700ms ease-out forwards;
}
/* Keyboard navigation focus ring — two levels above hover for clear distinction */
@@ -289,6 +299,11 @@ button.shortcut-feedback-action {
}
@keyframes shortcut-row-sweep {
from { background-position: -50% 0; }
to { background-position: 150% 0; }
}
/* === V3 SHORTCUT POPOVER === */
.shortcut-popover {
@apply flex flex-col;