Ferramenta de Estilo de Tag

:information_source: Resumo Tag Style Tool permite que você personalize a aparência das tags.
:eyeglasses: Prévia A ser preenchido
:hammer_and_wrench: Repositório TagStyleTool no Github
:question: Guia de Instalação Como instalar um tema ou componente de tema
:open_book: Novo nos Temas do Discourse? Guia para iniciantes sobre como usar Temas do Discourse

Instalar este componente de tema

Sobre

TagStyleTool é uma versão inspirada em (3) componentes existentes para permitir a personalização da aparência das tags no Discourse!

Funcionalidades:

  • Solucionou problemas de compatibilidade (Especificamente entre remover hífens e ícones de tags)
  • Atribui um ícone Font Awesome a tags específicas.
  • Adicionou a opção de aplicar um ícone de tag padrão a qualquer tag não definida.
  • Inverteu a herança, por exemplo, cor do rótulo ou do texto
  • Resolve um problema de cor de contraste com a cor do texto ao usar a configuração de coloração de rótulo.
  • Permitiu a capacidade de escolher entre os estilos de tag existentes.
  • Versatilidade de configurações permitindo desabilitar a tag padrão ou o recurso de hífens.
  • O formato das configurações é o mesmo (com a adição de novas configurações) que Tag Icons, permitindo portabilidade/adoção facilmente.

Mais a fazer:

  • Implementar uma opção para aplicar a uma categoria inteira. (Isso tem suas desvantagens, acho que pode ser feito, mas requer manutenção extra)
  • Cor de Tag Padrão :sweat_smile: um cenário de “e se” se você quiser apenas a cor e não o ícone.
  • Correções amigáveis ao usuário para as configurações

Outros:

Esta é a primeira vez que publico algo para o público em um bom tempo. Se você tiver problemas, me avise!

A inspiração (e em alguns casos formatação/configurações, etc.) foi diretamente adotada destes projetos existentes:
Remove Dashes from Tag Names
Tag Icons
Color Tag Style

Recursos Úteis

Font Awesome
HTML Color Picker

7 curtidas

Vou tentar isso! Obrigado!! Eu olhei para vários componentes de estilização de tags e parecia complicado ter que instalar vários, então vou testar o seu da próxima vez que eu for trabalhar na minha configuração!

1 curtida

Acabei de testar rapidamente. Dois comentários de “novato”:

  • Fico um pouco perdido nas coisas do FontAwesome. São apenas os gratuitos? Qual versão? Existe uma lista de todos os ícones em algum lugar (ou é muito longa para isso)?
  • cor: quão complicado seria fornecer um seletor de cores, para pessoas que não são fluentes em RGB? :innocent:

Mas obrigado de qualquer forma, isso parece bom!

Não se preocupe em se perder, feliz em ajudar da maneira que puder, afinal é para isso que o Discourse serve, certo?

Font Awesome
O componente deve suportar automaticamente qualquer ícone do Font Awesome da versão atual que está na versão atual do Discourse. Eu acredito que eles atualmente suportam a v6. Você pode encontrar todos eles aqui Font Awesome.

Para a segunda parte da pergunta, sim, é gratuito, existe uma versão premium, mas não tenho certeza de como isso funciona com o Discourse, já que o Font Awesome já está incluído no núcleo.

Seletor de Cores
Posso dar uma olhada e ver se consigo implementar um, mas como é um componente de tema, não tenho certeza do quanto posso fazer antes que se torne necessário ser um plugin. Você pode usar esta ferramenta útil, no entanto, você clica na área “Use HTML 5” onde a cor está, e para este componente, você quer usar a cor hex. HTML Color Picker

1 curtida

Obrigado! Na verdade, um link para esses dois recursos na interface de configurações já seria super útil!

1 curtida

Hoje em dia existe um componente HTML nativo para selecionar cores

Nós também o envolvemos em um componente para um uso ainda mais fácil.

4 curtidas

Muito obrigado!

Bem, fiz algum progresso. Ainda preciso fazer algumas coisas para arrumar antes de enviar, como a lógica de inserção não funciona (copiar funciona), e o botão está visível em todo o site, e mais notavelmente, como você pode ver, está no canto inferior.

Eu também :eyes: descobri como aplicar a todas as tags de um grupo de tags.


colorpickdemo

3 curtidas

Esse construtor de estilos seria um recurso matador!