From 0ab8ecb7980be7b963e89b52e721ad4b954aa4f3 Mon Sep 17 00:00:00 2001
From: bes-r <27369668+bes-r@users.noreply.github.com>
Date: Fri, 19 Jun 2026 23:37:26 +0200
Subject: [PATCH] view-opties als subtiele icoonknopjes (dagen/vakkleur/print)

---
 frontend/src/pages.jsx  | 16 ++++++++--------
 frontend/src/styles.css |  6 ++++++
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/frontend/src/pages.jsx b/frontend/src/pages.jsx
index 05b284b..019db4a 100644
--- a/frontend/src/pages.jsx
+++ b/frontend/src/pages.jsx
@@ -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>
 
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 96fb6db..91f68c0 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -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; }