Icônes de tags

Oui, c’est le problème avec les groupes de balises.

Oui, je viens de jeter un coup d’œil et cela semble être une correction assez simple : le noyau doit utiliser le rendu des balises dans le menu déroulant des filtres (ce qui correspondrait au sélecteur de balises dans le compositeur). Je vais m’en occuper sous peu.

3 « J'aime »

Je viens de remarquer que le rendu de la catégorie est également remplacé dans le menu déroulant affiché lors de l’utilisation de #mentioning dans l’éditeur, affichant l’icône de la catégorie provenant du composant du thème. Cependant, le rendu des tags utilise un rendu différent de celui utilisé partout ailleurs, avec une icône de tag à côté du nom du tag :

@pmusaraj, penses-tu qu’il soit possible de faire en sorte que ce rendu utilise également celui remplacé par le composant du thème ?

Merci.

2 « J'aime »

Je pense que standardiser cela aurait du sens, oui. Seriez-vous intéressé à travailler sur une PR pour cela @renato ?

(Au fait, une PR est en cours pour le menu déroulant du filtre ; elle sera probablement fusionnée la semaine prochaine.)

4 « J'aime »

J’ai commencé à utiliser ce composant pour alerter visuellement les utilisateurs lorsqu’une balise déclenche une intégration de chat.

Serait-il possible de colorer également le texte de la balise directement depuis ce composant ? Je vois une option manuelle sur le forum ici. Merci pour ce superbe composant !

edit : Il serait également utile d’ajouter plusieurs icônes à une balise. Merci de prendre cela en compte !

1 « J'aime »

Cela peut être réalisé avec du SCSS dans votre thème ; nous n’avons pas prévu d’ajouter cette fonctionnalité au composant.

Nous n’avons pas non plus l’intention de permettre plusieurs icônes par balise.

2 « J'aime »

Salut @pmusaraj

Y a-t-il déjà une solution de contournement pour définir une icône de repli par groupe d’étiquettes ?

Est-il possible de changer les icônes sur tous les tags ? Au lieu des puces, quelque chose d’autre ? Si j’ai bien compris, ce composant ne concerne que les tags listés.

Réponse trouvée :

.discourse-tags .bullet:before { 
    background: transparent;
    content: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" version="1.1" style="shape-rendering:geometricPrecision;text-rendering:geometricPrecision;image-rendering:optimizeQuality;" viewBox="0 0 467 856.25" x="0px" y="0px" fill-rule="evenodd" clip-rule="evenodd"><defs><style type="text/css">.fil0 {fill:black}</style></defs><g><path class="fil0" d="M234 0c129,0 233,105 233,234 0,64 -26,122 -68,165l-165 286 -166 -286c-42,-43 -68,-101 -68,-165 0,-129 105,-234 234,-234zm0 125c50,0 90,40 90,90 0,50 -40,91 -90,91 -50,0 -91,-41 -91,-91 0,-50 41,-90 91,-90z"/></g></svg>'); 
    vertical-align:baseline;
}

Les images d’icônes SVG peuvent être téléchargées librement sur des sites tels que https://thenounproject.com/

1 « J'aime »

Balises en puces + couleur de balise

Si vous utilisez des balises de style puce et que

  • vous souhaitez avoir la même icône de balise et les mêmes couleurs de texte de balise
  • vous souhaitez afficher la puce uniquement s’il n’y a pas d’icône de balise définie

voici comment je l’ai fait pour les balises books et science-fiction :

Résultat final :

  1. Configuration du composant Tag icons (ce composant)

  1. Configuration d’un composant secondaire qui doit rester synchronisé avec Tag Icons
    Dans ce composant, nous faisons deux choses :
    1. Masquer la puce pour certaines balises
    2. Colorer le texte de la balise avec la même couleur que l’icône

Pour que cela fonctionne, nous créons un nouveau composant de thème : Tag Icons extra.
Dans la section Common/CSS :

  1. Ajoutez le mixin suivant (nécessaire une seule fois) :
@mixin updateBulletTag ($col) {
    &.bullet {
        color: $col !important;
    }
    &.bullet::before {
        content: none !important;
    }
}
  1. Pour chaque balise que vous souhaitez modifier, collez ce qui suit et remplacez REPLACEMETAG par le nom de la balise et REPLACEMECOLOR par la même couleur que l’icône :
[data-tag-name="REPLACEMETAG"] {
    @include updateBulletTag(REPLACEMECOLOR);
}

7 « J'aime »

Rapport de bug : dans le sélecteur de balises d’un message, les icônes ne sont pas colorées :

Ici, les icônes devraient avoir la même couleur que le texte (le texte utilise mon propre CSS personnalisé) :

Ma configuration :

2 « J'aime »

@pmusaraj J’ai environ 50 balises pour lesquelles j’ai ajouté des icônes il y a deux semaines. Quand je consulte ma liste de balises maintenant, cinq d’entre elles n’ont plus d’icônes… Et même si je les supprime et les réinsère, rien n’y fait. Je pourrais essayer de supprimer toutes les 50 et de les réinsérer pour voir si cela aide, mais j’aimerais ne pas avoir à le faire, car c’est fastidieux…

Peux-tu publier une capture d’écran de tes paramètres en indiquant les balises dont les icônes ne fonctionnent plus ?

2 « J'aime »

Hmm, c’est curieux que les cinq dernières entrées ne fonctionnent pas. Peux-tu essayer d’échanger une entrée parmi les cinq dernières avec une autre située au-dessus et voir ce qui se passe ? On dirait que la valeur du paramètre est tronquée à un certain moment…

3 « J'aime »

Juste pour que tu le saches, ce n’étaient pas à l’origine les cinq derniers qui ont commencé à ne plus s’afficher. C’étaient cinq éléments apparemment aléatoires, puis je les ai supprimés et les ai saisis à nouveau pour voir s’ils s’afficheraient (ce qui n’a pas été le cas), et c’est pourquoi il semble qu’ils ne s’affichent pas parce qu’ils sont les derniers.

Cela dit, j’ai supprimé le tag de vérification de preuve et je l’ai ressaisi pour qu’il se retrouve au début de la file. Il était orange et l’est toujours, et s’affiche correctement. Il semble toujours s’agir uniquement de ces cinq…

Y a-t-il un moyen d’utiliser ces variables de couleur pour les couleurs des icônes de balise ?

Vous pouvez utiliser toutes les couleurs pour les icônes de balises.
tagicons
Ou que voulez-vous dire ?

Bonne question, oui, il semble que vous puissiez utiliser des propriétés CSS personnalisées, cela a fonctionné pour moi :

2 « J'aime »

Ah, c’est ma faute. Je viens de trouver mon erreur et tout fonctionne parfaitement.
C’est super que ce soit possible !

1 « J'aime »

Y a-t-il un moyen d’utiliser un PNG pour l’icône ? J’ai toutes mes images que je souhaite utiliser en PNG, et leur conversion en SVG les abîme. De plus, même lorsque je les convertis, les icônes ne se chargent pas.

J’ai plus de 400 images à convertir, et comme je n’arrive pas à faire fonctionner une seule conversion, il serait pratique de pouvoir utiliser directement les PNG que j’ai déjà.

Ce composant n’est pas conçu pour être utilisé avec des fichiers PNG. Dans votre cas, vous pouvez probablement simplement utiliser du CSS.

2 « J'aime »