Kundenansicht neu Chat-Fix: Chat als Vollbild-Ansicht (Verlauf scrollt in sich, Eingabe unten, Spalte zentriert, "Chat" klein im Kopf)
Pilot-Feedback 17.10.: Der Chat wirkte durchsichtig und verrutscht. - Handy: Inhalt steht fest zwischen Kopf und Leiste (wie das Blatt); die Eingabe sitzt höchstens 6 px über der Leiste bzw. dem Widerrufsstreifen und bei offener Tastatur am unteren Rand des sichtbaren Bereichs. "Chat" steht klein im Kopf (die H1 bleibt nur für Screenreader), der Kopf ist deckend mit Haarlinie, der Verlauf beginnt direkt darunter und scrollt in sich. - Desktop: Spalte in Fensterhöhe, Chat höchstens 760 px breit und mittig, Verlauf füllt die Höhe, Eingabe am unteren Spaltenrand. - Verlauf steht unten (neueste Nachricht sichtbar), kurze Verläufe unten bei der Eingabe; Blasen fremd #f8f9fb, eigen #ebeef1. - "Senden" bleibt schwarz, auch bei leerem Feld (gesperrt im Ansichtsmodus weiter gedämpft). - haltFokus: Druck auf Senden, Anhang oder Mikrofon nimmt dem Textfeld den Fokus nicht; sonst kommt die Leiste zurück, schiebt die feste Eingabe hoch und der Tipp auf "Senden" geht bei offener Tastatur verloren (im Browser nachgestellt). public/chat-composer.js und die alte Ansicht bleiben unverändert. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
1 parent
5cd49d6a4a
commit
670ead3091
4 files changed
+128
-8
No files matched your search
@@ -58,20 +58,36 @@ export function verdrahteEingabe({ win = globalThis.window, doc = globalThis.doc
|
||||
}
|
||||
}
|
||||
|
||||
let aktiv = null // der laufende Chat: { timer, composer, eingabe, beobachter }
|
||||
/**
|
||||
* Druck auf einen Knopf der Eingabezeile (Senden, Anhang, Mikrofon) nimmt dem Textfeld den Fokus nicht. Sonst endet mit dem Fokus die Tastatur-Stellung der Hülle
|
||||
* (leiste.js): die Leiste kommt zurück und schiebt die fest stehende Eingabe um ihre Höhe nach oben, bevor der Finger loslässt, und der Tipp auf „Senden“
|
||||
* geht ins Leere (Android). Das Textfeld behält den Fokus, die Tastatur bleibt wie in jedem Chat offen. Tab und Tastatur-Bedienung bleiben unberührt.
|
||||
* Rückgabe { abbau } entfernt den Hörer.
|
||||
*/
|
||||
export function haltFokus(wurzel) {
|
||||
const beiDruck = (ev) => {
|
||||
const knopf = ev.target?.closest?.('button')
|
||||
if (knopf && wurzel.contains(knopf)) ev.preventDefault()
|
||||
}
|
||||
wurzel.addEventListener('mousedown', beiDruck)
|
||||
return { abbau() { wurzel.removeEventListener('mousedown', beiDruck) } }
|
||||
}
|
||||
|
||||
let aktiv = null // der laufende Chat: { timer, composer, eingabe, beobachter, fokus }
|
||||
|
||||
function raeumeAuf() {
|
||||
if (!aktiv) return
|
||||
if (aktiv.timer) clearInterval(aktiv.timer)
|
||||
try { aktiv.composer?.destroy?.() } catch { /* schon abgebaut */ }
|
||||
try { aktiv.eingabe?.abbau() } catch { /* schon abgebaut */ }
|
||||
try { aktiv.fokus?.abbau() } catch { /* schon abgebaut */ }
|
||||
try { aktiv.beobachter?.disconnect() } catch { /* schon abgebaut */ }
|
||||
aktiv = null
|
||||
}
|
||||
|
||||
export async function zeigeChat(wurzel, { route, me, nav } = {}) {
|
||||
raeumeAuf()
|
||||
const eigener = { timer: null, composer: null, eingabe: null, beobachter: null }
|
||||
const eigener = { timer: null, composer: null, eingabe: null, beobachter: null, fokus: null }
|
||||
aktiv = eigener
|
||||
const gilt = () => aktiv === eigener
|
||||
leeren(wurzel).append(h('p', { class: K.leer }, 'Wird geladen …'))
|
||||
@@ -160,6 +176,7 @@ export async function zeigeChat(wurzel, { route, me, nav } = {}) {
|
||||
|
||||
// Eingabe über der Tastatur halten; wird der Verlauf kleiner (Tastatur, Leiste), bleibt die neueste Nachricht sichtbar, sofern man unten war (E-Fix M5)
|
||||
eigener.eingabe = verdrahteEingabe({ win: globalThis.window, doc: globalThis.document, wurzel: composerWurzel })
|
||||
eigener.fokus = haltFokus(composerWurzel)
|
||||
if (typeof globalThis.ResizeObserver === 'function') {
|
||||
eigener.beobachter = new globalThis.ResizeObserver(() => { if (verlauf.dataset.stick !== 'false') verlauf.scrollTop = verlauf.scrollHeight })
|
||||
eigener.beobachter.observe(verlauf)
|
||||
|
||||
Reference in new issue
Block a user