fix: add a per-widget action menu (#27)
CI / build-and-test (pull_request) Successful in 2m25s

A GridStackItem now carries an overflow menu next to the grip and the
close button: refresh, maximize, duplicate, remove. Maximize and remove
are handled by the item itself; refresh and duplicate are only reported,
since what they mean depends on the widget.

Maximizing only sets a class — the item's gs-* attributes and its
gridstack node are untouched, so restoring is by definition the position
it had.

The menu sits outside the drag-handle selector, like the close button, so
opening it never starts a drag; a Playwright test drags it to prove it.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0124BiJikbhbiEsNfJxdWM69
This commit is contained in:
Pit Friedrich
2026-07-28 21:26:05 +02:00
parent cff232070d
commit 8545b06f41
11 changed files with 537 additions and 8 deletions
@@ -22,7 +22,7 @@ card.registration=Registro
card.employees=Empleados
card.gridstackHint=Cómo funciona
gridstack.hint=Mueve las tarjetas con el asa de la esquina superior derecha, cambia su tamaño desde la esquina inferior derecha y ciérralas con la X de la esquina superior derecha. El diseño se guarda en el navegador y se restaura en la próxima visita.
gridstack.hint=Mueve las tarjetas con el asa de la esquina superior derecha, cambia su tamaño desde la esquina inferior derecha y ciérralas con la X de la esquina superior derecha. Más acciones actualizar, maximizar, duplicar están en el menú contiguo. El diseño se guarda en el navegador y se restaura en la próxima visita.
gridstack.addWidget=Añadir widget
gridstack.reset=Restablecer diseño
gridstack.status=Diseño modificado {0} widgets
@@ -30,6 +30,12 @@ gridstack.statusInitial=Diseño sin cambios
gridstack.pickerTitle=Elegir un widget
gridstack.dragHandle=Mover
gridstack.close=Cerrar
gridstack.actions=Acciones
gridstack.refresh=Actualizar
gridstack.maximize=Maximizar
gridstack.restore=Restaurar
gridstack.duplicate=Duplicar
gridstack.remove=Eliminar
filter.period=Periodo
filter.period.month=Mes