enhancement
major
minor
major
minor
major
#29658
TL Views: Schwebende Hauptaktion (Floating Action Button) und Aktionsfächer (Speed Dial)
Teil von #29650 (TopLogic UI on MUI), Richtung 1: Komponenten, die TL fehlen.
Ziel
Eine schwebende runde Schaltfläche für die Hauptaktion einer Ansicht (MUI-Gegenstück: Fab), und die Variante, die beim Betätigen mehrere Aktionen auffächert (MUI-Gegenstück: SpeedDial, SpeedDialAction).
Vor allem in kompakten/mobilen Ansichten ist die Panel-Toolbar schmal; die Hauptaktion ("Neu", "Hinzufügen") ist dort als schwebende Schaltfläche besser erreichbar.
Lösung
Eigenes View-Element statt einer weiteren Kommando-Platzierung. Eine CommandPlacement beschreibt eine gemeinsame Leiste eines Kommando-Bereichs, in die beliebig viele Kommandos einsortiert werden. Eine schwebende Aktion trägt dagegen ein oder wenige gezielt ausgewählte Kommandos an einer festen Stelle. Sie wird deshalb wie <button> als eigenes Element <floating-action> mit den Aktionen inline deklariert:
{{{#!xml <panel title="Kontakte">
<table .../>
<floating-action position="BOTTOM_END">
<generic-command image="css:bi bi-plus-lg" ...>...</generic-command>
</floating-action>
</panel> }}}
- Eine Aktion: runde schwebende Schaltfläche mit Icon (mit Beschriftung, wenn der Anzeigemodus des Kommandos sie verlangt).
- Mehrere Aktionen: Aktionsfächer (Speed Dial), geöffnet per Klick; die Beschriftungen erscheinen als Tooltips. Er schließt mit Escape, einem Klick daneben und nach einer ausgeführten Aktion. Optional image und label für den Auslöser.
- Verankerung am Panel-Rahmen, nicht am scrollenden Panel-Körper und nicht am Viewport: die Schaltfläche bleibt beim Scrollen stehen und gehört sichtbar zu ihrem Panel (in geteilten Ansichten, in Dialogfenstern). Außerhalb eines Panels oder Fensters schwebt sie über der Ecke des Browserfensters.
- Position (Ecke) konfigurierbar: BOTTOM_END (Vorgabe), BOTTOM_START, TOP_END, TOP_START.
- Der TLBottomBar weicht die Schaltfläche durch die Verankerung am Panel aus; einem sichtbaren Snackbar, den sie überdeckt, weicht sie aus.
- Ausführbarkeit und Sichtbarkeit wie bei jedem anderen Kommando (dieselben Kommandomodelle wie <button>); sind alle Aktionen unsichtbar, entfällt die Schaltfläche.
- Mit Material UI (tl-layout-react-mui) wird sie als MUI Fab bzw. SpeedDial dargestellt.
- Die ursprünglich angedachte Umschaltung "nur kompakt schwebend, sonst in der Toolbar" entfällt.
Technisch
- ReactFloatingActionControl (Zustand FloatingActionState in state.proto) mit einem ReactButtonControl je Aktion; Client TLFloatingAction, MUI-Adapter MuiFloatingActionAdapter.
- Panel und Fenster sind Rahmen für schwebende Elemente (useFloatingFrame / useFloatingAnchor in der Bridge): sie bieten unmittelbar vor und nach ihrem Körper eine Schiene ohne Höhe, solange ein schwebendes Element sie anfordert.
- Flüchtige Überlagerungen (Snackbar, auch die MUI-Variante) melden sich bei der Bridge (useTransientOverlay / registerTransientOverlay); schwebende Elemente weichen ihnen bei Überdeckung aus (useOverlayClearance).
- CSS und Tokens size-fab / size-fab-action im Design System (tl-design-system, Komponente floating-action).
- Demo (tl-demo-react): Projekte → Projekt → Notizen (eine Aktion), Meilensteine (Speed Dial).