Symbole: Phosphor statt Feather, im ganzen Post
Der Feather-Satz steckt in so ziemlich jeder Oberflaeche der letzten Jahre; man erkennt ihn sofort wieder, und damit sieht eine Zeichnung aus wie jede andere. Am deutlichsten war das am Gruppensymbol. Phosphor ist dieselbe Familie von Strichsymbolen, nur mit eigener Handschrift: runder, gleichmaessiger, andere Metaphern (UsersThree statt Users, PaperPlaneRight statt Send, CaretDown statt ChevronDown). Es ist dasselbe Paket, das die Website benutzt -- @phosphor-icons/react steht neben lucide-react in ihrer package.json -- also keine dritte Handschrift im Haus. Die 19 Pfade sind direkt aus dem installierten Paket gezogen und nicht abgeschrieben: Gewichtung bold, Zeichenflaeche 256 x 256. Regular war neben dem Text zu leicht. Anders als bei Feather sind es gefuellte Formen, ikon() faerbt deshalb ueber fill statt ueber stroke; der Parameter fuer die Strichstaerke faellt weg. FEATHER und feather() sind raus. Der vorige Versuch tauschte nur das eine Gruppensymbol gegen zwei ueberlappende Scheiben. Das war keine Antwort auf die Frage: die Frage war der Satz, nicht das einzelne Zeichen. Nebenbei: anhangKarte() und uiKachel() hatten einen Parameter namens "ikon" und verdeckten damit die neue Funktion. Heisst jetzt "zeichen". Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
dejanandClaude Opus 5 committed
1 parent
6a7cdc1580
commit
35ad9cc104
4 files changed
+94
-121
No files matched your search
@@ -120,13 +120,27 @@ 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.
|
||||
**Die Symbole kommen aus Phosphor, nicht aus Feather.** Der Feather-Satz
|
||||
steckt in so ziemlich jeder Oberfläche der letzten Jahre; man erkennt ihn
|
||||
sofort wieder, und damit sieht eine Zeichnung aus wie jede andere. Am
|
||||
deutlichsten war das am Gruppensymbol — zwei Köpfe nebeneinander, das
|
||||
Piktogramm schlechthin.
|
||||
|
||||
Phosphor ist dieselbe Familie von Strichsymbolen, nur mit eigener Handschrift:
|
||||
runder, gleichmäßiger, andere Metaphern (`UsersThree` statt `Users`,
|
||||
`PaperPlaneRight` statt `Send`, `CaretDown` statt `ChevronDown`). Es ist
|
||||
dasselbe Paket, das die Website benutzt — `@phosphor-icons/react` steht neben
|
||||
`lucide-react` in ihrer `package.json` — also keine dritte Handschrift im Haus.
|
||||
|
||||
Die Pfade sind **direkt aus dem installierten Paket gezogen**, nicht
|
||||
abgeschrieben: Gewichtung `bold`, Zeichenfläche 256 × 256. Regular war neben
|
||||
dem Text zu leicht, bold trifft die Strichstärke, die vorher dastand. Anders
|
||||
als bei Feather sind es gefüllte Formen und keine Striche, `ikon()` färbt
|
||||
deshalb über `fill` statt über `stroke`.
|
||||
|
||||
Ein Zwischenstand ersetzte nur das eine Gruppensymbol durch zwei überlappende
|
||||
Scheiben. Das war keine Antwort auf die Frage: die Frage war der Satz, nicht
|
||||
das einzelne Zeichen.
|
||||
|
||||
**Slide 4 nennt drei der sechs Einträge, nicht alle.** „Versende mehr als nur
|
||||
Textnachrichten: Dokumente, Fotos, Sprachnachrichten." Drei Beispiele sagen,
|
||||
|
||||
Binary file not shown.
+72
-113
@@ -2022,79 +2022,56 @@ if (location.search.indexOf("nur=anim") >= 0)
|
||||
sind beachtet -- die Zahlen standen als x1={6} ohne Anfuehrungszeichen da,
|
||||
und der <svg>-Rahmen muss weg, sonst rendert ein einkindriges Zeichen
|
||||
nicht. */
|
||||
const FEATHER = {
|
||||
"hard-hat": "<path d=\"M10 10V5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v5\"/> <path d=\"M14 6a6 6 0 0 1 6 6v3\"/> <path d=\"M4 15v-3a6 6 0 0 1 6-6\"/> <rect x=\"2\" y=\"15\" width=\"20\" height=\"4\" rx=\"1\"/>",
|
||||
"building": "<rect width=\"16\" height=\"20\" x=\"4\" y=\"2\" rx=\"2\"/> <path d=\"M9 22v-4h6v4\"/> <path d=\"M8 6h.01\"/> <path d=\"M16 6h.01\"/> <path d=\"M12 6h.01\"/> <path d=\"M12 10h.01\"/> <path d=\"M12 14h.01\"/> <path d=\"M16 10h.01\"/> <path d=\"M16 14h.01\"/> <path d=\"M8 10h.01\"/> <path d=\"M8 14h.01\"/>",
|
||||
"briefcase": "<rect width=\"20\" height=\"14\" x=\"2\" y=\"7\" rx=\"2\" ry=\"2\"/> <path d=\"M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16\"/>",
|
||||
"folder-open": "<path d=\"m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2\"/>",
|
||||
"mic": "<path d=\"M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z\"/> <path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/> <line x1=\"12\" x2=\"12\" y1=\"19\" y2=\"22\"/>",
|
||||
"paperclip": "<path d=\"m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48\"/>",
|
||||
"phone": "<path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z\"/>",
|
||||
"pin": "<line x1=\"12\" x2=\"12\" y1=\"17\" y2=\"22\"/> <path d=\"M5 17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1v4.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24Z\"/>",
|
||||
"plus": "<path d=\"M5 12h14\"/> <path d=\"M12 5v14\"/>",
|
||||
"send": "<path d=\"m22 2-7 20-4-9-9-4Z\"/> <path d=\"M22 2 11 13\"/>",
|
||||
"tags": "<path d=\"M9 5H2v7l6.29 6.29c.94.94 2.48.94 3.42 0l3.58-3.58c.94-.94.94-2.48 0-3.42L9 5Z\"/> <path d=\"M6 9.01V9\"/> <path d=\"m15 5 6.3 6.3a2.4 2.4 0 0 1 0 3.4L17 19\"/>",
|
||||
"euro": "<path d=\"M4 10h12\"/> <path d=\"M4 14h9\"/> <path d=\"M19 6a7.7 7.7 0 0 0-5.2-2A7.9 7.9 0 0 0 6 12c0 4.4 3.5 8 7.8 8 2 0 3.8-.8 5.2-2\"/>",
|
||||
"calendar": "<rect width=\"18\" height=\"18\" x=\"3\" y=\"4\" rx=\"2\" ry=\"2\"/> <line x1=\"16\" x2=\"16\" y1=\"2\" y2=\"6\"/> <line x1=\"8\" x2=\"8\" y1=\"2\" y2=\"6\"/> <line x1=\"3\" x2=\"21\" y1=\"10\" y2=\"10\"/>",
|
||||
"hash": "<line x1=\"4\" x2=\"20\" y1=\"9\" y2=\"9\"/> <line x1=\"4\" x2=\"20\" y1=\"15\" y2=\"15\"/> <line x1=\"10\" x2=\"8\" y1=\"3\" y2=\"21\"/> <line x1=\"16\" x2=\"14\" y1=\"3\" y2=\"21\"/>",
|
||||
"circle-dot": "<circle cx=\"12\" cy=\"12\" r=\"10\"/> <circle cx=\"12\" cy=\"12\" r=\"1\"/>",
|
||||
"coins": "<circle cx=\"8\" cy=\"8\" r=\"6\"/> <path d=\"M18.09 10.37A6 6 0 1 1 10.34 18\"/> <path d=\"M7 6h1v4\"/> <path d=\"m16.71 13.88.7.71-2.82 2.82\"/>",
|
||||
"kanban-square": "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"/> <path d=\"M8 7v7\"/> <path d=\"M12 7v4\"/> <path d=\"M16 7v9\"/>",
|
||||
"lock": "<rect width=\"18\" height=\"11\" x=\"3\" y=\"11\" rx=\"2\" ry=\"2\"/> <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"/>",
|
||||
"play-circle": "<circle cx=\"12\" cy=\"12\" r=\"10\"/> <polygon points=\"10 8 16 12 10 16 10 8\"/>",
|
||||
"flag": "<path d=\"M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z\"/> <line x1=\"4\" x2=\"4\" y1=\"22\" y2=\"15\"/>",
|
||||
"clock": "<circle cx=\"12\" cy=\"12\" r=\"10\"/> <polyline points=\"12 6 12 12 16 14\"/>",
|
||||
"git-pull-request": "<circle cx=\"18\" cy=\"18\" r=\"3\"/> <circle cx=\"6\" cy=\"6\" r=\"3\"/> <path d=\"M13 6h3a2 2 0 0 1 2 2v7\"/> <line x1=\"6\" x2=\"6\" y1=\"9\" y2=\"21\"/>",
|
||||
"git-merge": "<circle cx=\"18\" cy=\"18\" r=\"3\"/> <circle cx=\"6\" cy=\"6\" r=\"3\"/> <path d=\"M6 21V9a9 9 0 0 0 9 9\"/>",
|
||||
"signpost": "<path d=\"M12 3v3\"/> <path d=\"M18.5 13h-13L2 9.5 5.5 6h13L22 9.5Z\"/> <path d=\"M12 13v8\"/>",
|
||||
"variable": "<path d=\"M8 21s-4-3-4-9 4-9 4-9\"/> <path d=\"M16 3s4 3 4 9-4 9-4 9\"/> <line x1=\"15\" x2=\"9\" y1=\"9\" y2=\"15\"/> <line x1=\"9\" x2=\"15\" y1=\"9\" y2=\"15\"/>",
|
||||
"square-check": "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"/> <path d=\"m9 12 2 2 4-4\"/>",
|
||||
"user-pen": "<path d=\"M11.5 15H7a4 4 0 0 0-4 4v2\"/> <path d=\"M21.378 16.626a1 1 0 0 0-3.004-3.004l-4.01 4.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z\"/> <circle cx=\"10\" cy=\"7\" r=\"4\"/>",
|
||||
"inbox": "<polyline points=\"22 12 16 12 14 15 10 15 8 12 2 12\"/> <path d=\"M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z\"/>",
|
||||
"bell-ring": "<path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9\"/> <path d=\"M10.3 21a1.94 1.94 0 0 0 3.4 0\"/> <path d=\"M4 2C2.8 3.7 2 5.7 2 8\"/> <path d=\"M22 8c0-2.3-.8-4.3-2-6\"/>",
|
||||
"git-branch": "<line x1=\"6\" x2=\"6\" y1=\"3\" y2=\"15\"/> <circle cx=\"18\" cy=\"6\" r=\"3\"/> <circle cx=\"6\" cy=\"18\" r=\"3\"/> <path d=\"M18 9a9 9 0 0 1-9 9\"/>",
|
||||
"timer": "<line x1=\"10\" x2=\"14\" y1=\"2\" y2=\"2\"/> <line x1=\"12\" x2=\"15\" y1=\"14\" y2=\"11\"/> <circle cx=\"12\" cy=\"14\" r=\"8\"/>",
|
||||
"calendar-clock": "<path d=\"M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5\"/> <path d=\"M16 2v4\"/> <path d=\"M8 2v4\"/> <path d=\"M3 10h5\"/> <path d=\"M17.5 17.5 16 16.25V14\"/> <path d=\"M22 16a6 6 0 1 1-12 0 6 6 0 0 1 12 0Z\"/>",
|
||||
"credit-card": "<rect width=\"20\" height=\"14\" x=\"2\" y=\"5\" rx=\"2\"/> <line x1=\"2\" x2=\"22\" y1=\"10\" y2=\"10\"/>",
|
||||
"repeat": "<path d=\"m17 2 4 4-4 4\"/> <path d=\"M3 11v-1a4 4 0 0 1 4-4h14\"/> <path d=\"m7 22-4-4 4-4\"/> <path d=\"M21 13v1a4 4 0 0 1-4 4H3\"/>",
|
||||
"user-check": "<path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"/> <circle cx=\"9\" cy=\"7\" r=\"4\"/> <polyline points=\"16 11 18 13 22 9\"/>",
|
||||
"alert-triangle": '<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/>',
|
||||
"check": '<polyline points="20 6 9 17 4 12"/>',
|
||||
"clipboard-list": '<rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="M12 11h4"/><path d="M12 16h4"/><path d="M8 11h.01"/><path d="M8 16h.01"/>',
|
||||
"columns-3": '<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/><path d="M15 3v18"/>',
|
||||
"file-text": '<path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/><line x1="16" x2="8" y1="13" y2="13"/><line x1="16" x2="8" y1="17" y2="17"/><line x1="10" x2="8" y1="9" y2="9"/>',
|
||||
"filter": '<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/>',
|
||||
"folder": '<path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/>',
|
||||
"image": '<rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>',
|
||||
"mail": '<rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/>',
|
||||
"megaphone": '<path d="m3 11 18-5v12L3 14v-3z"/><path d="M11.6 16.8a3 3 0 1 1-5.8-1.6"/>',
|
||||
"message-square": '<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>',
|
||||
"smartphone": '<rect width="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/>',
|
||||
"sparkles": '<path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/><path d="M5 3v4"/><path d="M19 17v4"/><path d="M3 5h4"/><path d="M17 19h4"/>',
|
||||
"sticky-note": '<path d="M15.5 3H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2V8.5L15.5 3Z"/><path d="M15 3v6h6"/>',
|
||||
"table": '<path d="M12 3v18"/><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/>',
|
||||
"user": '<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>',
|
||||
"users": '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
|
||||
"workflow": '<rect width="8" height="8" x="3" y="3" rx="2"/><path d="M7 11v4a2 2 0 0 0 2 2h4"/><rect width="8" height="8" x="13" y="13" rx="2"/>',
|
||||
"x": '<path d="M18 6 6 18"/><path d="m6 6 12 12"/>',
|
||||
"zap": '<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>',
|
||||
/* Fuer das Menue an der Nachricht, aus dem laufenden Team-Chat. */
|
||||
"thumbs-up": '<path d="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"/>',
|
||||
"corner-up-left": '<polyline points="9 14 4 9 9 4"/><path d="M20 20v-7a4 4 0 0 0-4-4H4"/>',
|
||||
"pencil": '<path d="M21.2 6.8a1 1 0 0 0-4-4L3.8 16.2a2 2 0 0 0-.5.8l-1.3 4.4a.5.5 0 0 0 .6.6l4.4-1.3a2 2 0 0 0 .8-.5z"/><path d="m15 5 4 4"/>',
|
||||
"trash-2": '<path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><path d="M10 11v6"/><path d="M14 11v6"/>',
|
||||
"chevron-down": '<path d="m6 9 6 6 6-6"/>',
|
||||
"rocket": '<path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/>'
|
||||
|
||||
/* ─── Symbole ────────────────────────────────────────────────────────────
|
||||
Phosphor, nicht Feather. Der Feather-Satz steckt in so ziemlich jeder
|
||||
Oberflaeche, die in den letzten Jahren entstanden ist -- man erkennt ihn
|
||||
sofort wieder, und damit sieht eine Zeichnung aus wie jede andere. Am
|
||||
deutlichsten war das am Gruppensymbol: zwei Koepfe nebeneinander, das
|
||||
Piktogramm schlechthin.
|
||||
|
||||
Phosphor ist dieselbe Familie von Strichsymbolen, nur mit eigener
|
||||
Handschrift: runder, gleichmaessiger, andere Metaphern (UsersThree statt
|
||||
Users, PaperPlaneRight statt Send, CaretDown statt ChevronDown). Es ist
|
||||
dasselbe Paket, das die Website benutzt (@phosphor-icons/react neben
|
||||
lucide-react in ihrer package.json), also keine dritte Handschrift im
|
||||
Haus.
|
||||
|
||||
Die Pfade sind direkt aus dem installierten Paket gezogen und nicht
|
||||
abgeschrieben: Gewichtung "regular", Zeichenflaeche 256 x 256. Anders als
|
||||
bei Feather sind es gefuellte Formen und keine Striche -- die Strichdicke
|
||||
steckt in der Form. ikon() faerbt deshalb ueber fill und nicht ueber
|
||||
stroke, und der Parameter fuer die Staerke faellt weg. */
|
||||
const IKON = {
|
||||
"briefcase": '<path d="M100,100a12,12,0,0,1,12-12h32a12,12,0,0,1,0,24H112A12,12,0,0,1,100,100ZM236,68V196a20,20,0,0,1-20,20H40a20,20,0,0,1-20-20V68A20,20,0,0,1,40,48H76V40a28,28,0,0,1,28-28h48a28,28,0,0,1,28,28v8h36A20,20,0,0,1,236,68ZM100,48h56V40a4,4,0,0,0-4-4H104a4,4,0,0,0-4,4ZM44,72v35.23A180.06,180.06,0,0,0,128,128a180,180,0,0,0,84-20.78V72ZM212,192V133.94A204.27,204.27,0,0,1,128,152a204.21,204.21,0,0,1-84-18.06V192Z"/>',
|
||||
"users": '<path d="M164.38,181.1a52,52,0,1,0-72.76,0,75.89,75.89,0,0,0-30,28.89,12,12,0,0,0,20.78,12,53,53,0,0,1,91.22,0,12,12,0,1,0,20.78-12A75.89,75.89,0,0,0,164.38,181.1ZM100,144a28,28,0,1,1,28,28A28,28,0,0,1,100,144Zm147.21,9.59a12,12,0,0,1-16.81-2.39c-8.33-11.09-19.85-19.59-29.33-21.64a12,12,0,0,1-1.82-22.91,20,20,0,1,0-24.78-28.3,12,12,0,1,1-21-11.6,44,44,0,1,1,73.28,48.35,92.18,92.18,0,0,1,22.85,21.69A12,12,0,0,1,247.21,153.59Zm-192.28-24c-9.48,2.05-21,10.55-29.33,21.65A12,12,0,0,1,6.41,136.79,92.37,92.37,0,0,1,29.26,115.1a44,44,0,1,1,73.28-48.35,12,12,0,1,1-21,11.6,20,20,0,1,0-24.78,28.3,12,12,0,0,1-1.82,22.91Z"/>',
|
||||
"pin": '<path d="M238.15,78.54,177.46,17.86a20,20,0,0,0-28.3,0L97.2,70c-12.43-3.33-36.68-5.72-61.74,14.5a20,20,0,0,0-1.6,29.73l45.46,45.47-39.8,39.8a12,12,0,0,0,17,17l39.8-39.81,45.47,45.46A20,20,0,0,0,155.91,228c.46,0,.93,0,1.4-.05A20,20,0,0,0,171.87,220c4.69-6.23,11-16.13,14.44-28s3.45-22.88.16-33.4l51.7-51.87A20,20,0,0,0,238.15,78.54Zm-74.26,68.79a12,12,0,0,0-2.23,13.84c3.43,6.86,6.9,21-6.28,40.65L54.08,100.53c21.09-14.59,39.53-6.64,41-6a11.67,11.67,0,0,0,13.81-2.29l54.43-54.61,55,55Z"/>',
|
||||
"file-text": '<path d="M216.49,79.52l-56-56A12,12,0,0,0,152,20H56A20,20,0,0,0,36,40V216a20,20,0,0,0,20,20H200a20,20,0,0,0,20-20V88A12,12,0,0,0,216.49,79.52ZM160,57l23,23H160ZM60,212V44h76V92a12,12,0,0,0,12,12h48V212Zm112-80a12,12,0,0,1-12,12H96a12,12,0,0,1,0-24h64A12,12,0,0,1,172,132Zm0,40a12,12,0,0,1-12,12H96a12,12,0,0,1,0-24h64A12,12,0,0,1,172,172Z"/>',
|
||||
"image": '<path d="M144,96a16,16,0,1,1,16,16A16,16,0,0,1,144,96Zm92-40V200a20,20,0,0,1-20,20H40a20,20,0,0,1-20-20V56A20,20,0,0,1,40,36H216A20,20,0,0,1,236,56ZM44,60v79.72l33.86-33.86a20,20,0,0,1,28.28,0L147.31,147l17.18-17.17a20,20,0,0,1,28.28,0L212,149.09V60Zm0,136H162.34L92,125.66l-48,48Zm168,0V183l-33.37-33.37L164.28,164l32,32Z"/>',
|
||||
"mic": '<path d="M128,180a52.06,52.06,0,0,0,52-52V64A52,52,0,0,0,76,64v64A52.06,52.06,0,0,0,128,180ZM100,64a28,28,0,0,1,56,0v64a28,28,0,0,1-56,0Zm40,155.22V240a12,12,0,0,1-24,0V219.22A92.14,92.14,0,0,1,36,128a12,12,0,0,1,24,0,68,68,0,0,0,136,0,12,12,0,0,1,24,0A92.14,92.14,0,0,1,140,219.22Z"/>',
|
||||
"phone": '<path d="M224,154.8l-47.09-21.11-.18-.08a19.94,19.94,0,0,0-19,1.75,13.08,13.08,0,0,0-1.12.84l-22.31,19c-13-7.05-26.43-20.37-33.49-33.21l19.06-22.66a11.76,11.76,0,0,0,.85-1.15,20,20,0,0,0,1.66-18.83,1.42,1.42,0,0,1-.08-.18L101.2,32A20.06,20.06,0,0,0,80.42,20.15,60.27,60.27,0,0,0,28,80c0,81.61,66.39,148,148,148a60.27,60.27,0,0,0,59.85-52.42A20.06,20.06,0,0,0,224,154.8ZM176,204A124.15,124.15,0,0,1,52,80,36.29,36.29,0,0,1,80.48,44.46l18.82,42L80.14,109.28a12,12,0,0,0-.86,1.16A20,20,0,0,0,78,130.08c9.42,19.28,28.83,38.56,48.31,48A20,20,0,0,0,146,176.63a11.63,11.63,0,0,0,1.11-.85l22.43-19.07,42,18.81A36.29,36.29,0,0,1,176,204Z"/>',
|
||||
"calendar": '<path d="M208,28H188V24a12,12,0,0,0-24,0v4H92V24a12,12,0,0,0-24,0v4H48A20,20,0,0,0,28,48V208a20,20,0,0,0,20,20H208a20,20,0,0,0,20-20V48A20,20,0,0,0,208,28ZM68,52a12,12,0,0,0,24,0h72a12,12,0,0,0,24,0h16V76H52V52ZM52,204V100H204V204Z"/>',
|
||||
"square-check": '<path d="M79.51,144.49a12,12,0,1,1,17-17L112,143l47.51-47.52a12,12,0,0,1,17,17l-56,56a12,12,0,0,1-17,0ZM228,48V208a20,20,0,0,1-20,20H48a20,20,0,0,1-20-20V48A20,20,0,0,1,48,28H208A20,20,0,0,1,228,48Zm-24,4H52V204H204Z"/>',
|
||||
"plus": '<path d="M228,128a12,12,0,0,1-12,12H140v76a12,12,0,0,1-24,0V140H40a12,12,0,0,1,0-24h76V40a12,12,0,0,1,24,0v76h76A12,12,0,0,1,228,128Z"/>',
|
||||
"send": '<path d="M233.86,110.48,65.8,14.58A20,20,0,0,0,37.15,38.64L67.33,128,37.15,217.36A20,20,0,0,0,56,244a20.1,20.1,0,0,0,9.81-2.58l.09-.06,168-96.07a20,20,0,0,0,0-34.81ZM63.19,215.26,88.61,140H144a12,12,0,0,0,0-24H88.61L63.18,40.72l152.76,87.17Z"/>',
|
||||
"message-square": '<path d="M120,128a16,16,0,1,1-16-16A16,16,0,0,1,120,128Zm32-16a16,16,0,1,0,16,16A16,16,0,0,0,152,112Zm84,16A108,108,0,0,1,78.77,224.15L46.34,235A20,20,0,0,1,21,209.66l10.81-32.43A108,108,0,1,1,236,128Zm-24,0A84,84,0,1,0,55.27,170.06a12,12,0,0,1,1,9.81l-9.93,29.79,29.79-9.93a12.1,12.1,0,0,1,3.8-.62,12,12,0,0,1,6,1.62A84,84,0,0,0,212,128Z"/>',
|
||||
"chevron-down": '<path d="M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z"/>',
|
||||
"thumbs-up": '<path d="M237,77.47A28,28,0,0,0,216,68H164V56a44.05,44.05,0,0,0-44-44,12,12,0,0,0-10.73,6.63L72.58,92H32a20,20,0,0,0-20,20v88a20,20,0,0,0,20,20H204a28,28,0,0,0,27.78-24.53l12-96A28,28,0,0,0,237,77.47ZM36,116H68v80H36ZM220,96.5l-12,96a4,4,0,0,1-4,3.5H92V106.83L126.82,37.2A20,20,0,0,1,140,56V80a12,12,0,0,0,12,12h64a4,4,0,0,1,4,4.5Z"/>',
|
||||
"corner-up-left": '<path d="M236,200a12,12,0,0,1-24,0,84.09,84.09,0,0,0-84-84H61l27.52,27.51a12,12,0,0,1-17,17l-48-48a12,12,0,0,1,0-17l48-48a12,12,0,0,1,17,17L61,92h67A108.12,108.12,0,0,1,236,200Z"/>',
|
||||
"pencil": '<path d="M230.14,70.54,185.46,25.85a20,20,0,0,0-28.29,0L33.86,149.17A19.85,19.85,0,0,0,28,163.31V208a20,20,0,0,0,20,20H92.69a19.86,19.86,0,0,0,14.14-5.86L230.14,98.82a20,20,0,0,0,0-28.28ZM91,204H52V165l84-84,39,39ZM192,103,153,64l18.34-18.34,39,39Z"/>',
|
||||
"trash-2": '<path d="M216,48H180V36A28,28,0,0,0,152,8H104A28,28,0,0,0,76,36V48H40a12,12,0,0,0,0,24h4V208a20,20,0,0,0,20,20H192a20,20,0,0,0,20-20V72h4a12,12,0,0,0,0-24ZM100,36a4,4,0,0,1,4-4h48a4,4,0,0,1,4,4V48H100Zm88,168H68V72H188ZM116,104v64a12,12,0,0,1-24,0V104a12,12,0,0,1,24,0Zm48,0v64a12,12,0,0,1-24,0V104a12,12,0,0,1,24,0Z"/>',
|
||||
"hard-hat": '<path d="M228,148.4V136a100.41,100.41,0,0,0-64-93.3V40a20,20,0,0,0-20-20H112A20,20,0,0,0,92,40v2.7A100.41,100.41,0,0,0,28,136v12.4A20,20,0,0,0,12,168v24a20,20,0,0,0,20,20H224a20,20,0,0,0,20-20V168A20,20,0,0,0,228,148.4ZM204,136v12H164V69.07A76.35,76.35,0,0,1,204,136ZM140,44V148H116V44ZM92,69.07V148H52V136A76.35,76.35,0,0,1,92,69.07ZM220,188H36V172H220Z"/>',
|
||||
"check": '<path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/>',
|
||||
};
|
||||
|
||||
function feather(name, cx, cy, groesse, farbe, staerke) {
|
||||
const s = groesse / 24;
|
||||
function ikon(name, cx, cy, groesse, farbe) {
|
||||
const s = groesse / 256;
|
||||
return '<g transform="translate(' + n1(cx - groesse / 2) + ',' + n1(cy - groesse / 2) +
|
||||
') scale(' + n1(s) + ')" fill="none" stroke="' + farbe + '" stroke-width="' +
|
||||
n1((staerke == null ? 2 : staerke) / s) +
|
||||
'" stroke-linecap="round" stroke-linejoin="round">' + FEATHER[name] + '</g>';
|
||||
') scale(' + (Math.round(s * 100000) / 100000) + ')" fill="' + farbe + '">' +
|
||||
(IKON[name] || "") + '</g>';
|
||||
}
|
||||
|
||||
|
||||
/* ═══ Die Bausteine des Workflow-Editors ═══════════════════════════════════
|
||||
Nachbau aus ui/components/NodeWorkflowEngine/NodeWorkflowEngine.tsx des
|
||||
Pitch-Pakets, so wie der Notizzettel in rules.md 6 aus StickyNote.tsx
|
||||
@@ -2205,10 +2182,10 @@ if (location.search.indexOf("nur=anim") >= 0)
|
||||
}
|
||||
|
||||
/* Eine Kachel mit Zeichen, wie sie im Produkt vor jeder Zeile steht. */
|
||||
function uiKachel(x, y, s, ikon, farbe, grund) {
|
||||
function uiKachel(x, y, s, zeichen, farbe, grund) {
|
||||
return '<rect x="' + n1(x) + '" y="' + n1(y) + '" width="' + s + '" height="' + s +
|
||||
'" rx="' + n1(s * 0.26) + '" fill="' + grund + '"/>' +
|
||||
feather(ikon, x + s / 2, y + s / 2, s * 0.52, farbe, 2.1);
|
||||
ikon(zeichen, x + s / 2, y + s / 2, s * 0.52, farbe);
|
||||
}
|
||||
|
||||
const uiText = (x, y, t, gr, gew, farbe, o) => {
|
||||
@@ -2663,30 +2640,12 @@ 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 {
|
||||
if (c.art === "projekt") {
|
||||
g += '<rect x="' + n1(mx) + '" y="' + n1(my - 20) + '" width="40" height="40" rx="11" ' +
|
||||
'fill="#F0E7FF" stroke="#e4d4ff" stroke-width="1.2"/>';
|
||||
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 += '<circle cx="' + n1(mx + 13) + '" cy="' + n1(my - 7) + '" r="13" fill="' +
|
||||
a1.flaeche + '" stroke="' + a1.text + '" stroke-width="1.4" opacity=".9"/>';
|
||||
g += '<circle cx="' + n1(mx + 27) + '" cy="' + n1(my + 7) + '" r="14.6" ' +
|
||||
'fill="#FFFFFF"/>';
|
||||
g += '<circle cx="' + n1(mx + 27) + '" cy="' + n1(my + 7) + '" r="13" fill="' +
|
||||
a2.flaeche + '" stroke="' + a2.text + '" stroke-width="1.4" opacity=".9"/>';
|
||||
}
|
||||
const projekt = c.art === "projekt";
|
||||
g += '<rect x="' + n1(mx) + '" y="' + n1(my - 20) + '" width="40" height="40" rx="11" fill="' +
|
||||
(projekt ? "#F0E7FF" : "#FAFAFA") + '" stroke="' + (projekt ? "#e4d4ff" : CHAT_RAND) +
|
||||
'" stroke-width="1.2"/>';
|
||||
g += ikon(projekt ? "briefcase" : "users", mx + 20, my, 21,
|
||||
projekt ? "#691CD4" : CHAT_TEXT3);
|
||||
}
|
||||
const tx = mx + 52, rechts = x + LISTE_B - 16, frei = rechts - tx;
|
||||
|
||||
@@ -2713,7 +2672,7 @@ if (location.search.indexOf("nur=anim") >= 0)
|
||||
|
||||
// Zeile 3: die Zuordnung, rechts die Nadel.
|
||||
g += uiText(tx, y + 76, c.meta, 13, 500, "#9C9CA3");
|
||||
if (c.pin) g += feather("pin", rechts - 7, y + 71, 13, "#9C9CA3", 1.8);
|
||||
if (c.pin) g += ikon("pin", rechts - 7, y + 71, 13, "#9C9CA3");
|
||||
return g;
|
||||
}
|
||||
|
||||
@@ -2742,14 +2701,14 @@ if (location.search.indexOf("nur=anim") >= 0)
|
||||
umbrechen(a[1], b - 62 - (a[3] ? messen(a[3], 13, 800) + 26 : 0), 15, 600, 2);
|
||||
const anhangHoehe = (a, b) => 54 + (anhangZeilen(a, b).length - 1) * 20;
|
||||
|
||||
function anhangKarte(x, y, b, ikon, titel, meta, marke) {
|
||||
const zeilen = anhangZeilen([ikon, titel, meta, marke], b);
|
||||
function anhangKarte(x, y, b, zeichen, titel, meta, marke) {
|
||||
const zeilen = anhangZeilen([zeichen, titel, meta, marke], b);
|
||||
const h = 54 + (zeilen.length - 1) * 20;
|
||||
let g = '<rect x="' + n1(x) + '" y="' + n1(y) + '" width="' + n1(b) + '" height="' + h +
|
||||
'" rx="9" fill="' + FL_KARTE + '" stroke="' + CHAT_RAND + '" stroke-width="1.2"/>';
|
||||
g += '<rect x="' + n1(x + 10) + '" y="' + n1(y + 11) + '" width="32" height="32" rx="8" ' +
|
||||
'fill="' + FL_SPALTE + '" stroke="' + CHAT_RAND + '" stroke-width="1.1"/>';
|
||||
g += feather(ikon, x + 26, y + 27, 17, CHAT_TEXT2, 1.9);
|
||||
g += ikon(zeichen, x + 26, y + 27, 17, CHAT_TEXT2);
|
||||
zeilen.forEach((z, i) => {
|
||||
g += uiText(x + 52, y + 24 + i * 20, z, 15, 600, CHAT_TEXT);
|
||||
});
|
||||
@@ -2798,7 +2757,7 @@ if (location.search.indexOf("nur=anim") >= 0)
|
||||
const tb = messen(z, 15, 500);
|
||||
const versatz = i === 0 ? 12 : 0;
|
||||
g += uiText(mx + versatz, y + 18 + i * 20, z, 15, 500, CHAT_TEXT3, { anker: "middle" });
|
||||
if (i === 0) g += feather("square-check", mx - tb / 2 - 4, y + 12, 16, "#148134", 2);
|
||||
if (i === 0) g += ikon("square-check", mx - tb / 2 - 4, y + 12, 16, "#148134");
|
||||
});
|
||||
return g;
|
||||
}
|
||||
@@ -2998,7 +2957,7 @@ if (location.search.indexOf("nur=anim") >= 0)
|
||||
// Die Kopfzeile des offenen Kanals, wie in ChatHeader.
|
||||
g += '<rect x="' + n1(kx) + '" y="0" width="40" height="40" rx="11" fill="#F0E7FF" ' +
|
||||
'stroke="#e4d4ff" stroke-width="1.2"/>';
|
||||
g += feather("briefcase", kx + 20, 20, 20, "#691CD4", 1.9);
|
||||
g += ikon("briefcase", kx + 20, 20, 20, "#691CD4");
|
||||
g += uiText(kx + 52, 17, CHATS[0].titel, 19, 800, CHAT_TEXT);
|
||||
g += uiText(kx + 52, 38, CHATS[0].meta + " · 8 Mitglieder · aktiv", 14, 500, CHAT_TEXT3);
|
||||
g += '<path d="M' + n1(kx) + ',58H' + n1(kx + RECHTS) + '" stroke="' + CHAT_RAND +
|
||||
@@ -3040,12 +2999,12 @@ if (location.search.indexOf("nur=anim") >= 0)
|
||||
const fy = listeH - feldH;
|
||||
g += '<path d="M' + n1(kx) + ',' + n1(fy) + 'H' + n1(kx + RECHTS) + '" stroke="' +
|
||||
CHAT_RAND + '" stroke-width="1.2"/>';
|
||||
g += feather("plus", kx + 20, fy + 34, 21, CHAT_TEXT2, 2);
|
||||
g += ikon("plus", kx + 20, fy + 34, 21, CHAT_TEXT2);
|
||||
g += '<g filter="url(#hgklein)"><rect x="' + n1(kx + 42) + '" y="' + n1(fy + 14) +
|
||||
'" width="' + (RECHTS - 84) + '" height="40" rx="20" fill="' + FL_KARTE +
|
||||
'" stroke="' + CHAT_RAND + '" stroke-width="1.2"/></g>';
|
||||
g += uiText(kx + 62, fy + 40, "Nachricht schreiben …", 16, 400, "#C9C9CE");
|
||||
g += feather("mic", kx + RECHTS - 20, fy + 34, 21, CHAT_TEXT2, 2);
|
||||
g += ikon("mic", kx + RECHTS - 20, fy + 34, 21, CHAT_TEXT2);
|
||||
/* Erst hier verschieben, nicht mittendrin: ein Zwischenstand hatte diese
|
||||
Zeile weiter oben stehen, und alles, was danach gezeichnet wurde --
|
||||
Datumsmarke, Blasen, Tippzeile, Eingabefeld -- lag um PAD daneben. Auf
|
||||
@@ -3153,7 +3112,7 @@ if (location.search.indexOf("nur=anim") >= 0)
|
||||
'<g filter="url(#hgklein)"><rect x="' + n1(c.x) + '" y="' + n1(c.y) +
|
||||
'" width="' + c.b + '" height="54" rx="14" fill="#FFFFFF" stroke="' + CHAT_RAND +
|
||||
'" stroke-width="1.4"/></g>' +
|
||||
feather(c.ikon, c.x + 28, c.y + 27, 20, CHAT_TEXT3, 1.9) +
|
||||
ikon(c.ikon, c.x + 28, c.y + 27, 20, CHAT_TEXT3) +
|
||||
uiText(c.x + 50, c.y + 34, c.text, 19, 700, CHAT_TEXT) + '</g>';
|
||||
});
|
||||
|
||||
@@ -3212,7 +3171,7 @@ if (location.search.indexOf("nur=anim") >= 0)
|
||||
'" stroke="' + CHAT_RAND + '" stroke-width="1.2"/>';
|
||||
y += 13; continue;
|
||||
}
|
||||
g += feather(e[0], PAD + RAND + 26, y + ZH / 2, 20, CHAT_TEXT2, 1.9);
|
||||
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);
|
||||
y += ZH;
|
||||
}
|
||||
@@ -3260,7 +3219,7 @@ if (location.search.indexOf("nur=anim") >= 0)
|
||||
hinten += uiText(28, 52, "Team Chat", 24, 800, CHAT_TEXT);
|
||||
hinten += '<rect x="28" y="72" width="' + (PB - 56) + '" height="42" rx="21" fill="' +
|
||||
FL_SPALTE + '" stroke="' + CHAT_RAND + '" stroke-width="1.2"/>';
|
||||
hinten += feather("message-square", 50, 93, 16, CHAT_TEXT3, 1.8);
|
||||
hinten += ikon("message-square", 50, 93, 16, CHAT_TEXT3);
|
||||
hinten += uiText(66, 99, "Chats durchsuchen …", 15, 400, "#C9C9CE");
|
||||
CHATS.slice(0, 5).forEach((c, i) => { hinten += chatZeile(16, 128 + i * ZEILE_H, c); });
|
||||
hinten += '</g>';
|
||||
@@ -3273,7 +3232,7 @@ if (location.search.indexOf("nur=anim") >= 0)
|
||||
'" height="82" fill="#FFFFFF"/>';
|
||||
vorn += '<rect x="' + n1(kx) + '" y="' + n1(VY + 20) + '" width="42" height="42" rx="12" ' +
|
||||
'fill="#F0E7FF" stroke="#e4d4ff" stroke-width="1.2"/>';
|
||||
vorn += feather("briefcase", kx + 21, VY + 41, 21, "#691CD4", 1.9);
|
||||
vorn += ikon("briefcase", kx + 21, VY + 41, 21, "#691CD4");
|
||||
vorn += uiText(kx + 54, VY + 36, "# waermepumpe-mueller", 19, 800, CHAT_TEXT);
|
||||
vorn += uiText(kx + 54, VY + 58, "P-2026-0042 · 8 Mitglieder", 15, 500, CHAT_TEXT3);
|
||||
vorn += '<path d="M' + n1(VX) + ',' + n1(VY + 82) + 'H' + n1(VX + PB) + '" stroke="' +
|
||||
@@ -3289,7 +3248,7 @@ if (location.search.indexOf("nur=anim") >= 0)
|
||||
'" height="88" fill="#FFFFFF"/>';
|
||||
vorn += '<path d="M' + n1(VX) + ',' + n1(fy - 14) + 'H' + n1(VX + PB) + '" stroke="' +
|
||||
CHAT_RAND + '" stroke-width="1.2"/>';
|
||||
vorn += feather("plus", VX + 34, fy + 26, 20, CHAT_TEXT2, 2);
|
||||
vorn += ikon("plus", VX + 34, fy + 26, 20, CHAT_TEXT2);
|
||||
vorn += '<rect x="' + n1(VX + 54) + '" y="' + n1(fy + 6) + '" width="' + (PB - 108) +
|
||||
'" height="40" rx="20" fill="' + FL_SPALTE + '" stroke="' + CHAT_RAND +
|
||||
'" stroke-width="1.2"/>';
|
||||
@@ -3320,7 +3279,7 @@ if (location.search.indexOf("nur=anim") >= 0)
|
||||
const wb = messen(wort, gr, 800) + gr * 0.16 * wort.length;
|
||||
let bx = bA + 20;
|
||||
while (bx + wb + 40 < bA + bL) {
|
||||
band += feather("hard-hat", bx + 18, ty + bh / 2, 36, WEB.bandDunkel, 2.6);
|
||||
band += ikon("hard-hat", bx + 18, ty + bh / 2, 36, WEB.bandDunkel);
|
||||
band += uiText(bx + 44, ty + bh / 2 + 12, wort, gr, 800, WEB.bandDunkel,
|
||||
{ sperr: "0.16em" });
|
||||
bx += wb + 96;
|
||||
@@ -3417,7 +3376,7 @@ if (location.search.indexOf("nur=anim") >= 0)
|
||||
if (nr === hoverNr)
|
||||
g += '<rect x="' + n1(x + PAD - 1) + '" y="' + n1(yy) + '" width="' +
|
||||
n1(MW - 2 * PAD + 2) + '" height="' + ZH + '" rx="7" fill="' + FL_SPALTE + '"/>';
|
||||
g += feather(e[0], x + PAD + 18, yy + ZH / 2, 16, CHAT_TEXT2, 1.9);
|
||||
g += ikon(e[0], x + PAD + 18, yy + ZH / 2, 16, CHAT_TEXT2);
|
||||
g += uiText(x + PAD + 36, yy + ZH / 2 + 5.5, e[1], 15, 500, CHAT_TEXT);
|
||||
});
|
||||
|
||||
@@ -3460,7 +3419,7 @@ if (location.search.indexOf("nur=anim") >= 0)
|
||||
// Kopfzeile des Kanals.
|
||||
g += '<rect x="' + RAND + '" y="' + (RAND - 6) + '" width="40" height="40" rx="11" ' +
|
||||
'fill="#F0E7FF" stroke="#e4d4ff" stroke-width="1.2"/>';
|
||||
g += feather("briefcase", RAND + 20, RAND + 14, 20, "#691CD4", 1.9);
|
||||
g += ikon("briefcase", RAND + 20, RAND + 14, 20, "#691CD4");
|
||||
g += uiText(RAND + 52, RAND + 8, "# waermepumpe-mueller", 20, 800, CHAT_TEXT);
|
||||
g += uiText(RAND + 52, RAND + 30, "P-2026-0042 · 8 Mitglieder · aktiv", 15, 500, CHAT_TEXT3);
|
||||
g += '<path d="M0,' + KOPF + 'H' + B + '" stroke="' + CHAT_RAND + '" stroke-width="1.2"/>';
|
||||
@@ -3504,7 +3463,7 @@ if (location.search.indexOf("nur=anim") >= 0)
|
||||
const px = bx3 + br3 - 18, py = dritteY + 16;
|
||||
bahn += '<g opacity="' + n1(pfeil * (1 - stufe(t, .60, .66))) + '">' +
|
||||
'<circle cx="' + n1(px) + '" cy="' + n1(py) + '" r="12" fill="' + FL_SPALTE + '"/>' +
|
||||
feather("chevron-down", px, py + 1, 14, CHAT_TEXT2, 2.2) + '</g>';
|
||||
ikon("chevron-down", px, py + 1, 14, CHAT_TEXT2) + '</g>';
|
||||
}
|
||||
|
||||
// Was ueber die Bahn hinausragt, wird oben abgeschnitten -- wie im Fenster.
|
||||
@@ -3515,13 +3474,13 @@ if (location.search.indexOf("nur=anim") >= 0)
|
||||
// Das Eingabefeld bleibt ruhig: hier wird nichts geschrieben.
|
||||
const fy = H - FELD;
|
||||
g += '<path d="M0,' + n1(fy) + 'H' + B + '" stroke="' + CHAT_RAND + '" stroke-width="1.2"/>';
|
||||
g += feather("plus", RAND + 14, fy + 44, 21, CHAT_TEXT2, 2);
|
||||
g += ikon("plus", RAND + 14, fy + 44, 21, CHAT_TEXT2);
|
||||
const feldX = RAND + 36, feldB = B - 2 * RAND - 100;
|
||||
g += '<g filter="url(#hgklein)"><rect x="' + n1(feldX) + '" y="' + n1(fy + 24) +
|
||||
'" width="' + n1(feldB) + '" height="40" rx="20" fill="' + FL_KARTE + '" stroke="' +
|
||||
CHAT_RAND + '" stroke-width="1.2"/></g>';
|
||||
g += uiText(feldX + 18, fy + 50, "Nachricht schreiben …", 16, 400, "#C9C9CE");
|
||||
g += feather("mic", B - RAND - 24, fy + 44, 21, CHAT_TEXT2, 2);
|
||||
g += ikon("mic", B - RAND - 24, fy + 44, 21, CHAT_TEXT2);
|
||||
|
||||
/* Das Menue haengt am Pfeil und liegt ueber allem. */
|
||||
const chevX = bx3 + br3 - 18, chevY = dritteY + 16;
|
||||
|
||||
+1
-1
@@ -10,7 +10,7 @@
|
||||
"int": "dezent"
|
||||
}
|
||||
],
|
||||
"current": 0,
|
||||
"current": 1,
|
||||
"deck": [
|
||||
{
|
||||
"ref": "verbinden",
|
||||
|
||||
Reference in new issue
Block a user