Verlauf: keine Wertung mehr in der Farbe der Bewegungsart

Gruen fuer Einlagern und Orange fuer Auslagern las sich wie gut und schlecht -
dabei ist Auslagern schlicht der Normalfall, kein Missstand. Die Farbe kam noch
aus der Badge-Zeit, wo sie neben dem Wort stand; als alleiniges Signal wertet
sie.

Alle drei Arten tragen jetzt dieselbe neutrale Kachel. Unterschieden wird ueber
die Pfeilrichtung im Icon, und die Bedeutung steht weiterhin in title und
aria-label.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
2026-08-16 12:42:44 +02:00
parent e33c01ec37
commit e9738e28e7
2 changed files with 8 additions and 10 deletions

View File

@@ -4,20 +4,20 @@ import Icon from "./Icon";
* Die Art einer Bestandsbewegung als Sinnbild statt als Wort. * Die Art einer Bestandsbewegung als Sinnbild statt als Wort.
* *
* Kiste mit Pfeil hinein (Einlagern), Kiste mit Pfeil heraus (Auslagern), * Kiste mit Pfeil hinein (Einlagern), Kiste mit Pfeil heraus (Auslagern),
* Stapel mit Stift (Korrektur). Die Kachel traegt dieselbe Bedeutung wie * Stapel mit Stift (Korrektur). Alle drei in derselben Farbe: gruen fuer rein
* frueher die Farbe des Badges gruen rein, orange raus, neutral Korrektur. * und orange fuer raus las sich wie gut und schlecht, dabei ist Auslagern
* schlicht der Normalfall. Unterschieden wird ueber die Pfeilrichtung.
* *
* Titel und aria-label behalten das Wort: fuer Screenreader und fuer alle, die * Titel und aria-label behalten das Wort: fuer Screenreader und fuer alle, die
* ein Sinnbild nicht auf Anhieb lesen. * ein Sinnbild nicht auf Anhieb lesen.
*/ */
const LABEL = { in: "Eingelagert", out: "Ausgelagert", adjust: "Korrektur" }; const LABEL = { in: "Eingelagert", out: "Ausgelagert", adjust: "Korrektur" };
const ICON = { in: "einlagern", out: "auslagern", adjust: "korrektur" }; const ICON = { in: "einlagern", out: "auslagern", adjust: "korrektur" };
const TON = { in: "ein", out: "aus", adjust: "" };
export default function BewegungIcon({ typ, size = 18 }) { export default function BewegungIcon({ typ, size = 18 }) {
const wort = LABEL[typ] || typ; const wort = LABEL[typ] || typ;
return ( return (
<span className={`bewegung-icon ${TON[typ] || ""}`} title={wort} aria-label={wort} role="img"> <span className="bewegung-icon" title={wort} aria-label={wort} role="img">
<Icon name={ICON[typ] || "package"} size={size} /> <Icon name={ICON[typ] || "package"} size={size} />
</span> </span>
); );

View File

@@ -488,16 +488,15 @@ td select { width: auto; min-width: 0; max-width: 100%; }
} }
.badge.accent { background: var(--accent-soft); color: var(--accent); } .badge.accent { background: var(--accent-soft); color: var(--accent); }
/* Verlauf: die Bewegungsart als Sinnbild statt als Wort. Ein gefuelltes Icon /* Verlauf: die Bewegungsart als Sinnbild statt als Wort.
in einer getoenten Kachel die Farbe traegt dieselbe Bedeutung wie vorher BEWUSST fuer alle drei Arten dieselbe Farbe: Gruen fuer Einlagern und Orange
das Badge (gruen rein, orange raus, neutral Korrektur). */ fuer Auslagern las sich wie gut und schlecht, dabei ist Auslagern schlicht
der Normalfall. Die Pfeilrichtung im Icon traegt die Bedeutung. */
.bewegung-icon { .bewegung-icon {
display: inline-flex; align-items: center; justify-content: center; display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto;
background: var(--accent-soft); color: var(--accent); background: var(--accent-soft); color: var(--accent);
} }
.bewegung-icon.ein { background: #e6f4ec; color: var(--ok); }
.bewegung-icon.aus { background: var(--warn-soft); color: var(--warn); }
/* Eine Bewegung als Zeile: Kachel links, Zeitpunkt ueber Produkt. */ /* Eine Bewegung als Zeile: Kachel links, Zeitpunkt ueber Produkt. */
.bewegung-liste { display: flex; flex-direction: column; } .bewegung-liste { display: flex; flex-direction: column; }
@@ -1018,7 +1017,6 @@ select.zeitraum:hover { color: var(--text); }
--shadow: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
} }
.badge.ok { background: #14301f; } .badge.ok { background: #14301f; }
.bewegung-icon.ein { background: #14301f; }
.alert.ok { background: #14301f; border-color: #21503a; } .alert.ok { background: #14301f; border-color: #21503a; }
} }
:root[data-theme="dark"] { :root[data-theme="dark"] {