FluentUI: osnovna postavitev podrobno

Nazaj: FluentUI (knjižnica oblikovalskega sistema)

Osnovno ogrodje aplikacijskega zaslona: stranska vrstica, vsebina, pomožno območje in vrstica stanja – kateri del je zgrajen, kateri podedovan iz hišne predloge in zakaj.

Stanje: mešano – navedeno v vsaki vrstici tabele delov spodaj. Sidebar/Content/AuxiliaryBar/Statusbar so stopnja 1 (dejanski porabnik: mreža .wkq-shell v wksqliteds).

Titlebar ostaja stopnja 2, vendar iz drugega razloga kot »še ni zgrajeno«: je podedovana iz lupine wikija predloge premium-navy-ivory (Topbar, glej FluentUI: postavitev wikija (lupina dokumentacije) podrobno) – nobena PHP-koda tega paketa ne izriše .wk-shell-titlebar, razred obstaja le v slogovni datoteki.

Activity Bar je razdeljena na dvoje, in ta vrstica je do 21. 09. 2026 navajala le eno polovico:

• widgets::rail() (.wk-shell-rail) je splošni gradnik. Klic

obstaja (wksqliteds, modulna letev), toda v izrisanem dokumentu ga ni – izmerjeno na pregledu, brskanju, trezorju in priklopih: nič

  zadetkov. Glej opombo pod tabelo.
* Upravljalna lupina **gradi svojo**: ''helper/adminshell.php'' izriše
  ''%%<nav class="wk-shell-activitybar">%%'', vedenje v
  ''scripts/admin-rail.js''. Izmerjeno 21. 09. 2026: široka 52 px, visoka
  819 px, 25 vnosov. Kot del vmesnika je Activity Bar torej **stopnja 1** –
  le ne pod razredom, ki ga navaja ta tabela.

Panel/Banner ostajata stopnja 2: widgets::panel() je zgrajen (vedenje v scripts/panelmax.js), a nima porabnika; pasice ni ne kot izrisa ne kot pravila.

