feat(ux): Sticky Save/Cancel buttons on forms (#38)
- Add sticky positioning to form action buttons (always visible at bottom) - Add Ctrl+S / Cmd+S keyboard shortcut to save forms - Create reusable useFormShortcuts hook - Apply to all create forms: spool, filament, vendor Fixes: https://github.com/Donkie/Spoolman/issues/274 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -6,3 +6,15 @@
|
||||
.ant-form {
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
/* Sticky Save/Cancel buttons on forms (#38) */
|
||||
.ant-card-actions {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
z-index: 100;
|
||||
background: var(--ant-color-bg-container, #fff);
|
||||
border-top: 1px solid var(--ant-color-border-secondary, #f0f0f0);
|
||||
margin: 0 -24px -24px -24px;
|
||||
padding: 12px 24px;
|
||||
border-radius: 0 0 8px 8px;
|
||||
}
|
||||
|
||||
26
client/src/utils/useFormShortcuts.ts
Normal file
26
client/src/utils/useFormShortcuts.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
import { useEffect } from "react";
|
||||
|
||||
/**
|
||||
* Hook to add keyboard shortcuts to forms.
|
||||
* - Ctrl+S / Cmd+S: Save (calls onSave callback)
|
||||
* - Escape: Cancel (calls onCancel callback if provided)
|
||||
*/
|
||||
export function useFormShortcuts(onSave: () => void, onCancel?: () => void) {
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
// Ctrl+S or Cmd+S to save
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === "s") {
|
||||
e.preventDefault();
|
||||
onSave();
|
||||
}
|
||||
// Escape to cancel (if handler provided)
|
||||
if (e.key === "Escape" && onCancel) {
|
||||
e.preventDefault();
|
||||
onCancel();
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("keydown", handleKeyDown);
|
||||
return () => document.removeEventListener("keydown", handleKeyDown);
|
||||
}, [onSave, onCancel]);
|
||||
}
|
||||
Reference in New Issue
Block a user