Controle de Visibilidade de Notificação de Posts

Componente de tema
,
1
:information_source: Resumo Personalize a visibilidade e o estilo dos avisos de postagem por tipo e idade
:hammer_and_wrench: Repositório GitHub - moin-Jana/post-notice-visibility-control: Customize visibility and style of post notices by type and age
:question: Guia de Instalação Como instalar um tema ou componente de tema
:open_book: Novo em Temas do Discourse? Guia para iniciantes no uso de Temas do Discourse

Instalar este componente de tema

Este componente permite controlar como cada tipo de aviso de postagem (novo usuário, usuário recorrente e oficial) aparece em postagens novas e antigas. Você pode escolher se eles serão destacados, visíveis ou ocultos - e definir cores de destaque personalizadas independentemente para cada tipo.

As capturas de tela mostram exemplos de como os diferentes tipos podem aparecer em postagens novas (à esquerda) e antigas (à direita):

À esquerda, você pode ver um aviso oficial com fundo vermelho, um aviso de novo usuário com fundo verde e um aviso de usuário recorrente com fundo cinza. À direita, o aviso oficial ainda tem fundo vermelho, o aviso de novo usuário não tem fundo e o aviso de usuário recorrente não é visível
À esquerda, você pode ver um aviso oficial com fundo vermelho, um aviso de novo usuário com fundo verde e um aviso de usuário recorrente com fundo cinza. À direita, o aviso oficial ainda tem fundo vermelho, o aviso de novo usuário não tem fundo e o aviso de usuário recorrente não é visível1372×746 39.7 KB

Exemplo de configuração 1 
"custom_new": "highlighted"
"custom_old": "highlighted"
"custom_highlight_color": "var(--danger-low-mid)"

"new_user_new": "highlighted"
"new_user_old": "visible"
"new_user_highlight_color": "var(--success-low)"

"returning_user_new": "highlighted"
"returning_user_old": "hidden"
"returning_user_highlight_color": "var(--primary-200)"

À esquerda, você pode ver um aviso oficial com fundo dourado, um aviso de novo usuário sem fundo e um aviso de usuário recorrente sem fundo. À direita, o aviso oficial não tem fundo, o aviso de novo usuário e o aviso de usuário recorrente não são visíveis
À esquerda, você pode ver um aviso oficial com fundo dourado, um aviso de novo usuário sem fundo e um aviso de usuário recorrente sem fundo. À direita, o aviso oficial não tem fundo, o aviso de novo usuário e o aviso de usuário recorrente não são visíveis1372×746 42 KB

Exemplo de configuração 2 
"custom_new": "highlighted"
"custom_old": "visible"
"custom_highlight_color": "var(--gold)"

"new_user_new": "visible"
"new_user_old": "hidden"
"new_user_highlight_color": "var(--tertiary-low)"

"returning_user_new": "visible"
"returning_user_old": "hidden"
"returning_user_highlight_color": "var(--tertiary-low)"

Para cada combinação de tipo de aviso e idade, você pode escolher se o aviso deve ser destacado, visível (sem destaque) ou oculto. Se você escolher “destacado”, poderá definir opcionalmente uma cor de fundo personalizada.

Recomendo usar uma variável de cor como var(--quaternary-low). Essas variáveis referenciam cores da paleta de cores ativa, portanto, elas se adaptam automaticamente quando um usuário alterna entre diferentes paletas (por exemplo, modo claro e escuro). Isso as torna uma opção mais flexível do que cores codificadas. Embora a maioria das paletas de cores mostre apenas algumas cores base, o Discourse gera tons dessas cores que você também pode usar. Você pode explorar muitas das variáveis de cores disponíveis usando o guia de estilo, que você pode habilitar através da configuração do site styleguide enabled. Alternativamente, você pode inspecionar seu site no navegador - abra as ferramentas do desenvolvedor, vá para a guia Estilos e role até o final para ver todas as variáveis de cores disponíveis.

Você também pode usar valores hexadecimais como #EE8888, valores RGB como rgb(255, 200, 200) ou cores nomeadas como red.

Se nenhuma cor for fornecida, o componente usará var(--tertiary-low) como fallback. As configurações padrão do componente replicam o comportamento padrão do Discourse - portanto, simplesmente ativá-lo não mudará nada até que você o configure.

O número de dias após os quais um aviso de postagem é considerado “antigo” é definido pela configuração do site old post notice days. Isso se aplica a todos os três tipos de avisos.
:warning: Importante: A idade é baseada em quando a postagem foi criada - não quando o aviso foi adicionado.
Você pode definir temporariamente o valor como 0 para visualizar facilmente como os avisos aparecerão em seu estado “antigo”.

12 curtidas
2

Os avisos de postagens antigas não são mais renderizados na versão mais recente do Discourse, o que significa que eles não podem ser estilizados via CSS. Como resultado, todas as configurações _old não têm mais nenhum efeito.

3

Com as últimas atualizações do Discourse, a classe old, que o componente usava para aplicar estilos diferentes a avisos novos e antigos, foi removida. Avisos de postagem para usuários novos e que retornam agora serão removidos automaticamente após a configuração dias de aviso de postagem antiga, enquanto os avisos oficiais permanecem permanentemente visíveis e destacados.

Como resultado, este componente se tornou em grande parte obsoleto. As únicas opções de personalização restantes estão relacionadas às configurações gerais de cores para avisos de postagem. Estas podem ser facilmente ajustadas via CSS, como mostrado abaixo:

.post-notice.custom {
    background-color: var(--danger-low-mid);
}
.post-notice.new-user {
    background-color: var(--success-low);
}
.post-notice.returning-user {
    background-color: var(--primary-200);
}

Se desejar remover o destaque de fundo para um tipo específico de aviso, basta usar background-color: unset;

2 curtidas