Trazendo recursos populares para Discourse: busca no cabeçalho, banner de boas-vindas e ícones / emojis de categorias

[lindsey (Lindsey Fogle)]

Adicionamos vários novos recursos ao Discourse com base em componentes de tema populares para facilitar a personalização do design da sua comunidade. Neste tópico, compartilharemos mais sobre esses novos recursos principais, como usá-los e forneceremos informações sobre como eles se comparam aos componentes de tema que os inspiraram.

Pesquisa no cabeçalho

O recurso de pesquisa no cabeçalho move a pesquisa do ícone de lupa no canto superior direito para um campo de entrada mais proeminente no cabeçalho do site.

Quando mais espaço no cabeçalho for necessário (como ao rolar um tópico), a pesquisa voltará ao ícone de lupa para economizar espaço.

Para ativar a pesquisa no cabeçalho…

1. Na área de administração, vá para Temas e componentes.
2. Clique no botão Editar para o seu tema ativo.
3. Encontre a configuração Experiência de pesquisa.
4. Atualize esta configuração para “Campo de pesquisa no cabeçalho do site”.
5. Clique no visto verde para salvar.

Recurso de pesquisa no cabeçalho vs. Componente de Pesquisa Avançada no Cabeçalho

A pesquisa no cabeçalho foi inspirada pelo componente de tema Pesquisa no Cabeçalho, que renomeamos para Pesquisa Avançada no Cabeçalho para distingui-lo do recurso principal.

Você deve usar o componente Pesquisa Avançada no Cabeçalho quando precisar dar suporte a pesquisas externas (ou seja, pesquisas fora da sua comunidade Discourse). Caso contrário, você pode usar o recurso de pesquisa no cabeçalho que agora faz parte do núcleo do Discourse.

Banner de boas-vindas

O banner de boas-vindas cumprimenta membros e visitantes e adiciona uma barra de pesquisa proeminente às suas listas de tópicos.

Os recursos de banner de boas-vindas e pesquisa no cabeçalho são compatíveis entre si, de modo que a pesquisa no cabeçalho será ocultada enquanto o banner de boas-vindas estiver visível.

Para ativar o banner de boas-vindas…

1. Na área de administração, vá para Temas e componentes.
2. Clique no botão Editar para o seu tema ativo.
3. Encontre a configuração Ativar banner de boas-vindas.
4. Ative esta configuração.
5. Clique no visto verde para salvar.

Para personalizar a mensagem exibida no banner, vá para a área Textos do Site e pesquise por “welcome_banner”. Você pode modificar as strings de texto para a saudação do membro registrado, a saudação do usuário anônimo e o campo de pesquisa.

Banner de boas-vindas vs. Componente Banner de Pesquisa Avançada

O banner de boas-vindas foi inspirado pelo componente Banner de Pesquisa, que renomeamos para Banner de Pesquisa Avançada para distingui-lo do recurso principal.

Você deve usar o componente Banner de Pesquisa Avançada quando quiser usar imagens de fundo personalizadas para o banner, inserir várias linhas de texto no banner ou alterar quem pode ver o banner (ou seja, membros logados, usuários desconectados ou ambos). Caso contrário, você pode usar o recurso de banner de boas-vindas que agora faz parte do núcleo do Discourse.

Ícones e emojis de categoria

Agora você pode usar ícones e emojis para distinguir categorias, em vez do quadrado colorido.

Para usar ícones/emojis de categoria…

1. Ao criar ou editar uma categoria, altere a configuração Estilo para Ícone ou Emoji.
2. Escolha o ícone ou emoji que deseja usar. A cor determinará a cor do ícone (se estiver usando) e impactará outras áreas onde uma cor está associada à categoria, como na página /categories.
3. Clique em Salvar Categoria.

Ícones e emojis de categoria vs. Componente Ícones de Categoria

Ícones e emojis de categoria foram inspirados pelo componente Ícones de Categoria, que em breve será descontinuado em favor deste recurso principal porque ele suporta mais personalização (ou seja, emojis) e oferece uma experiência de configuração muito mais simples.

Para aqueles que atualmente usam Ícones de Categoria, recomendamos mover suas personalizações de ícones de Ícones de Categoria para as configurações de categoria principais para suporte de longo prazo e melhorias contínuas de recursos. Em nossos testes, as configurações do componente substituem as configurações do recurso principal, mas elas não foram projetadas para serem usadas juntas.

[AquaL1te]

Eu queria migrar para o método nativo de ícones de categoria. Mas notei que o componente de tema tem muito mais ícones. De todos os ícones que usei, apenas um pequeno subconjunto está funcionando agora com os ícones nativos de categoria. Suponho que a diferença seja que um usa FontAwesome e o outro emojis? Eu uso a opção “ícones”, mas quando procuro por eles, eles não aparecem (depois de desativar o componente de tema para ícones de categoria).

Um exemplo do que estou usando agora:

[Arkshine]

Você pode adicionar os ícones ausentes à configuração do site SVG icon subset.

[krystal (Krystal S)]

