Bulles de message personnel

:exclamation: La fonctionnalité de ce composant de thème a été intégrée au cœur de Discourse à partir de la version 2.8.0. Vous ne tirerez pas grand-chose de son utilisation après avoir mis à niveau vers une version supérieure !

J’ai créé un composant de thème pour modifier le style des messages privés en bulles afin de mieux les distinguer des sujets.

Paramètres :

  • Définissez la couleur d’arrière-plan de la bulle sur les couleurs primaire, secondaire ou tertiaire de votre thème, ou choisissez parmi d’autres couleurs courantes.
  • Sélectionnez des couleurs différentes pour mieux distinguer les messages que vous envoyez de ceux que vous recevez.
  • Réglez l’opacité de l’arrière-plan de la bulle : plus le pourcentage est élevé, plus la couleur est intense.
  • Choisissez d’afficher ou non une ombre portée autour de la bulle de message.
  • Ajoutez optionnellement du texte au bouton de réponse au message pour le distinguer du bouton de réponse au sujet.

Vous pouvez choisir parmi une gamme de couleurs ou sélectionner des couleurs de votre palette pour qu’elles s’harmonisent avec votre thème. Vous pouvez également régler l’opacité de l’arrière-plan de la bulle par rapport à la couleur et à l’arrière-plan.

Installer ce composant de thème

70 « J'aime »

C’est vraiment trop cool, @Rhidian !!!

Je me pose une question, car je n’ai jamais touché aux plugins auparavant…

Est-il possible d’autoriser un code hexadécimal avec une opacité, au lieu de se limiter aux couleurs système ? Aucun problème si cela demande beaucoup de travail supplémentaire. Je suis juste curieux.

Et si je voulais modifier le style de l’ombre ou d’autres éléments CSS ? Je ne suis pas très à l’aise avec GitHub et son fonctionnement, mais j’ai consulté votre dépôt .git avant de copier le plugin dans les composants de mon thème. Je sais écrire du CSS. Puis-je copier votre plugin, modifier le fichier CSS que vous avez fourni, puis télécharger ce nouveau composant de thème avec le style que je souhaite ?

Si vous pouviez m’indiquer où trouver des instructions sur la modification d’un plugin, ce serait génial. Ou, je suppose que je pourrais simplement appliquer une surcharge CSS côté client. Quelle option est la meilleure en termes de performance ?

Encore une fois… Merci infiniment pour cela… c’est exactement la solution que je recherchais pour différencier les MP des sujets classiques !

4 « J'aime »

Merci @jord8on. C’est formidable de recevoir ce genre de commentaires.

Je vais rendre l’ombre portée personnalisable en tant qu’option de paramétrage.

Concernant la création ou la modification de votre propre CSS, c’est simple. Chargez le composant, puis cliquez sur la section CSS/HTML personnalisé dans les paramètres du composant.

Modifiez simplement la feuille de style CSS et cliquez sur Enregistrer. Il s’agit de vos propres personnalisations. Si vous souhaitez les partager et les intégrer au composant pour que tout le monde en bénéficie, vous pouvez simplement publier le CSS dans ce sujet sur Discourse Meta. Ou, comme objectif à plus long terme, apprenez à effectuer des pull requests sur GitHub et/ou à forker le dépôt si vous apportez des modifications plus substantielles.

3 « J'aime »

Merci @Rhidian !!!

:wrapped_gift:

C’est une solution si simple pour distinguer nettement les MP des sujets classiques de notre forum.

Je viens de demander à un membre ce qu’il en pensait, et il était tellement content de l’avoir. Il a fait l’éloge de l’idée et de la réalisation, alors je me permets de te le transmettre !!

6 « J'aime »

