Chat – bulles WhatsApp

[chapoi]

Le chat est toujours en cours de développement actif, ce composant est donc susceptible d’être instable et en version bêta pour le moment. Vos commentaires et rapports de bugs sont les bienvenus.

	Résumé	Un skin inspiré de WhatsApp pour le chat (mobile)
	Aperçu	Theme Creator (vue mobile uniquement)
	Dépôt	GitHub - chapoi/discourse-chat-bubbles: A whatsapp-inspired skin for Discourse chat (mobile)
	Guide d’installation	Comment installer un thème ou un composant de thème
	Nouveau sur les thèmes Discourse ?	Guide pour débutants sur l’utilisation des thèmes Discourse

← Remplissez "repoName" et "repoURL" pour le bouton d’installation automatique →

Installer ce composant de thème

Instructions pour l’aperçu

1. Assurez-vous de visualiser ceci sur un petit écran.
2. N’oubliez pas d’ajouter ?mobile_view=1 à l’URL pour obtenir la vue correcte.
3. Connectez-vous pour accéder au chat.

Description

← Décrivez ce thème/composant en une ou deux phrases →

Un style de message en bulle, appliqué uniquement sur mobile.

← Ajoutez plus de détails et expliquez les paramètres (si applicable) →

Paramètres

Le composant est livré avec un arrière-plan intégré montré ci-dessus. Celui-ci peut être modifié dans les paramètres. Il est recommandé d’utiliser un motif svg. Ce site web en propose gratuitement.

Vous pouvez également choisir les couleurs des bulles et l’arrière-plan derrière le motif, ou désactiver complètement le motif.

Si vous laissez vide le réglage clair ou foncé, les bulles seront par défaut secondary et tertiary-low. Si vous laissez vide la couleur de fond, elle sera par défaut primary-high.

L’utilisation d’une image complète en arrière-plan peut également fonctionner, mais vous devrez vous assurer qu’elle est de taille optimisée pour la vue mobile.

Mode sombre

Vous pouvez choisir différentes couleurs d’arrière-plan et de bulles pour le mode sombre.
Pour éviter d’avoir à changer le motif d’arrière-plan, il utilise un mélange d’arrière-plan en mode sombre.

Pour de meilleurs résultats, choisissez un motif de couleur claire qui fonctionne bien en mode clair, et il devrait être automatiquement atténué en mode sombre (malheureusement pas sur tous les appareils – voir ci-dessous).

Problèmes connus

• Les horodatages de vos propres messages sont placés différemment de ceux des messages des autres personnes
• N’a pas de mode sombre (encore)
• le mode sombre agit bizarrement sur certains appareils
• ne fonctionne pas bien avec le mode conversation activé

[fbpbdmin (deepblue)]

C’est très bien !

Une suggestion,
est-il possible de laisser chacun changer sa propre image d’arrière-plan ?

Et le SVG de circuit par défaut est rendu différemment sur les thèmes sombres d’iPhone et d’Android.
sur iPhone, les lignes semblent plus lumineuses, pas comme l’exemple dans le post de la documentation… je ne sais pas pourquoi…

[Jagster (Jakke Lehtonen)]

Puis-je désactiver totalement le motif d’arrière-plan ?

@fbpbdmin

possible de laisser tout le monde changer sa propre image d’arrière-plan

Je suppose que c’est vraiment difficile et si cela peut être fait, cela nécessite un plugin. Mais je ne me souviens d’aucun plugin qui donne aux utilisateurs la possibilité d’ajuster de telles choses. Ce serait bien, cependant. Mais cela pourrait aussi conduire à un cauchemar d’expérience utilisateur lorsque les préférences sont ici, là et partout.

Un utilisateur ne peut même pas régler la boîte à outils du compositeur et ce serait une fonctionnalité importante.

[chapoi]

@fbpbdmin

possible to let everyone to change their own background image ?

@Jagster

I would guess that is really difficult and if it can be done it needs a plugin.

Oui, malheureusement, c’est une tout autre catégorie. Si l’intérêt est jamais assez grand pour ce skin en général, j’aimerais bien développer cela, mais pour l’instant, ce n’est pas le cas.

@Jagster

Can I disable background pattern totally?

Oh oui, c’est assez facile. Je peux faire une mise à jour pour ça.

[fbpbdmin (deepblue)]

@chapoi pourriez-vous essayer le thème sombre sur iPhone, la plupart des motifs y sont rendus étrangement.

