Iconos de etiquetas

Sí, ese es el problema con los grupos de etiquetas.

Sí, acabo de revisarlo y parece una solución bastante sencilla: el núcleo debe utilizar el renderizador de etiquetas en el menú desplegable de filtros (lo que lo haría coincidir con el selector de etiquetas en el editor). Lo revisaré en breve.

3 Me gusta

Acabo de notar que el renderizador de categorías también se reemplaza en el menú desplegable que aparece al #mencionar en el compositor, mostrando el icono de categoría del componente del tema. Sin embargo, el renderizador de etiquetas muestra un renderizador diferente al de todos los demás lugares, con un icono de etiqueta junto al nombre de la etiqueta:

@pmusaraj, ¿crees que sería posible hacer que este renderizador utilice el que reemplaza el componente del tema?

Gracias.

2 Me gusta

Creo que estandarizar esto tendría sentido, sí. ¿Te interesa trabajar en un PR para esto, @renato?

(Para tu información, ya hay un PR disponible para el menú desplegable de filtros; probablemente se fusionará la próxima semana.)

4 Me gusta

He empezado a usar este componente para alertar visualmente a los usuarios cuando aplicar una etiqueta activará una integración de chat.

¿Sería posible colorear opcionalmente el texto de la etiqueta también directamente desde este componente? Veo una opción manual en el foro aquí. ¡Gracias por el gran componente!

edición: También sería útil añadir varios iconos a una etiqueta. ¡Gracias por considerarlo!

1 me gusta

Esto se puede hacer con SCSS en tu tema; no tenemos planes de agregar esta funcionalidad al componente.

Tampoco tenemos planes de permitir múltiples iconos por etiqueta.

2 Me gusta

Hola @pmusaraj

¿Ya existe alguna solución alternativa para establecer un icono de reserva por grupo de etiquetas?

¿Es posible cambiar los iconos de todas las etiquetas? En lugar de viñetas, ¿algo más? Si entendí bien, este componente es solo para etiquetas enumeradas.

Respuesta encontrada:

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

Las imágenes de iconos SVG se pueden descargar libremente en sitios como https://thenounproject.com/

1 me gusta

Etiquetas con viñetas + color de etiqueta

Si estás utilizando etiquetas con estilo de viñetas y

  • quieres que el icono de la etiqueta y el texto de la etiqueta tengan el mismo color
  • quieres mostrar la viñeta solo si no hay ningún icono de etiqueta configurado

así es como lo hice para las etiquetas books y science-fiction:

Resultado final:

  1. Configuración del componente Iconos de etiquetas (este componente)

  1. Configuración de un componente secundario que debe mantenerse sincronizado con Iconos de etiquetas
    En este componente estamos haciendo dos cosas:
    1. Ocultar la viñeta para etiquetas específicas
    2. Colorear el texto de la etiqueta con el mismo color que el icono

Para que esto funcione, creamos un nuevo componente de tema: Iconos de etiquetas extra.
En la sección Common/CSS:

  1. Añade el siguiente mixin (necesario solo una vez):
@mixin updateBulletTag ($col) {
    &.bullet {
        color: $col !important;
    }
    &.bullet::before {
        content: none !important;
    }
}
  1. Para cada etiqueta que quieras editar, pega lo siguiente y reemplaza REPLACEMETAG con el nombre de la etiqueta y REPLACEMECOLOR con el mismo color que el icono:
[data-tag-name="REPLACEMETAG"] {
    @include updateBulletTag(REPLACEMECOLOR);
}

7 Me gusta

Informe de error: en el selector de etiquetas de una publicación, los iconos no tienen color:

Aquí, los iconos deberían tener el mismo color que el texto (el texto es mi propio CSS personalizado):

Mi configuración:

2 Me gusta

@pmusaraj Tengo unas 50 etiquetas a las que añadí iconos hace unas dos semanas. Ahora reviso mi lista de etiquetas y cinco de ellas ya no tienen iconos… Y aunque las elimine y las vuelva a ingresar, no hay suerte. Podría intentar eliminar las 50 y volver a ingresarlas todas para ver si eso ayuda, pero preferiría no tener que hacerlo, ya que es un trabajo pesado…

¿Podrías publicar una captura de pantalla de tu configuración señalando las etiquetas cuyos iconos ya no funcionan?

2 Me gusta

Hmm, es curioso que las últimas cinco entradas no estén funcionando. ¿Podrías intentar intercambiar una de las últimas cinco con otra de arriba y ver qué pasa? Parece que el valor de la configuración se está truncando en algún punto…

3 Me gusta

Solo para que lo sepas, no fueron originalmente los últimos cinco los que dejaron de aparecer. Fueron cinco aparentemente al azar, y luego los eliminé y los volví a ingresar para ver si aparecían (lo cual no hicieron), y por eso parece que podrían no estar mostrando, porque son los últimos.

Dicho esto, eliminé la etiqueta de verificación de pruebas y la volví a ingresar para que estuviera al principio de la fila. Era naranja y sigue siendo naranja y apareciendo correctamente. Todavía parece ser solo esos cinco…

¿Existe alguna manera de usar esas variables de color para los colores de los iconos de las etiquetas?

Puedes usar cualquier color para los iconos de las etiquetas.
tagicons
¿O qué quieres decir?

Buena pregunta, sí, parece que puedes usar propiedades personalizadas de CSS; esto funcionó para mí:

2 Me gusta

Ah, mi error. Acabo de encontrar mi fallo y funciona perfectamente.
¡Qué genial que sea posible!

1 me gusta

¿Hay alguna forma de usar un PNG para el icono? Tengo todas mis imágenes en formato PNG y convertirlas a SVG solo las arruina; además, cuando lo hago, los iconos no cargan de todos modos.

Tengo más de 400 imágenes que necesitaría convertir y, dado que ni siquiera puedo hacer que funcione una conversión, sería agradable poder usar directamente los PNG que ya tengo.

Este componente no está diseñado para usarse con PNGs. En tu caso, probablemente puedas usar simplemente CSS.

2 Me gusta