FluentUI: skrbniško območje podrobno

Nazaj: FluentUI (knjižnica oblikovalskega sistema)

Stanje: povsem [Live] — vsako pravilo UX in vsako območje na tej strani je uveljavljeno, z dokazi, navedenimi po odseku/vrstici tabele. Uveljavljeno je razporejeno na tri nosilce: predloga premium-navy-ivory (css/_admin-forms.css + skrbniški deli lupine wikija), vtičnik wkfluentui (pomočnik vrstice dejavnosti, gradnik orodne vrstice, območja lupine) in prvi porabnik wksqliteds (skrbniški zaslon v slogu ADS — vseh osem gradnikov uveljavljenih in preverjenih v živo, PR-ji čakajo na odobritev združitve, navedeno po gradniku). Viri resnice: skrbnisko_podrocje (izvedba predloge), Styles Contract (--wk-*) (pogodba tokenov/barvne semantike), FluentUI: javni API pomočnika (pogodbe pomočnika). Ta stran je referenca oblikovalskega sistema, vezana na to območje, z vodnikom za prevzem.

Nativni skrbniški chrome DokuWiki ostaja nespremenjen (upravitelj konfiguracije/ACL/uporabnikov/razširitev): brez lastne skrbniške nadzorne plošče, brez posegov v jedro ali vtičnike jedra. Videz Fluent (navdihnjen po Microsoft Fluent / Azure DevOps / nastavitvah Windows) nastane izključno aditivno prek kaskade CSS (specifičnost selektorjev + vrstni red nalaganja) in — kjer zaslon ni urejljiv — prek pravil, omejenih na ID/atribut. Utemeljitev proti lastni nadzorni plošči: to bi bilo v DokuWiki mogoče le kot AdminPlugin, kar je bilo namenoma opuščeno z ukinitvijo vtičnika Options (zgodovina: skrbnisko_podrocje). Skrbniški poudarek sledi izbranemu colorscheme prek tokenov --wk-admin-*.

Poenostavljena skica z verjetnimi razmerji (rail 52px, stranska vrstica modula ~230px, vsebina prilagodljiva, auxbar ~260px, vrstica stanja 22px). Vsak skiciran element (preliv „…„, auxbar, ki sledi izbiri, vstavljeno pogovorno okno) je uveljavljen — stanje po vrstici v tabeli spodaj.

Normativna pravila za vsak skrbniški zaslon v zbirki WvdS. Besednjak stanja: [Live] = uveljavljeno v kodi, vir povezan; [Live] = ta opis je zavezujoča specifikacija in se bere kot uveljavljeno obnašanje — izvedba sledi dokumentaciji (referenčni vir naveden po pravilu), ne obratno.

