Herramienta de estilo de etiqueta

:information_source: Resumen Tag Style Tool te permite personalizar la apariencia de las etiquetas.
:eyeglasses: Vista previa Pendiente de rellenar
:hammer_and_wrench: Repositorio TagStyleTool en Github
:question: Guía de instalación Cómo instalar un tema o componente de tema
:open_book: ¿Nuevo en los temas de Discourse? Guía para principiantes sobre el uso de temas de Discourse

Instalar este componente de tema

Acerca de

TagStyleTool es una versión inspirada en (3) componentes existentes para permitir la personalización de la apariencia de las etiquetas en Discourse!

Características:

  • Se resolvieron problemas de compatibilidad (Específicamente entre la eliminación de guiones y los iconos de etiquetas)
  • Asignar un icono de Font Awesome a etiquetas específicas.
  • Se añadió la opción de aplicar un icono de etiqueta predeterminado a cualquier etiqueta no definida.
  • Herencia invertida, por ejemplo, color de etiqueta o de texto
  • Resuelve un problema de color de contraste con el color del texto al usar la configuración de color de la etiqueta.
  • Permitió la capacidad de elegir entre los estilos de etiqueta existentes.
  • Versatilidad de configuraciones que permiten deshabilitar la etiqueta predeterminada o la función de guiones.
  • El formato de configuración es el mismo (con la adición de nuevas configuraciones) que Tag Icons permitiendo portabilidad/adoptabilidad fácilmente.

Más por hacer:

  • Implementar una opción para aplicar a una categoría completa. (Esto tiene sus inconvenientes, creo que se puede hacer, pero requiere mantenimiento adicional)
  • Color de Etiqueta Predeterminado :sweat_smile: un escenario de qué pasaría si solo quieres el color y no el icono.
  • Correcciones de configuración amigables para el usuario

Otros:

Esta es la primera vez que publico algo al público en mucho tiempo. ¡Si tienes problemas, házmelo saber!

La inspiración (y en algunos casos el formato/configuración, etc.) se adoptó directamente de estos proyectos existentes:
Remove Dashes from Tag Names
Tag Icons
Color Tag Style

Recursos útiles

Font Awesome
HTML Color Picker

3 Me gusta

¡Voy a probar esto! ¡¡Gracias!! Estuve viendo varios componentes de estilo de etiquetas y parecía complicado tener que instalar varios, ¡así que probaré el tuyo la próxima vez que me ponga a trabajar en mi configuración!

1 me gusta

Lo acabo de probar rápidamente. Dos comentarios de “novato”:

  • Me pierdo un poco con lo de FontAwesome. ¿Son solo los gratuitos? ¿Qué versión? ¿Hay una lista de todos los iconos en algún sitio (¿o es demasiado larga para eso?)?
  • color: ¿qué tan complicado sería proporcionar un selector de color, para personas que no dominan el RGB? :innocent:

¡Pero gracias ya, esto parece bueno!

No te preocupes por perderte, feliz de ayudar en todo lo que pueda, después de todo, ¿para eso está Discourse, verdad?

Font Awesome
El componente debería admitir automáticamente cualquier icono de Font Awesome de la versión actual que se encuentre en la versión actual de Discourse. Creo que actualmente admiten la v6. Puedes encontrar todos aquí Font Awesome.
Respecto a la segunda parte de la pregunta, sí, es gratis, hay una versión premium, pero no estoy seguro de cómo funciona eso con Discourse ya que Font Awesome ya está incluido en el núcleo.

Selector de Color
Puedo echar un vistazo y ver si puedo implementar uno, pero como es un componente de tema, no estoy seguro de cuánto puedo hacer antes de que sea necesario que sea un plugin. Sin embargo, puedes usar esta útil herramienta, haces clic en el área “Use HTML 5” donde está el color, y para este componente, quieres usar el color hexadecimal. HTML Color Picker

1 me gusta

¡Gracias! De hecho, ¡un enlace a esos dos recursos en la interfaz de configuración ya sería súper útil!

1 me gusta

Hoy en día existe un componente HTML nativo para seleccionar colores

También lo envolvemos en un componente para un uso aún más fácil.

2 Me gusta