diff --git a/POST-6.md b/POST-6.md index 000ee36..74300f4 100644 --- a/POST-6.md +++ b/POST-6.md @@ -109,6 +109,25 @@ dem Gewerk: Wärmepumpe Müller, Montagetermin, Baustellenfotos. ## 4. Wo bewusst abgewichen wird +**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 +Zeile trägt sie schon, und ein zweites violettes Zeichen daneben konkurriert +damit, statt etwas anderes zu sagen. Ein farbloser Punkt sagt außerdem nur +„da war was", eine Zahl sagt, wie viel — so macht es jeder Messenger, den ein +Betrieb kennt. + +Die Zahlen (3, 2, 1) stehen **nicht** in der Quelle; sie ist an dieser Stelle +binär. Sie sind die einzigen erfundenen Werte im ganzen Post. + +**Die Gruppe trägt zwei überlappende Scheiben und kein Symbol.** In der Quelle +steht dort `FeatherUsers`. Dieses Zwei-Personen-Piktogramm steckt in jeder +zweiten Oberfläche und sieht danach aus. Zwei versetzte Avatare sind das, was +Teams und Linear an derselben Stelle zeigen, und sie sprechen dieselbe Sprache +wie die Kürzelkreise der Direktnachrichten daneben. Ohne Buchstaben, weil die +Mitglieder dieser Gruppe nirgends benannt sind; wie viele es sind, steht in der +Zeile darunter. + **Slide 4 nennt drei der sechs Einträge, nicht alle.** „Versende mehr als nur Textnachrichten: Dokumente, Fotos, Sprachnachrichten." Drei Beispiele sagen, worum es geht; die vollständige Liste steht im Bild daneben. @@ -334,7 +353,7 @@ violett.** Im Original steht dort `bg-surface-neutral-primary` mit Rand und --- -## 6. Siebzehn Fallen aus diesem Bau +## 6. Achtzehn Fallen aus diesem Bau **Die Listenzeile hat drei Zeilen, nicht zwei.** Der erste Anlauf setzte Titel und Vorschau untereinander und schob Nadel und Ungelesen-Punkt rechts neben @@ -462,6 +481,14 @@ nicht, was das Produkt heute kann. Wo eine Aussage der Website (hier: im vorliegenden Code hat, ist das ein Grund nachzufragen und nicht, die Aussage auf den vorhandenen Code zu biegen. +**Ich habe die falsche Slide geprüft.** Nach dem Vergrößern des Ausschnitts auf +Slide 2 lief `kollision.mjs` mit dem Argument `1` — das ist Slide 1. Auf Slide 2 +ragte das hinterste, gedrehte Blatt des Stapels fünf Einheiten unter den Kasten: +`stapelRand()` rechnet den Überstand für die unskalierte Größe, und die +Skalierung vergrößert ihn mit. Der Kasten wird jetzt aus dem skalierten Stapel +gerechnet. Gefunden wurde es erst zwei Commits später, bei einer Prüfung, die +alle fünf Slides durchging. + **Ein `|| 0` an der falschen Stelle verdeckt ein NaN.** Der Abspielen-Knopf tat nichts, sobald man ihn nach dem Laden als Erstes anfasste. `animAbspielen` rechnete `performance.now() - ANIM_T[i] * dauer`, damit die Vorschau dort diff --git a/animation/post6-animChat.mp4 b/animation/post6-animChat.mp4 deleted file mode 100644 index 9a03ec6..0000000 Binary files a/animation/post6-animChat.mp4 and /dev/null differ diff --git a/post6.html b/post6.html index aa0f5aa..5d8e6f1 100644 --- a/post6.html +++ b/post6.html @@ -2611,12 +2611,12 @@ if (location.search.indexOf("nur=anim") >= 0) Direktnachricht das Kuerzel des Menschen -- so macht es ChatAvatar. */ const CHATS = [ { titel: "# waermepumpe-mueller", vorschau: "Tobias: @Michael Fotos sind im Projektordner.", - zeit: "14:32", meta: "P-2026-0042", art: "projekt", ungelesen: true, pin: true, aktiv: true }, + zeit: "14:32", meta: "P-2026-0042", art: "projekt", ungelesen: 3, pin: true, aktiv: true }, { titel: "Sandra Koch", vorschau: "Montagetermin ist mit der Familie abgestimmt.", - zeit: "13:48", meta: "Projektleitung", art: "direkt", ungelesen: true, pin: true, + zeit: "13:48", meta: "Projektleitung", art: "direkt", ungelesen: 2, pin: true, kuerzel: "SK", farbe: "blau" }, { titel: "Angebot_v1.pdf · Rückfrage", vorschau: "Maike: Geprüft und freigegeben.", - zeit: "12:05", meta: "Dokumenten-Thread", art: "projekt", ungelesen: true }, + zeit: "12:05", meta: "Dokumenten-Thread", art: "projekt", ungelesen: 1 }, { titel: "Tobias Wagner", vorschau: "Passt, der Termin steht bei mir.", zeit: "11:26", meta: "Montage", art: "direkt", kuerzel: "TW", farbe: "violett" }, { titel: "Montage Team Süd", vorschau: "Mehmet: Werkzeugliste ist abgeschickt.", @@ -2629,6 +2629,12 @@ if (location.search.indexOf("nur=anim") >= 0) zeit: "25.07.", meta: "Service & Wartung", art: "projekt" }, ]; + /* Gruen statt violett fuer alles Ungelesene: die Plakette und die Uhrzeit + daneben. Violett ist im Produkt die Farbe der Projekte -- das Symbol des + Kanals traegt sie, und ein zweites violettes Zeichen in derselben Zeile + konkurriert damit, statt etwas anderes zu sagen. */ + const UNGELESEN = "#148134"; + const LISTE_B = 372, ZEILE_H = 96; /* Eine Zeile der Chatliste. Drei Zeilen, wie im Original: @@ -2657,12 +2663,30 @@ if (location.search.indexOf("nur=anim") >= 0) '" stroke="' + CHAT_RAND + '" stroke-width="1.2"/>' + uiText(mx + 20, my + 6, c.kuerzel, 15, 800, av.text, { anker: "middle" }); } else { - const projekt = c.art === "projekt"; - g += ''; - g += feather(projekt ? "briefcase" : "users", mx + 20, my, 20, - projekt ? "#691CD4" : CHAT_TEXT3, 1.9); + if (c.art === "projekt") { + g += ''; + g += feather("briefcase", mx + 20, my, 20, "#691CD4", 1.9); + } else { + /* Die Gruppe traegt zwei ueberlappende Scheiben und kein Symbol. Das + Zwei-Personen-Piktogramm aus dem Feather-Satz steckt in jeder + zweiten Oberflaeche und sieht danach aus; zwei versetzte Avatare + sind das, was Teams und Linear an derselben Stelle zeigen, und sie + sprechen dieselbe Sprache wie die Kuerzelkreise der + Direktnachrichten daneben. Ohne Buchstaben, weil wir die Mitglieder + dieser Gruppe nicht kennen -- wie viele es sind, steht in der + Zeile darunter. */ + /* Kontur in der Textfarbe des jeweiligen Avatars, nicht in der + allgemeinen Randfarbe: mit CHAT_RAND verschwammen die beiden + Scheiben bei Listengroesse zu einem Fleck. */ + const a1 = AVATAR.blau, a2 = AVATAR.violett; + g += ''; + g += ''; + g += ''; + } } const tx = mx + 52, rechts = x + LISTE_B - 16, frei = rechts - tx; @@ -2671,13 +2695,20 @@ if (location.search.indexOf("nur=anim") >= 0) g += uiText(tx, y + 30, umbrechen(c.titel, frei - zeitB - 12, 17, 700, 1)[0], 17, 700, CHAT_TEXT); g += uiText(rechts, y + 30, c.zeit, 14, 500, - c.ungelesen ? "#691CD4" : CHAT_TEXT3, { anker: "end" }); + c.ungelesen ? UNGELESEN : CHAT_TEXT3, { anker: "end" }); - // Zeile 2: Vorschau, rechts der Punkt fuer Ungelesenes. - g += uiText(tx, y + 54, umbrechen(c.vorschau, frei - (c.ungelesen ? 22 : 0), 15, 500, 1)[0], + /* Zeile 2: Vorschau, rechts die Plakette. Sie traegt die Zahl der + ungelesenen Nachrichten und ist gruen -- ein farbloser Punkt sagt nur + "da war was", eine Zahl sagt, wie viel. So macht es jeder Messenger, + den ein Betrieb kennt. */ + const zahl = c.ungelesen ? String(c.ungelesen) : ""; + const zb = zahl ? Math.max(22, messen(zahl, 13, 800) + 14) : 0; + g += uiText(tx, y + 54, umbrechen(c.vorschau, frei - (zb ? zb + 8 : 0), 15, 500, 1)[0], 15, 500, c.ungelesen ? CHAT_TEXT : CHAT_TEXT2); - if (c.ungelesen) { - g += ''; + if (zahl) { + g += ''; + g += uiText(rechts - zb / 2, y + 53, zahl, 13, 800, "#FFFFFF", { anker: "middle" }); } // Zeile 3: die Zuordnung, rechts die Nadel. @@ -3072,7 +3103,12 @@ if (location.search.indexOf("nur=anim") >= 0) const LISTE_SKALA = 1.28; const skB = sb * LISTE_SKALA, skH = sh * LISTE_SKALA, skM = m * LISTE_SKALA; const LX = 388; // wo der Kasten der Liste anfaengt - const W = LX + skB + skM, H = 736; + /* Der Kasten muss den skalierten Stapel samt Ueberstand fassen. Mit fest + gesetzten 736 ragte das hinterste, gedrehte Blatt fuenf Einheiten + darunter heraus -- stapelRand() rechnet den Ueberstand fuer die + unskalierte Groesse, und die Skalierung vergroessert ihn mit. */ + const W = LX + skB + skM; + const H = Math.max(736, Math.ceil(skH + 2 * skM + 6)); let g = ""; /* Fest gesetzte Lagen statt gewuerfelter: ein Zufallsgenerator gaebe bei