Banner persistente do Discourse

[NateDhaliwal]

	Resumo	Um banner persistente é exibido na parte superior de cada página e só pode ser ocultado por administradores.
	Prévia	Theme Creator
	Repositório	GitHub - NateDhaliwal/discourse-persistent-banner: A theme component for Discourse that cannot be closed by the user.
	Guia de Instalação	Como instalar um tema ou componente de tema
	Novo em Temas do Discourse?	Guia para iniciantes no uso de temas do Discourse

Instalar este componente de tema

Este componente exibe um banner na parte superior de cada página. Quaisquer cores CSS válidas podem ser usadas. Se você planeja usar variáveis de tema do Discourse, coloque-as entre var(), então você obterá algo como var(--tertiary-very-low).

Existem 7 configurações para controlar o banner.

1. banner_background_color altera a cor de fundo do banner.
2. banner_text_color altera a cor do texto do banner.
3. banner_border_color altera a cor da borda do banner.
4. banner_border_thickness altera a espessura da borda do banner.
5. banner_text_content altera o texto do banner. O texto será quebrado no banner se for maior que 1 linha.
6. banner_visible altera a visibilidade do banner. show para mostrar o banner, hide oculta o banner.
7. banner_location coloca o banner em 1 dos 4 locais fornecidos: above-site-header, below-site-header, above-main-container e before-topic-list.

Agradecimentos especiais a @Lilly por ajudar a organizar os arquivos!

[hoangphuctran93 (Hoàng Phúc Trần)]

Acho bastante semelhante aos componentes de tema " Notification banners " e tem mais personalização.

[NateDhaliwal]

Sim, mas desta forma o banner permanece lá (as pessoas perguntaram como fazer o banner voltar depois de fechá-lo).

[Lilly (Lillian Louis)]

Bom trabalho, Nate.
Gosto da simplicidade.

Acho que a pré-visualização do criador de temas não está funcionando.

Algumas sugestões para você pensar:

• há um pequeno problema de posicionamento no modo desktop, especialmente se alguém estiver usando uma tela larga / tela cheia.

• seria bom controlar o tamanho e a cor dessa borda.

• talvez opções de posicionamento com diferentes saídas de plugin, como below-site-header e above-main-containter?

• embora o uso de lista enum vs. entrada de texto para escolhas de cores seja conveniente, também limita os administradores de usar as variáveis de paleta de cores que funcionam com modos escuro/claro, ou de serem mais granulares com valores de cores hexadecimais.

• Eu sugiro tornar a configuração de entrada de texto da string do banner com a propriedade textarea: true, então você obterá uma caixa de texto multilinha que o usuário pode expandir. Então é mais fácil fazer isso:

[NateDhaliwal]

@Lilly

há um pequeno problema de posicionamento no modo desktop, especialmente se estiver usando uma tela larga / tela cheia

Vou experimentar os posicionamentos do banner e tentar fazer isso funcionar.

@Lilly

seria bom controlar o tamanho e a cor dessa borda.

Não deve ser um grande problema, vou adicionar isso.

@Lilly

talvez opções de posicionamento com diferentes saídas de plugin, como abaixo-do-cabeçalho-do-site e acima-do-contêiner-principal?

Entendido. Tenho uma ideia de como implementar isso.

@Lilly

embora o uso de lista enum vs entrada de texto para escolhas de cores seja conveniente, também limita os administradores de usar as variáveis de paleta de cores que funcionam com modos escuro / claro, ou para serem mais granulares com valores de cores hexadecimais.

Acho que posso implementar isso.

@Lilly

Eu sugiro tornar a configuração do texto do banner uma entrada de texto com a propriedade textarea-true, então você obterá uma caixa de texto multilinha que o usuário pode expandir.

Entendido, vou adicionar isso.

[NateDhaliwal]

@Lilly

textarea-true

@Lilly Só para verificar, eu adiciono isso em settings.yml?

[Lilly (Lillian Louis)]

sim, você pode vê-lo aqui no componente de banner versátil:

settings.yml

resultado nas configurações do componente:

[NateDhaliwal]

@Lilly

talvez opções de posicionamento com diferentes saídas de plugin, como below-site-header e above-main-containter?

Implementado.

@Lilly

seria bom controlar o tamanho e a cor dessa borda.

Feito.

@Lilly

também limita os administradores de usar as variáveis da paleta de cores que funcionam com modos escuro/claro, ou de serem mais granulares com valores de cores hexadecimais.

Agora você pode usar valores hexadecimais (inclua o #), cores CSS válidas ou variáveis de tema (var(–var-name)).

@Lilly

Eu sugeriria tornar a configuração de entrada de texto da string do banner com o textarea: true

Também feito.

@Lilly

há um pequeno problema de posicionamento no modo desktop, especialmente se alguém estiver usando tela larga / tela cheia.

Acho que está corrigido. Você poderia testar do seu lado?

[Lilly (Lillian Louis)]

@NateDhaliwal

Acho que está corrigido. Você poderia tentar do seu lado?

Atribuído a Lilly ​

isso está definitivamente corrigido. bom trabalho.

captura de tela da minha visualização de desktop widescreen

[NateDhaliwal]

ATUALIZAÇÃO:
Simplifiquei o arquivo .gjs movendo as instruções if de verificação se o texto do banner está vazio e a visibilidade do banner para o arquivo .scss.