Verlauf: klarere Bewegungs-Icons, Spalte nach vorn
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:
@@ -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).
|
||||
|
||||
|
||||
@@ -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 `<img src>`: 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'<path[^>]*\sd="([^"]+)"', roh):
|
||||
print(f' <path d="{d}" />')
|
||||
PY
|
||||
```
|
||||
Die Pfaddaten übernimmt man mit einem kurzen Skript, statt sie abzutippen:
|
||||
`viewBox` aus dem `<svg>`-Tag lesen und alle `d="…"` der enthaltenen `<path>`
|
||||
ausgeben. Ein Tippfehler in den Kurvendaten fällt sonst erst am gerenderten
|
||||
Bild auf.
|
||||
|
||||
Reference in New Issue
Block a user