diff --git a/brand/README.md b/brand/README.md index f260b7c..4151e49 100644 --- a/brand/README.md +++ b/brand/README.md @@ -8,9 +8,8 @@ Name `box`) in Weiß auf der Akzentfläche. - **`app-icon.svg`** – 1024×1024, vollflächig, feste Farbe (`#4d5cd4`), ohne abgerundete Ecken. Für App-Icon (iOS/macOS via Icon Composer oder Xcode „AppIcon", App Store). Die Rundung macht das System selbst. -- **`icons/`** – Quellgrafiken der gefüllten Icons (Ein-/Auslagern, Korrektur). - Ihre Pfaddaten stehen inline in `../web/src/components/Icon.jsx`; siehe - `icons/README.md`. +- **`icons/`** – Quellgrafiken für Ein-/Auslagern und Korrektur. Derzeit nicht + im Einsatz; siehe `icons/README.md`. - **Favicon / Web-Logo:** `../web/public/favicon.svg` – dasselbe Zeichen mit abgerundeter Platte und Hell-/Dunkel-Umschaltung (für den Browser-Tab). diff --git a/brand/icons/README.md b/brand/icons/README.md index 89ff962..3a3e6e9 100644 --- a/brand/icons/README.md +++ b/brand/icons/README.md @@ -1,38 +1,32 @@ # Icon-Quellen -Hier liegen zugekaufte/heruntergeladene Grafiken, deren Pfaddaten **inline** in -`web/src/components/Icon.jsx` stehen (Abschnitt `GEFUELLT`). Zur Laufzeit lädt -niemand diese Dateien – sie sind die Quelle, nicht das Auslieferungsformat. - -Warum inline statt ``: Die Icons sollen die Textfarbe annehmen -(`fill="currentColor"`), damit sie sich mit Thema und Zustand mitfärben. Als -externe Datei ginge das nicht; die Originale tragen eine feste schwarze Füllung. +> **Derzeit nicht im Einsatz.** Die Verlaufsansicht nutzt die Strich-Icons +> `checkin` / `checkout` / `edit` aus `web/src/components/Icon.jsx` – dieselben +> wie die Ein-/Auslagern-Knöpfe. +> +> Grund: Die beiden Kisten unterscheiden sich **nur in der Pfeilrichtung**. Bei +> 18–20 px war das nicht zu trennen; erkannt hat man sie allein an der Farbe, +> und die trug mit Grün/Orange eine Wertung, die es nicht geben soll – +> Auslagern ist kein Missstand. Die Dateien bleiben liegen, falls sie später +> woanders passen; größer dargestellt trennen sie sehr wohl. ## Dateien -| Datei | Icon-Name | Bedeutung | -|---|---|---| -| `einlagern.svg` | `einlagern` | Kiste, Pfeil **hinein** – Bewegungsart „Eingelagert" | -| `auslagern.svg` | `auslagern` | Kiste, Pfeil **heraus** – Bewegungsart „Ausgelagert" | -| `korrektur.svg` | `korrektur` | Stapel mit Stift – Bewegungsart „Korrektur" | +| Datei | Bedeutung | +|---|---| +| `einlagern.svg` | Kiste, Pfeil **hinein** – Bewegungsart „Eingelagert" | +| `auslagern.svg` | Kiste, Pfeil **heraus** – Bewegungsart „Ausgelagert" | +| `korrektur.svg` | Stapel mit Stift – Bewegungsart „Korrektur" | -Die beiden Kisten unterscheiden sich nur in **einem** Pfad: der Pfeilrichtung. -Wer sie verwechselt, dreht Ein- und Auslagern um, ohne dass etwas kaputtgeht – -deshalb die ausdrückliche Zuordnung oben. +## Wieder einbauen -## Nach einer Änderung neu übernehmen +Es sind gefüllte Grafiken mit eigenem `viewBox`; die übrigen in `Icon.jsx` sind +Strichzeichnungen (`fill:none`, `stroke:currentColor`) und vertragen sich nicht +damit. Es braucht also wieder einen eigenen Zweig, der mit +`fill="currentColor"` rendert – inline, damit die Icons die Textfarbe annehmen +(die Originale tragen festes Schwarz). -Die Pfaddaten wurden per Skript übernommen, nicht abgetippt. Wird eine Datei -ersetzt, dieselbe Extraktion wiederholen und das Ergebnis in `GEFUELLT` -eintragen (`viewBox` mitnehmen – die Kisten sind 24×24, die Korrektur 64×64): - -```sh -python3 - <<'PY' -import re, pathlib -for name in ("einlagern", "auslagern", "korrektur"): - roh = pathlib.Path(f"brand/icons/{name}.svg").read_text() - print(name, re.search(r'viewBox="([^"]+)"', roh).group(1)) - for d in re.findall(r']*\sd="([^"]+)"', roh): - print(f' ') -PY -``` +Die Pfaddaten übernimmt man mit einem kurzen Skript, statt sie abzutippen: +`viewBox` aus dem ``-Tag lesen und alle `d="…"` der enthaltenen `` +ausgeben. Ein Tippfehler in den Kurvendaten fällt sonst erst am gerenderten +Bild auf. diff --git a/web/src/components/BewegungIcon.jsx b/web/src/components/BewegungIcon.jsx index dcdcd6e..42f48f1 100644 --- a/web/src/components/BewegungIcon.jsx +++ b/web/src/components/BewegungIcon.jsx @@ -3,18 +3,23 @@ import Icon from "./Icon"; /** * Die Art einer Bestandsbewegung als Sinnbild statt als Wort. * - * Kiste mit Pfeil hinein (Einlagern), Kiste mit Pfeil heraus (Auslagern), - * Stapel mit Stift (Korrektur). Alle drei in derselben Farbe: gruen fuer rein - * und orange fuer raus las sich wie gut und schlecht, dabei ist Auslagern - * schlicht der Normalfall. Unterschieden wird ueber die Pfeilrichtung. + * Grosser Pfeil auf eine Linie zu (Einlagern), von ihr weg (Auslagern), Stift + * (Korrektur) – dieselben Zeichen wie auf den Ein-/Auslagern-Knoepfen. + * + * Vorher standen hier zwei gefuellte Kisten, die sich NUR in einem kleinen + * Pfeil unterschieden. Bei 18 px war das nicht zu trennen; erkannt hat man sie + * allein an der Farbe – und die trug mit Gruen/Orange eine Wertung, die es + * nicht geben soll. Auslagern ist kein Missstand. + * + * Deshalb: eine Farbe fuer alle drei, die Richtung liegt im Zeichen selbst. * * Titel und aria-label behalten das Wort: fuer Screenreader und fuer alle, die * ein Sinnbild nicht auf Anhieb lesen. */ const LABEL = { in: "Eingelagert", out: "Ausgelagert", adjust: "Korrektur" }; -const ICON = { in: "einlagern", out: "auslagern", adjust: "korrektur" }; +const ICON = { in: "checkin", out: "checkout", adjust: "edit" }; -export default function BewegungIcon({ typ, size = 18 }) { +export default function BewegungIcon({ typ, size = 19 }) { const wort = LABEL[typ] || typ; return ( diff --git a/web/src/components/Icon.jsx b/web/src/components/Icon.jsx index 0e6af09..66e5488 100644 --- a/web/src/components/Icon.jsx +++ b/web/src/components/Icon.jsx @@ -143,72 +143,7 @@ const PATHS = { }; -// Gefuellte Icons mit EIGENEM viewBox. Die uebrigen hier sind Strichzeichnungen -// (fill:none, stroke:currentColor); diese kommen als fertige Grafik und muessen -// deshalb getrennt gehalten werden. -// -// Quelle der Pfade: brand/icons/*.svg (dort steht auch, wie man sie nach einer -// Aenderung neu uebernimmt). Inline statt , damit sie ueber currentColor -// die Textfarbe annehmen – die Originaldateien tragen festes Schwarz. -const GEFUELLT = { - // Kiste mit Pfeil HINEIN – aus open-box (1).svg - einlagern: { - viewBox: "0 0 24 24", - node: ( - <> - - - - - - - - ), - }, - // Kiste mit Pfeil HERAUS – aus open-box.svg - auslagern: { - viewBox: "0 0 24 24", - node: ( - <> - - - - - - - - ), - }, - // Stapel mit Stift – aus edit-server.svg - korrektur: { - viewBox: "0 0 64 64", - node: ( - <> - - - - ), - }, -}; - export default function Icon({ name, size = 18, className = "", strokeWidth = 2 }) { - const gefuellt = GEFUELLT[name]; - if (gefuellt) { - return ( - - ); - } const path = PATHS[name]; if (!path) return null; return ( diff --git a/web/src/pages/History.jsx b/web/src/pages/History.jsx index 932afe1..6026d4f 100644 --- a/web/src/pages/History.jsx +++ b/web/src/pages/History.jsx @@ -27,8 +27,10 @@ export default function History() { + {/* Die Bewegungsart zuerst: sie sagt in einem Blick, worum + es geht, und braucht als Zeichen kaum Breite. */} + - @@ -37,11 +39,11 @@ export default function History() { {movements.map((m) => ( - {/* Nur das Sinnbild – die Tabelle hat noch Menge und Benutzer zu zeigen, und das Wort stand ohnehin dreimal untereinander. Titel und aria-label tragen es weiter. */} +
Aktion ZeitpunktAktion Produkt Menge Benutzer
{new Date(m.created_at).toLocaleString("de-DE")}{new Date(m.created_at).toLocaleString("de-DE")} {m.product_name} {articlePrimary(m)}