enhancement
major
major
Eine Anwendung, die die React-Oberfläche mit Material UI darstellt (installMui() aus com.top_logic.layout.react.mui), zeigt bisher alle ersetzbaren Komponenten als MUI-Komponenten an – nur das Avatar (TLAvatar, z.B. im Benutzermenü der App-Bar) bleibt die TopLogic-Komponente. Damit folgt es weder dem MUI-Theme noch lässt es sich über components.MuiAvatar des Themes gestalten.
Beispiel: Ein Kunden-Theme ersetzt die App-Bar durch eine Komponente mit schwarzem Hintergrund. Alle MUI-Adapter in der Leiste lassen sich mit einer CSS-Regel (.mbui-appbar .MuiTypography-root { color: inherit }) auf die helle Vordergrundfarbe umstellen; das Avatar ist die einzige Nicht-MUI-Komponente darin und braucht eine eigene Überschreibung, die die interne Farblogik des Avatars im Kundenmodul nachbaut:
.mbui-appbar .tl-avatar {
color: var(--tl-gray-77);
}
Lösung
installMui() ersetzt auch TLAvatar (jetzt 26 ersetzbare Komponenten): der Adapter MuiAvatarAdapter stellt das Avatar mit dem MUI-Avatar dar.
- Bild (url bzw. vom Control geliefertes Bild) → src/`alt`; ohne Bild die Initialen des Namens (role="img", aria-label); ohne Namen der leere neutrale Kreis. Der Name ist Tooltip.
- Größe (small, medium, large, x-large) → Durchmesser aus den Tokens --tl-size-avatar-*, Schriftgröße der Initialen aus den Typografie-Varianten des Themes (caption, body2, h5, h4 – dieselben, aus denen die Schriftstufen des Design-Systems unter MUI abgeleitet werden).
- Farben wie beim TopLogic-Avatar: je Name eine der acht Kategorien (Fläche --tl-category-N-subtle, Rand --tl-category-N-border), Initialen in text.primary.
- Gestaltung über das Theme: Die Wurzel trägt die Attribute data-category="1"…`"8"` (bei vorhandenem Namen) und data-size. Der Standardstil des Adapters wird vor die components.MuiAvatar.styleOverrides.root des Anwendungs-Themes gestellt (withRootStyleDefaults in MuiRoot), so dass das Theme jede Eigenschaft überschreibt, z.B. '&[data-category="3"]': { backgroundColor: … } – ohne Stylesheet gegen .tl-avatar.
Technisch:
- state.proto: neue Nachrichten ImageSourceState (url, hasData, dataRevision – der Bildzustand von ImageSource) und AvatarState extends ImageSourceState (name, Enum size). ReactAvatarControl und ImageSource verwenden die generierten Konstanten; die eigenen Konstanten ReactAvatarControl.NAME/`SIZE` entfallen.
- tl-react-bridge exportiert AvatarStateJson, ImageSourceStateJson, avatarInitials(), avatarCategory() und useImageSrc(); TLAvatar, TLImage und der MUI-Adapter nutzen sie gemeinsam.
- Dokumentation: view-layer/mui-customer-theme (Anzahl, Gestaltung des Avatars über das Theme) und view-layer/customer-component-library (Zustandsvertrag TLAvatar → AvatarState).