Simon
bb2bbb8ff6
- Mobile responsive CSS (touch targets 44px, iOS anti-zoom, reduced motion) - Vitest setup s 39 testy (formatters, attendanceHelpers, useTableSort) - Klavesove zkratky (Shift+? napoveda, Ctrl+S ulozit, navigace) - Drag & drop pro polozky nabidek (@dnd-kit, SortableRow, useSortableList) - Univerzalizace: odstraneni BOHA brandingu z UI, emailu, PDF - Smazany nepotrebne soubory (deploy.sh, AUTH_SYSTEM.md, example_design, .htaccess) - CORS konfigurovatelny pres env promennou Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
51 lines
1.7 KiB
JavaScript
51 lines
1.7 KiB
JavaScript
import { useState } from 'react'
|
|
import useKeyboardShortcuts from '../hooks/useKeyboardShortcuts'
|
|
|
|
const GLOBAL_SHORTCUTS = [
|
|
{ keys: '?', description: 'Zobrazit klávesové zkratky' },
|
|
{ keys: 'Ctrl + N', description: 'Nový záznam' },
|
|
{ keys: 'Ctrl + S', description: 'Uložit' },
|
|
{ keys: 'Escape', description: 'Zavřít modal / zrušit' },
|
|
{ keys: '/', description: 'Hledat' },
|
|
]
|
|
|
|
export default function ShortcutsHelp() {
|
|
const [open, setOpen] = useState(false)
|
|
|
|
useKeyboardShortcuts([
|
|
{ key: '?', shift: true, handler: () => setOpen(prev => !prev) },
|
|
{ key: 'Escape', handler: () => setOpen(false), when: open },
|
|
])
|
|
|
|
if (!open) return null
|
|
|
|
return (
|
|
<div className="admin-modal-overlay" onClick={() => setOpen(false)}>
|
|
<div className="admin-modal" style={{ maxWidth: 420 }} onClick={e => e.stopPropagation()}>
|
|
<div className="admin-modal-header">
|
|
<h3>Klávesové zkratky</h3>
|
|
<button className="admin-modal-close" onClick={() => setOpen(false)}>
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<path d="M18 6L6 18M6 6l12 12"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div className="admin-modal-body">
|
|
<table className="admin-table" style={{ minWidth: 'auto' }}>
|
|
<tbody>
|
|
{GLOBAL_SHORTCUTS.map(s => (
|
|
<tr key={s.keys}>
|
|
<td style={{ width: 120 }}>
|
|
<kbd className="admin-kbd">{s.keys}</kbd>
|
|
</td>
|
|
<td>{s.description}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|