diff --git a/POST-6.md b/POST-6.md
index 492d5f9..682bc35 100644
--- a/POST-6.md
+++ b/POST-6.md
@@ -29,7 +29,7 @@ einem eigenen Knopf. Wie das funktioniert, steht im
| 1 | Team-Chat | Büro und Baustelle, **endlich im selben Chat.** | Kanalliste und Verlauf nebeneinander, mit Filterzeile und Eingabefeld |
| 2 | Die Kanäle | Ein Kanal **pro Projekt.** | Links das Durcheinander als Zeichnung, rechts die Kanalliste |
| 3 | Die Aufgabe | Foto rein, **Aufgabe raus.** | Baustellenfotos, die Aufgabe daraus, die Bestätigung im Projekt |
-| 4 | Das Pluszeichen | Nicht nur **Text.** | Das Menü hinter dem Plus, auf dem Stapel |
+| 4 | Das Pluszeichen | Nicht nur **Text.** | Das Menü über der Eingabezeile, aus der es aufklappt |
| 5 | Bald verfügbar | Der Chat für unterwegs **wird gerade gebaut.** | Zwei Ausschnitte der Oberfläche, versetzt übereinander, mit dem Absperrband darüber |
Dazu, außerhalb des Streifens:
@@ -94,7 +94,7 @@ Quelle ist `components/general/GeneralTeamChatPage.tsx` aus dem Pitch-Paket
| Sinnbild je Kanalsorte (Koffer, Personen, Kürzel) | `ChatAvatar` |
| Kopfzeile „P-2026-0042 · 8 Mitglieder · aktiv" | `ChatHeader` |
| Filterzeile Alle / Projekte / Direkt / Ungelesen | der Typ `ChatFilter` |
-| Das Menü hinter dem Plus, samt Trenner | `Composer` |
+| Das Menü hinter dem Plus, samt Trenner und Reihenfolge | `Composer` (Beschriftungen oben geändert, §4) |
| Eingabefeld „Nachricht schreiben …" | derselbe Ort |
| Farben, Ränder, Plättchentöne | `ui/theme.css` |
| Alle Symbole | `@subframe/core`, Pfade aus dem Paket kopiert |
@@ -179,6 +179,49 @@ Abgelegt als **320 × 320 JPEG** bei Qualität 2. Der Avatar misst 42 px auf der
Slide, bei Renderqualität 3 also 126 — 320 lässt Luft, und JPEG ist für Fotos
das richtige Format; als PNG wäre es das Fünffache. Zusammen 100 KB.
+**Im Menü hinter dem Plus fällt oben das Verb weg.** Im Werkzeug heißen die
+vier oberen Einträge „Dokument senden", „Fotos und Videos senden", „Audio
+senden" und „Kontakt teilen" — viermal ein Wort, das der Ort schon sagt: wer
+das Menü über das Pluszeichen geöffnet hat, weiß, dass er etwas schickt. Hier
+stehen nur die Dinge: **Dokumente, Medien, Audio, Kontakt.** Unten bleibt das
+Verb, weil es dort etwas hinzufügt — „Termin" allein wäre ein Anhang, „Termin
+erstellen" ist eine Handlung.
+
+„Dokument" steht dabei in der Mehrzahl, weil man mehrere anhängen kann; Audio
+und Kontakt bleiben einzeln, man schickt eine Aufnahme und einen Kontakt. Aus
+„Fotos und Videos" wird **„Medien"** — dasselbe in einem Wort.
+
+**Bei „Kontakt" steht jetzt das Teilen-Zeichen statt des Telefonhörers.** Ein
+Hörer sagt „anrufen"; hier wird eine Karte weitergegeben. `ShareNetwork` aus
+demselben Phosphor-bold-Satz wie alle anderen Zeichen, entnommen aus
+`@phosphor-icons/react` im Website-Repo statt abgemalt. `phone` stand danach
+nirgends mehr und ist aus der Tabelle heraus — sie zählt jetzt 19 Zeichen, und
+jedes davon wird benutzt.
+
+**Und die Eingabezeile ist zurück.** Sie stand einmal unter dem Menü und war
+weggenommen worden mit der Begründung, die Slide zeige, was man anhängen kann,
+und dafür brauche es das Feld nicht. Das stimmte nur so lange, wie man wusste,
+worauf man schaut: ohne das Feld ist die Karte eine Liste im Nichts, und dass
+sie aufklappt, wenn man im Chat auf das Pluszeichen tippt, stand nirgends.
+
+Das Pluszeichen trägt jetzt die grüne Marke wie ein gedrücktes Element, und
+der Zeiger steht darauf — derselbe, der im Bewegtbild die Nachricht anklickt.
+Beides zusammen sagt den Zusammenhang, ohne dass ein Wort danebenstehen muss.
+Das Menü öffnet nach oben, weil es das im Werkzeug auch tut.
+
+Mit den kürzeren Beschriftungen kommt die Breite der Karte jetzt aus dem
+längsten Eintrag statt aus einer festen Zahl. Vorher standen dort 470 Einheiten
+— gemessen für Beschriftungen mit „senden" —, und die Karte lief mit einem
+Drittel Leerraum quer über die Slide.
+
+> **Ein hochkantes Bild richtet sich nach der Höhe, nicht nach der Breite.**
+> Der Kasten misst 460 × 535. Bei der alten Breite von 940 px wurde er 1093 px
+> hoch und lief in die Überschrift. Gerechnet wird die neue Breite außerdem am
+> **sichtbaren Blatt** und nicht am Kasten: der ist um den Stapelrand größer
+> als das, was man sieht, und mit seiner Oberkante gerechnet stand die
+> Zeichnung noch einmal 60 px zu hoch und berührte den Fließtext. Bei 680 px
+> bleiben rund 115 px Luft.
+
**Die Plakette für Ungelesenes trägt eine Zahl und ist grün.** In der Quelle
ist `unread` ein Wahrheitswert und der Punkt violett. Beides ist geändert:
violett ist im Produkt die Farbe der Projekte, das Kanalsymbol in derselben
diff --git a/post6.html b/post6.html
index 9f4d527..e1580e0 100644
--- a/post6.html
+++ b/post6.html
@@ -1450,7 +1450,15 @@ if (location.search.indexOf("nur=anim") >= 0)
eyebrow: "Das Pluszeichen",
head: 'Nicht nur
Text.',
body: "Versende mehr als nur Textnachrichten: Dokumente, Fotos, Sprachnachrichten.",
- vis: "menue", visW: 940, visLeft: 70, visBottom: 120,
+ /* Schmaler und hoeher als vorher: die Zeichnung ist kein breites Menue
+ mehr, sondern ein Ausschnitt mit Eingabezeile darunter. Der Kasten
+ misst 460 x 535 -- hochkant, und die Breite richtet sich deshalb nach
+ der Hoehe. Gerechnet ist sie am sichtbaren Blatt und nicht am Kasten:
+ der ist um den Stapelrand groesser als das, was man sieht, und mit
+ seiner Oberkante gerechnet stand die Zeichnung 60 px zu hoch und
+ beruehrte den Fliesstext. Bei 680 px bleiben rund 115 px Luft.
+ Mittig gesetzt, (1080 - 680) / 2 = 200. */
+ vis: "menue", visW: 680, visLeft: 200, visBottom: 120,
},
{
/* Ein Ausblick, kein Beleg. Die App gibt es noch nicht -- deshalb steht
@@ -2062,7 +2070,11 @@ if (location.search.indexOf("nur=anim") >= 0)
"file-text": '',
"image": '',
"mic": '',
- "phone": '',
+ /* Teilen statt Telefonhoerer. Der Eintrag heisst "Kontakt", und ein
+ Hoerer sagt "anrufen" -- hier wird eine Karte weitergegeben, nicht
+ telefoniert. ShareNetwork aus demselben Phosphor-bold-Satz; "phone"
+ stand danach nirgends mehr und ist mit heraus. */
+ "share-network": '',
"calendar": '',
"square-check": '',
"plus": '',
@@ -3205,39 +3217,100 @@ if (location.search.indexOf("nur=anim") >= 0)
}
/* ─── Slide 4 · Was noch in den Chat passt ───────────────────────────────
- Das Menue hinter dem Plus im Eingabefeld, woertlich aus Composer. Der
- Trenner sitzt an derselben Stelle: darueber, was man anhaengt, darunter,
- was man anlegt. Deshalb steht er hier auch. */
+ Das Menue hinter dem Plus im Eingabefeld. Der Trenner sitzt an derselben
+ Stelle wie im Composer: darueber, was man anhaengt, darunter, was man
+ anlegt.
+
+ ZWEI ABWEICHUNGEN VON DER QUELLE, beide der Lesbarkeit wegen.
+
+ Oben faellt das Verb weg. Im Werkzeug heissen die vier Eintraege
+ "Dokument senden", "Fotos und Videos senden", "Audio senden" und
+ "Kontakt teilen" -- viermal ein Wort, das der Ort schon sagt: wer das
+ Menue ueber das Pluszeichen im Eingabefeld geoeffnet hat, weiss, dass er
+ etwas schickt. Hier stehen nur die Dinge. Unten bleibt das Verb, weil es
+ dort etwas hinzufuegt: "Termin" allein waere ein Anhang, "Termin
+ erstellen" ist eine Handlung.
+
+ Und "Dokument" steht in der Mehrzahl, weil man mehrere anhaengen kann.
+ Audio und Kontakt bleiben einzeln -- man schickt eine Aufnahme und einen
+ Kontakt. Aus "Fotos und Videos" wird "Medien": dasselbe in einem Wort,
+ und die Karte wird noch einmal schmaler.
+
+ Das Zeichen bei "Kontakt" ist das Teilen-Zeichen und nicht mehr der
+ Telefonhoerer. Der Hoerer sagt "anrufen"; hier wird eine Karte
+ weitergegeben. */
const MENUE = [
- ["file-text", "Dokument senden"],
- ["image", "Fotos und Videos senden"],
- ["mic", "Audio senden"],
- ["phone", "Kontakt teilen"],
+ ["file-text", "Dokumente"],
+ ["image", "Medien"],
+ ["mic", "Audio"],
+ ["share-network", "Kontakt"],
null,
["calendar", "Termin erstellen"],
["square-check", "Aufgabe erstellen"],
];
function visMenue() {
- const W = 470, ZH = 52, PAD = 14, RAND = 30;
+ const ZH = 52, PAD = 14, RAND = 30, GR = 19;
+ const TX = PAD + 50; // wo der Text im Menue anfaengt
+ const FELD = 76; // Hoehe der Eingabezeile
+ const LUFT = 20; // Abstand zwischen Menue und Feld
+
+ /* Die Breite kommt aus dem laengsten Eintrag statt aus einer festen Zahl.
+ Vorher standen hier 470 -- gemessen fuer Beschriftungen mit "senden",
+ und danach lief die Karte quer ueber die Slide, mit einem Drittel
+ Leerraum rechts. */
+ const breit = Math.max(...MENUE.filter(Boolean).map(e => messen(e[1], GR, 500)));
+ const W = Math.round(TX + breit + 44);
const hoehe = 2 * PAD + MENUE.reduce((a, e) => a + (e ? ZH : 13), 0);
- let g = "";
- let y = PAD + RAND;
+
+ /* Das Blatt ist breiter als das Menue: die Eingabezeile laeuft darunter
+ ueber die ganze Breite, so wie sie es im Fenster tut. */
+ const B = RAND + W + 118, H = RAND + hoehe + LUFT + FELD;
+
+ /* Das Menue als eigene Karte mit eigenem Schatten -- es liegt ueber dem
+ Fenster und nicht darin. */
+ let g = '';
+
+ let y = RAND + PAD;
for (const e of MENUE) {
if (!e) {
- g += '';
y += 13; continue;
}
- g += ikon(e[0], PAD + RAND + 26, y + ZH / 2, 20, CHAT_TEXT2);
- g += uiText(PAD + RAND + 50, y + ZH / 2 + 7, e[1], 19, 500, CHAT_TEXT);
+ g += ikon(e[0], RAND + PAD + 26, y + ZH / 2, 20, CHAT_TEXT2);
+ g += uiText(RAND + PAD + 50, y + ZH / 2 + 7, e[1], GR, 500, CHAT_TEXT);
y += ZH;
}
- /* Unter dem Menue stand einmal das Eingabefeld, an dem es haengt. Es ist
- weg: die Slide zeigt, was man anhaengen kann, und dafuer braucht es
- das Feld nicht. Der Stapel sagt ohnehin, dass hier ein Bildschirm
- liegt und nicht ein Kasten im Nichts. */
- return stapelKasten(W + 2 * RAND, hoehe + 2 * RAND, 20, g);
+
+ /* ── Die Eingabezeile, aus der das Menue kommt ──────────────────────────
+ Sie stand hier einmal und war weggenommen worden: die Slide zeige, was
+ man anhaengen kann, und dafuer brauche es das Feld nicht. Das stimmte
+ nur so lange, wie man wusste, worauf man schaut. Ohne das Feld ist die
+ Karte eine Liste im Nichts -- dass sie aufklappt, wenn man im Chat auf
+ das Pluszeichen tippt, stand nirgends.
+
+ Das Pluszeichen traegt deshalb die gruene Marke wie ein gedruecktes
+ Element, und der Zeiger steht darauf. Beides zusammen sagt, was der
+ Zusammenhang ist, ohne dass ein Wort danebenstehen muss. Das Menue
+ oeffnet nach oben, weil es das im Werkzeug auch tut -- unten waere
+ kein Platz. */
+ const fy = H - FELD, pcx = RAND + 26, pcy = fy + FELD / 2;
+ g += '';
+ g += '';
+ g += ikon("plus", pcx, pcy, 21, MARKE.zeichen);
+ g += '';
+ g += uiText(pcx + 54, pcy + 6, "Nachricht schreiben …", 16, 400, "#C9C9CE");
+ g += ikon("mic", B - RAND - 12, pcy, 21, CHAT_TEXT2);
+ g += zeiger(pcx + 5, pcy + 3, 1.5);
+
+ return stapelKasten(B, H, 20, g);
}