Vir: Azure Data Studio (https://github.com/microsoft/azuredatastudio, razcep (fork) VS Code – mehanika postavitve je med obema identična, zato isti vir velja tudi za https://github.com/microsoft/vscode). Motor postavitve: src/vs/workbench/browser/layout.ts (arrangeMiddleSectionNodes(), createGridDescriptor()), besednjak delov: layoutService.ts:21-30 (naštevni tip Parts).

Skica referenčne postavitve ADS (enaka na začetni strani):

K vrstici ActivitybarPart, izmerjeno 21. 09. 2026: desna modulna letev wksqliteds kliče widgets::rail() (ModuleRail.php), a se ne pojavi na nobenem zaslonu. Niti helper/adminshell.php niti action/adminworkbench.php ne bereta railHtml iz getShellRegions() – pogodba z dne 18. 07. 2026 je modulu vzela izpis, ne da bi kdo prevzel izris. Štiri modulna dejanja tako niso na zaslonu. Zabeleženo kot svoj postopek; ta stran opisuje ciljno stanje.

Status: [Live] – opisuje obstoječe, že dobavljeno vedenje (premium-navy-ivory, inc/wiki-shell.php in main.php), ne nove specifikacije.

Razmejitev do pasice (Banner): drobtinice so lastno območje, ne uporaba .wk-shell-banner – ta razred ostane rezerviran izključno za zaprljivo obvestilno vrstico (glej tabelo delov zgoraj, vrstica BannerPart, ter admin-layout, »Zavezujoča UX-pravila«, razmejitev pasice).

Vrstica drobtinic prikazuje navigacijsko pot trenutne strani (funkciji jedra DokuWiki tpl_youarehere()/tpl_breadcrumbs(), upravljani s skrbniškima možnostma $conf['youarehere']/$conf['breadcrumbs']) kot lastno, diskretno vrstico polne širine neposredno pod topbarom.

• Pozicija: lastna vrstica polne širine med topbarom (</header>) in mrežo lupine (.premiumnavyivory-wiki-shell) – POZICIJA pasice, a lastno območje; ne znotraj vsebinske kartice (kjer je bila pred premikom; kartica se zdaj začne neposredno z naslovom strani) in ne znotraj .wk-shell-banner.
• Nosilec: .premiumnavyivory-wiki-crumbbar (profil območja »wiki«, inc/wiki-shell.php; oblikovanje v css/area-wiki.css: pridušeno besedilo 0.8em na tonu podloge, tanka spodnja črta). Profil območja »site« ostane nespremenjen: .breadcrumbs (main.php, znotraj .page-heading-container).
• Skrbniški zasloni: popolnoma skrito (pogoj $ACT !== 'admin') – skrbniški zaslon prevzame $ID od klicoče strani (jedro DokuWiki, inc/Menu/Item/AbstractItem.php), zato bi drobtinice prikazovale pot nepovezane strani namesto dejansko gledanega skrbniškega zaslona. Ločeno območje drobtinic za skrbništvo ni predvideno.

Stanje: [Live] – ta opis je zavezujoča specifikacija; primitiv CSS zagotavlja območje, povezovanje v modul poteka na stopnji 1 delovne površine. Opredelitev območja je tukaj (pravilo lastništva »ena lastniška stran na trditev«); pravila UX/obnašanja so v admin-layout.

Desni rail modula (.wk-shell-rail--right) je ozka, navpična vrstica ikon za trajna, modulu lastna dejanja trenutno aktivnega skrbniškega modula (v Studiu npr. prikaz/skrivanje auxbarja, zgodovina poizvedb, pravice, povezava do dokumentacije). Je desna ustreznica levi vrstici dejavnosti (.wk-shell-rail), ki ostaja rezervirana izključno za ACL-filtrirano izbiro modula – nikoli za dejanja modula (izjema DokuWiki v primerjavi z Azure Data Studio, kjer Activity Bar sama gosti orodne poglede (tool viewlets)).

• Mesto v mreži: skrajno desno, fiksna širina 52px (žeton --wk-shell-rail-w), polna višina vrstice stolpcev med vrstico ukazne vrstice in vrstico stanja. Kot vsi primitivi .wk-shell-* razred zagotavlja le površino/rob/mero – sled mreže (grid-template-columns/grid-template-areas) določi porabniški modul v svoji lokalni sestavi lupine (vzorec, kot je .wkq-shell pri wksqliteds, glej tabelo modifikatorjev zgoraj). Nov razred aktivira le območje; obstoječe postavitve brez njega ostanejo nespremenjene (aditivno).
• Razmerje do auxbarja: rail je zunaj, ob auxbarju – oba sta ločeni območji z ločeno nalogo. Auxbar (.wk-shell-auxbar) prikazuje vsebino (lastnosti/območja izbire), rail prikazuje stikala dejanj (vključno s samim stikalom auxbarja). Vrstni red vrstice stolpcev: sidebar · content · auxbar · rail (desno).
• Obnašanje pod 1024px: rail odpade (sled se skrči); njegova dejanja se preselijo v skupino preliva (»…«) ukazne vrstice. To sledi istim prelomnim točkam kot skrčitev stranske vrstice/auxbarja (glej medijske poizvedbe v wksqliteds/screen.css) in je stvar porabniške sestave mreže, ne primitiva.
• Nadomestilo brez JS: dejanja raila so navadne povezave/gumbi – stikalo auxbarja je povezava na isto stran z nastavljenim parametrom poizvedbe, »zgodovina poizvedb«/»pravice« odpreta svojo stran/pogovorno okno na strani strežnika. JavaScript jih le nadgradi (preklop brez ponovnega nalaganja, aktivno stanje); brez JavaScripta ostane vsako dejanje dosegljivo.
• Kratek povzetek dostopnosti (podrobnosti v admin-layout): gumbi ikon 32×32 v 52px-railu, opis orodja + aria-label, roving tabindex, aktivno stanje za stikala (aria-pressed).

• Activity Bar / stranska vrstica: Object Explorer / drevo povezav (namesto splošnega raziskovalca datotek)
• Območje urejevalnika: urejevalnik poizvedb + mreža rezultatov, temelji na SlickGrid (src/sql/base/browser/ui/table/table.ts), poleg tega Table Designer kot najboljša najdba za »hibrid obrazca in podatkovne mreže« (src/sql/workbench/browser/designer/, .components-grid { display:grid; grid-template-columns: max-content 1fr; })
• Panel: v ADS npr. zavihki rezultatov poizvedb/sporočil/načrta poizvedbe
• Auxiliary Bar: podokno lastnosti (kontekstno občutljive lastnosti izbranega predmeta)
• Vrstica stanja: prikazuje strežnik/zbirko podatkov/število vrstic namesto veje Git/kodiranja
• Prekrivanje (ni del mreže): osnovni razred Modal (src/sql/workbench/browser/modal/modal.ts) – dve obliki: sredinsko poravnan .modal.normal-dialog (640px) v primerjavi z lastnim .modal.flyout-dialog ADS (izplava z desne, narrow/medium/wide = 500/800/1200px). ADS pri podatkovno bogatih obrazcih (pogovorna okna za povezavo, obnovitev, pravila požarnega zidu) raje uporabi izplavna okna.

VS Code/ADS uporabljata SerializableGrid (rekurzivno drevo SplitView, temelječe na sashih, velikosti v pikslih upravlja JS, src/vs/base/browser/ui/grid/grid.ts) namesto CSS Grid/Flexbox. Spremembe položaja (stranska vrstica levo/desno, panel zgoraj/spodaj/levo/desno) so čisti premiki vozlišč mreže (layout.ts:1972-1998), ne različne poti CSS.

Za vtičnik DokuWiki brez lastnega mehanizma mreže JS je realistična ustreznica predloga CSS Grid/Flexbox (fiksne vrstice za naslovno/ statusno vrstico, fiksni-ali-spremenljivi stolpci za rail/stransko vrstico/ panel) namesto ponovne izgradnje vlečenja sashov – besednjak območij in konvencija poimenovanja spremenljivk CSS (–vscode-<part>.<property> → –wk-shell-<part>-<property>) je neposredno prenosljiva, ne glede na to, ali bodo spremenljivi sashi kdaj zgrajeni.

Splošni primitivi .wk-shell-* tega vtičnika zagotavljajo le ozadje/rob/razmik po območju – sestava mreže (katera območja, v kakšni razporeditvi) je namenoma prepuščena porabniškemu modulu. Naslednji modifikatorji so torej lokalni za wksqliteds, sestave na njegovem vsebniku mreže .wkq-shell (wksqliteds/screen.css, vrstici 353/362), ne razredi wkfluentui. Drug modul opredeli svoje lastne modifikatorje sestave po istem vzorcu.

Razredi stanja/vidnosti po vzoru VS Code (nosidebar in drugi) so ločeni od tega – glej naslednji odsek.

VS Code preklaplja globalna stanja postavitve prek razredov CSS na korenu (naštevni tip LayoutClasses, layout.ts:95-106): nosidebar, nomaineditorarea, nopanel, noauxiliarybar, nostatusbar, fullscreen, maximized. Nativni modul lupine DW bi uporabil isti pristop (npr. .wk-shell.no-sidebar namesto API-ja za vidnost v JS).

Preverjeno glede na: wkfluentui@a477094, wk-dw-msqlite-plugin@240c064. Desni rail modula (opredelitev območja, [Live]): primitivi CSS wkfluentui@a477094.