Personalizar cores de menção

Inspirado por este tópico, e pelas cores personalizadas de cargos do Discord, escrevi este código muito simples que adiciona um data-mention às menções de grupos e usuários, desta forma para poder colocar cores diferentes (e não “cor geral”) via CSS :smile:

O código no momento é JQuery, mas em algum momento o mudarei para Vanilla JavaScript :sweat_smile:


Para aplicá-lo, basta colar o código no cabeçalho do seu tema ou componente:

<script type="text/discourse-plugin" version="0.9">
$(document).ajaxSuccess(() => {
  $('a.mention').each(function() {
    $(this).attr('data-mention', $(this).text().replace('@', ''));  
   });
  $('a.mention-group').each(function() {
   $(this).attr('data-mention', $(this).text().replace('@', ''));  
   });
});
</script>

Depois disso, você pode aplicar o estilo que desejar através de CSS :partying_face:

Por exemplo:

a.mention[data-mention="Alexander"] {
  color: #4527a0 !important;
}

CapturaMentionUser


Neste caso, foi para um nome de usuário específico, no entanto, também funciona para grupos usando a.mention-group[data-mention="nome-do-grupo"]


Vou investigar para transformar isso em um componente de tema que possa ser personalizado a partir de suas “configurações” sem modificar o CSS :thinking:

10 curtidas

Apenas compartilhando. Acho que isso combina bem com este tópico. Especialmente isto

4 curtidas

É possível introduzir ajustes para que ele colore menções de todos os pertencentes ao grupo definido?

+1

Estou procurando uma maneira de identificar quais usuários não estão em um grupo (ou estão em um grupo) em um Tópico que contém uma lista de menções de usuários.