Estilos de etiquetas coloridas

[manuel (Manuel Kostka)]

	Resumo	Atribuir estilos de cores personalizados a tags
	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 o uso de Temas do Discourse

Crie estilos de cores personalizados e atribua-os a tags existentes.

O componente vem com três estilos de exemplo (um destaque amarelo, um acento sutil e uma borda) para que você possa ver como ele funciona. Eles não fazem nada até que você atribua tags a eles, e você pode editá-los ou excluí-los livremente.

Configurações do tema

Cada estilo possui:

• Nome — apenas um rótulo, para que você possa distinguir seus estilos
• Tags — selecione as tags a que este estilo se aplica
• Cor de fundo
• Cor do texto
• Cor da borda
• Cor do marcador — define a cor do quadrado quando seu site usa o estilo de tag com marcador

As cores aceitam qualquer valor CSS, por exemplo, #ff7a00. Você também pode usar variáveis de cor do Discourse, como var(--tertiary) — elas se adaptam automaticamente à sua paleta de cores, inclusive no modo escuro.

Configurações do site

O Discourse possui três estilos de tag base, simples, marcador e caixa. Você pode escolher seu estilo base nas configurações do site:

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

[manuel (Manuel Kostka)]

Acabei de atualizar e refatorar este componente. Anteriormente, ele vinha com oito estilos de cores fixos. Agora você pode criar quantos estilos quiser, diretamente na interface de configurações do tema

Leia a descrição atualizada do componente

Atualizando uma instalação existente

Sua configuração existente deve ser migrada automaticamente: as tags que você havia atribuído aos estilos de cores antigos se tornarão estilos equivalentes com as mesmas cores de antes.

Uma coisa a verificar antes de atualizar: se alguma das configurações antigas ainda fizer referência a tags que não existem mais no seu site, remova-as primeiro. Nomes de tags obsoletos farão a atualização falhar.

Esta nova versão requer Discourse 3.3.0 ou posterior. Sites mais antigos permanecerão na versão anterior do componente.