Add save icons

tweedegolf · Aug 26, 2024 · 4ff2365 · 4ff2365
1 parent 1ad86f3
commit 4ff2365
Show file tree

Hide file tree

Showing 4 changed files with 644 additions and 587 deletions.
diff --git a/index.html b/index.html
@@ -1,32 +1,67 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="./src/icon.svg" />
+    <meta
+      name="description"
+      content="Welke ervaring heb je opgedaan met deze beroepsactiviteit in de praktijk (in een huisartsgeneekundige setting)?"
+    />
+    <title>Ervaringskompas</title>
+    <!-- Matomo: privacy preserving visitor counter -->
+    <script>
+      var _paq = (window._paq = window._paq || []);
+      _paq.push(['trackPageView']);
+      _paq.push(['enableLinkTracking']);
+      (function () {
+        var u = '//matomo.tweede.golf/';
+        _paq.push(['setTrackerUrl', u + 'matomo.php']);
+        _paq.push(['setSiteId', '3']);
+        var d = document,
+          g = d.createElement('script'),
+          s = d.getElementsByTagName('script')[0];
+        g.async = true;
+        g.src = u + 'matomo.js';
+        s.parentNode.insertBefore(g, s);
+      })();
+    </script>
+    <!-- End Matomo Code -->
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <link rel="icon" type="image/svg+xml" href="./src/icon.svg">
-  <meta name="description"
-    content="Welke ervaring heb je opgedaan met deze beroepsactiviteit in de praktijk (in een huisartsgeneekundige setting)?">
-  <title>Ervaringskompas</title>
-  <!-- Matomo: privacy preserving visitor counter -->
-  <script>
-    var _paq = window._paq = window._paq || [];
-    _paq.push(['trackPageView']);
-    _paq.push(['enableLinkTracking']);
-    (function() {
-      var u="//matomo.tweede.golf/";
-      _paq.push(['setTrackerUrl', u+'matomo.php']);
-      _paq.push(['setSiteId', '3']);
-      var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-      g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
-    })();
-  </script>
-  <!-- End Matomo Code -->
-</head>
-
-<body>
-  <div id="root"></div>
-  <script type="module" src="/src/main.tsx"></script>
-</body>
-
+  <body>
+    <svg
+      aria-hidden="true"
+      style="position: absolute; width: 0; height: 0; overflow: hidden"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+    >
+      <defs>
+        <symbol id="icon-folder-open" viewBox="0 0 32 32">
+          <path fill="#fff" d="M26 30l6-16h-26l-6 16zM4 12l-4 18v-26h9l4 4h13v4z"></path>
+        </symbol>
+        <symbol id="icon-floppy-disk" viewBox="0 0 32 32">
+          <path fill="#fff"
+            d="M28 0h-28v32h32v-28l-4-4zM16 4h4v8h-4v-8zM28 28h-24v-24h2v10h18v-10h2.343l1.657 1.657v22.343z"
+          ></path>
+        </symbol>
+        <symbol id="icon-download" viewBox="0 0 32 32">
+          <path fill="#fff"
+            d="M28 16h-5l-7 7-7-7h-5l-4 8v2h32v-2l-4-8zM0 28h32v2h-32v-2zM18 10v-8h-4v8h-7l9 9 9-9h-7z"
+          ></path>
+        </symbol>
+        <symbol id="icon-link" viewBox="0 0 32 32">
+          <path fill="#fff"
+            d="M13.757 19.868c-0.416 0-0.832-0.159-1.149-0.476-2.973-2.973-2.973-7.81 0-10.783l6-6c1.44-1.44 3.355-2.233 5.392-2.233s3.951 0.793 5.392 2.233c2.973 2.973 2.973 7.81 0 10.783l-2.743 2.743c-0.635 0.635-1.663 0.635-2.298 0s-0.635-1.663 0-2.298l2.743-2.743c1.706-1.706 1.706-4.481 0-6.187-0.826-0.826-1.925-1.281-3.094-1.281s-2.267 0.455-3.094 1.281l-6 6c-1.706 1.706-1.706 4.481 0 6.187 0.635 0.635 0.635 1.663 0 2.298-0.317 0.317-0.733 0.476-1.149 0.476z"
+          ></path>
+          <path fill="#fff"
+            d="M8 31.625c-2.037 0-3.952-0.793-5.392-2.233-2.973-2.973-2.973-7.81 0-10.783l2.743-2.743c0.635-0.635 1.664-0.635 2.298 0s0.635 1.663 0 2.298l-2.743 2.743c-1.706 1.706-1.706 4.481 0 6.187 0.826 0.826 1.925 1.281 3.094 1.281s2.267-0.455 3.094-1.281l6-6c1.706-1.706 1.706-4.481 0-6.187-0.635-0.635-0.635-1.663 0-2.298s1.663-0.635 2.298 0c2.973 2.973 2.973 7.81 0 10.783l-6 6c-1.44 1.44-3.355 2.233-5.392 2.233z"
+          ></path>
+        </symbol>
+      </defs>
+    </svg>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
 </html>