1. Naštevanje modulov [Live]: leva vrstica dejavnosti prikaže vse skrbniške module, do katerih prijavljeni uporabnik sme dostopati glede na ACL — izbira poteka izključno na strani strežnika (glej odsek „Obnašanje in varnostni model„ spodaj).
2. Ločevanje izbire modula od dejanj modula [Live]: leva vrstica dejavnosti je rezervirana izključno za ACL-filtrirano izbiro modula in nikoli ne nosi dejanj aktivnega modula. Modulu lastna trajna dejanja (stikalo auxbarja, zgodovina poizvedb, dovoljenja, povezava do dokumentacije …) namesto tega živijo v desnem railu modula (.wk-shell-rail--right) — opredelitev območja v layout, anatomija v odseku „Desni rail modula“ spodaj. Utemeljitev (izjema DW v primerjavi z ADS): v Azure Data Studio Activity Bar sama gosti orodne poglede; v skrbniškem vmesniku WvdS leva vrstica strogo loči „kateri modul„ od „kaj počnem v modulu“, tako da navigacija med moduli ostane skladna po vseh skrbniških orodjih.
3. Skrivanje modulov s prelivom „…„ [Live]: kontekstni meni vsake ikone modula ponuja „Skrij iz vrstice“; skriti moduli izginejo iz vrstice in se namesto tega pojavijo v pojavnem meniju za ikono „…„ skrajno spodaj v vrstici. Klik na vnos menija odpre modul; „… znova pripni“ v istem meniju ga vrne v vrstico. Ikona „…„ se izriše le, če je skrit vsaj en modul. Vidnost je — tako kot razporeditev — čista nastavitev prikaza: shranjena v localStorage pod isto po-prijavi umerjeno shemo ključev kot razporeditev (wk-adminrail-hidden:<login>; razporeditev poenotena na wk-adminrail-order:<login> z enkratnim nadomestnim branjem starega ključa wk-admin-rail-order-<login> iz dobe predloge); ACL še vedno sam odloča o razpoložljivosti — skrit modul ni nikoli „izginil“, le razvrščen je drugam. Tipkovnica: Delete na fokusirani ikoni jo skrije (fokus se premakne na sosednjo ikono); meni „…„ in kontekstni meni sta pojavni okni role=„menu“ (obstoječi videz .wk-contextmenu) z navigacijo s puščicami/Home/End, Esc in vrnitvijo fokusa na sprožilec. Nosilec: wkfluentui/scripts/admin-rail.js (splošen, voden prek podatkovnih atributov data-wk-admin-rail/data-wk-rail-list/data-wk-rail-id — predloga zagotavlja le oznake in te atribute). Referenca: Activity Bar VS Code (src/vs/workbench/browser/parts/paneCompositeBar.ts — pripeti/skriti ViewContainer trajno shranjeni po profilu; kontekstni meni „Hide …“ + preliv „Additional Views„, https://github.com/microsoft/vscode).
4. Razporeditev po uporabniku [Live]: ikone modulov je mogoče premikati z vlečenjem (drag-and-drop) ali tipkovnico (Alt+puščica gor/dol); razporeditev je trajna po uporabniški prijavi (localStorage).
5. Auxbar = odseki aktivnega modula [Live kot klik-za-ponovno-nalaganje]: desna stranska vrstica ponuja — kjer ima modul pododseke/lastnosti — njegove odseke oz. kontekstno občutljive lastnosti (vzorec ADS „properties panel“; prva izvedba: trajen auxbar lastnosti v Table Designer/Browse wksqliteds — odzove se na klik na „Lastnosti„ ob stolpcu/indeksu/tujem ključu/vrstici). Ponovno nalaganje, ki sledi izbiri [Live]: auxbar poleg tega samodejno sledi izbiri v modulu — ko uporabnik označi vrstico v mreži, se vsebina auxbarja asinhrono ponovno naloži, brez ponovnega nalaganja strani. Delitev dela (namerna odločitev SoC): wkfluentui zagotavlja le odjemalsko pogodbo — scripts/auxbar.js posluša dogodek wk-selectionchange dataGrid in pri natanko eni izbrani vrstici prek GET pridobi predlogo URL iz atributa data-wk-auxbar-src elementa auxbar (nadomestni znak %key% se nadomesti z URL-kodiranjem; vsaka nova zahteva prekine prejšnjo — zmaga zadnji klik). Podatkovna končna točka pripada modulu (pozna svoje podatke in svoj ACL; prva izvedba: plugin_wksqliteds_auxbar z verigo prijava + sectok + skrbniški ACL za Structure/Browse). Prazen odgovor → ostane zadnja vsebina + zamolklo vrstica „ni podrobnosti“; napaka prenosa/HTTP → tih no-op, povezave klik-za-ponovno-nalaganje ostanejo nadomestilo (z JavaScriptom in brez njega). Referenca: podokno lastnosti ADS (AuxiliaryBar); drugo mnenje: obnašanje panela/postavitve DevExpress VCL.
6. Stranske vrstice po potrebi [Live kot načelo]: leva stranska vrstica modula in desni auxbar sta izbirni območji — vsak modul ju zapolni po potrebi ali ju izpusti; sestava mreže ostaja lokalna za vtičnik (primitivi .wk-shell-*, glej FluentUI: osnovna postavitev podrobno).
7. Prilagoditev lupine modula vidnemu polju [smernica — zaželeno, ni strogo pravilo]: skrbniške lupine modulov raje prilagodijo svojo višino višini okna: pri namizni širini se ne pomika stran, temveč vsebina modula znotraj (recept: datagrid, sestavine 1–4), s čimer vrstica stanja ostane vedno v vidnem polju. Za prevajalnik varen recept za višino: okvir strani je stolpec flex prek celotne višine okna (min-height: 100vh na okviru; topbar in noga z naravno višino, lupina med njima z flex: 1 1 auto; min-height: 0) — brez calc() z mešanimi enotami, kot je calc(100vh - 4rem) (prevajalnik CSS DokuWiki se pri tem usodno sesuje za celotno spletno mesto — glej odpravljanje težav). Zakaj smernica in ne pravilo: dolgi statični obrazci (npr. upravitelj konfiguracije) in nativni zasloni jedra lahko še vedno rastejo s stranjo — prilagoditev vidnemu polju se izplača tam, kjer lupina deluje z lastno vrstico stanja/stransko vrstico (SQL Workbench, zasloni s seznami). Referenca: delovno okolje VS Code/ADS (zapolni okno, drsi po območjih). Prvi primer uporabe: resnična ugotovitev uporabnika, pri kateri je zaslon povezav wvdsdwmsqlite presegal spodnji rob okna. Zavezujoča izvedba [Live] (opt-in po skrbniški strani): premium-navy-ivory za strani z dovoljenega seznama (trenutno samo wksqliteds; css/viewport-fit.css) nastavi body-razred premiumnavyivory-viewport-fit; pod tem razredom dodatno velja način workbench: stran je aplikacija, ne dokument — noga spletnega mesta odpade (vrstica stanja modula je najnižja vidna vrstica; ob zaklenjenem pomikanju strani noga tako ali tako ne bi bila dosegljiva), podloga/kartica odložita papirnati chrome (polna širina, brez roba/sence, brez vrstice docInfo), vrstica dejavnosti se raztegne na višino lupine in drsi znotraj. Strani brez opt-ina (vsi drugi skrbniški zasloni, celoten wiki) ostanejo nespremenjene — vsako pravilo je omejeno izključno na opt-in-razred.
8. Podroben pogled kot predal [Live]: podroben/urejevalni pogled zapisa običajno poteka kot predal, ki zdrsne čez seznam (brez preklopa na celotno stran, brez vstavljenega obrazca) — referenca: predal UserManager, gradnik drawer() API pomočnika.
9. Ukazna vrstica kot območje lupine [Live]: dejanja za cel modul (shrani, novo, izvedi, izvozi …) živijo v lastnem območju .wk-shell-commandbar — polna širina, neposredno pod topbar (oz. pod pasico, če je ta prikazana) in nad vrstico stolpcev stranska vrstica/vsebina/auxbar; vsebina je klic toolbar() (skupine belo→modro→rdeče po pogodbi v3). Kontekstno-lokalne orodne vrstice ostanejo v svojem območju (npr. orodna vrstica izbire mreže, vrstice zavihkov) — ukazna vrstica jih ne nadomesti. Razmejitev od pasice: .wk-shell-banner ostaja rezervirana za zapiralno vrstico obvestil (semantika pasice VS Code, skrči se na 0) in se ne preimenuje v mesto za orodno vrstico — obe območji soobstajata v vrstnem redu topbar → pasica → ukazna vrstica. Referenca: ukazna vrstica Azure DevOps pod glavo strani; DevExpress BarManager/Ribbon.
10. Množična dejanja prek orodne vrstice izbire [Live (odjemalski gradniki); vzorec strežnika = konvencija po modulu]: zasloni s seznami/mrežami z več izbiro (selection => 'multi', datagrid) ob neprazni izbiri prikažejo orodno vrstico izbire „n izbranih · dejanja · počisti izbiro„ nad seznamom (vzorec množičnega urejanja Azure DevOps). Gumbi množičnih dejanj sledijo barvni semantiki pogodbe v3; destruktivna množična dejanja (npr. množična deaktivacija uporabniškega dostopa) so rdeča in pred izvedbo potrdijo prek modal() s številom in vzorcem prizadetih. Na strani strežnika je vsako množično dejanje POST, preverjen z sectok, ključev selection[] s ponovno validacijo ACL/obstoja po vnosu in povzetkom rezultata kot vrstico stanja — izbira na strani odjemalca nikoli ni merodajna.
11. Klici med moduli kot vstavljeno pogovorno okno [Live]: če modul pokliče funkcijo drugega skrbniškega modula (npr. „ustvari uporabnika“ s tujega zaslona), se ta odpre kot vstavljeno pogovorno okno chrome v istem oknu — brez preklopa na celotno stran, brez pojavnega okna brskalnika. Gradniki: modal($title, $bodyHtml, $cancelHref, ['size' => 'workbench', 'context' => …]) za na strežniku izrisana pogovorna okna in pogodba sprožilne povezave <a data-wk-dialog-src="<adminPage>"> za klice med moduli: brez JavaScripta povezava normalno vodi na celoten skrbniški zaslon (to je nadomestilo), z JavaScriptom scripts/dialog.js odpre pogovorno okno delovnega prostora in naloži modul prek končne točke plugin_wkfluentui_adminfragment (na strani strežnika se preverijo prijava + sectok + isAccessibleByCurrentUser() ciljnega modula; sectok izhaja iz JSINFO.plugins.wkfluentui.sectok). Velikost workbench na namizju meri 1024×768 in jo je mogoče prosto spreminjati z ročico spodnjega desnega kota (CSS resize: both + overflow: auto na podoknu; nazadnje izbrana velikost se zapomni po data-wk-dialog-context v localStorage, ključ wk-dialog-size:<context>). Pogovorno okno nikoli ne preseže vidnega polja (max-width/max-height z vrednostmi enakih enot — varno za prevajalnik, glej odpravljanje težav); pod širino vidnega polja 1024px se izriše čez cel zaslon. Klik na zatemnitev in Esc prekineta ($cancelHref oz. zaprtje dinamičnega pogovornega okna), fokus ostane ujet v pogovornem oknu in se ob zaprtju vrne na sprožilec. Dokumentirana omejitev te prve stopnje: oddaje obrazcev znotraj fragmenta preusmerijo celotno stran — končna točka je čisto bralno izrisovanje, namenoma ne pregleden posrednik POST (to preprečuje presenečenja CSRF/konteksta). Referenca: velikostni razredi ADS .modal.flyout-dialog (layout); drugo mnenje: konvencije pogovornih oken DevExpress.
12. Dinamika prek JS, TypeScript izbirno [konvencija]: spremembe stanja potekajo prek razredov CSS, ki jih preklaplja JS (nikoli neposredna manipulacija sloga inline); klici strežnika („postback„) običajno potekajo asinhrono prek vzorca končne točke lib/exe/ajax.php DokuWiki s preverjanjem sectok namesto oddaj cele strani — POST cele strani ostane nadomestilo brez JavaScripta. TypeScript je dovoljen kot izvorni jezik; dobavi se prevedeni JS brez odvisnosti (obstoječi skripti so navaden JS; prim. vzorec AJAX v wkacmenu in specifikacijo wdx).

Velja le v skrbniškem območju; pogodba primarnega/sekundarnega obrazca za celotno spletno mesto (prijava, urejevalnik) s tem ni prizadeta. Popolna referenca tokenov/razredov in pravila vgradnje: pogodba v3.

V orodnih vrsticah dodatno razvrščanje po vrstnem redu DOM belo→modro→rdeče z ločilnimi črtami — semantika nikoli ne temelji le na barvi.

• Kateri moduli se prikažejo, odloča izključno strežnik: pomočnik posnema logiko izbire/razvrščanja lastnega skrbniškega pregleda DokuWiki (enako preverjanje ACL, enake skupine admin/manager/other).
• Razporeditev je izključno na strani odjemalca: HTML5 vlečenje (drag-and-drop) ali tipkovnica (Alt+puščica gor/dol z napovedjo bralnika zaslona), shranjena v localStorage (ključ po uporabniški prijavi) — spremenjena vrednost lahko spremeni le vrstni red prikaza, nikoli ne razkrije nedovoljenega modula.
• Na skrbniških zaslonih brez vrstice dejavnosti se stolpec raila skrči (rail-collapsed, glej FluentUI: postavitev wikija (lupina dokumentacije) podrobno).

Stanje: [Live]. Ustreznica levi vrstici dejavnosti: desni rail modula nosi modulu lastna trajna dejanja aktivnega modula. Opredelitev območja (mesto v mreži 52px, razmerje do auxbarja, skrčitev pri prelomni točki, brez JS) je v layout in se tu ne podvaja; ta odsek opredeljuje le obnašanje in anatomijo. Prvi porabnik: wksqliteds (funkcija „Workbench Tier 1“); nabor dejanj po pogledu Studia v strani območja Studia (samo v nemščini).

• Kaj sodi sem: trajna, modulu lastna stikala in skoki aktivnega modula — v Studiu: prikaz/skrivanje auxbarja (stikalo), zgodovina poizvedb (odpre podokno/pogovorno okno), dovoljenja (odpre pogovorno okno matrike pravil), povezava do dokumentacije (odpre dokumentacijo modula). Sem ne sodijo kontekstno-lokalna dejanja ene same izbire (ta ostanejo v ukazni vrstici oz. orodni vrstici izbire mreže) in izbira modula (leva vrstica).
• Anatomija dejanja: en gumb ikone 32×32 na dejanje znotraj 52px-raila (sredinsko, navpičen sklad od vrha), ikone iz podnabora Codicons oz. lastno narisane (brez SVG-jev ADS — izvorna licenčna pogodba EULA). Obvezna oznaka prek aria-label in vidnega opisa orodja (title oz. .wk-tooltip); čisti gumbi ikon brez besedilne oznake so dovoljeni le z nastavljenim aria-label.
• Stanja: mirovanje · lebdenje/fokus (viden obroč fokusa po pogodbi v3) · aktivno za stikala (stikalo auxbarja nosi aria-pressed=„true“ in razred .is-active, dokler je auxbar viden) · onemogočeno (aria-disabled, kadar dejanje v trenutnem pogledu ni uporabno).
• Tipkovnica: roving tabindex po railu (natanko en gumb v toku tabulatorja, puščica gor/dol se premika, Home/End skočita na konca) — enak vzorec kot toolbar(); Enter/Presledek sproži. Brez lastne konstrukcije role poleg gumbov: rail je skupina role=„toolbar“ z aria-orientation=„vertical“.
• Barvna semantika: dejanja raila so navadna (nevtralna) stikala — brez modrih/rdečih posebnih barv (pogodba v3 velja za dejanja ukazne vrstice, ne za rail modula; destruktiven skok najprej odpre le svoje pogovorno okno za potrditev).
• Razmejitev od auxbarja: stikalo auxbarja živi v railu; vsebina auxbarja v območju auxbarja. Rail prikazuje stikala, auxbar prikazuje lastnosti/odseke — nikoli ju ne mešajte.

1. Najprej nativne skrbniške oznake: izpišite standardne obrazce DokuWiki in jih pustite oblikovati z _admin-forms.css — lastno strukturo gradite šele, ko za to obstaja resnična potreba.
2. Razvrstite gumbe po semantiki treh barv (lasten vtičnik: razred neposredno v oznakah, kot wkidentity; tuj zaslon: pravilo CSS z omejenim obsegom, jedra nikoli ne urejajte).
3. Ukazna vrstica namesto razpršenih gumbov: uporabite toolbar() iz API pomočnika (prinese role=„toolbar“ + tipkovnično navigacijo).
4. Upravljanje zapisov po vzorcu seznam+orodna vrstica+predal (UserManager kot predloga).
5. Zasloni z več območji (drevo + delovna površina + lastnosti + vrstica stanja): uporabite primitive .wk-shell-*, sestava mreže ostaja lokalna za vtičnik (vzor wksqliteds).
6. Pred novimi abstrakcijami vedno preverite API pomočnika in katalog gradnikov — brez podvojenih API-jev/slogov.

• Pasti prevajalnika CSS (usodne za celotno spletno mesto, lessphp DokuWiki): min()/calc() z mešanimi enotami in zaporedje znakov */ v besedilu komentarja (predčasno konča komentar — oba sta resnično nastala, v produkciji potrjena pojava napake).
• Zaslonov jedra ni mogoče urejati — njihove gumbe je mogoče obarvati le s pravili, omejenimi na ID/atribut; če posodobitev jedra podre selektorje, se zaslon vrne na nevtralno (defenzivno, brez izgube funkcionalnosti).
• Skrbniško območje podeduje lupino in razrede stanj wiki-območja (FluentUI: postavitev wikija (lupina dokumentacije) podrobno), vključno z mode_admin prek tpl_classes().
• Past tseed po urejanju CSS: dotaknite se conf/local.php (preverjanje).

• skrbnisko_podrocje — izvedba predloge, vključno z zgodovino
• Styles Contract (--wk-*) — pogodba v3 (skrbniški gumbi) in skrbniški tokeni
• FluentUI: osnovna postavitev podrobno — osnovna postavitev / besednjak wk-shell-* (ADS)
• FluentUI: postavitev wikija (lupina dokumentacije) podrobno — lupina dokumentacije (wiki-območje)
• FluentUI: javni API pomočnika · FluentUI: osnovni katalog gradnikov — API pomočnika in gradniki
• SQLite Data Studio — prvi porabnik območij lupine

Preverjeno glede na: uveljavljena pravila UX/gradniki — premium-navy-ivory + wkfluentui. Desni rail modula (pravila obnašanja, [Live]): primitivi CSS wkfluentui@a477094; prvi porabnik wksqliteds.