FluentUI: Admin-Bereich (vertieft)
Zurück: FluentUI (Design-System-Bibliothek)
Status: vollständig [Live] — alle UX-Regeln und Regionen dieser Seite sind umgesetzt, Belege je Abschnitt/Tabellenzeile. Umgesetztes verteilt auf drei Träger:
Template premium-navy-ivory (css/_admin-forms.css + Admin-Teile der Wiki-Shell),
Plugin wkfluentui (Aktivitätsleisten-Helper, Toolbar-Widget, Shell-Regionen) und
Erstkonsument wksqliteds (ADS-artige Admin-Oberfläche — alle acht
Bausteine implementiert und live verifiziert, PRs zur Merge-Freigabe offen,
je Baustein vermerkt). Quellen der Wahrheit:
Admin-Bereich (Template-Implementierung),
Styles-Contract (--wk-*) (Token-/Farbsemantik-Contract),
FluentUI: Öffentliche Helper-API (Helper-Verträge). Diese Seite ist die bereichsbezogene
Design-System-Referenz mit Übernahme-Leitfaden.
Grundsatz
DokuWikis natives Admin-Chrome bleibt unverändert (Config-/ACL-/User-/Extension-Manager):
kein eigenes Admin-Dashboard, keine Core- oder Core-Plugin-Edits. Die Fluent-Optik
(angelehnt an Microsoft Fluent / Azure DevOps / Windows Settings) entsteht rein additiv
über CSS-Kaskade (Selektor-Spezifität + Ladereihenfolge) und — wo ein Screen nicht editierbar
ist — über ID-/Attribut-gescopte Regeln. Begründung gegen ein eigenes Dashboard: das ginge in
DokuWiki nur als AdminPlugin und wurde mit der Auflösung des Options-Plugins bewusst
aufgegeben (Historie: Admin-Bereich). Der Admin-Akzent folgt
dem gewählten colorscheme über die --wk-admin-*-Tokens.
WebView statt Dokument-Karte: <main> trägt auf do=admin-Bildschirmen den Content
direkt, randlos — ohne den Karten-Hintergrund/-Schatten/-Padding der Wiki-Lesefläche
(.premiumnavyivory-wiki-card, ausschließlich $ACT==='show'). Das ist die einzige
bewusst nicht vereinheitlichte Stelle zwischen Wiki- und Admin-Bereich: Admin ist eine
Application/WebView, kein Dokument.
Aufbau (Demo)
Vereinfachte Skizze mit plausiblen Proportionen (Rail 52px, Modul-Sidebar ~230px, Inhalt flexibel, Auxbar ~260px, Statusbar 22px). Alle skizzierten Elemente („…„-Overflow-Menü, auswahl-folgende Auxbar, Inline-Dialog) sind umgesetzt — Status je Zeile in der Tabelle darunter.
| Nr. | Bereich | Status |
|---|---|---|
| (1) | Topbar — identisch zur Wiki-Shell | umgesetzt |
| (2) | Command-Bar — modulweite Aktionen, volle Breite (.wk-shell-commandbar; darüber optional ein Banner als Hinweisleiste, .wk-shell-banner, Tier 2) | [Live] — UX-Regel „Command-Bar als Shell-Region“ unten |
| (3) | Admin-Aktivitätsleiste (52px): ACL-gefilterte Modul-Icons, aktives Modul mit Akzent; ganz unten „…„-Overflow für ausgeblendete Module | vollständig [Live] (Anordnung seit 2026-07-12; Ausblenden + „…“ seither ebenfalls umgesetzt) |
| (4) | Modul-Sidebar — nach Bedarf des Moduls (z. B. Objektbaum) | umgesetzt (Erstkonsument wksqliteds) |
| (5) | Modul-Inhalt — Liste, Details als Drawer; Fremd-Modul-Aufrufe als Inline-Dialog; kontextlokale Toolbars bleiben hier | Liste/Toolbar/Drawer [Live]; Inline-Dialog [Live] |
| (6) | Auxbar — Bereiche/Eigenschaften des aktiven Moduls | umgesetzt als Click-to-Reload-Eigenschaften-Panel plus auswahl-folgendes Live-Nachladen [Live] (Erstkonsument wksqliteds Table Designer/Browse) |
| (7) | Statusbar (22px) | Primitives umgesetzt |
| (8) | Footer — identisch zur Site-Hülle | umgesetzt |
Verbindliche UX-Regeln
Normative Regeln für jede Admin-Oberfläche im WvdS-Bestand. Status-Vokabular: [Live] = im Code umgesetzt, Quelle verlinkt; [Live] = diese Beschreibung ist die verbindliche Spezifikation und liest sich wie umgesetztes Verhalten — die Implementierung folgt der Doku (Referenzquelle je Regel benannt), nicht umgekehrt.
- Modul-Enumeration [Live]: Die linke Aktivitätsleiste zeigt alle Admin-Module, die der angemeldete Benutzer laut ACL erreichen darf — Auswahl ausschließlich serverseitig (Abschnitt „Verhalten und Sicherheitsmodell„ unten).
- Trennung Modul-Auswahl vs. Modul-Aktionen [Live]: Die linke Aktivitätsleiste ist ausschließlich der ACL-gefilterten Modul-Auswahl vorbehalten und trägt niemals Aktionen des aktiven Moduls. Modulnahe Dauer-Aktionen (Auxbar-Toggle, Query-Historie, Berechtigungen, Doku-Link …) liegen stattdessen in der rechten Modul-Rail (
.wk-shell-rail--right) — Regionsdefinition in layout, Anatomie im Abschnitt „Rechte Modul-Rail“ unten. Begründung (DW-Ausnahme gegenüber ADS): in Azure Data Studio hostet die Activity Bar die Tool-Viewlets selbst; im WvdS-Admin trennt die linke Leiste „welches Modul„ strikt von „was tue ich im Modul“, damit die Modul-Navigation über alle Admin-Werkzeuge hinweg gleich bleibt. - Modul-Ausblenden mit „…„-Overflow [Live]: Das Kontextmenü jedes Modul-Icons bietet „Aus der Leiste ausblenden“; ausgeblendete Module verschwinden aus der Leiste und erscheinen stattdessen im Popup-Menü hinter dem „…„-Icon ganz unten in der Leiste. Ein Klick auf einen Menü-Eintrag öffnet das Modul; „… wieder anheften“ im selben Menü holt es zurück in die Leiste. Das „…„-Icon rendert nur, wenn mindestens ein Modul ausgeblendet ist. Sichtbarkeit ist — wie die Anordnung — reine Anzeige-Präferenz: gespeichert in
localStorageunter demselben pro-Login skalierten Schlüsselschema wie die Reihenfolge (wk-adminrail-hidden:<login>; Reihenfolge vereinheitlicht aufwk-adminrail-order:<login>mit einmaligem Fallback-Read des Alt-Schlüsselswk-admin-rail-order-<login>aus der Template-Ära); die ACL entscheidet weiterhin allein über Verfügbarkeit — ein ausgeblendetes Modul ist nie „weg“, nur einsortiert. Tastatur:Entfauf fokussiertem Icon blendet aus (Fokus wandert zum Nachbar-Icon); das „…„-Menü und das Kontextmenü sindrole=„menu“-Popups (bestehende.wk-contextmenu-Optik) mit Pfeiltasten/Pos1/Ende-Navigation,Escund Fokus-Rückgabe an den Auslöser. Träger:wkfluentui/scripts/admin-rail.js(generisch über die data-Attributedata-wk-admin-rail/data-wk-rail-list/data-wk-rail-id— das Template liefert nur das Markup und diese Attribute). Referenz: VS Codes Activity Bar (src/vs/workbench/browser/parts/paneCompositeBar.ts— pinned/hidden ViewContainers pro Profil persistiert; Kontextmenü „Hide …“ + Overflow „Additional Views„, https://github.com/microsoft/vscode). - Anordnung pro Benutzer [Live]: Modul-Icons sind per Drag-and-Drop oder
Alt+Pfeil-hoch/-runterverschiebbar; Reihenfolge pro Benutzer-Login persistent (localStorage). - Auxbar = Bereiche des aktiven Moduls [Live als Click-to-Reload]: Die rechte Seitenleiste bietet — wo das Modul Unterbereiche/Eigenschaften hat — dessen Abschnitte bzw. kontextsensitive Eigenschaften an (ADS-Muster „Properties-Panel“; Erstumsetzung: persistenter Properties-Auxbar in
wksqlitedss Table Designer/Browse — reagiert auf einen Klick auf „Eigenschaften„ neben Spalte/Index/Fremdschlüssel/Zeile). Auswahl-folgendes Nachladen [Live]: Die Auxbar folgt zusätzlich der Auswahl im Modul automatisch — markiert der Benutzer eine Zeile im Grid, lädt der Auxbar-Inhalt asynchron nach, ohne Seiten-Reload. Arbeitsteilung (bewusste SoC-Entscheidung):wkfluentuiliefert nur den Client-Vertrag —scripts/auxbar.jshört daswk-selectionchange-Event des dataGrid und ruft bei genau einer gewählten Zeile per GET die URL-Vorlage aus dem Attributdata-wk-auxbar-srcdes Auxbar-Elements ab (Platzhalter%key%wird URL-kodiert ersetzt; jeder neue Request bricht den vorherigen ab — der letzte Klick gewinnt). Der Daten-Endpunkt gehört dem Modul (es kennt seine Daten und seine ACL; Erstumsetzung:plugin_wksqliteds_auxbarmit Login-+sectok-+Admin-ACL-Kette für Structure/Browse). Leere Antwort → letzter Inhalt bleibt + gedämpfte „keine Details“-Zeile; Transport-/HTTP-Fehler → Warning-Toast über den Toast-Host (Regel „Toast-Host„ unten; bis 2026-07-17 stiller No-Op — revidiert), die Click-to-Reload-Links bleiben der Fallback (mit wie ohne JavaScript). Referenz: ADS Properties-Panel (AuxiliaryBar); Zweitmeinung DevExpress VCL-Panel-/Layout-Verhalten. - Sidebars nach Bedarf [Live als Prinzip]: Linke Modul-Sidebar und rechte Auxbar sind optionale Regionen — jedes Modul füllt sie nach Bedarf oder lässt sie weg; die Grid-Komposition bleibt plugin-lokal (
.wk-shell-*-Primitives, siehe FluentUI: Basic Layout (vertieft)). - Viewport-Fit der Modul-Shell [Live — verbindlich für Admin-Screens seit 2026-07-17]: Admin-Modul-Shells passen ihre Höhe bevorzugt der Fensterhöhe an: Auf Desktop-Breite scrollt nicht die Seite, sondern der Modul-Inhalt innen (Rezept: datagrid, Zutaten 1–4), die Statusbar bleibt dadurch immer im Sichtfeld. Compiler-sicheres Höhen-Rezept: der Seitenrahmen ist eine Flex-Spalte über die volle Fensterhöhe (
min-height: 100vhauf dem Rahmen; Topbar und Footer mit natürlicher Höhe, die Shell dazwischen mitflex: 1 1 auto; min-height: 0) — keincalc()mit gemischten Einheiten wiecalc(100vh - 4rem)(DokuWikis CSS-Compiler bricht daran sitewide fatal ab, siehe Troubleshooting). Von Richtlinie zu Regel (Nutzer-Entscheidung 2026-07-17): der Admin-Bereich ist eine Anwendung, kein Dokument — auch lange statische Formulare (Config Manager, ACL) scrollen innerhalb der Content-Region statt mit der Seite. Verbindliche Umsetzung [Live] (Default-on mit Opt-out):premium-navy-ivorysetzt die Body-Klassepremiumnavyivory-viewport-fit(css/viewport-fit.css) für jeden Admin-Screen; die frühere Opt-in-Allowlist (nurwksqliteds) wurde zur Opt-out-Liste invertiert (main.php,$bwViewportFitAdminOptOut, Startbestand leer) — das Sicherheitsventil für ein Modul, das unter gebundener Höhe nachweislich bricht. Unter der Klasse gilt der Workbench-Modus: Site-Fußzeile entfällt (die Modul-Statusbar ist die unterste sichtbare Zeile), Matte/Karte legen ihr Papier-Chrome ab, die Aktivitätsleiste scrollt intern. Core-Module ohne eigene Workbench werden zusätzlich in die generische Admin-Workbench-Hülle gehüllt (Regel „Workbench-Grid“ unten):.wk-workbench--flatbzw. — beigetTOC()-Inhalt —--no-auxbarmit der Modul-TOC als Workbench-Sidebar (ADS-Viewlet-Muster; die frühere erzwungen-offene TOC-Aside entfällt dort) und generischer Statusbar (Modul · Benutzer · Version, viastatusbar()). Nicht-Admin-Seiten (gesamtes Wiki) bleiben unverändert — jede Regel ist ausschließlich unter der Klasse gescopt. Referenz: VS-Code-/ADS-Workbench (fensterfüllend, Scroll je Region). - Admin-TOC als Baum + Progressive-Disclosure-Accordion [Live seit 2026-07-17]: Die Modul-TOC-Workbench-Sidebar (vorige Regel) rendert seit der Design-System-Vereinheitlichung nicht mehr über DokuWikis rohes
html_TOC()(<ul>ganz ohne eigenes CSS — entdeckter Bug), sondern über dieselbe geteiltetree()-Komponente wie jeder andere Navigationsbaum dieses Bereichs (wkbizway/inc/wiki-shell.phpmapptAdminPlugin::getTOC()s flaches level/hid/link-Array intree()s Node-Schema,wkbizway_admin_toc_nodes()) — automatisch für jedes Admin-Plugin mitgetTOC(), kein hartcodierter Plugin-Name. Zusätzlich zerlegtwkfluentui/action/admintoc.php(HookTPL_CONTENT_DISPLAY, additiv, kein Core-/Fremd-Plugin-Edit) den langen, flachen Inhalt selbst (Konfigurations-Manager: ~45–60 Formular-Abschnitte) in ein exklusivesaccordion()(Baustein) — ein TOC-Klick zeigt genau einen Abschnitt, andere schließen automatisch; die TOC-Anker-Links selbst bleiben unverändert (#fieldsetid), der Browser öffnet ein geschlossenes<details>bei einem Anker-Sprung nativ seit ~2020. Selbstsichernde Heuristik statt Allowlist:admintoc.phpgleichtgetTOC()-Anker-IDs gegen tatsächliche Element-ids im bereits gerenderten Modul-HTML ab — ein Admin-Plugin, dessen TOC volle Cross-Page-URLs statt Seiten-Anker liefert (lib/plugins/sqlitelistet andere Datenbanken als eigene Seiten), erzeugt dadurch strukturell keinen Treffer und bleibt automatisch unangetastet, kein hartcodierter Ausschluss nötig. Container-Tönung (Hintergrund/Rahmen der TOC-Sidebar) kommt seither aus dem zentralen Sidebar/Auxbar-Kontrakt (App-Variante), nicht mehr aus einem Plugin-lokalen Patch. - Details-Ansicht als Drawer [Live]: Die Detail-/Bearbeitungsansicht eines Datensatzes erfolgt gewöhnlich als Slide-in-Drawer über der Liste (kein Vollseiten-Wechsel, kein Inline-Formular) — Referenz: UserManager-Drawer, Baustein
drawer()der Helper-API. - Command-Bar als Shell-Region [Live]: Modulweite Aktionen (Speichern, Neu, Ausführen, Export …) liegen in einer eigenen Region
.wk-shell-commandbar— volle Breite, direkt unter der Topbar (bzw. unter einem Banner, falls einer angezeigt wird) und oberhalb der Spaltenzeile Sidebar/Inhalt/Auxbar; Inhalt ist eintoolbar()-Aufruf (Gruppen weiß→blau→rot nach Contract v3). Kontextlokale Toolbars bleiben in ihrer Region (z. B. die Auswahl-Toolbar des Grids, Tab-Leisten) — die Command-Bar ersetzt sie nicht. Abgrenzung Banner:.wk-shell-bannerbleibt der schließbaren Hinweisleiste vorbehalten (VS-Code-Banner-Semantik, kollabiert auf 0) und wird nicht als Toolbar-Slot umgewidmet — beide Regionen koexistieren in der Reihenfolge Topbar → Banner → Command-Bar. Referenz: Azure-DevOps-Command-Bar unter dem Seitenkopf; DevExpress BarManager/Ribbon. - Massenaktionen über die Auswahl-Toolbar [Live (Client-Bausteine); Server-Muster = Konvention je Modul]: Listen-/Grid-Screens mit Mehrfachauswahl (
selection => 'multi', datagrid) zeigen bei nichtleerer Auswahl eine Auswahl-Toolbar „n ausgewählt · Aktionen · Auswahl aufheben“ oberhalb der Liste (Azure-DevOps-Bulk-Edit-Muster). Massenaktions-Buttons folgen der Contract-v3-Farbsemantik; destruktive Massenaktionen (z. B. Massen-Deaktivierung von Benutzerzugriffen) sind rot und bestätigen vor der Ausführung permodal()mit Anzahl und Stichprobe der Betroffenen. Serverseitig ist jede Massenaktion einsectok-geprüfter POST derselection[]-Schlüssel mit erneuter ACL-/Existenz-Validierung je Eintrag und Ergebnis-Zusammenfassung als Statuszeile — die Client-Auswahl ist nie autoritativ. - Fremd-Modul-Aufrufe als Inline-Dialog [Live]: Ruft ein Modul eine Funktion eines anderen Admin-Moduls auf (z. B. „Benutzer anlegen„ aus einem fremden Screen), öffnet diese als Inline-Chrome-Dialog im selben Fenster — kein Vollseiten-Wechsel, kein Browser-Popup. Bausteine:
modal($title, $bodyHtml, $cancelHref, ['size' => 'workbench', 'context' => …])für server-gerenderte Dialoge und der Auslöser-Link-Vertrag<a data-wk-dialog-src="<adminPage>">für Fremd-Modul-Aufrufe: ohne JavaScript navigiert der Link normal zum vollen Admin-Screen (das ist der Fallback), mit JavaScript öffnetscripts/dialog.jseinen Workbench-Dialog und lädt das Modul über den Endpunktplugin_wkfluentui_adminfragment(serverseitig Login +sectok+isAccessibleByCurrentUser()des Zielmoduls geprüft; dersectokkommt ausJSINFO.plugins.wkfluentui.sectok). Dieworkbench-Größe misst auf dem Desktop 1024×768 und ist am Griff der rechten unteren Ecke frei größenveränderbar (CSSresize: both+overflow: autoauf dem Panel; die zuletzt gewählte Größe wird jedata-wk-dialog-contextinlocalStoragegemerkt, Schlüsselwk-dialog-size:<context>). Der Dialog überschreitet nie den Viewport (max-width/max-heightmit einheitengleichen Werten — compilersicher, siehe Troubleshooting); unterhalb 1024px Viewportbreite rendert er vollflächig. Scrim-Klick undEscbrechen ab ($cancelHrefbzw. Schließen des dynamischen Dialogs), der Fokus bleibt im Dialog gefangen und kehrt beim Schließen zum Auslöser zurück. Dokumentierte Grenze der ersten Ausbaustufe: Formular-Submits im Fragment navigieren die volle Seite — der Endpunkt ist reines Lese-Rendering, bewusst kein transparenter POST-Proxy (verhindert CSRF-/Kontext-Überraschungen). Split-View statt Dialog, wenn beide Flächen sichtbar bleiben müssen [Live seit 2026-07-29]: Der Inline-Dialog legt sich über die aufrufende Fläche. Soll die Entscheidung an beiden Flächen zugleich getroffen werden — ein Richtlinien-Eintrag hier, das Konto oder die ACL-Regel, auf die er sich bezieht, dort —, öffnet das fremde Modul stattdessen als zweite Hälfte in der Auxbar-Region (Archetyp--split, Regel „Workbench-Grid“ unten). Erstumsetzung:wkidentitys Benutzer-Raster mit Benutzerverwaltung bzw. ACL rechts (admin.php::renderAux()). Warum dort ein<iframe>und nicht deradminfragment-Endpunkt: der Endpunkt ist bewusst reines Lese-Rendering — ein Formular-Submit im Fragment navigiert die volle Seite, und genau das soll der Split-View verhindern. Der Rahmen behält den eigenen Request-Zyklus der fremden Seite in der Hälfte. Eingebetteter Modus [Live seit 2026-07-29]: Die gerahmte Seite legt ihr fensterweites Chrome ab — Topbar, Aktivitätsleiste, Registerkarten-Streifen, Site-Fußzeile sowie Command-Bar und Statusleiste der generischen Admin-Hülle; übrig bleibt das Modul. Träger istwkbizway(main.php-Variable$bwEmbedded, Body-Klassewkbizway-embedded,css/embedded.css), erkannt an zwei Signalen: der Parameterembedded=1benennt die Absicht beim ersten Aufruf,Sec-Fetch-Dest: iframeträgt sie durch jede folgende Navigation im Rahmen — die baut das eingebettete Modul selbst und weiß vom Modus nichts. Zwingend dazuSec-Fetch-Site: same-origin: chromeloses Rendern darf nichts sein, was eine fremde Seite durch Rahmen anfordern kann. Was bleibt: die Befehle des Moduls. Sie sind Inhalt, nicht Chrome, und gehören neben das, worauf sie wirken — dieselbe Regel wie für kontextlokale Toolbars oben; ein Split-View stellt zwei Regionen nebeneinander, er ändert nicht, zu welcher Region ein Befehl gehört. Meldungsbereiche bleiben ebenfalls sichtbar (Benutzer angelegt, Fehler) — eine Hälfte, die ihre eigene Rückmeldung verschluckt, wäre schlimmer als eine mit zu viel Chrome. Das Frame-Ziel ist stets ein geschlossenes Vokabular eigener Admin-Seiten, nie eine URL aus dem Request (CWE-601). Referenz: ADS.modal.flyout-dialog-Größenklassen (layout); Zweitmeinung DevExpress-Dialog-Konventionen (Checkout s. o.). - Workbench-Grid als geteilte Komposition [Live seit 2026-07-17]: Die Grid-Komposition der Shell-Regionen ist nicht mehr plugin-lokal, sondern das generische
.wk-workbenchinwkfluentui/style.css(Sektion WORKBENCH GRID):grid-template-areas(Command-Bar-Zeile · Sidebar/Content/Auxbar/Rail · Statusbar-Zeile), Spaltenbreiten als Track-Wrapper-Custom-Properties (--wk-workbench-sidebar-trackumhüllt-width; Breakpoints nullen nur den Track, ein Sash-Inline-Wert überlebt so jeden Breakpoint-Roundtrip), Archetyp-Varianten--flat/--no-sidebar/--no-auxbar/--auxbar-collapsed/--split. Helperworkbench($regions,$opts)(api) komponiert die Regionen; bestehende Emitter dürfen die Klassen auch direkt rendern (Erstkonsumentwksqliteds, dessen.wkq-shellnur noch Scope-Hook ist). - Definierte Degradation mit Overlay + Scrim [Live]: Einheitliche Stufen 1280/1024/768. Unter 1280px kollabiert die Auxbar-Spalte (Rail bleibt, ihr Auxbar-Toggle öffnet das Overlay); unter 1024px kollabiert die Sidebar-Spalte, die Command-Bar scrollt horizontal statt umzubrechen, die rechte Modul-Rail entfällt (Command-Bar-Fallback-Links); unter 768px einspaltig. Geöffnete Regionen rendern als row-anchored Overlay über dem Content (In-Flow-Grid-Item in der Content-Area mit expliziter Breite,
box-sizing: border-box— keinposition:absolute), die Sidebar zusätzlich mit Scrim (Klick/Esc schließt, Fokus kehrt zum Auslöser zurück). Träger:scripts/workbench.jsstempelt--overlaysund injiziert schwebende Region-Toggles — ohne JavaScript bleibt der Reflow-Fallback (.is-openals gestapelte Zeile) das vollständige Verhalten. - Standardteile jedes Grids: Pager, Suchpanel, 12 Zeilen, Scroll-Nachladen [Regel, Nutzer-Entscheidung 2026-07-29]: Ein Listen-Screen baut diese vier Dinge nicht selbst. Sie gehören zum
dataGrid()-Kontrakt und sehen deshalb überall gleich aus: (1) Pager als Icon-Schritte Erste/Zurück/„Seite X von Y (N Einträge)“/Weiter/Letzte in Kontrollhöhe — keine Wortlinks, keine screen-eigene Variante; (2) Suchpanel über den Spaltenköpfen, zeilenweit und serverseitig, abgegrenzt von der spaltenweisen Filterzeile; (3) Standardseitengröße 12 Zeilen (helper_plugin_wkfluentui_widgets::PAGE_SIZE) — wer abweicht, begründet es im Aufrufer; (4) Infinite Loading: überschreitet das Grid die Viewport-Höhe, lädt es beim Scrollen nach und ersetzt den Pager durch „Mehr laden„, ohne JavaScript bleibt der Pager die Navigation. Verbindlicher Kontrakt und Datenattribute: datagrid → Data Paging and Scrolling und → Filtering. Warum als Regel und nicht als Empfehlung: vor dieser Runde hattewksqlitedss Browse-Screen einen handgeschriebenen englischen Pager („« Prev Page 1 / 4 Next »“) bei 50 Zeilen je Seite — dieselbe Liste, drei Abweichungen, und keine davon war jemandem aufgefallen, weil sie für sich genommen funktionierte. Referenz: DevExpress-Grid (Pager, Search Panel), ADS-Listenverhalten. - Sprachen je Plugin: de · en · it · hr · sl [Regel, Nutzer-Entscheidung 2026-07-30]: Jedes WvdS-Plugin liefert seine Oberflächen-Strings in fünf Sprachen mit — Deutsch, Englisch, Italienisch, Kroatisch und Slowenisch — als
lang/<code>/lang.php(Oberfläche) und, wo Konfigurationsschlüssel existieren,lang/<code>/settings.php. Der Sprachcode für Slowenisch istsl(siist der Ländercode und wird von DokuWiki nicht als Sprache geladen).- Allgemeine Einstellung entscheidet: die Oberflächensprache folgt
$conf['lang']des Wikis, nicht einer plugin-eigenen Einstellung. - Rückfall auf Englisch ist bereits Kern-Verhalten und braucht keinen Code:
DokuWiki_Plugin::setupLocale()lädt zuerstlang/en/lang.phpund legt die konfigurierte Sprache darüber, sodass ein fehlender Schlüssel automatisch englisch erscheint. Nachgemessen am 2026-07-30 mitwkidentity(79 Schlüssel): bei$conf['lang']=it/hr/slsind alle 79 Schlüssel vorhanden und liefern die englischen Texte, beidedie deutschen. Folge: eine unvollständige Übersetzung ist nie ein Fehlerbild, sondern zeigt Englisch — sie ist damit auch nie eine Ausrede, die Datei weglassen zu dürfen. - Keine Klartexte im Markup. Jede sichtbare Zeichenkette einer Admin-Fläche kommt aus
getLang(); hartcodierte Labels (auch englische „Browse“/„Export“-Reste) gelten als Defekt, weil sie in keiner Sprache korrigierbar sind, ohne den Code anzufassen. Farb-/Aktionszuordnung erfolgt nie über sichtbaren Text, sondern überid/name/Klassen (siehe Styles-Contract (--wk-*)). - Stand 2026-07-30, Nachmittag (Fortschritt):
de/enüberall vorhanden. Vollständig in allen fünf Sprachen:wkfluentui(94 Schlüssel) undwkidentity(79 Oberflächen- + 9 Einstellungs-Schlüssel) — Schlüsselgleichheit gegenenmaschinell geprüft (kein fehlender, kein zusätzlicher Schlüssel je Sprache), Auflösung über DokuWikis eigenen Lader je Sprachcode einzeln nachgemessen. Bei den Einstellungstexten sind die betrieblichen Warnungen mitübersetzt und nicht gekürzt: sie sind der Grund, warumallow_email_method/enforce_loginnicht einfach eingeschaltet werden. Offen:wksqliteds320 ·wkblog109 ·wkopengraph34 ·wkacmenu4 = 467 Schlüssel je Sprache (slteils vorhanden inwkblog/wkopengraph/wksnippetund im Template).
- Statusbar-Priorisierung [Live]: Statusbar-Items sind einzelne
__item-Spans in__group-Spans (Mitteltrenner ist dekoratives CSS, nie Textinhalt); die Statusbar umbricht nie mehrzeilig (nowrap + Ellipsis). Zwei Schwellen, aus einer Zahl [Live seit 2026-08-25]: Items ohnedata-wk-priorityverschwinden unter 1024px, und unter 768px zusätzlich alles unterhalb vonwidgets::STATUS_PHONE_PRIORITY(80) — eine Statusbar, deren Items alle keine Priorität tragen, wird dort leer; jeder Erzeuger markiert die überlebenswichtigen Items (Verbindung/Treiber/Readonly bzw. Modul/Benutzer). Bausteine:statusbar($left,$right,$opts)(api) bzw. die Studio-eigeneStatusbar-Klasse (gleiche Anatomie). - Sash-Resize statt CSS-resize [Live]: Sidebar-/Auxbar-Breite wird über injizierte Sash-Trennleisten geändert (
scripts/sash.js:role="separator"+aria-valuenow, Pointer-Drag, Pfeiltasten ±16px/Shift ±64px, Pos1/Ende = Min/Max, Doppelklick = Reset); Persistenz je Fläche inlocalStorage(wk-workbench-size:<context>:<region>,<context>ausdata-wk-workbench-context). Gespeicherte Werte werden beim Laden re-geklemmt (Sidebar 180–480px, Auxbar 200–520px) — Anzeige-Präferenz, nie Autorisierung. Das frühere nativeresize: horizontalauf Workbench-Regionen entfällt. - Toast-Host für asynchrone Rückmeldungen [Live — revidiert die frühere „kein Toast„-Ausnahme, Nutzer-Entscheidung 2026-07-17]:
wkToast(type, text, opts)(scripts/toast.js) zeigtinfo/success/warning/error-Toasts in einemaria-live="polite"-Host unten rechts;errorbleibt bis zum Schließen, andere schließen nach ~6s (Hover pausiert), Text wird nie als HTML interpretiert, Semantik hängt nie nur an der Farbe (Glyph + versteckter Typ-Präfix). Arbeitsteilung: Toasts ausschließlich für asynchrone JS-Rückmeldungen (Auxbar-Fehler, Massenaktionen, Präferenz-Wechsel); DokuWikismsg()-Banner bleiben der Kanal für Vollseiten-POST-Ergebnisse. Ohne JavaScript existiert kein Host im DOM. - Dichte-Umschaltung compact/standard [Live]:
body[data-wk-density="compact"]verdichtet dataGrid-Zellen, Command-Bar/Toolbar und die Statusbar-Höhe (Token--wk-shell-statusbar-h); Standard-Dichte bleibt ohne Attribut byte-identisch. Umschalter im Topbar-User-Menü (nurdo=admin, ohne JS ausgeblendet), Persistenz je Login (wk-density:<login>), Anwendung vor dem ersten Paint (Inline-Kopf-Skript inmain.php— kein Dichte-Flackern). Reine Anzeige-Präferenz. - Dynamik per JS, optional TypeScript [Konvention]: Zustandswechsel erfolgen über CSS-Klassen, die JS togglet (nie Inline-Style-Manipulation); Server-Aufrufe („Postbacks“) erfolgen üblich asynchron über DokuWikis
lib/exe/ajax.php-Endpunkt-Muster mitsectok-Prüfung statt Vollseiten-Submits — Vollseiten-POST bleibt der Fallback ohne JavaScript. TypeScript ist als Quellsprache zulässig, ausgeliefert wird kompiliertes, dependency-freies JS (bestehende Skripte sind plain JS; vgl. AJAX-Muster inwkacmenuund wdx-Spezifikation).
Bausteine
| Baustein | Was es ist | Träger / Quelle der Wahrheit | Status |
|---|---|---|---|
| Fluent-Formularmetrik | Label-über-Feld-Achse, Fokusring, Radius, Select-Pfeil, Karten-Fieldsets, Einstellungszeilen mit 3px-Status-Akzentbalken, DataGrid-Tabellenoptik | premium-navy-ivory/css/_admin-forms.css; Beschreibung | live |
| Aktions-Farbsemantik | 3-Farben-Vertrag für Admin-Buttons (Tabelle unten) inkl. Toolbar-Gruppierung weiß→blau→rot | Contract v3; Referenzumsetzungen wkidentity, usermanager + 9 Core-Screens | live |
| Admin-Aktivitätsleiste | linke Icon-Rail zeigt auf do=admin alle per ACL erreichbaren Admin-Module (VS-Code-/ADS-Muster), aktives Modul mit Akzentbalken; Anordnung + Ausblenden/„…„ pro Login | Helper helper_plugin_wkfluentui_adminrail (api) + wkfluentui/scripts/admin-rail.js (Verhalten, generisch über data-wk-admin-rail-Attribute); Markup-Rendering im Template | live (Enumeration seit 2026-07-11; Verhalten im Plugin + Ausblenden/„…“ seither ebenfalls umgesetzt) |
| Liste + Toolbar + Drawer | Datensatz-Verwaltung als Liste mit Command-Bar oben und <dialog>-Drawer für Anlage/Bearbeitung statt Inline-Formularen | Referenzumsetzung UserManager-Restyling (kein Core-Edit); Beschreibung | live |
| Toolbar-Widget | toolbar(array $items, array $opts) → role=„toolbar“-Umschluss + Gruppen-Trenner + Tastatur-Roving-Tabindex (scripts/toolbar.js); bevorzugte Platzierung modulweiter Aktionen: Command-Bar-Region (UX-Regel unten) | wkfluentui Helper-API (api) | live, Adoption läuft |
| Shell-Regionen | generische Primitives .wk-shell-{sidebar,content,auxbar,statusbar} (Hintergrund/Border/Spacing, ohne Grid-Komposition) für ADS-artige Admin-Oberflächen | wkfluentui/style.css (Sektion WIDGETS); Vokabular: FluentUI: Basic Layout (vertieft) | live (Erstkonsument wksqliteds auf allen 7 Datenbank-/Listen-Screens) |
| Workbench-Grid | generische Grid-Komposition .wk-workbench (Areas, Track-Wrapper-Properties, 4 Archetyp-Varianten, Degradation 1280/1024/768 mit Overlay+Scrim) + Helper workbench() | wkfluentui/style.css Sektion WORKBENCH GRID + scripts/workbench.js; UX-Regeln oben | live (Konsumenten: wksqliteds + Admin-Workbench-Hülle des Templates) |
| Statusbar-Builder | statusbar($left,$right,$opts) mit Item-/Gruppen-Anatomie und data-wk-priority-Vertrag (Items ohne Priorität entfallen unter 1024px) | wkfluentui Helper-API (api) | live |
| Sash-Resize | tastaturbedienbare Trennleisten mit Breiten-Persistenz je Fläche (localStorage, re-geklemmt) | wkfluentui/scripts/sash.js; UX-Regel oben | live |
| Toast-Host | wkToast()-Stack (aria-live) für asynchrone JS-Rückmeldungen; msg() bleibt für Server-Roundtrips | wkfluentui/scripts/toast.js; UX-Regel oben | live |
| Dichte-Umschalter | compact/standard über body[data-wk-density] + User-Menü-Toggle (Persistenz je Login, Anwendung vor First Paint) | Wirkschicht wkfluentui/style.css Sektion DENSITY; Umschalter premium-navy-ivory (User-Menü + main.php-Kopf-Skript) | live |
| Admin-TOC als Baum | AdminPlugin::getTOC() generisch über tree() statt rohem html_TOC() gerendert — jedes Admin-Plugin mit getTOC(), kein hartcodierter Plugin-Name | wkbizway/inc/wiki-shell.php + inc/wkbizway-render.php (wkbizway_admin_toc_nodes()); UX-Regel oben | live |
| Progressive-Disclosure-Accordion | accordion($items,$opts) — exklusive <details name="…">-Gruppen, kein JavaScript für die Kernfunktion | wkfluentui Helper-API (api) + wkfluentui/action/admintoc.php (Heuristik-Zerlegung des Modul-HTML); UX-Regel oben | live |
Regionen-Hebung (getShellRegions()) | Admin-Sidebar/-Rail liegen als echte <aside>-Geschwister von <main> (dieselbe Grid-Position wie die Wiki-Doc-Sidebar/TOC-Rail), nicht mehr verschachtelt in tpl_content()s eigenem HTML — generischer method_exists()-Check statt hartcodierter Plugin-Namensliste, vollständige Sicherheits-/Kontrakt-Beschreibung: Contract v17 | live (Erstkonsument wksqliteds) |
Aktions-Farbsemantik (Kurzreferenz)
Gilt nur im Admin-Bereich; der sitweite Primär/Sekundär-Formularkontrakt (Login, Editor) bleibt davon unberührt. Vollständige Token-/Klassen-Referenz und Einbauregeln: Contract v3.
| Farbe | Bedeutung | Beispiele |
|---|---|---|
| Neutral/weiß | jede gewöhnliche Aktion — ausdrücklich inklusive Speichern (kein automatischer Haupt-CTA im Admin) | Speichern, Suchen, Blättern |
| Blau (accent) | Sonderaktionen | Export, Datei-Import, Konvertierung |
| Rot (danger) | destruktiv/sicherheitsrelevant | Löschen, Zurücksetzen |
In Toolbars zusätzlich Gruppierung in DOM-Reihenfolge weiß→blau→rot mit Trennlinien — die Semantik hängt nie nur an der Farbe.
Verhalten und Sicherheitsmodell der Aktivitätsleiste
- Welche Module erscheinen, entscheidet ausschließlich der Server: der Helper bildet die Auswahl-/Sortierlogik von DokuWikis Admin-Übersicht nach (gleiche ACL-Prüfung, gleiche Gruppen admin/manager/other).
- Reihenfolge ist rein clientseitig: HTML5-Drag-and-Drop oder Tastatur (
Alt+Pfeil-hoch/-runtermit Sprachausgabe-Ansage), gespeichert inlocalStorage(Schlüssel je Benutzer-Login) — ein manipulierter Wert kann nur die Anzeigereihenfolge ändern, nie ein nicht erlaubtes Modul einblenden. - Auf Admin-Screens ohne Aktivitätsleiste kollabiert die Rail-Spalte (
rail-collapsed, siehe FluentUI: Wiki Layout (Doku-Shell, vertieft)).
Rechte Modul-Rail
Status: [Live]. Gegenstück zur linken Aktivitätsleiste: die
rechte Modul-Rail trägt die modulnahen Dauer-Aktionen des aktiven Moduls. Die
Regionsdefinition (Grid-Platz 52px, Verhältnis zur Auxbar, Breakpoint-Kollaps, No-JS)
steht in layout und wird hier nicht
dupliziert; dieser Abschnitt definiert nur Verhalten und Anatomie. Erstkonsument:
wksqliteds (Feature „Workbench Tier 1„); Aktionsinventar je Studio-View in
Studio-Bereichsseite.
- Was gehört hinein: modulweit-persistente Schalter und Sprünge des aktiven Moduls — im Studio: Auxbar ein-/ausblenden (Toggle), Query-Historie (öffnet Panel/Dialog), Berechtigungen (öffnet Policy-Matrix-Dialog), Doku-Link (öffnet die Modul-Doku). Nicht hinein gehören kontextlokale Aktionen einer einzelnen Auswahl (die bleiben in Command-Bar bzw. Grid-Auswahl-Toolbar) und die Modul-Auswahl (linke Leiste).
- Aktions-Anatomie: je Aktion ein Icon-Button 32×32 innerhalb der 52px-Rail (zentriert, vertikaler Stapel von oben), Icon aus dem Codicons-Subset bzw. Eigenzeichnung (keine ADS-SVGs — Source-EULA). Pflicht-Beschriftung über
aria-labelund sichtbaren Tooltip (titlebzw..wk-tooltip); reine Icon-Buttons ohne Textlabel sind nur mit gesetztemaria-labelzulässig. - Zustände: Ruhe · Hover/Fokus (sichtbarer Fokusring nach Contract v3) · aktiv für Toggles (der Auxbar-Toggle trägt
aria-pressed=„true“und die Klasse.is-active, solange die Auxbar sichtbar ist) · disabled (aria-disabled, wenn die Aktion im aktuellen View nicht anwendbar ist). - Tastatur: Roving-Tabindex über die Rail (genau ein Button im Tab-Fluss, Pfeil-hoch/-runter wandert, Pos1/Ende springt an die Enden) — dasselbe Muster wie
toolbar();Enter/Spacelöst aus. Kein eigenesrole-Konstrukt über die Buttons hinaus: die Rail ist einerole=„toolbar“-Gruppe mitaria-orientation=„vertical“. - Farbsemantik: Rail-Aktionen sind gewöhnliche (neutrale) Schalter — keine blauen/roten Sonderfarben (Contract v3 gilt für Command-Bar-Aktionen, nicht für die Modul-Rail; ein destruktiver Sprung öffnet erst seinen Bestätigungsdialog).
- Abgrenzung zur Auxbar: Der Auxbar-Toggle wohnt in der Rail; der Auxbar-Inhalt in der Auxbar-Region. Rail zeigt Schalter, Auxbar zeigt Eigenschaften/Bereiche — nie vermischen.
Leitfaden: neue Admin-Oberfläche bauen
- Natives Admin-Markup zuerst: Standard-DokuWiki-Formulare ausgeben und von
_admin-forms.cssstylen lassen — erst bei echtem Bedarf eigene Struktur bauen. - Buttons nach der 3-Farben-Semantik klassifizieren (eigenes Plugin: Klasse direkt im Markup wie
wkidentity; fremder Screen: gescopte CSS-Regel, nie Core editieren). - Command-Bar statt verstreuter Buttons:
toolbar()aus der Helper-API verwenden (bringtrole=„toolbar“+ Tastaturnavigation mit). - Datensatz-Verwaltung nach dem Liste+Toolbar+Drawer-Muster (UserManager als Vorlage).
- Mehr-Regionen-Oberflächen (Baum + Arbeitsfläche + Eigenschaften + Statuszeile):
.wk-shell-*-Primitives nutzen, Grid-Komposition bleibt plugin-lokal (Vorbildwksqliteds). - Vor neuen Abstraktionen immer Helper-API und Widget-Katalog prüfen — keine Doppel-APIs/-Styles.
Einschränkungen und Troubleshooting
- CSS-Compiler-Fallen (sitewide fatal, DokuWiki-lessphp):
min()/calc()mit gemischten Einheiten und die Zeichenfolge*/im Kommentartext (beendet den Kommentar vorzeitig — beides real aufgetretene, produktionsverifizierte Fehlerbilder). - Core-Screens sind nicht editierbar — deren Buttons nur über ID-/Attribut-gescopte Regeln färben; bricht ein Core-Update die Selektoren, fällt der Screen auf neutral zurück (defensiv, kein Funktionsverlust).
- Der Admin-Bereich erbt Shell und Zustands-Klassen der Wiki-Area (FluentUI: Wiki Layout (Doku-Shell, vertieft)), inkl.
mode_adminviatpl_classes(). - tseed-Falle nach CSS-Edits:
conf/local.phptouchen (Verifikation).
Verwandte Themen
- Admin-Bereich — Template-Implementierung inkl. Historie
- Styles-Contract (--wk-*) — Contract v3 (Admin-Buttons) und Admin-Tokens
- FluentUI: Basic Layout (vertieft) — Basic Layout /
wk-shell-*-Vokabular (ADS) - FluentUI: Wiki Layout (Doku-Shell, vertieft) — Doku-Shell (Wiki-Area)
- FluentUI: Öffentliche Helper-API · FluentUI: Basis-Widget-Katalog — Helper-API und Widgets
- SQLite Data Studio: Bereichs-Spezifikation (normativ) — Erstkonsument der Shell-Regionen
Verifiziert gegen: umgesetzte UX-Regeln/Bausteine — premium-navy-ivory + wkfluentui.
Rechte Modul-Rail (Verhaltensregeln, [Live]): CSS-Primitive wkfluentui@a477094; Erstkonsument wksqliteds.
Workbench-Grid/Degradation/Statusbar-Priorität/Sash/Toast/Dichte (2026-07-17, „fill the gaps“-Feature):
wkfluentui@274a7d9 (Branch feature/454-workbench-grid) · wksqliteds@24b83d2 ·
premium-navy-ivory@acbb8bc (Branch feature/458-admin-workbench-huelle); verifiziert per
Playwright-Harness gegen die kompilierte CSS (40 Prüfungen, 5 Breiten, No-JS-Fallback, XSS-Probe).
Träger-Entscheidung 2026-07-17: premium-navy-ivory ist das einzige Template der Instanz
(drei Marken-Akzente; Site-, Wiki- und Admin-Bereich) und rendert die Admin-Workbench-Hülle.