bes-r/roosterwijs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

view-opties als subtiele icoonknopjes (dagen/vakkleur/print)

Browse source
This commit is contained in:
bes-r 2026-06-19 23:37:26 +02:00
parent bfcb8b0d42
commit 0ab8ecb798
2 changed files with 14 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
frontend/src/pages.jsx
View file

@ -2498,13 +2498,11 @@ export function RoosterScherm({ mode }) {
</div>
)}
{schooljaar && (edit ? tab === "week" : true) && (
<button className="btn icon-label weergave-knop" title={weergave === "kolom" ? "Toon dagen onder elkaar" : "Toon dagen als kolommen"} onClick={() => setWeergave(weergave === "kolom" ? "lijst" : "kolom")}>{weergave === "kolom" ? "☰" : "▦"} <span>{weergave === "kolom" ? "Dagen onder elkaar" : "Kolommen"}</span></button>
)}
{schooljaar && (edit ? tab === "week" : true) && (
<button className="btn icon-label weergave-knop" title={vakkleurVlak ? "Toon kleur als streepje" : "Toon vak volledig in vakkleur"} onClick={() => setVakkleur(!vakkleurVlak)}>🎨 <span>{vakkleurVlak ? "Kleurstreep" : "Vakkleur"}</span></button>
)}
{printAan && schooljaar && (edit ? tab === "week" : true) && (
<button className="btn print-knop icon-label" title="Rooster afdrukken" onClick={() => window.print()}>🖨 <span>Print</span></button>
<div className="weergave-opties no-print">
<button type="button" className={weergave === "lijst" ? "icon-toggle on" : "icon-toggle"} aria-pressed={weergave === "lijst"} title={weergave === "kolom" ? "Dagen onder elkaar tonen" : "Dagen als kolommen tonen"} onClick={() => setWeergave(weergave === "kolom" ? "lijst" : "kolom")}>{weergave === "kolom" ? "☰" : "▦"}</button>
<button type="button" className={vakkleurVlak ? "icon-toggle on" : "icon-toggle"} aria-pressed={vakkleurVlak} title={vakkleurVlak ? "Vakkleur als streepje tonen" : "Vak volledig in vakkleur tonen"} onClick={() => setVakkleur(!vakkleurVlak)}>🎨</button>
{printAan && <button type="button" className="icon-toggle" title="Rooster afdrukken" onClick={() => window.print()}>🖨</button>}
</div>
)}
</div>
@ -2976,7 +2974,9 @@ export function PeriodeRoosterPage() {
</select>
</label>
<span className={conflictInfo.meldingen.length ? "wm-status fout" : "wm-status ok"}>{conflictInfo.meldingen.length ? `⚠ ${conflictInfo.meldingen.length} conflict(en)` : "✓ geen conflicten"}</span>
<button className="btn icon-label" title={vakkleurVlak ? "Toon kleur als streepje" : "Toon vak volledig in vakkleur"} onClick={() => setVakkleur(!vakkleurVlak)}>🎨 <span>{vakkleurVlak ? "Kleurstreep" : "Vakkleur"}</span></button>
<div className="weergave-opties no-print">
<button type="button" className={vakkleurVlak ? "icon-toggle on" : "icon-toggle"} aria-pressed={vakkleurVlak} title={vakkleurVlak ? "Vakkleur als streepje tonen" : "Vak volledig in vakkleur tonen"} onClick={() => setVakkleur(!vakkleurVlak)}>🎨</button>
</div>
<button className="btn primary" disabled={!schooljaar || blokken.length === 0} onClick={openVoltooien}>Voltooien &amp; periode inladen</button>
</div>

6
frontend/src/styles.css
View file

@ -102,6 +102,12 @@ input:focus, select:focus { outline: 2px solid var(--brand-soft); border-color:
.btn.primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn.danger { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
.btn.danger:hover { background: #fecaca; }
/* Subtiele weergave-opties (kleine icoonknopjes, rechts in de balk) */
.weergave-opties { margin-left: auto; display: inline-flex; gap: 4px; }
.icon-toggle { width: 34px; height: 34px; display: inline-grid; place-items: center; padding: 0; font-size: 16px; line-height: 1; background: transparent; color: var(--muted); border: 1px solid transparent; border-radius: 8px; cursor: pointer; }
.icon-toggle:hover { background: var(--bg); color: var(--ink); }
.icon-toggle.on { background: var(--brand-soft); color: var(--brand); border-color: var(--brand); }
.btn.primary:hover { filter: brightness(1.05); }
.link { background: none; border: 0; color: var(--brand); cursor: pointer; padding: 2px 4px; font: inherit; }