En hel skärm

Toppraden

Samma topprad i varje verktyg, given som data: logotypen, menyn med det aktuella valet och eventuella undermenyer, den inloggades avatar som leder till sin sida, ljust och mörkt, utloggning som ikon och meddelandet från senaste åtgärden. Appens layout är komponenten och dess inställningar.

<AppShell
  brand={{ name: "tid", title: "Tid" }}                    // mark: "circle" | "square" | "quadrant" för ett eget märke
  nav={[
    { label: "Tid", href: "/time", current: true },
    { label: "Projekt", href: "/projects", count: 3, countTitle: "3 att godkänna" },
    { label: "Admin", current: inAdmin, items: [{ label: "Team", href: "/admin/team" }, …] },
  ]}
  user={{ name: "Johan de Geer", href: "/me", current: path === "/me" }}
  theme
  signOut={{ action: "/api/auth/signout", hidden: [["csrfToken", token]] }}
  flash={{ tone: "success", text: "Sparat.", link: { href, label: "Öppna" } }}
  page
>
  …sidan…
</AppShell>

appShell({ ...samma, mainHtml })   // för en server som renderar HTML själv

Utskrift

Det som ska ut ur skrivaren är innehållet: en tidrapport, en lista, en faktura­grund. Skalet runt det — navigering, toolbar, filter, paginering — är skärmens, och biblioteket tar bort det. Tabellhuvudet upprepas på varje sida, rader delas inte mitt itu, och tonade rader behåller sin färg: en försenad rad är försenad på papper också.

Två klasser för det som skiljer: .ws-print-hide för det bara skärmen ska ha,.ws-print-only för det bara papperet ska ha — en signaturrad, vilken period rapporten gäller. Utskrift är också vägen till en PDF, alltså vägen till revisorn.