M28: Übersicht Fokus-Modus + einheitliches Close-Button-Layout

Klick auf einen Knoten in der Übersicht öffnet jetzt ein schwebendes
Popup mit der kompletten verbundenen Kette (neu OverviewGraph.
connectedChain, volle transitive Hülle unabhängig vom Knotentyp,
bewusst getrennt von der bestehenden highlightedNodeIDs), sauber im
selben Spalten-Layout neu angeordnet, Rest des Diagramms abgedunkelt.
Nicht-modales Overlay statt .sheet, damit die rechte Seitenleiste
währenddessen bedienbar bleibt (Knoten direkt aus dem Popup heraus
bearbeitbar). Popup-Größe passt sich automatisch dem Inhalt an, keine
Scrollbalken.

Der dabei entstandene Close-Button-Header (Titel + Spacer + X, fest
oben, Divider direkt darunter) wurde auf alle vier Popup-Formulare der
App vereinheitlicht: Experte-Bearbeiten-Sheet und die drei
Devices-Sheets (Rohdaten, Netzwerk-Test, Port-Scan) — dort ersetzt er
jeweils den bisherigen einzelnen "Schließen"-Button unten.

Mehrere Design-Iterationen live mit dem User durchgespielt (Trennlinie
im Canvas → separates Panel → Popup → .sheet → non-modales Overlay),
finale Version live bestätigt.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Kay
2026-09-16 21:46:39 +02:00
co-authored by Claude Sonnet 5
parent 684e1c184a
commit c9671b017c
9 changed files with 380 additions and 66 deletions
+8 -1
View File
@@ -126,7 +126,14 @@ Grafisches Diagramm des kompletten aktuellen Router-Zustands:
abgeleitet aus den tatsächlichen RouterOS-Referenzfeldern).
- **Hover** über einen Knoten hebt seine Verbindungen hervor; **Klick**
macht die Hervorhebung dauerhaft (bleibt aktiv, bis ein anderer Knoten
angeklickt wird).
angeklickt wird) und öffnet gleichzeitig den **Fokus-Modus**: ein
schwebendes Popup zeigt die komplette Kette (alle direkt und indirekt
verbundenen Elemente) übersichtlich neu angeordnet, alles andere im
Diagramm wird abgedunkelt. Schließen über den X-Button oben im Popup,
Klick auf die leere Fläche daneben, oder erneuten Klick auf denselben
Knoten. Die rechte Seitenleiste bleibt währenddessen bedienbar, ein
Knoten aus der Kette lässt sich also direkt aus dem Popup heraus über
"Bearbeiten" ändern.
- **Klick auf eine Verbindungslinie** zeigt rechts eine verständliche
Erklärung, was diese Verbindung bedeutet, plus Sprung zu den beiden
verbundenen Elementen. Die "Verbindungen"-Liste im Detailpanel eines