Outil de style de balise

:information_source: Résumé Tag Style Tool vous permet de personnaliser l’apparence des étiquettes (tags).
:eyeglasses: Aperçu À remplir
:hammer_and_wrench: Dépôt TagStyleTool sur Github
:question: Guide d’installation Comment installer un thème ou un composant de thème
:open_book: Nouveau sur les thèmes Discourse ? Guide du débutant pour utiliser les thèmes Discourse

Installer ce composant de thème

À propos

TagStyleTool est une version inspirée de (3) composants existants pour permettre la personnalisation de l’apparence des étiquettes sur Discourse !

v0.2
Ajout d’un constructeur de style visuel - Permet la recherche d’icônes, la sélection de couleurs et l’importation de catégories !

Fonctionnalités :

  • Résolution des problèmes de compatibilité (spécifiquement entre la suppression des tirets et les icônes d’étiquettes)
  • Attribution d’une icône Font Awesome à des étiquettes spécifiques.
  • Ajout de l’option d’appliquer une icône d’étiquette par défaut à toute étiquette non définie.
  • Inversion de l’héritage, par exemple la couleur du libellé ou du texte.
  • Résolution d’un problème de couleur de contraste avec la couleur du texte lors de l’utilisation du paramètre de coloration des libellés.
  • Permet de choisir entre les styles d’étiquettes existants.
  • Polyvalence des paramètres permettant de désactiver l’étiquette par défaut ou la fonctionnalité des tirets.
  • Le format des paramètres est le même (avec l’ajout de nouveaux paramètres) que Tag Icons permettant une portabilité/adoptabilité facile.

À partir de la v0.2

  • Implémenter une option à appliquer à une catégorie entière. (Cela présente des inconvénients, je pense que cela peut être fait, mais nécessite une maintenance supplémentaire)
  • Rechercher dans la base de données FontAwesome la icône parfaite !
  • Choisir votre couleur préférée à partir d’un sélecteur de couleur visuel.

Plus à faire :

  • Couleur d’étiquette par défaut :sweat_smile: un scénario hypothétique si vous voulez juste la couleur et pas l’icône.
  • Corrections conviviales pour les paramètres

Autre :

C’est la première fois que je publie quelque chose au public depuis un moment. Si vous rencontrez des problèmes, faites-le moi savoir !

L’inspiration (et dans certains cas le formatage/les paramètres, etc.) a été directement adoptée à partir de ces projets existants :
Remove Dashes from Tag Names
Tag Icons
Color Tag Style

Ressources utiles
Ces deux éléments sont maintenant intégrés au composant
Font Awesome
HTML Color Picker

8 « J'aime »

Je vais essayer ça ! Merci !! J’avais regardé un tas de composants de style d’étiquettes et cela semblait compliqué de devoir en installer plusieurs, alors je vais essayer le vôtre la prochaine fois que je m’occuperai de ma configuration !

1 « J'aime »

J’ai juste essayé rapidement. Deux commentaires de “débutant” :

  • Je me perds un peu dans les trucs FontAwesome. Ce sont juste les icônes gratuites ? Quelle version ? Y a-t-il une liste de toutes les icônes quelque part (ou est-elle trop longue pour ça) ?
  • couleur : à quel point serait-il compliqué de fournir un sélecteur de couleurs, pour les personnes qui ne maîtrisent pas le RVB ? :innocent:

Mais merci déjà, cela semble bien !

Ne vous inquiétez pas de vous perdre, heureux de vous aider de toutes les manières possibles, c’est à cela que Discourse sert après tout, n’est-ce pas ?

Font Awesome
Le composant devrait prendre en charge automatiquement n’importe quelle icône Font Awesome de la version actuelle qui se trouve dans la version actuelle de Discourse. Je crois qu’ils prennent actuellement en charge la v6. Vous pouvez trouver toutes les icônes ici Font Awesome.
Pour la deuxième partie de la question, oui c’est gratuit, il existe une version premium, mais je ne suis pas sûr de son fonctionnement avec Discourse car Font Awesome est déjà inclus dans le cœur.

Sélecteur de couleurs
Je peux regarder et voir si je peux en implémenter un, mais comme il s’agit d’un composant de thème, je ne suis pas sûr de ce que je peux faire avant qu’il ne devienne nécessaire d’être un plugin. Vous pouvez cependant utiliser cet outil utile, vous cliquez sur la zone « Use HTML 5 » où se trouve la couleur, et pour ce composant, vous voulez utiliser la couleur hexadécimale. HTML Color Picker

