Chat – WhatsApp-Blasen

[chapoi]

Der Chat befindet sich noch in der aktiven Entwicklung, daher ist diese Komponente wahrscheinlich instabil und vorerst im Beta-Status. Feedback und Fehlerberichte sind willkommen.

	Zusammenfassung	Ein WhatsApp-inspirierter Skin für den Chat (mobil)
	Vorschau	Theme Creator (nur mobile Ansicht)
	Repository	GitHub - chapoi/discourse-chat-bubbles: A whatsapp-inspired skin for Discourse chat (mobile)
	Installationsanleitung	So installieren Sie ein Theme oder eine Theme-Komponente
	Neu bei Discourse Themes?	Anfängerleitfaden zur Verwendung von Discourse Themes

<!- Füllen Sie "repoName" und "repoURL" für die automatische Installationsschaltfläche aus →

Installieren Sie diese Theme-Komponente

Anweisungen für die Vorschau

1. Stellen Sie sicher, dass Sie dies auf einem kleinen Bildschirm anzeigen.
2. Vergessen Sie nicht, ?mobile_view=1 an die URL anzuhängen, um die richtige Ansicht zu erhalten.
3. Melden Sie sich an, um Zugriff auf den Chat zu erhalten.

Beschreibung

<!- Beschreiben Sie dieses Theme/diese Komponente in ein oder zwei Sätzen →

Eine Nachrichtenblasen-Stil, nur für Mobilgeräte angewendet.

<!- Fügen Sie weitere Details hinzu und erklären Sie die Einstellungen (falls zutreffend) →

Einstellungen

Die Komponente wird mit einem eingebetteten Hintergrund geliefert, der oben gezeigt wird. Dies kann in den Einstellungen geändert werden. Es wird empfohlen, ein SVG-Muster zu verwenden. Diese Website bietet einige kostenlos an.

Sie können auch die Blasenfarben und den Hintergrund hinter dem Muster auswählen oder das Muster ganz deaktivieren.

Wenn Sie eine helle oder dunkle Einstellung leer lassen, werden die Blasen standardmäßig auf secondary und tertiary-low gesetzt. Wenn Sie die Hintergrundfarbe leer lassen, wird sie standardmäßig auf primary-high gesetzt.

Die Verwendung eines vollständigen Bildes als Hintergrund kann ebenfalls funktionieren, aber Sie müssen sicherstellen, dass es eine optimierte Größe für die mobile Ansicht hat.

Dunkelmodus

Sie können für den Dunkelmodus verschiedene Hintergrund- und Blasenfarben auswählen.
Um den Hintergrundmuster nicht ändern zu müssen, wird im Dunkelmodus ein Hintergrund-Blend verwendet.

Für beste Ergebnisse wählen Sie ein helles Muster, das im hellen Modus gut aussieht und im dunklen Modus automatisch gedämpft wird (leider nicht auf allen Geräten – siehe unten).

Bekannte Probleme

• Die Zeitstempel für Ihre eigenen Nachrichten sind anders platziert als für die Nachrichten anderer Personen
• Hat noch keinen Dunkelmodus (noch)
• Der Dunkelmodus wirkt auf einigen Geräten seltsam
• Funktioniert nicht gut mit aktiviertem Threading

[fbpbdmin (deepblue)]

Das ist sehr schön!

Ein Vorschlag:
Könnte man jedem erlauben, sein eigenes Hintergrundbild zu ändern?

Und das Standard-Schaltkreis-SVG wird im Dark-Theme von iPhone und Android unterschiedlich gerendert.
Auf dem iPhone sehen die Linien heller aus, nicht wie im Beispiel im Doku-Post… Ich bin mir nicht sicher warum…

[Jagster (Jakke Lehtonen)]

Kann ich das Hintergrundmuster komplett deaktivieren?

@fbpbdmin

möglich, jedem sein eigenes Hintergrundbild ändern zu lassen

Ich würde vermuten, dass das wirklich schwierig ist und wenn es getan werden kann, ein Plugin benötigt. Aber ich erinnere mich an kein Plugin, das Benutzern die Möglichkeit gibt, solche Dinge anzupassen. Es wäre aber schön. Aber es könnte auch zu einem UX-Albtraum führen, wenn die Präferenzen hier, dort und überall sind.

Ein Benutzer kann nicht einmal die Werkzeugleiste des Komponisten einstellen, und das wäre eine wichtige Funktion.

[chapoi]

@fbpbdmin

Ist es möglich, jedem zu erlauben, sein eigenes Hintergrundbild zu ändern?

@Jagster

Ich würde vermuten, das ist wirklich schwierig und wenn es gemacht werden kann, braucht es ein Plugin.

Ja, leider ist das eine ganz andere Liga. Wenn das Interesse an diesem Skin im Allgemeinen jemals groß genug ist, würde ich das gerne erweitern, aber im Moment passiert das nicht.

@Jagster

Kann ich das Hintergrundmuster komplett deaktivieren?

Oh ja, das ist einfach genug. Kann dafür ein Update machen.

[fbpbdmin (deepblue)]

@chapoi Könnten Sie bitte das dunkle Design auf dem iPhone ausprobieren? Die meisten Muster werden dort seltsam dargestellt.

Nehmen wir zum Beispiel das Standarddesign auf dem iPhone im dunklen Modus: Die Links sind weiß, was zu überladen wirkt.

Im dunklen Design für Android sieht es jedoch gut aus…

Danke

[chapoi]

