Ícone personalizado exclusivo apenas para a página de revisão

[Joart]

Olá,
Gostaria de substituir os ícones de check na página de revisão apenas. Podemos encontrá-lo lá:

<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 eu usar isto:
api.replaceIcon('check', 'full-circle-icon');
todos os checks do fórum serão substituídos pelo círculo completo…
Mas eu não quero substituir o ícone em outras páginas.

Como posso modificar para fazer isso? Obrigado pela sua resposta

[Canapin (Coin-coin le Canapin)]

Não tenho 100% de certeza se funcionaria porque não tentei, mas você pode tentar obter a página atual com JavaScript, verificar se é uma página de revisão e, em seguida, alterar o ícone com sua linha de código.

Acredito que havia um exemplo de JS em algum lugar no meta usando a API para obter a página atual em que estamos, mas não consegui encontrá-lo novamente.

Ou talvez você possa apenas retornar a URL atual para verificar se você está em /review.

[Joart]

Eu tentei isso:

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

Mas não está funcionando…
Tenho este erro:

SyntaxError: /discourse/theme-35/initializers/theme-field-379-common-html-script-1: Unexpected token, expected “,” (97:5)

Eu fiz algo errado?

[Canapin (Coin-coin le Canapin)]

Você esqueceu ); no final do seu código, daí o erro.

Algo como isto poderia funcionar (não se preocupe com a análise de URI, há muitas maneiras de fazer isso):

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

Mas esteja ciente de que onPageChange não é acionado no primeiro carregamento da página. Se você abrir diretamente seuforum/reviews no seu navegador, onPageChange não será acionado e o ícone não será substituído.

Não sei como acionar a alteração do ícone tanto no primeiro carregamento da página quanto na alteração da página. Talvez haja um método de API para isso, mas não o encontrei.

Além disso, uma vez que o ícone é alterado, ele permanecerá alterado em outras páginas conforme você navega, então você deve reverter a alteração do ícone se o URL não for /review.

Em resumo… acho que requer um pouco mais de trabalho para ser totalmente funcional. Note que não sou exatamente um especialista em código Discourse ou javascript. Talvez alguém com mais conhecimento consiga ajudar mais.

---

editar: o código não funciona quando você vai para /review pela primeira vez, suponho que seja porque a página é carregada e o ícone não é alterado dinamicamente. Então, deveríamos encontrar outra maneira de fazer isso. Desculpe por não poder ajudar mais com isso.

[Joart]

@Canapin

você deveria reverter o ícone

Você sabe como fazer isso?

[Don]

Olá,

Eu também escrevo uma solução CSS.

Isso ocultará o ícone de verificação padrão e adicionará o ícone personalizado a um pseudo ::before.

1. Crie um novo componente de tema.

2. Carregue o ícone na seção Uploads e adicione o nome da variável SCSS: review-approved-icon
   

   

3. Clique no botão Editar CSS/HTML e cole o seguinte código na seção Common / CSS.

Use isso se você quiser usar var(--success) para adicionar cor ao ícone personalizado

.reviewable {
  .status span.approved {
    position: relative;
    &:before {
      content: url($review-approved-icon);
      width: 13px;
      height: 13px;
      top: 0px;
      position: absolute;
      // var(--success) cor do esquema claro #090 (cor do ícone personalizado)
      // você pode calcular um novo filtro de cor clara aqui: 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) cor do esquema escuro #1ca551 (cor do ícone personalizado)
        // você pode calcular um novo filtro escuro aqui: https://codepen.io/sosuke/pen/Pjoqqp
        filter: invert(52%) sepia(26%) saturate(1605%) hue-rotate(93deg) brightness(91%) contrast(78%);
      }
    }
    .d-icon {
      visibility: hidden;
    }
  }
}

---

Use isso se o seu ícone tiver a cor que você deseja 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;
    }
  }
}

---

Use isso se você quiser usar um ícone diferente nos esquemas de cores claro e escuro

Se você escolher esta opção, terá que carregar dois ícones diferentes com cores diferentes.

Nome da variável 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;
    }
  }
}

---