J’ai mis à jour ce composant de thème afin que vous puissiez maintenant saisir vos propres couleurs en utilisant :

  • des noms de couleurs HTML (black, white, maroon, red, purple, green, lime, olive, yellow, navy, blue, teal, aqua)
  • des codes de couleurs HTML (#000000 pour black, #FFFFFF pour white, etc., ou des codes courts, par exemple #CCC)
  • des noms de couleurs de thème (primary, secondary, tertiary)

Vous pouvez également saisir vos propres couleurs de texte pour les messages de la même manière, afin qu’elles contrastent avec la couleur de la bulle.

Le paramètre d’opacité vous permet de fondre la couleur de la bulle avec l’arrière-plan, de sorte que la couleur s’adapte à vos paramètres de thème, par exemple pour les thèmes clair et sombre.

Cette mise à jour est rétrocompatible. Pour accéder à cette fonctionnalité, utilisez le bouton « Vérifier les mises à jour » dans les paramètres de votre thème.

9 « J'aime »

Excellent travail sur ce sujet, @Rhidian !

1 « J'aime »

J’ai désactivé les bordures avec du CSS personnalisé et apporté un léger changement de couleur, ce qui est très esthétique. Ce serait génial si cela proposait une option pour modifier les bordures ou simplement un interrupteur pour les activer/désactiver.

1 « J'aime »

Bonjour @ggurbet, pourriez-vous s’il vous plaît publier une capture d’écran et partager le CSS que vous avez modifié ?

@Rhidian, les bordures étaient trop distrayantes, alors je les ai supprimées. Ignorez mes couleurs :slight_smile:

Capture d’écran pour le thème clair :

Capture d’écran pour le thème sombre :

J’ai ajouté ceci à Common > CSS :

// Composant Bulle de message personnel - Pas de bordure
.archetype-private_message .topic-body .contents {
    border: none !important;
}
3 « J'aime »

J’adore ça !

Demande

  • Serait-il possible de rendre également la couleur quaternaire disponible ?
  • J’ai remarqué une faute d’orthographe dans les instructions. Tertiaire est orthographié teriary à la place

Screenshot of Google Chrome (3-8-21, 10-19-25 AM)

2 « J'aime »

Super cool. J’aime bien :grin:

J’ai ajouté l’option pour supprimer la bordure, l’option quaternaire et corrigé l’orthographe de l’option tertiaire.

Merci @ggurbet @debryc

Shaun The Sheep Movie Ok GIF

7 « J'aime »

C’était rapide, merci !

Au fait, comme vous pouvez le voir, j’ai installé le composant deux fois et défini des couleurs sombres pour notre thème sombre et des couleurs claires pour notre thème clair. Je pense qu’il n’y a pas d’autre moyen si nous voulons utiliser des couleurs CSS personnalisées.

Aussi, une petite suggestion : vous permettez d’ajouter du texte à la fin du bouton de réponse, mais dans certaines langues (comme le turc), il est préférable d’ajouter quelque chose au début, car le verbe se trouve à la fin des phrases.

Oui, c’est une bonne solution de contournement. Est-ce que le changement prévu dans Discourse, qui supprimera la possibilité de modifier localement les thèmes et les composants de Discourse, aura un impact sur votre mise en œuvre ? Cela s’est clairement avéré utile ici.

1 « J'aime »

Non, ce n’est pas le cas. Quelques modifications mineures en CSS suffisent.

Je faisais référence à cette annonce dans la version bêta. Vous pouvez toujours modifier le CSS, mais vous devrez créer un nouveau composant de thème, qui ne sera plus lié au dépôt Git, et y copier tout le code. Est-ce ce que vous avez fait, ou avez-vous opté pour la solution simple en modifiant directement le CSS dans le composant ?

Cela me semble problématique. Je préférerais conserver la possibilité de modifier les thèmes sur place. Cela aide certainement au développement des thèmes et des composants.

1 « J'aime »

J’ai un composant local nommé « sous-thème commun » où j’effectue des modifications pour d’autres composants. Dans ce sous-thème, je cible les classes, éléments, etc. d’autres composants. Tant que l’auteur du composant ne modifie pas les noms de ses classes, identifiants, etc., tout fonctionne correctement. Actuellement, puisque vous avez également inclus la suppression des bordures, je n’ai besoin d’aucune modification dans mon sous-thème pour le composant Bulles de messages personnels, d’ailleurs.

1 « J'aime »

Bonjour et merci pour ce composant de thème délicieux. :trophy:

Un bug potentiel : Il semble que l’option de texte « ajouté » inclue un espace avant la chaîne en bas du sujet du message, mais pas dans la fenêtre de l’éditeur. Voir ci-dessous :

2 « J'aime »

@Rhidian, peux-tu aussi ajouter l’option de préfixer du texte au bouton Répondre ? Dans certaines langues (comme le turc), il serait logique d’ajouter du texte au début d’un verbe.

1 « J'aime »

Super composant !
Avons-nous quelque chose de similaire pour les vrais messages dans les sujets ? Je veux dire un composant qui fait ressembler les messages à des bulles de discussion !

J’ai ajouté l’option pour préfixer le texte du bouton Répondre. Cela masque également la flèche SVG de réponse placée avant le texte Répondre.

1 « J'aime »