Oh wow! Danke dafür, ich werde versuchen, mir den Dunkelmodus am Wochenende anzusehen.

[chapoi]

Ich habe eine Einstellung hinzugefügt, um das Muster vollständig zu deaktivieren.

Die Probleme mit dem Dunkelmodus auf dem iPhone sind auf einen Fehler in Safari zurückzuführen, der verhindert, dass die background-mode-blend-Eigenschaft funktioniert, wenn background-repeat verwendet wird… Ziemlich ärgerlich und ich habe noch keine Lösung.

Es könnte darauf hinauslaufen, zwei separate Uploads für den Dunkel-/Hellmodus zu erstellen, was überhaupt nicht elegant ist.

Auf jeden Fall empfehle ich vorerst, es ohne das Muster zu verwenden, wenn Sie auf dem iPhone sind und Ihr Gerät im Dunkelmodus verwenden.

[Falco]

@chapoi

@fbpbdmin

Ist es möglich, jedem zu erlauben, sein eigenes Hintergrundbild zu ändern?

@Jagster

Ich würde vermuten, das ist wirklich schwierig und wenn es gemacht werden kann, braucht es ein Plugin.

Ja, leider ist das eine ganz andere Liga. Wenn das Interesse an diesem Skin im Allgemeinen jemals groß genug ist, würde ich das gerne erweitern, aber im Moment passiert das nicht.

Vielleicht eine Benutzeroption, um das vorhandene Bild der „Benutzerkarten-Hintergrunds“ als Chat-Hintergrund zu verwenden?

[Roi]

@chapoi

Ziemlich nervig und ich habe noch keine Lösung.

Ja, bei mir dasselbe:

Aber auf Android sieht es toll aus:

Ohne Muster sieht es langweilig aus. Ich habe es vorerst aktiviert gelassen, aber Apple-Benutzer haben angefangen sich zu beschweren.

[digitaldominica]

Hallo @chapoi, gibt es eine Möglichkeit, das Chat-Antwortsymbol durch einen tatsächlichen Pfeil nach links anstelle des shareicon zu ersetzen, das als d-icon-share angezeigt wird?

[chapoi]

Nicht speziell mit dieser Themenkomponente, nein.

Sie könnten etwas wie dieses befolgen

Help replacing an icon

I am trying to replace the bars icon for opening/closing the sidebar following these instructions Replace Discourse's default SVG icons with custom icons in a theme but I’m not having much luck. I’ve created a spritesheet with the sidebar icon I want to use (blurred out since it’s a pro fontawesome icon) [image] Created a component and uploaded the spritesheet: [image] And used this code (I only want the change on desktop) [image] But I just get no icon: [image] Any ideas? I’m sure I…

um alle Vorkommen des Symbols zu ersetzen. (Ich glaube nicht, dass wir das share-icon an anderer Stelle verwenden, daher könnte dies vielleicht funktionieren).

Es nur dort zu ersetzen, würde mehr Komplexität erfordern, ich bin mir nur nicht sicher, was.

[digitaldominica]

Okay, danke, ich werde es versuchen. Ich benutze das Kodular Community Theme und das gleiche Symbol wird in Themen angezeigt, auf die ich antworte. Ich frage mich, ob dies speziell Teil des Themes ist. Ich werde den Entwickler jetzt fragen.

[digitaldominica]

Vielen Dank für diese Komponente.

Ich habe eine kleine Anpassung an der mobile.scss in Zeile 55-62 vorgenommen.

.chat-messages-scroll {
  background-color: var(--bubble-bg);
  background-image: url(check-empty($background-pattern, $enable_pattern));
  background-blend-mode: var(--bubble-bg-mode);

}
.chat-messages-container {
  padding: 0;

Zuvor wurde der Hintergrund auf den .chat-messages-container angewendet und beim Scrollen würde sich mein Hintergrund mit den Nachrichten bewegen, so bleibt er im Hintergrund.

Mir ist aufgefallen, dass es zwei Instanzen von .chat-messages-container im mobilen Chat gab, was diese Replikation im Hintergrund verursachte.

[chapoi]

Danke, exzellente Erfassung eines dummen Versäumnisses. Behoben.

[digitaldominica]

Hallo, es scheint, dass der Chat-Hintergrund im Chat nicht mehr sichtbar ist. Ich sehe nicht mehr, wie das CSS zum Chat-Container hinzugefügt wird. Ich verwende derzeit Version 3.3.0.beta2

[chapoi]

Hallo! Danke für den Bericht; es gab viele Änderungen am Chat und wahrscheinlich muss ich diese Komponente aktualisieren.

Werde versuchen, es bald zu tun!

[eisammy (Sammy)]

Ich habe versucht, diese Theme-Komponente vor ein paar Tagen zu testen. Wenn Sie möchten, kann ich hier die Fehler-Screenshots posten, da ich sie wieder aktivieren möchte.

[eisammy (Sammy)]

@chapoi Einfach wunderbar… Fehler sind anscheinend verschwunden. Pläne zur Implementierung in die Desktop-Version?

[Earnie_Baird (Earnie)]

Ich habe das gerade ausprobiert. Es ist großartig, aber wie andere berichtet haben, scheint es nicht zu ermöglichen, die Hintergrundfarbe oder das Muster zu ändern.

Mit dem standardmäßigen hellen Hintergrund verschmelzen die weißen Blasen wirklich mit dem Hintergrund.

[eisammy (Sammy)]

Ein neuer Instagram-Link-Bug