minor
#29801
TL Views: the split of <adaptive-detail> is configurable (size, unit, min-size on <selector> and <detail>; drawer width as drawer-size)
<adaptive-detail> (AdaptiveDetailElement, tl-layout-view 8.0.0-alpha10) arranges selector and detail in a split panel with fixed proportions: ReactAdaptiveDetailControl#buildRegularSplit creates the selector child with ChildConstraint(32f, PERCENT, 240, AUTO) and the detail child with ChildConstraint(68f, PERCENT, 320, AUTO). The only size option of the element, detail-size, applies to the drawer display (detail-display="drawer") and has no effect on the regular split.
In addition, a split dragged by the user is forgotten on the next page load: unlike <split-panel>, the split of <adaptive-detail> does not persist its pane sizes in the user's personal configuration.
Use case
E-Home, projects/devices.view.xml: a table of parameter settings with three columns (name, value, default) as the selector and a form editing the selected setting as the detail. With 32 % for the selector only the first column is visible; the value and default columns are scrolled off. Giving the table 55 % would show them, but there is no setting for it.
Requested
Configuration of the regular split of <adaptive-detail>: the selector's share (e.g. selector-size="55" unit="%" or selector-size/`detail-size` for both displays), and the minimum sizes (min-size like a <pane> of <split-panel>), so that the element keeps its narrow-screen drill-in and reset-on behavior without forcing a 32/68 layout.
Workaround in E-Home
projects/devices.view.xml uses a <split-panel> with a <table selection="…"> in one pane and the detail in the other, and derives the "selection belongs to the current device" guard with a <derived-channel> itself, losing the drill-in on narrow screens and reset-on.
Lösung
Die beiden Seiten eines <adaptive-detail> werden wie die <pane>-Elemente eines <split-panel> dimensioniert: <selector> und <detail> tragen die Attribute size, unit und min-size; ihr Inhalt bleibt wie bisher direkt darin.
<adaptive-detail selection="selectedSetting"> <selector size="55" min-size="320"><table …/></selector> <detail min-size="280"><form …/></detail> </adaptive-detail>
- Die Voreinstellungen entsprechen der bisherigen Aufteilung: Selektor 32 % (mindestens 240 px), Detail 68 % (mindestens 320 px). Bestehende Views parsen unverändert.
- Ist nur eine Seite mit einem Prozentwert dimensioniert, erhält die andere den Rest (100 − Wert). Der Client behandelt die Größen als Flex-Gewichte; ohne diese Regel ergäbe size="55" am Selektor gegenüber dem Vorgabewert 68 des Details eine Aufteilung 45/55. Sind beide Seiten explizit dimensioniert oder ist eine in Pixeln angegeben, gelten die Werte wie angegeben.
- Die Größen wirken nur auf die Aufteilung auf einem breiten Viewport (detail-display="split"). Drill-in, Breadcrumb, reset-on und die Weiterleitung ungespeicherter Änderungen bleiben unverändert.
- Die Dimensionierungs-Attribute sind in der gemeinsamen Konfigurationsschnittstelle PaneSizeConfig (size, unit, min-size) definiert, die <pane> des <split-panel> und die beiden Seiten des <adaptive-detail> (SelectorConfig/`DetailConfig`, mit ihren Voreinstellungen) erweitern. unit ist dort mit %` vorbelegt; damit gilt diese Vorgabe auch für `<pane>, das bisher ohne Vorgabe auf px fiel (alle <pane> der Engine setzen unit explizit).
- Die Breite des Drawers (detail-display="drawer") heißt drawer-size (bisher detail-size), damit sie nicht mit dem Anteil des Details an der Aufteilung verwechselt wird.
- Die vom Benutzer gezogene Aufteilung und eingeklappte Seiten werden wie beim <split-panel> in der persönlichen Konfiguration gespeichert und beim nächsten Aufbau wiederhergestellt; ändert sich die konfigurierte Aufteilung, verfallen die gespeicherten Größen. Die Speicherung (Größen, Einklapp-Zustand, Konfigurations-Signatur) übernimmt die Klasse SplitSizePersonalization, die beide Elemente nutzen (Schlüssel <Personalisierungspfad>.split-panel bzw. .adaptive-detail, gespeicherte Werte bestehender <split-panel> bleiben gültig). Die Seiten eines <adaptive-detail> setzen den Personalisierungspfad mit selector bzw. detail fort, so dass verschachtelte <adaptive-detail> getrennte Schlüssel erhalten.
- ReactSplitPanelControl.ChildConstraint hat Getter für Größe, Einheit, Mindestgröße und Scrolling.
Migration
- Das Attribut detail-size von <adaptive-detail> heißt drawer-size. Views, die die Breite des Drawers setzen, müssen das Attribut umbenennen.
- Inhalte innerhalb von <selector> und <detail> eines <adaptive-detail>, die eigene Personalisierung speichern (z.B. Spaltenbreiten einer Tabelle), liegen unter einem neuen Personalisierungsschlüssel (…selector… bzw. …detail…); bisher gespeicherte Werte gehen einmalig verloren.