Scarriffle/Vorrania
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Verlauf: klarere Bewegungs-Icons, Spalte nach vorn

Browse Source 
Die beiden Kisten unterschieden sich nur in einem kleinen Pfeil. Bei 18 px war
das nicht zu trennen - erkannt hat man sie allein an der Farbe, und die war
gerade wegen der Wertung (gruen rein, orange raus) rausgeflogen. Ohne Farbe
blieb nichts uebrig, woran man sie auseinanderhaelt.

Jetzt die Strich-Icons checkin/checkout/edit: grosser Pfeil auf eine Linie zu
bzw. von ihr weg, Stift fuer die Korrektur. Dieselben Zeichen wie auf den
Ein-/Auslagern-Knoepfen, also schon vertraut, und auch klein eindeutig - die
Richtung liegt im Zeichen statt in der Farbe.

Auf der Verlaufsseite steht die Spalte jetzt an erster Stelle; sie sagt in
einem Blick worum es geht und braucht als Zeichen kaum Breite.

Der gefuellte Icon-Zweig in Icon.jsx wird damit nicht mehr gebraucht und ist
raus. Die SVG-Quellen bleiben unter brand/icons/ liegen - das README sagt jetzt
ausdruecklich, dass sie ungenutzt sind, warum, und wie man sie zurueckholt.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
2026-08-16 12:48:25 +02:00
parent e9738e28e7
commit ad3100462b
5 changed files with 41 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
web/src/components/BewegungIcon.jsx
View File

@@ -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 (
<span className="bewegung-icon" title={wort} aria-label={wort} role="img">