Iconos de categoría

¿Qué significa “icon” en la configuración?

¿Es el nombre exacto de algún icono de un sitio de SVG? ¿Cómo obtengo el nombre exacto?

1 me gusta

¡Eso podría ser realmente una gran mejora!

1 me gusta

Creo que tengo un problema en mi foro, ya que los iconos están especificados en blanco, mientras que el fondo de la página de categorías también es blanco.

¿Podría forzar un fondo diferente aquí, ya que se utiliza para las subcategorías?

2 Me gusta

Estoy revisando el código y tratando de solucionar los siguientes dos problemas, pero estoy atascado en el segundo.

La lista de iconos de categoría no se aplica en la vista de categoría (con Mostrar lista de subcategorías arriba de los temas en esta categoría)

Logré solucionar esto reemplazando la línea 112 en header.html

      if(iconItem && !attrs.category.parent_category_id) {

por

      if (iconItem) {

y agregando el siguiente código a common.scss

.subcategory .category-icon-widget {
  display: none;
}

El icono de bloqueo de categoría junto a la categoría no cambia al nuevo svg

Vista de categorías:

Vista de categoría (con Mostrar lista de subcategorías arriba de los temas en esta categoría):

Creo que este es el código relevante:

    let classNames = "badge-category clear-badge";
    if (restricted) {
      classNames += " restricted";
    }
    
...

    html +=
      `<span ${style} ` +
      'data-drop-close="true" class="' +
      classNames +
      '"' +
      (description ? 'title="' + escapeExpression(description) + '" ' : "") +
      ">";

que agrega la clase restricted a un <span> con las clases badge-category clear-badge, lo cual controla la visualización del icono de bloqueo de subcategoría, pero no logro entender cómo aplicar esto también al <div> con la clase category-text-title, que controla la visualización del icono de bloqueo de categoría.

Por favor, ayuden @pmusaraj @tshenry

2 Me gusta

¿Existe alguna posibilidad de que funcione pronto? Por alguna razón, la vista de cajas de categorías tampoco muestra el globo de color ni el icono de candado, por lo que podría estar fuera del control de este componente…

1 me gusta

Aún no logro “descubrir” qué está mal con el color.
¿Alguien puede ayudarme a ver dónde me equivoqué?

y el resultado

1 me gusta

Error @pmusaraj
Los slugs (y títulos) de las subcategorías solo deben ser únicos dentro de su categoría padre.

Sin embargo, los slugs se utilizan como clave para encontrar el icono en este componente.

Por lo tanto, si tienes dos subcategorías bajo diferentes padres que tienen el mismo slug, el icono se aplica a ambas.

Para ser honesto, creo que esto es realmente un problema de Discourse, ya que los slugs deberían ser únicos en toda la instancia de Discourse, pero no lo son.

¿Es siquiera posible solucionarlo dentro del componente?

1 me gusta

No entiendo por qué los identificadores necesitan ser únicos a nivel global cuando, según mi conocimiento, nunca tienen un alcance global. ¿Puedes explicarlo?

P.D. Veo tu nuevo tema que plantea la pregunta sobre por qué no son únicos.

1 me gusta

El componente de iconos de categoría, por ejemplo, utiliza el identificador único (slug) para determinar a qué categoría debe asignarse el icono. ¿Cómo puede un administrador o un usuario identificar de forma única una subcategoría? ¿Deben utilizar la ruta categoría-padre-subcategoría? (o padre-hijo-nieto cuando se lance esa mejora). Esto parece un poco engorroso.

2 Me gusta

Es probable que sea posible hacer que el componente elimine las subcategorías duplicadas con el mismo slug bajo diferentes padres, pero requeriría alguna forma de pasar el slug de la categoría padre en la configuración del componente. En mi opinión, no sería muy elegante.

¿Podrías intentar cambiar el slug de una de las dos categorías que tienen el mismo slug? ¿Hay alguna razón por la que no puedas hacerlo (solo es necesario cambiar el slug, no el nombre de la categoría)?

3 Me gusta

Sí, parece ser la mejor opción, ya que los slugs de las subcategorías en diferentes categorías padre no tienen que ser únicos.

Dicho esto, esto puede aprovecharse como una característica. Por ejemplo, si tienes categorías basadas en grupos, muchas de las cuales tienen foros de ayuda y anuncios como subcategorías, puedes configurar fácilmente un icono de ayuda común para todas las categorías de ayuda y un icono común para todas las categorías de anuncios usando solo dos entradas. Y cualquier nueva subcategoría con la etiqueta “help” adoptará automáticamente el icono.

Para nuestro caso de uso, he llevado esto un paso más allá y lo he convertido en una opción para una coincidencia parcial del slug, de modo que una entrada como “help,question-mark,#000080,false” coincidiría con “sw-help”, “help-forum” y “helpdesk”.

El elemento adicional “false” al final de la entrada indica que no se debe imponer una coincidencia exacta.

También tengo la opción de especificar el color como “catcol”, en cuyo caso el icono adoptará el color de la categoría en lugar de usar uno especificado por separado.

Dos sugerencias para incluir en una actualización para ti.

3 Me gusta

Creo que el componente utilizaba una coincidencia parcial en algún momento, y eso confundía a algunos usuarios que querían un icono para “book” pero no para “booking”. Pero con la opción de activar o desactivar esto por configuración, sería muy útil. (Quizás podrías usar partial-match en lugar de false como último elemento, sería más fácil de entender.)

Esa es una buena adición.

Estaría encantado de revisar una PR para cualquiera de estas funcionalidades. ¡Gracias!

5 Me gusta

Allow slug partial-match option by rogercreagh · Pull Request #5 · discourse/discourse-category-icons · GitHub ha sido fusionado, ¡gracias @rogerco!

3 Me gusta

Me he topado con un pequeño problema con la opción de color de categoría cuando la configuración usa viñetas o cuadros en lugar de barras. Solo la implementé para la opción de barras en la configuración, por lo que en las otras opciones vuelve al color gris. Creo que se puede solucionar en gran medida con CSS, pero aún no he logrado dar con la solución. ¡Pero lo haré!

3 Me gusta

¡Gracias por este gran tema @pmusaraj! :raising_hands:

Me gustaría usar el icono de COMENTARIOS, pero no me gusta mucho la versión rellena. Cuando uso comments, obtengo la versión rellena. La versión rellena normalmente se proporciona como “fas fa-comments”.
¿Qué pasa si quiero usar la versión regular, que normalmente se proporciona como “far fa-comments”?

De las siguientes variaciones, algunas requieren una suscripción de pago. ¿Existe alguna forma de seleccionar diferentes variaciones o la versión rellena es la única disponible?

3 Me gusta

He añadido a mi tema lo siguiente:

¿Cómo añado esto ahora a la configuración del tema? Esto es lo que intenté hacer…

2 Me gusta

Usa “far-comments” en ambas configuraciones, así:

Las versiones de pago no están disponibles públicamente, por lo que no podemos incluirlas en Discourse. Si su licencia lo permite, puedes añadirlas en un sprite SVG personalizado en tu tema. Las instrucciones completas para ello se encuentran en Presentación de Font Awesome 5 e iconos SVG; lee cuidadosamente la sección “Añadir iconos personalizados”.

4 Me gusta

¡Gracias por la ayuda con esto! Agregar far-comments a ambas áreas funcionó perfectamente.

¿Podrías echar un vistazo rápido a esta otra pregunta que hice (en respuesta a otro de tus comentarios en este tema)?

1 me gusta

¡Hola, componente de tema increíble! Estoy teniendo problemas para agregar Font Awesome o subir imágenes usando la carga de iconos-sprite. Solo logro que se muestre question-circle. ¿Qué estoy haciendo mal? ¿Necesito agregar código CSS?

Imágenes a continuación

Y

Los nombres de Font Awesome siempre dicen “no encontrado” y “crear”. He probado con el nombre directo y el prefijo, por ejemplo, bullhorn o fa-bullhorn.

Actualización: Ya tengo Font Awesome funcionando. Encontré la opción de icono SVG en la configuración para agregarlo, pero no está aplicando la configuración de color como lo hace con question-circle.

Me gustaría usar iconos SVG personalizados, pero necesito una guía paso a paso para principiantes.

1 me gusta

Al ver el sitio en tu perfil, veo iconos para las categorías, ¿así que tal vez ya resolviste esto? Si no es así, por la captura de pantalla de arriba, creo que necesitas asegurarte de que el archivo SVG en icons-sprite sea un archivo de sprite SVG (no un icono individual). Más detalles en Replace Discourse's default SVG icons with custom icons in a theme

6 Me gusta