diff --git a/src/App.tsx b/src/App.tsx
@@ -13,12 +13,12 @@ export default function App() {
         <div>
           <h1>Ervaringskompas</h1>
           <p>
-            Als huisarts in opleiding is het de bedoeling om uiteindelijk op alle
-            huisartgeneeskundige thema’s ervaring en bekwaamheid op te bouwen.
-            Dit ervaringskompas is bedoeld als reflectie instrument om zelf in
-            kaart te brengen welke ervaring je -in de breedte en diepte van het
-            vak- hebt kunnen opdoen. Op basis daarvan kun je je leerproces in de
-            praktijk verder vorm en richting te geven.
+            Als huisarts in opleiding is het de bedoeling om uiteindelijk op
+            alle huisartgeneeskundige thema’s ervaring en bekwaamheid op te
+            bouwen. Dit ervaringskompas is bedoeld als reflectie instrument om
+            zelf in kaart te brengen welke ervaring je -in de breedte en diepte
+            van het vak- hebt kunnen opdoen. Op basis daarvan kun je je
+            leerproces in de praktijk verder vorm en richting te geven.
           </p>
         </div>
         <div>
@@ -43,19 +43,59 @@ export default function App() {
         </p>
       </div>
 
+      <p className="save">
+        <label htmlFor="load">
+          <span>
+            <svg>
+              <use xlinkHref="#icon-folder-open" />
+            </svg>
+            Eerdere versie laden
+          </span>
+          <input
+            type="file"
+            id="load"
+            onChange={(e) => upload(e.target as HTMLInputElement, setState)}
+          />
+        </label>
+      </p>
+
       <Table state={state} select={select} mark={mark} />
       <hr />
       <Results state={state} mark={mark} note={note} />
       <hr />
       <h2>Opslaan</h2>
+      <p>
+        Om je ingevulde gegevens te bewaren heb je drie opties.
+        Als je op een persoonlijk apparaat werkt kun je de huidige toestand opslaan in je browser.
+        Je kunt ook een link kopiëren en deze ergens veilige bewaren,
+        of een bestand downloaden en deze op een veilige plek opslaan.
+      </p>
       <p className="save">
         <button onClick={() => saveStateLocal(state)}>
+          <svg>
+            <use xlinkHref="#icon-floppy-disk" />
+          </svg>
           Opslaan in de browser
         </button>
-        <button onClick={() => copyLink(state)}>Unieke link kopiëren</button>
-        <button onClick={() => downloadFile(state)}>Bestand downloaden</button>
+        <button onClick={() => copyLink(state)}>
+          <svg>
+            <use xlinkHref="#icon-link" />
+          </svg>
+          Unieke link kopiëren
+        </button>
+        <button onClick={() => downloadFile(state)}>
+          <svg>
+            <use xlinkHref="#icon-download" />
+          </svg>
+          Bestand opslaan op computer
+        </button>
         <label htmlFor="upload">
-          <span>Bestand laden</span>
+          <span>
+            <svg>
+              <use xlinkHref="#icon-folder-open" />
+            </svg>
+            Eerdere versie laden
+          </span>
           <input
             type="file"
             id="upload"

diff --git a/src/index.css b/src/index.css
@@ -362,6 +362,14 @@ table.form tr.selectable:hover {
   margin: 0.5rem 0.5rem 0 0;
 }
 
+.save span svg,
+.save button svg {
+  width: 1rem;
+  height: 1rem;
+  margin-right: 0.75rem;
+  vertical-align: text-top;
+}
+
 .save span:hover,
 .save button:hover {
   background: #2e6ab3;