Estilos de tags coloridos

[manuel (Manuel Kostka)]

|||
|-|-|-|
| | Resumo | Atribua tags a um conjunto de estilos de cores pré-definidos |
| |Repositório| Manuel Kostka / Discourse / Helpers / Tag Styles · GitLab |
| |Guia de Instalação|Como instalar um tema ou componente de tema|
| |Novo em Temas do Discourse?| Guia para iniciantes sobre como usar Temas do Discourse

Configurações do Tema

Você pode selecionar tags de uma lista suspensa para cada cor.

Configurações do Site

O componente deve funcionar com o estilo de tag box. Para os estilos simple ou bullet, você precisará adicionar algumas declarações personalizadas para ajustar as tags.

Personalizando cores

Escolhi uma interface simples em vez de flexibilidade com os estilos. Portanto, se você quiser alterar as cores pré-definidas, terá que fazer um fork do componente e alterar as declarações de estilo em seu arquivo CSS.

[Fma965]

Bom trabalho, isso só funciona se o estilo da tag for definido como BOX.

Remover .box faz com que funcione em simples, não tenho certeza se isso quebra o box ou não.

[tmn (Tran Nhat)]

Simples, mas funciona perfeitamente. Obrigado.

[sunjam (james.network)]

• Seria possível atribuir cores a Grupos de Tags em vez de tags individuais?
• Seria possível personalizar as cores disponíveis para seguir valores hexadecimais para daltônicos?

[manuel (Manuel Kostka)]

Obrigado pelas sugestões!

Sobre o direcionamento de grupos de tags: No momento, as tags possuem apenas um atributo de dados para o nome e é isso que o componente direciona. Postei uma solicitação de recurso para adicionar outro atributo para o grupo delas há um tempo, você pode dar um “like”

Add a data-tag-group attribute for tags

Right now tags have their name stored in the data attribute data-tag-name: [Screenshot from 2022-07-29 15-50-16] Could there also be an attribute data-tag-group? It would make it easy to style and distinguish tags from different groups on the ux. A use-case where I find this especially helpful is on setups that only use tags. Then you likely have some top-level tags and it makes navigation more intuitive when tags from that group stand out with a distinct look. I saw there was a request years…

Sobre a personalização de cores: No momento, você precisaria fazer um fork do componente e codificar outros valores de cores. Se menus suspensos (para escolher tags) estivessem disponíveis nos editores pop-up, acho que refatoraria o componente com configurações mais personalizáveis.

[45thj5ej]

EDIT: Deixe pra lá, eu simplesmente esqueci de salvar o outro arquivo “settings.yml”, lol. Cérebro frito.

Olá. Ao alterar o código da cor amarela para roxa, recebo este erro. Tudo o que fiz foi simplesmente trocar qualquer menção de “amarelo” por “roxo” e ajustar o valor da cor hexadecimal. Por quê?

  $tags-purple: str-to-list(\"#{$purple}\", \"|\");
  @each $tag in $tags-purple {
    .discourse-tag[data-tag-name=\"#{$tag}\"] {
      color: #CCCCCC !important;
      background-color: #ae00d1;
      &:hover {
        color: #CCCCCC;
        background-color: #ae00d1;
      }
    }
  }

A primeira linha aqui é a linha 8 que o erro menciona.

[ogulcan1787]

Olá, obrigado pelo componente.
Não está funcionando com GitHub - discourse/discourse-remove-dashes-from-tag-names: Remove dashes (-) from tag names in the Topic List and on the Topic page.

Talvez você possa trazer uma atualização?

Funciona quando há uma tag de linha única, mas não funciona quando há uma linha dupla.

Como tag de linha única: support
Linha dupla: support-me

[thaidb]

Podemos selecionar a cor para todas as tags em “Group Tag”?
E não afetar o meu discourse!

@ogulcan1787

Não funciona com GitHub - discourse/discourse-remove-dashes-from-tag-names: Remove dashes (-) from tag names in the Topic List and on the Topic page.

Eu também

[Av8tion]

Olá, este componente não está funcionando com a minha instância. Adicionei as tags para ter certeza das cores no menu de administração do componente, mas todas ainda estão cinzas. Não alterei o código do componente e estou apenas tentando usá-lo como fornecido. Imagens abaixo como exemplo:

[manuel (Manuel Kostka)]

Receio não conseguir reproduzir. Funciona para mim na versão 3.5.

De qualquer forma, publiquei um componente atualizado em um novo repositório no GitLab. Nenhuma alteração funcional, apenas alguma organização e refatoração. O antigo repositório do GitHub ainda deve funcionar, mas se você instalar do zero, por favor, use o novo repositório, ele também está listado no tópico Resumo.

[Av8tion]

Sim, essa nova versão do componente que você linkou também não funciona para mim… as caixas ainda estão todas cinzas

[manuel (Manuel Kostka)]

Sim, não há nenhuma alteração funcional. Mas o componente funciona em uma nova instância padrão. Você inspecionou os elementos?

[Av8tion]

Infelizmente, não sou um especialista em codificação… se um componente não funcionar de forma plug-and-play, estou bastante perdido. Terei que procurar outras opções para fazer algo assim funcionar.

[Ahmed26]

fiz todas as configurações corretamente, os rótulos ainda estão esmaecidos

[manuel (Manuel Kostka)]

Obrigado pelos relatórios, acho que encontrei o problema… as tags agora diferenciam maiúsculas de minúsculas, mas data-tag-name precisa ser analisado como um valor em minúsculas. Portanto, não aplicou estilos a tags maiúsculas.

Me avisem se funcionar após atualizar o componente @Ahmed26 @Av8tion

[Ahmed26]

funciona muito bem agora, obrigado

[Av8tion]

Ótimo trabalho e excelente descoberta! Obrigado pelo trabalho árduo para fazer isso funcionar para nós!