Icona personalizzata unica solo per la pagina di revisione

[Joart]

Ciao,
Vorrei sostituire le icone di spunta nella pagina delle recensioni soltanto. Possiamo trovarla qui:

<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>

Se uso questo:
api.replaceIcon('check', 'full-circle-icon');
tutte le spunte del forum verranno sostituite dal cerchio pieno…
Ma non voglio sostituire l’icona nelle altre pagine.

Come posso modificarlo per fare ciò? Grazie per la tua risposta.

[Canapin (Coin-coin le Canapin)]

Non sono sicuro al 100% che funzionerebbe perché non l’ho provato, ma puoi provare a ottenere la pagina corrente con javascript, verificare se è una pagina di revisione, quindi cambiare l’icona con la tua riga di codice.

Credo ci fosse un esempio JS da qualche parte su meta che utilizzava l’API per ottenere la pagina corrente su cui ci troviamo, ma non sono riuscito a trovarlo di nuovo.

O forse puoi semplicemente restituire l’URL corrente per verificare se sei su /review.

[Joart]

Ho provato questo:

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

Ma non funziona…
Ho questo errore:

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

Ho fatto qualcosa di sbagliato?

[Canapin (Coin-coin le Canapin)]

Hai dimenticato ); alla fine del tuo codice, da qui l’errore.

Qualcosa del genere potrebbe funzionare (non badare al parsing dell’URI, ci sono molti modi per farlo):

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

Ma tieni presente che onPageChange non si attiva al primo caricamento della pagina. Se apri direttamente il tuo forum/recensioni nel browser, allora onPageChange non si attiverà e l’icona non verrà sostituita.

Non so come attivare la modifica dell’icona sia al primo caricamento della pagina sia al cambio di pagina. Forse esiste un metodo API per questo, ma non l’ho trovato.

Inoltre, una volta cambiata l’icona, rimarrà cambiata su altre pagine mentre navighi, quindi dovresti ripristinare la modifica dell’icona se l’URL non è /review.

In breve… penso che richieda un po’ più di lavoro per essere completamente funzionale. Tieni presente che non sono esattamente un esperto di codice Discourse o di javascript. Forse qualcuno con più conoscenze sarà in grado di aiutare ulteriormente.

---

modifica: il codice non funziona quando vai su /review la prima volta, suppongo sia perché la pagina viene caricata e l’icona non viene cambiata dinamicamente. Quindi, dovremmo trovare un altro modo per farlo. Mi dispiace di non poter aiutare di più con questo.

[Joart]

@Canapin

dovresti ripristinare l’icona

Sai come farlo?

[Don]

Ciao,

Scrivo anche una soluzione CSS.

Nasconderà l’icona di spunta predefinita e aggiungerà l’icona personalizzata a uno pseudo ::before.

1. Crea un nuovo componente tema.

2. Carica l’icona nella sezione Upload e aggiungi il nome della variabile SCSS: review-approved-icon
   

   

3. Fai clic sul pulsante Modifica CSS/HTML e incolla il seguente codice nella sezione Common / CSS.

Usalo se vuoi usare var(--success) per aggiungere colore all'icona personalizzata

.reviewable {
  .status span.approved {
    position: relative;
    &:before {
      content: url($review-approved-icon);
      width: 13px;
      height: 13px;
      top: 0px;
      position: absolute;
      // Colore schema chiaro var(--success) #090 (colore icona personalizzata)
      // puoi calcolare il nuovo filtro colore chiaro qui: 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) {
        // Colore schema scuro var(--success) #1ca551 (colore icona personalizzata)
        // puoi calcolare il nuovo filtro colore scuro qui: https://codepen.io/sosuke/pen/Pjoqqp
        filter: invert(52%) sepia(26%) saturate(1605%) hue-rotate(93deg) brightness(91%) contrast(78%);
      }
    }
    .d-icon {
      visibility: hidden;
    }
  }
}

---

Usalo se la tua icona ha il colore che vuoi usare

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

---

Usalo se vuoi usare un'icona diversa per lo schema di colori chiaro e scuro

Se scegli questa opzione, dovrai caricare due icone diverse con colori diversi.

Nome della variabile SCSS: review-approved-icon-light e 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;
    }
  }
}

---