enhancement
major
defect
major
minor
major
#29752
React-UI: Kleine Verbesserungen der Oberfläche (Snackbar, Hover, Tooltips, Schieberegler, Abstände)
Kontext
Sammelticket für kleine Verbesserungen der React-Oberfläche (.view.xml-Schicht).
Snackbar-Meldungen schließen
Jede Snackbar-Meldung erhält eine Schließen-Schaltfläche (x), mittig zur ersten Textzeile: neben einer einzeiligen Meldung auf deren Höhe, bei längeren Meldungen oben rechts. Ein Klick schließt die Meldung sofort; wartet eine weitere Meldung, wird sie als nächste angezeigt. Beim Zeigen tauscht die Schaltfläche Flächen- und Textfarbe der Meldung.
Im dunklen Modus war die Info-Snackbar (ebenso Info-Hinweisleiste, Tooltip mit Inhalt, Zoomanzeige des Flussdiagramms) weiß auf fast weiß; behoben.
Hover an Auswahlmarken, Feldknöpfen und Schieberegler
- Checkbox, Radio-Button und Schalter zeigen einen Hof um die Marke, solange der Zeiger über Marke oder Beschriftung steht; beim Drücken kräftiger. Deaktivierte und schreibgeschützte Marken zeigen keinen.
- Knöpfe in Eingabefeldern (Leeren, Link öffnen, Leeren der Auswahl, Pfeil der Auswahlliste, Öffner von Datums-/Zeitfeldern in Chrome/Edge) zeigen einen sichtbaren Hover. Der Entfernen-Knopf eines gewählten Werts ist ein Kreis innerhalb des Werts.
- Ein Klick irgendwo auf eine Auswahlliste öffnet und schließt sie.
- Der Schieberegler zeigt den gewählten Bereich (vom Minimum bis zum Knopf) kräftiger in der Farbe des Knopfs, den offenen Rest dünner; der Knopf zeigt beim Zeigen und Drücken einen Hof.
Tooltip für abgeschnittenen Text
Text, der mit Auslassungspunkten abgeschnitten ist (z. B. ein gewählter Wert in einer Auswahlliste, eine Spaltenüberschrift, ein Dateiname), zeigt beim Zeigen seinen vollständigen Text als Tooltip – überall, ohne dass ein Control das eigens vorsehen muss.
Abstände und Rahmen
- Ein <panel> rückt seinen Inhalt mit with-inset="true" vom Rand ab (wie bisher schon <form> und <fields>); der abgerückte Inhalt beginnt auf der Höhe des Panel-Titels. Die Regel (Container sind bündig, fließender Inhalt wird abgerückt, Tabellen/Bäume/Dokumente bleiben bündig) ist in docs/faq/react-view-layer.md (Abschnitt "Spacing model") beschrieben. Die Demo- und Engine-Views sind entsprechend angepasst.
- Ein Text ohne Wert nimmt keinen Platz im Layout mehr ein.
- HTML-Dokumente und ihre Vorschaubilder zeichnen keinen eigenen Rahmen mehr; das Dokument steht bündig in seinem Panel.
Technische Hinweise
- Snackbar: TLSnackbar.tsx, gemeinsamer Icon-Knopf tl-button--ghost --icon --sm, bestehender dismiss-Befehl; Client-I18N-Schlüssel js.snackbar.dismiss.
- Hof und Feldknöpfe im Design-System (TopLogic/tl-design-system, Komponenten choice, field, select), als erzeugtes Paket unter com.top_logic.layout.react/src/main/webapp/style/tl-design-system/ übernommen.
- Tooltip-Regel in tooltip-host.ts; TOOLTIP_WHEN_CLIPPED bleibt nur für ohne Auslassungspunkte abgeschnittene Inhalte (mehrwertige Tabellenzellen).
- with-inset ist die gemeinsame Konfigurationsoption InsetOptions von <panel>, <form> und <fields>.
- Auswahl in Objektlisten (Karten direkt anwählbar): eigenes Ticket #29755.