par exemple, celui par défaut, en sombre sur iPhone, les liens sont blancs, ça fait trop chargé

ça rend bien sur le thème sombre d’Android par contre…

merci

[chapoi]

Oh wow ! Merci pour ça, j’essaierai de jeter un œil au mode sombre ce week-end.

[chapoi]

J’ai ajouté un paramètre pour désactiver complètement le motif.

Les problèmes de mode sombre sur iPhone sont dus à un bug dans Safari, qui empêche la propriété background-mode-blend de fonctionner lorsque background-repeat est utilisé… Assez ennuyeux et je n’ai pas encore de solution de contournement.

Cela pourrait se résumer à deux téléchargements distincts pour le mode sombre/clair, ce qui n’est pas du tout élégant.

Quoi qu’il en soit, je recommande pour l’instant de l’utiliser sans le motif, si vous êtes sur iPhone et que vous utilisez votre appareil en mode sombre.

[Falco]

@chapoi

@fbpbdmin

possible to let everyone to change their own background image ?

@Jagster

I would guess that is really difficult and if it can be done it needs a plugin.

Oui, malheureusement, c’est une tout autre ligue. Si l’intérêt est jamais assez grand pour ce skin en général, j’aimerais bien développer cela, mais pour l’instant, cela n’arrivera pas.

Peut-être une option utilisateur pour utiliser leur image existante de « Carte utilisateur d’arrière-plan » comme arrière-plan de chat ?

[Roi]

@chapoi

Assez ennuyeux et je n’ai pas encore de solution de contournement.

Ouais, pareil ici :

Mais ça rend super bien sur Android :

Sans motif, ça fait fade. Je l’ai laissé activé pour l’instant, mais les utilisateurs Apple ont commencé à se plaindre.

[digitaldominica]

Salut @chapoi, y a-t-il un moyen de changer l’icône de réponse de chat en une vraie flèche gauche au lieu de l’icône de partage qui apparaît, d-icon-share ?

[chapoi]

Pas spécifiquement avec ce composant de thème, non.

Vous pourriez suivre quelque chose comme ceci :

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…

pour remplacer toutes les occurrences de l’icône. (Je ne pense pas que nous utilisions l’icône de partage ailleurs, donc cela pourrait peut-être fonctionner).

Pour la remplacer uniquement ici, cela impliquerait plus de complexité, je ne suis juste pas sûr de quoi.

[digitaldominica]

D’accord, merci, je vais essayer. J’utilise le Thème de la communauté Kodular et la même icône apparaît dans les sujets auxquels je réponds. Je me demande si cela fait partie spécifiquement du thème. Je vais demander au développeur maintenant.

[digitaldominica]

Merci pour ce composant.

J’ai apporté une légère modification au fichier mobile.scss aux lignes 55 à 62

.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;

Auparavant, l’arrière-plan était appliqué au .chat-messages-container et lors du défilement, mon arrière-plan bougeait avec les messages, de cette façon, il reste en arrière-plan.

J’ai remarqué qu’il y avait deux instances de .chat-messages-container dans le chat mobile, ce qui provoquait cette réplication de l’arrière-plan.

[chapoi]

Merci, excellente détection d’un oubli stupide. Corrigé.

[digitaldominica]

Bonjour, il semble que l’arrière-plan du chat ne soit plus visible dans le chat, je ne vois plus le CSS être ajouté au conteneur du chat. J’utilise actuellement la version 3.3.0.beta2

[chapoi]

Salut ! Merci pour le rapport ; il y a eu beaucoup de changements dans les discussions et je dois probablement mettre à jour ce composant.

J’essaierai de le faire bientôt !

[eisammy (Sammy)]

J’ai essayé de goûter ce composant de thème il y a quelques jours, si vous voulez, puis-je poster ici les captures d’écran des erreurs car je souhaite le réactiver.

[eisammy (Sammy)]

@chapoi Simplement merveilleux… les erreurs ont apparemment disparu. des plans pour implémenter cela à la version de bureau ?

[Earnie_Baird (Earnie)]

Je viens de tester. C’est génial, mais comme d’autres l’ont signalé, il ne semble pas possible de changer la couleur ou le motif de l’arrière-plan.

Avec l’arrière-plan clair par défaut, les bulles blanches se confondent vraiment avec l’arrière-plan.

[eisammy (Sammy)]

Un nouveau bug Lien Instagram