Botão de Cabeçalho do Novo Tópico

:discourse2: Resumo New Topic Header Button adiciona um conveniente botão ‘Novo Tópico’ ao cabeçalho de todas as páginas
:eyeglasses: Pré-visualização Pré-visualizar no Discourse Theme Creator
:hammer_and_wrench: Repositório https://github.com/discourse/discourse-new-topic-button-theme-component
:question: Guia de Instalação Como instalar um tema ou componente de tema
:open_book: Novo em Temas do Discourse? Guia para iniciantes sobre o uso de Temas do Discourse

Instale este componente de tema

Funcionalidades

Um componente de tema simples para adicionar o botão + Novo Tópico ao cabeçalho. O botão aparecerá em todas as páginas - mesmo dentro de tópicos.

Capturas de tela:

Desktop:

Mobile:

Configurações:

Nome Descrição
ícone do botão novo tópico Escolha um ícone para o botão. Você pode usar qualquer nome de ícone gratuito do FontAwesome 6, como music ou star.
texto do botão novo tópico Insira o texto que você deseja que o botão use. Você também pode deixar isso vazio se quiser usar apenas um ícone.
título do botão novo tópico Insira o título que você deseja que o botão use. Se isso for deixado vazio, o título será o mesmo que o texto do botão.
ocultar botão padrão Ocultar o botão padrão “Novo tópico” nas listas de tópicos
mostrar para anônimo Mostrar o botão para visitantes desconectados e redirecionar para login ao clicar

:discourse2: Hospedado por nós? Componentes de tema estão disponíveis para uso em nossos planos Standard, Business e Enterprise.

57 curtidas

Pretty awesome. Now we’re talking!

FYI, we pushed the button yesterday and it was our 2nd biggest day in registrations for the past 30 days. Not sure if it was coincidence or not, but I have a feeling it’s a good way to onboard new users. Will keep an eye on the metrics

(Realizing now it must have been a coincidence, because the button only appears for users who have already logged in. Nonetheless, activity does seem to be higher)

5 curtidas

Hi,

Is it possible to change the color of the button, but not change the color of all buttons in the site?

If so, which is the css code for the button only?

thanks!

1 curtida

Use this code, changing the color obviously.

#new-create-topic {
    background-color: red;
}
3 curtidas

Hm, how about showing the new topic button for everyone and make it act like the default Reply-to-topic button, i.e. as the user to login/sign up if they’re not logged in?

In fact, this might be something to consider for the default new topic button too, but I guess this feature would be most effective in this theme component…

4 curtidas

Inviting every random visitor to create a new topic… will end in tears :sob:

Nothing kills a site quicker than a page full of low-value or gibberish topics.

7 curtidas

Well, they can’t create that topic unless they sign up. And encouraging people to sign up is obviously a good thing (and is being done by default via the sign-up button and the reply-to-topic button). So I don’t really see why the new topic button should cause any problems.

6 curtidas

Is it possible to hide the button on mobile but show the floating button?

To hide the button on mobile add

.header-buttons #new-create-topic {
    display:none;
}

in your mobile > CSS tab

The floating button you are referring is the one used on the Material Design Theme component? If so you need to copy and paste the part of CSS relative to the floating button (New Topic Fab) from material-design-stock-theme/desktop/desktop.scss at main · discourse/material-design-stock-theme · GitHub to your mobile > CSS tab (deleting the lines that start with @include [...]).

However your requests are going off topic, it’s better if you open another topic.

4 curtidas

Thanks, sorry for the offtopicing :slight_smile:

1 curtida

Isso é bom, mas tem duas desvantagens do meu ponto de vista.
A primeira é a localização do botão na barra superior. Já temos outras coisas adicionadas à barra superior, o que a deixa um pouco lotada.
A segunda é o fato de ele aparecer em todas as páginas, mesmo onde é um pouco ilógico (por exemplo, na minha página de perfil ou na lista de grupos).
O caso de uso principal, do meu ponto de vista, é facilitar um pouco para os usuários não fazerem respostas fora do tópico ao visualizar uma discussão. O lugar onde acho que ele é realmente necessário e útil é ao visualizar um tópico/discussão e, idealmente, eu gostaria que ele aparecesse tanto no topo (alinhado com o título do tópico) quanto na parte inferior, ao lado do botão azul principal de Responder.
Uma solução intermediária seria mostrá-lo na posição atual, mas apenas nas páginas /t/xxx.
Isso é possível?

Não quero exibi-lo no celular, como faço isso?

Também quero mostrá-lo ao usuário não registrado; ao clicar no botão, será solicitado o login

Ah, que pena. Não sei o que significa “posição errada” (parece estar tudo certo no meu site de teste), mas achei que o botão funcionaria, e agora vejo que não. Parece que não é tão simples quanto eu pensava. :frowning_face:

1 curtida

Crie um novo componente de tema e adicione isso na aba Mobile > CSS

.mobile-view #new-create-topic {
    display:none
}
4 curtidas

boa ideia - você conseguiu?

Alguém pode me ajudar a saber qual CSS usar para que este botão + Novo Tópico tenha a mesma aparência e funcione exatamente como o colorido botão “Responder” do meu site? (ou seja, o estado padrão, bem como os estados ao passar o mouse e ao ser clicado — ativo?)

Aqui está uma explicação visual do que eu gostaria de fazer…

alterar sua classe para btn-primary?
(não tenho certeza se é possível ter dois itens btn-primary em uma página)
Se você quiser uma solução puramente em CSS, inspecione o estilo do botão azul primário (em todos os seus estados) e replique-o.

Obrigado por este componente @Joe.
Funciona perfeitamente, com uma pequena exceção :slight_smile:
No mobile, ainda tenho dois botões: o novo e o padrão + Novo Tópico.

Fiz o botão padrão desaparecer alterando a seguinte definição de estilo:


Agora funciona bem tanto em desktops quanto em dispositivos móveis, mas seria ótimo se seu componente cuidasse disso. Principalmente porque, por algum motivo, se algum administrador desativar seu componente, nenhum botão + Novo Tópico ficará visível.

4 curtidas

@Johani Fiz um pull request com a alteração mencionada acima.

Você poderia dar uma olhada?

2 curtidas

Obrigado pelo componente! Acredito que existam casos de uso válidos para sempre manter a opção de criar um novo tópico presente no cabeçalho. No entanto, estou com dificuldades em um detalhe da implementação e gostaria de saber como outros lidam com isso:

Atualmente, o componente reflete a categoria em que o usuário está e abre o editor com essa categoria pré-preenchida. Porém, ele não verifica se o usuário tem permissão de escrita naquela categoria específica. Assim, ele preenche o editor com essa categoria (embora o usuário não pudesse selecioná-la manualmente de outra forma) e resulta em um erro ao tentar salvar o tópico.

O botão padrão de “Novo tópico” resolve isso sendo desabilitado em categorias como essas. Mas acho que replicar esse comportamento não seria tão intuitivo, já que a ideia do botão no cabeçalho é oferecer um acesso global para criar novos tópicos. Nesse caso, seria estranho se ele às vezes não funcionasse.

Qual seria uma boa abordagem geral para isso? Ou como outros que utilizam o componente lidam com essa situação? Seria melhor simplesmente remover o pré-preenchimento completamente?

3 curtidas