Icono personalizado único solo para la página de revisión

[Joart]

Hola,

Me gustaría reemplazar los iconos de marca de verificación solo en la página de reseñas. Podemos encontrarlo allí:

<span class="approved">
        <svg class="fa d-icon d-icon-check svg-icon svg-string" xmlns="http://www.w3.org/2000/svg">
          <use href="#check"></use>
        </svg>
        Approved
</span>

Si uso esto:
api.replaceIcon('check', 'full-circle-icon');
todas las marcas de verificación del foro se reemplazarán por el círculo completo…
Pero no quiero reemplazar el icono en las otras páginas.

¿Cómo puedo modificarlo para hacer eso? Gracias por tu respuesta.

[Canapin (Coin-coin le Canapin)]

No estoy 100% seguro de que funcione porque no lo he probado, pero puedes intentar obtener la página actual con javascript, comprobar si es una página de revisión y luego cambiar el icono con tu línea de código.

Creo que había un ejemplo de JS en algún lugar de meta usando la API para obtener la página actual en la que estamos, pero no pude encontrarlo de nuevo.

O tal vez puedas simplemente devolver la URL actual para comprobar si estás en /review.

[Joart]

Lo intenté:

    api.onPageChange((url) => {
       if (window.location.href.indexOf("review") > -1) {
             api.replaceIcon('check', 'full-circle-icon');
       }
    }

Pero no funciona…
Tengo este error:

SyntaxError: /discourse/theme-35/initializers/theme-field-379-common-html-script-1: Token inesperado, se esperaba “,” (97:5)

¿Hice algo mal?

[Canapin (Coin-coin le Canapin)]

Olvidaste ); al final de tu código, de ahí el error.

Algo como esto podría funcionar (no te preocupes por el análisis de URI, hay muchas maneras de hacerlo):

    api.onPageChange((url) => {
       if (location.pathname.split('/')[1] == "review") {
            api.replaceIcon('check', 'full-circle-icon');
       }
    });

Pero ten en cuenta que onPageChange no se activa en la carga inicial de la página. Si abres directamente tuforo/reseñas en tu navegador, entonces onPageChange no se activará y el icono no se reemplazará.

No sé cómo activar el cambio de icono tanto en la carga inicial de la página como en un cambio de página. Quizás haya un método de API para eso, pero no lo encontré.

Además, una vez que el icono se cambia, permanecerá cambiado en otras páginas a medida que navegas, por lo que deberías revertir el cambio de icono si la URL no es /review.

En resumen… creo que requiere un poco más de trabajo para ser completamente funcional. Ten en cuenta que no soy exactamente un experto en código o javascript de Discourse. Quizás alguien con más conocimiento pueda ayudar más.

---

edición: el código no funciona cuando vas a /review la primera vez, supongo que esto se debe a que la página se carga y el icono no se cambia dinámicamente. Entonces, deberíamos encontrar otra forma de hacerlo. Lamento no poder ayudar más con esto.

[Joart]

@Canapin

deberías revertir el icono

¿Sabes cómo hacerlo?

[Don]

Hola,

También escribo una solución de CSS.

Ocultará el icono de marca de verificación predeterminado y agregará el icono personalizado a una pseudo ::before.

1. Crea un nuevo componente de tema.

2. Sube el icono a la sección Cargas y agrega el nombre de la variable SCSS: review-approved-icon
   

   

3. Haz clic en el botón Editar CSS/HTML y pega el siguiente código en la sección Común / CSS.

Úsalo si quieres usar var(--success) para agregar color al icono personalizado

.reviewable {
  .status span.approved {
    position: relative;
    &:before {
      content: url($review-approved-icon);
      width: 13px;
      height: 13px;
      top: 0px;
      position: absolute;
      // var(--success) color del esquema claro #090 (color del icono personalizado)
      // puedes calcular el nuevo filtro de color claro aquí: https://codepen.io/sosuke/pen/Pjoqqp
      filter: invert(35%) sepia(92%) saturate(1240%) hue-rotate(91deg) brightness(89%) contrast(104%);
      @media (prefers-color-scheme: dark) {
        // var(--success) color del esquema oscuro #1ca551 (color del icono personalizado)
        // puedes calcular el nuevo filtro de color oscuro aquí: https://codepen.io/sosuke/pen/Pjoqqp
        filter: invert(52%) sepia(26%) saturate(1605%) hue-rotate(93deg) brightness(91%) contrast(78%);
      }
    }
    .d-icon {
      visibility: hidden;
    }
  }
}

---

Úsalo si tu icono tiene el color que quieres usar

.reviewable {
  .status span.approved {
    position: relative;
    &:before {
      content: url($review-approved-icon);
      width: 13px;
      height: 13px;
      top: 0px;
      position: absolute;
    }
    .d-icon {
      visibility: hidden;
    }
  }
}

---

Úsalo si quieres usar un icono diferente en el esquema de color claro y oscuro

Si eliges esto, tendrás que subir dos iconos diferentes con colores diferentes.

Nombre de la variable SCSS: review-approved-icon-light y review-approved-icon-dark

.reviewable {
  .status span.approved {
    position: relative;
    &:before {
      content: url($review-approved-icon-light);
      @media (prefers-color-scheme: dark) {
        content: url($review-approved-icon-dark);
      }
      width: 13px;
      height: 13px;
      top: 0px;
      position: absolute;
    }
    .d-icon {
      visibility: hidden;
    }
  }
}

---