1 « J'aime »

Merci ! En fait, un lien vers ces deux ressources dans l’interface des paramètres serait déjà super utile !

1 « J'aime »

Il existe désormais un composant HTML natif pour choisir les couleurs

Nous l’encapsulons également dans un composant pour une utilisation encore plus facile.

4 « J'aime »

Merci beaucoup !

Chandler Bing Smiling in Friends

Eh bien, j’ai fait quelques progrès. Il me reste encore quelques choses à peaufiner avant de pousser, comme la logique d’insertion qui ne fonctionne pas (la copie fonctionne), et le bouton est visible sur tout le site, et plus particulièrement, comme vous pouvez le voir, dans le coin inférieur.

J’ai aussi :eyes: découvert comment appliquer à toutes les balises d’un groupe de balises.


colorpickdemo

3 « J'aime »

Ce constructeur de style serait une fonctionnalité géniale !

:smiley: Je l’ai publié, faites-moi savoir si vous rencontrez des problèmes.

1 « J'aime »

Le constructeur est plutôt génial ! J’ai réussi à l’utiliser pour quelques balises pour commencer, puis lorsque j’ai cliqué sur la coche verte pour enregistrer mes paramètres, le Tag Style Builder a disparu.

Si j’actualise, le bouton apparaît un bref instant avant de disparaître à nouveau.

Je ne parviens pas non plus à faire apparaître l’une des icônes (par exemple, lock-keyhole) sur la balise, même si elle est suggérée par le constructeur. Je l’ai également ajoutée à la liste des icônes SVG, enregistrée, et toujours rien.

C’est si proche d’être un plaisir à utiliser, merci pour les efforts. J’aimerais que cela remplace définitivement plusieurs autres composants de thème pour moi.

1 « J'aime »

:sweat_smile: J’ai fait tout cela entre 1h et 2h du matin, et j’ai publié à 6h, alors excusez-moi pour les quelques ratés.

  • Je peux reproduire la disparition du bouton, cette satanée chose est têtue. J’ai réussi à le réparer, je crois.
  • Je suppose que j’ai oublié quelque chose concernant les icônes Font Awesome. Vous devez aller dans les paramètres de votre site, puis dans le Sous-ensemble SVG, et l’ajouter manuellement. Si Discourse ne l’utilise pas déjà, il ne s’affichera pas par défaut. Cependant, même en faisant cela, j’ai toujours eu un problème avec son affichage. Je vais examiner cela plus en détail.

Ceci a été déployé.

2 « J'aime »

J’aimerais bien.

J’ai dû supprimer le composant et le réinstaller (les deux fois) pour que le bouton du constructeur apparaisse au départ.

Avec la dernière version, je peux faire en sorte que le bouton persiste après la configuration initiale de mes étiquettes. Et je peux le faire persister après un rafraîchissement. Mais en retournant à l’écran d’édition du composant depuis Thèmes & Composants, le bouton a de nouveau disparu. Sale petit filou.

Je vais jouer avec la partie icônes. Puisqu’il y a un moyen de désactiver les icônes par défaut, y aurait-il un moyen d’ignorer l’icône d’étiquette pour les étiquettes colorées ? Comme si elle correspondait à l’ensemble d’icônes par défaut ou quelque chose comme ça ? Le composant d’étiquettes colorées était agréable car il n’était pas nécessaire de définir une icône, j’appréciais son aspect épuré, et le reproduire serait une fonctionnalité utile pour moi.

2 « J'aime »

:sweat_smile: C’est vraiment une petite chose agaçante.

J’essaie quelques trucs, je vous ai envoyé mon dernier bundle bêta, n’hésitez pas à me faire savoir si vous rencontrez des problèmes avec, car c’est la base de code sur laquelle je travaille.

Cela devrait corriger certaines de ces choses. J’ai ajouté une liste de tâches pour revenir aux remplacements, par exemple Tag1,Pencil,NoColor rendrait simplement Tag1,Pencil, <Color si la valeur par défaut est utilisée, Vrai ou faux si la valeur par défaut est utilisée, sinon, aucune couleur appliquée>.

C’est un excellent processus d’apprentissage pour moi ! :joy:

1 « J'aime »