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

I guess best behaviour would be to start the composer with empty category if the user does not have the permission to create new topic in the current one? Potentially with a modal and a notice about such.

Eu também queria ter essa funcionalidade, então fiz um fork do repositório e fiz com que ele mostrasse o botão “Novo Tópico” para usuários anônimos e logados. Se um usuário anônimo clicar no botão, ele será redirecionado para o modal de login/inscrição.

Repositório: GitHub - Peterlollo/discourse-new-topic-button-for-all-users-theme-component: Adds new topic button to header and shows it to every user regardless of logged in status

2 curtidas

Há alguns nomes de classes desatualizados, então os estilos não aparecem como pretendido. Adicionei um PR para atualizá-los: FIX: update declarations by nolosb · Pull Request #6 · discourse/discourse-new-topic-button-theme-component · GitHub

4 curtidas

É possível atualizar este plugin para a nova versão?

1 curtida

Acabei de mesclar um refatoramento deste componente para que ele funcione com estas atualizações: Upcoming Header Changes - Preparing Themes and Plugins

O componente deve funcionar como antes, com algumas pequenas melhorias (refletirá o estado do rascunho e reagirá às permissões atuais de categoria e tag). Se notar algum novo problema, por favor, nos informe.

5 curtidas

Acabei de adicionar uma nova configuração show_to_anon (desabilitada por padrão) que fará isso.

3 curtidas

Quão “viável” seria adicionar um menu suspenso semelhante ao do componente de assistente suspenso de nolo?

Como estamos usando o assistente personalizado para criar novos tópicos em categorias específicas, gostaríamos basicamente de vinculá-los aos menus suspensos. Além disso, também gostaríamos de adicionar alguns links exclusivos para a equipe (como “Nova categoria” e “Novo grupo”) ao botão.

Olá, não consegui usar o ícone "lápis" do fontawesome free neste componente, mesmo após adicioná-lo às configurações de "subconjunto de ícones svg". Alguma ideia?

1 curtida

Eu não acho que exista um ícone pencil gratuito na versão 5.

Eu acho que é o mesmo para pencil na v5, é pencil-alt.

4 curtidas

Obrigado! Funciona!

2 curtidas

Uma postagem foi dividida em um novo tópico: Sem botão de novo tópico

Olá,

É possível atualizar o TC com o novo rascunho de atualização?

Obrigado

2 curtidas

Solicitação: adicionar uma opção para definir as cores do botão (fundo, texto + ícone) para temas claro e escuro. Como novos tópicos fazem parte do crescimento de uma comunidade, ter um botão colorido tem mais impacto.

Obrigado

É bem fácil de fazer com CSS:

(você pode direcionar temas escuros e claros com CSS)


editar: adicionando um exemplo adequado

#new-create-topic {
    background-color: light-dark(red,green);
}

Definirá a cor do botão como vermelho em um tema claro e verde em um tema escuro.

2 curtidas

Ainda não estou familiarizado com CSS no Discourse. Estou familiarizado com CSS, mas ainda não comecei a explorá-lo dentro do Discourse.
Como/onde eu adiciono isso?

Ainda acho que isso poderia ser um recurso para evitar adicionar mais complexidade e, para pessoas que não estão familiarizadas com CSS, isso apenas torna o componente mais fácil de personalizar.

1 curtida

Em seu(s) tema(s) ou em um novo componente de tema — que então deve ser incluído em seu(s) tema(s):


Eu adicionei o código CSS na minha postagem acima.

1 curtida

Eu também estava testando :hover e funciona para o botão e o texto, mas não para o ícone, a menos que eu passe o mouse sobre o próprio ícone. Você sabe como direcionar o ícone ao passar o mouse sobre o botão, mesmo que o mouse não esteja sobre o ícone?

#new-create-topic:hover {
    background-color: light-dark(red,red);
    color: light-dark(red,white);
}

#new-create-topic .d-icon:hover {
    color: light-dark(red,white);
}
1 curtida

Sua segunda regra significa que você está direcionando o ícone ao passar o mouse sobre ele, não o botão.

Usando a sintaxe SCSS, que

#new-create-topic:hover {
    background-color: light-dark(red,red);
    color: light-dark(red,white);
}
#new-create-topic:hover .d-icon {
    color: light-dark(red,white);
}

(também não há necessidade de light-dark(red,red); se você usar a mesma cor para claro e escuro)

Eu recomendaria SCSS, pois é mais fácil organizar nosso código bacana, mas isso é algo novo para aprender 😄
#new-create-topic:hover {
    background-color: light-dark(red,red);
    .d-icon, & {
        color: light-dark(red,white);
    }
}
1 curtida

Você está certo. Foi mal… Obrigado!

Estes são apenas testes. Na verdade, estou usando o tema Padrão e não sei se esse tema tem ambas as opções?

Em relação ao SCSS, aprendi há alguns anos, mas foi algo que nunca usei de verdade, já que não sou desenvolvedor. Uso HTML e CSS com bastante frequência, então estou um pouco mais familiarizado com esses dois.

1 curtida

Encontrei este código para fazer esta modificação, mas não tenho certeza se esta é a melhor maneira de fazê-lo:

<script type="text/discourse-plugin" version="0.8">
  api.onPageChange(() => {
    const newTopicButton = document.querySelector('.header-create-topic');
    const draftsButton = document.querySelector('.topic-drafts-menu-trigger');

    if (newTopicButton && draftsButton && !document.querySelector('.fk-header-buttons')) {
      const wrapper = document.createElement('div');
      wrapper.className = 'fk-header-buttons';

      const parent = newTopicButton.parentNode;
      parent.insertBefore(wrapper, newTopicButton);

      wrapper.appendChild(newTopicButton);
      wrapper.appendChild(draftsButton);
    }
  });
</script>