Icône personnalisée unique uniquement pour la page d'examen

Bonjour,
Je voudrais remplacer les icônes de coche sur la page d’avis uniquement. On peut les trouver ici :

<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 j’utilise ceci :
api.replaceIcon('check', 'full-circle-icon');
toutes les coches du forum seront remplacées par le cercle plein…
Mais je ne veux pas remplacer l’icône sur les autres pages.

Comment puis-je modifier cela ? Merci pour votre réponse.

Pas tout à fait sûr que cela fonctionnerait car je ne l’ai pas essayé, mais vous pouvez essayer d’obtenir la page actuelle avec javascript, vérifier s’il s’agit d’une page de révision, puis changer l’icône avec votre ligne de code.

Je crois qu’il y avait un exemple JS quelque part sur meta utilisant l’API pour obtenir la page actuelle sur laquelle nous nous trouvons, mais je n’ai pas pu le retrouver.

Ou peut-être pouvez-vous simplement retourner l’URL actuelle pour vérifier si vous êtes sur /review.

J’ai essayé ceci :

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

Mais ça ne fonctionne pas…
J’ai cette erreur :

SyntaxError: /discourse/theme-35/initializers/theme-field-379-common-html-script-1: Jeton inattendu, “,” attendu (97:5)

Ai-je fait quelque chose de mal ?

Vous avez oublié ); à la fin de votre code, d’où l’erreur.

Quelque chose comme ceci pourrait fonctionner (ne vous souciez pas de l’analyse d’URI, il existe de nombreuses façons de le faire) :

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

Mais attention, onPageChange ne se déclenche pas lors du premier chargement de la page. Si vous ouvrez directement votreforum/reviews dans votre navigateur, alors onPageChange ne se déclenchera pas et l’icône ne sera pas remplacée.

Je ne sais pas comment déclencher le changement d’icône à la fois lors du premier chargement de la page et lors d’un changement de page. Il existe peut-être une méthode API pour cela, mais je ne l’ai pas trouvée. :personne_haussant_les_épaules:

De plus, une fois l’icône changée, elle restera changée sur d’autres pages lorsque vous naviguerez, vous devrez donc annuler le changement d’icône si l’URL n’est pas /review.

En bref… je pense que cela demande un peu plus de travail pour être pleinement fonctionnel. Notez que je ne suis pas vraiment un expert en code Discourse ou en javascript. Peut-être que quelqu’un avec plus de connaissances pourra aider davantage.

edit : le code ne fonctionne pas lorsque vous allez sur /review la première fois, je suppose que c’est parce que la page est chargée et que l’icône n’est pas modifiée dynamiquement. Nous devrions donc trouver un autre moyen de le faire. Désolé de ne pas pouvoir aider davantage avec cela. :pensif:

Savez-vous comment faire ?

Bonjour,

J’écris aussi une solution CSS.

Elle masquera l’icône de coche par défaut et ajoutera l’icône personnalisée à un pseudo ::before.

1. Créez un nouveau composant de thème.

2. Téléchargez l’icône dans la section Uploads et ajoutez le nom de la variable SCSS : review-approved-icon
   

   

   Screenshot 2022-11-29 at 21.47.23626×588 26.8 KB

3. Cliquez sur le bouton Modifier CSS/HTML et collez le code suivant dans la section Common / CSS.

Utilisez ceci si vous voulez utiliser var(--success) pour ajouter de la couleur à l'icône personnalisée

Screenshot 2022-11-29 at 21.49.311123×546 74 KB

.reviewable {
  .status span.approved {
    position: relative;
    &:before {
      content: url($review-approved-icon);
      width: 13px;
      height: 13px;
      top: 0px;
      position: absolute;
      // Couleur du schéma clair var(--success) #090 (couleur de l'icône personnalisée)
      // vous pouvez calculer le nouveau filtre de couleur claire ici : 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) {
        // Couleur du schéma sombre var(--success) #1ca551 (couleur de l'icône personnalisée)
        // vous pouvez calculer le nouveau filtre de couleur sombre ici : https://codepen.io/sosuke/pen/Pjoqqp
        filter: invert(52%) sepia(26%) saturate(1605%) hue-rotate(93deg) brightness(91%) contrast(78%);
      }
    }
    .d-icon {
      visibility: hidden;
    }
  }
}

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

Utilisez ceci si vous voulez utiliser une icône différente pour les schémas de couleurs claires et sombres

Si vous choisissez cela, vous devrez télécharger deux icônes différentes avec des couleurs différentes.

Nom de la variable SCSS : review-approved-icon-light et review-approved-icon-dark

Screenshot 2022-11-30 at 8.25.06633×603 31.6 KB

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

Screenshot 2022-11-29 at 21.38.55800×266 19.9 KB