FluentUI: osnovna postavitev podrobno

Nazaj: FluentUI (knjižnica oblikovalskega sistema)

Stanje: mešano — navedeno v vsaki vrstici tabele delov spodaj. Sidebar/Content/AuxiliaryBar/Statusbar so Tier 1 (dejanski porabnik: mreža .wkq-shell v wksqliteds). Titlebar/Activity Bar ostajata Tier 2, vendar iz drugega razloga kot „še ni zgrajeno„: že sta podedovana iz lupine wikija predloge premium-navy-ivory (Topbar/Action Rail, glej FluentUI: postavitev wikija (lupina dokumentacije) podrobno) — wksqliteds ju namenoma ne gradi znova. Panel/Banner ostajata Tier 2, brez trenutnega porabnika.

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):

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 (wiki-profil območja, inc/wiki-shell.php; oblikovanje v css/area-wiki.css: pridušeno besedilo 0.8em na tonu podloge, tanka spodnja črta). Site-profil območja 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 v funkciji „Workbench Tier 1“. 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, dovoljenja, povezava do dokumentacije). Je desni pandan 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 (token --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 leži 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„/„dovoljenja“ 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/podatkovno bazo/š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.