@lindsey

Você deve usar o componente Advanced Header Search quando precisar dar suporte a pesquisas externas (ou seja, pesquisas fora da sua comunidade Discourse).

Como isso funciona? Isso significa que você pode pesquisar fontes externas enquanto está no Discourse? Ou isso apenas significa pesquisar o Discourse a partir de uma fonte externa?

[Heliosurge (Dan DeMontmorency)]

@lindsey

Ícones de categoria e emoji

Agora você pode usar ícones e emojis para distinguir categorias, em vez do quadrado colorido.

Isso é uma adição incrível! Obrigado! Combinado com emojis personalizados, adiciona impressionantes capacidades de personalização!

[AquaL1te]

@lindsey

Ícones de categoria e emoji

Ainda há uma diferença, com o componente de tema as subcategorias recebem este toque agradável:

Isso não é visível com a opção nativa de ícone de categoria. O ícone superior desaparece então.

[tomtjes (Thomas Reintjes)]

Eu uso ícones de categoria para indicar se uma categoria é pública, visível para membros logados ou limitada a certos grupos. Seria possível replicar isso com a nova configuração? Gosto que os ícones sejam cinza, mas não gostaria de definir todas as cores das categorias como cinza.

[Arkshine]

@AquaL1te

Isso não é visível com a opção nativa de ícone de categoria. O ícone superior então desaparece.

Acho que isso será suportado assim que este PR for mesclado:

FIX: add category badge style to category list

@tomtjes

Eu uso ícones de categoria para indicar se uma categoria é pública, visível para membros logados ou limitada a certos grupos. Seria possível replicar isso com a nova configuração? Eu gosto que os ícones sejam cinza, mas não gostaria de definir todas as cores das categorias como cinza.

Deve ser possível com CSS.
Você pode definir a cor padrão para todos os ícones e, em seguida, com base na classe .anon (para usuários não logados) e no nome do grupo do usuário (veja CSS Classes for Current User's Groups), você pode ocultar o ícone ou alterá-lo para cinza.

Se você estiver usando apenas ícones e a opção de logado for necessária, tudo bem continuar usando o TC também.

[mcwumbly (Dave McClure)]

@tomtjes

Eu uso ícones de categoria para indicar se uma categoria é pública, visível para membros logados ou limitada a certos grupos.

Eu gosto disso. Eu me pergunto se deveríamos considerar isso um sinal de algo faltando de forma mais fundamental, em vez de transferir esse fardo para os administradores resolverem com personalizações.

Também relacionado: Allow users with access to a restricted category to see who else has access

[gooseegg]

Olá pessoal,

Recentemente atualizamos nosso fórum Discourse (tw.forumosa.com) e, com a última atualização, o novo cabeçalho “Bem-vindo de volta” e a barra de pesquisa integrada foram adicionados à página inicial. Embora pareça bom em conceito, notamos alguns problemas de usabilidade — especialmente no celular:

1. O menu suspenso de pesquisa pode ficar ilegível devido à transparência

Ao tocar no ícone de pesquisa na barra de navegação superior (no Android, por exemplo), o menu suspenso aparece, mas tem um fundo transparente, tornando quase impossível ler os resultados da pesquisa sobre o conteúdo por trás dele. Um fundo sólido deve resolver isso. Postei capturas de tela do que quero dizer abaixo.

2. O cabeçalho é alto - como podemos ajustar o espaçamento vertical?

A nova mensagem de boas-vindas e a barra de pesquisa ocupam uma grande parte do espaço de tela no celular. Como já temos o ícone de pesquisa na barra de navegação, a barra de pesquisa adicionada parece redundante. Gostaríamos de diminuir a altura deste cabeçalho ou ocultar a barra de pesquisa extra/mensagem de boas-vindas inteiramente em telas menores.

Isso pode afetar o desktop também, mas é especialmente problemático no celular no momento.

Alguém já passou por isso e encontrou uma maneira limpa de substituir isso via CSS ou componentes de tema?

Abraços!

[Arkshine]

Vale notar que o banner de atualização também se empilha acima:

Parece que o z-index em .welcome-banner (atualmente 1) deve ser pelo menos \u003e= 3. (o link principal e os metadados usam z-index: 2)

[davidkingham]

@Arkshine

Eu acho que isso será suportado assim que este PR for mesclado:

Receio que ainda esteja quebrado

[David_Ghost]

Você precisa adicionar os ícones em SVG icon subset, se ainda não o fez.

[davidkingham]

Obrigado, mas eu tenho:

[lindsey (Lindsey Fogle)]

Qual página é essa?

Parece que os ícones estão sendo exibidos como esperado em /categories, mas não tenho certeza se isso acontece porque você ainda está usando o componente de tema ou se os problemas que você está enfrentando estão em outra página que precisamos corrigir.

[maiki]

Tive uma ótima experiência: mudei para o tema Horizon no meu site pessoal e defini ícones para minhas categorias… do meu dispositivo móvel!

Isso é incrível, e aprecio os esforços para tornar a experiência de administração tão fluida.