Radien aus fünf Stufen, Linien, die etwas bedeuten, und Tiefe ohne Schatten – aus Schleier, Kontur und Kippung. Dazu Klebezettel, spielerische Formen und die Anatomie einer Karte.
Die Formen von Hey Albert sind weich und flach. Alles ist Papier auf Papier. Nichts glänzt, nichts wirft Schatten.
Fünf Radien, jeder mit einer Aufgabe. Was keinen Token hat, hat keinen Radius.
--radius-karte16pxKarten und Menüs--radius-klein12pxTagesreiter, kleine Karten--radius-leiste24pxiPhone-Leiste--radius-block22pxMac-Block--radius-pille999pxPillen, Kreise, Knöpfe
Kein freier Radius. Was keinen Token hat, hat keinen Radius.
--radius-karte für Karten, Menüs, Dialoge.
--radius-klein für Tagesreiter und kleine Karten.
--radius-leiste für die iPhone-Leiste, --radius-block für den schwarzen Block der Mac-Leiste.
--radius-pille für Pillen, Kreise und alle Knöpfe. Knöpfe sind bei uns immer rund.
Die Karte ist das Ding, aus dem Heute, Woche und Kalender bestehen. Sie hat immer denselben Aufbau.
Fläche nach Art: Termin --flaeche-karte, Fahrt --flaeche-karte-fahrt, Familie --flaeche-karte-familie, Vorschlag --flaeche-karte-vorschlag mit grauem gestricheltem Rand, Offen mit gestricheltem Rand in Offen-Rosa.
Radius--radius-karte, Polster--karte-innen, Abstand zur nächsten Karte --karte-abstand.
Rand: eine Haarlinie als Platzhalter für die Kontur. Kein Schatten.
Kopf: links das Symbol der Sache im hellen Kreis, rechts die Punkte der Menschen. Dazwischen nichts, kein Menü, kein Pfeil.
Titel in --grad-karten-titel, darunter Zeit und Ort in --grad-zweit.
Pillen für Zustände, zum Beispiel „Kein Fahrer“.
Knöpfe unten, in einer Knopfreihe. Ein Vorschlag hat immer zwei: „Übernehmen“ und „Rückgängig“, oder eine Frage mit zwei Antworten.
Drei Träger an drei Orten: Die Kartenfarbe sagt die Art. Das Symbol sagt die Sache. Die Punkte sagen die Leute.
Die Karte – das Ding, aus dem Heute, Woche und Kalender bestehen. Ein Datenmodell, viele Ansichten.
<Karte art="fahrt" titel="Rückfahrt Auswärtsspiel" ort="Sportplatz Nord → Zuhause"
zeit="14:00 – 14:30" leute={["felix"]} hoehe="hoch"
pillen={<ZustandsPille>Kein Fahrer</ZustandsPille>}
knoepfe={<Knopf>Ich fahre</Knopf>} />
<Karte art="vorschlag" titel="Bei Tobias steht ab 13:00 nichts. Fragen?"
unterzeile="Vorschlag von Albert"
knoepfe={<KarteVorschlagKnoepfe onUebernehmen={…} onZurueck={…} />} />
Register Family Manager, kurz und ruhig. Die Bedeutungen werden nicht getauscht: blau ist Fahrt, gelb ist Familie, gestrichelt rosa heisst "ohne Zuständigen". Ein Vorschlag hat immer zwei Knöpfe – Albert erledigt nie still.
Typen (.d.ts)
/**
* Die Karte in fuenf Arten. Die Farbe sagt die Art, das Symbol die Sache, die Punkte die Leute.
*/
export interface KarteProps {
/** "termin" beige | "fahrt" blau | "familie" gelb | "vorschlag" gestrichelt grau | "offen" gestrichelt rosa. */
art?: "termin" | "fahrt" | "familie" | "vorschlag" | "offen";
/** Kartentitel, ein Gegenstand: "Rückfahrt Auswärtsspiel". */
titel: string;
/** Zweitzeile: Ort oder Bündel-Teile, mit " · " getrennt. */
ort?: React.ReactNode;
/** Zeitspanne als "16:00 – 17:00" (Halbgeviertstrich mit Leerzeichen). */
zeit?: string;
/** Wer dabei ist; der Zustaendige zuerst. */
leute?: string[];
/** Sach-Symbol, wenn es nicht aus der Art folgt: "schule", "sport", "arzt", "musik". */
symbol?: string;
/** "kurz" (78 px) oder "hoch" (132 px) - fuer das Stundenraster. */
hoehe?: "kurz" | "hoch";
/** Zustands- und Fahrt-Pillen. */
pillen?: React.ReactNode;
/** Handlungsknoepfe; bei Vorschlaegen immer zwei. */
knoepfe?: React.ReactNode;
/** Kleine Zeile unter dem Inhalt, z. B. "Vorschlag von Albert". */
unterzeile?: React.ReactNode;
/** Einzeiler fuer Listen: Symbol, Titel, Zeit, Punkt. */
kompakt?: boolean;
klickbar?: boolean;
/** Leicht gekippt, wie ein liegender Klebezettel. */
gekippt?: boolean;
children?: React.ReactNode;
style?: React.CSSProperties;
}
export function Karte(props: KarteProps): JSX.Element;
export function KarteVorschlagKnoepfe(props: { uebernehmen?: string; zurueck?: string; onUebernehmen?: () => void; onZurueck?: () => void }): JSX.Element;
