Converter o botão Novo Tópico para ter um submenu

[Fma965]

Olá pessoal,

Alguém sabe como posso fazer o botão “Novo Tópico” ter um submenu em certas categorias?

Atualmente, tenho isto:

Mas esperava ter algo assim quando o botão “Novo Tópico” fosse clicado:

Posso pensar em algumas maneiras de fazer isso, mas não tenho certeza se estou pensando demais, esconder o botão padrão e adicionar um botão totalmente novo com o dropdown foi uma das ideias que tive.

Este é o código atual que tenho, antes de fazer do jeito que eu disse acima, existe uma maneira fácil de apenas adicionar uma entrada de menu?

<script type="text/x-handlebars" data-template-name="/connectors/before-create-topic-button/syncbutton">
  <button onclick="window.location.href='/w/issue-with-sync3'" class="btn-default btn btn-icon-text ember-view customnewtopicbtn" title="Criar um novo tópico usando o modelo de problema SYNC 3">
    <svg class="fa d-icon d-icon-plus svg-icon svg-string" xmlns="http://www.w3.org/2000/svg">
      <use xlink:href="#plus"></use>
    </svg>
    <span class="d-button-label">Novo Problema de Sincronização</span>
  </button>
</script>

Além disso, se eu esconder o botão “Criar Tópico”, existe alguma variável ou função que eu possa usar para recuperar o link do botão “Novo Tópico”?

EDIT: ou melhor, como a seção “Novo Tópico” é aberta? Pensei que seria clicando no botão correspondente a um ID ou classe, mas parece que não é o caso?

Obrigado

[manuel (Manuel Kostka)]

Você pode dar uma olhada neste componente de tema:

GitHub - nolosb/discourse-wizards-dropdown-button: A Discourse theme component. Adds a button with a...

Ele adiciona um botão suspenso ao cabeçalho e eu ainda posso fazer algumas alterações. Mas deve dar uma ideia de como substituir o botão padrão e como abrir e preencher previamente o compositor funciona.

[Fma965]

Obrigado, isso pode funcionar, vou analisar.

[Fma965]

Acho que meu problema agora é como colocar isso nos botões da Lista de Tópicos, já que parece que você não pode usar DecorateWidget com plugin outlets.

[manuel (Manuel Kostka)]

Ah sim, agora me lembro por que não publiquei. Eu ainda queria torná-lo mais flexível e oferecer a inserção do botão em vários locais. Mas eu não tinha descoberto como adicionar o widget quando há apenas um plugin outlet. Talvez alguém conheça uma boa abordagem para isso?

[Fma965]

Hehe encontrei isto, mas a minha habilidade não é realmente em javascript por isso não tenho a certeza se é útil

api.decorateWidget - how can I find the template's names?

You aren’t going to be able to use decorateWidget() on a plugin outlet. Try something like this: <script type="text/discourse-plugin" version="0.8.42"> const h = require("virtual-dom").h; api.createWidget("user-card-custom-field", { html(attrs) { const userCustomFields = attrs.user.custom_fields; if (userCustomFields.user_field_4) { return h('span.poster-user-field', userCustomFields.user_field_4); } } }); </script> <script type="text…

Bom trabalho até agora

[awesomerobot (Kris)]

Eu fiz algo parecido na semana passada…

Em um tema, você pode adicionar isso a javascripts/discourse/components/new-topic-dropdown.js

import { action } from "@ember/object";
import { getOwner } from "discourse-common/lib/get-owner";
import Composer from "discourse/models/composer";
import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
import { computed } from "@ember/object";

export default DropdownSelectBoxComponent.extend({
  classNames: ["new-topic-dropdown"],

  selectKitOptions: {
    icons: ["plus"],
    showFullTitle: true,
    autoFilterable: false,
    filterable: false,
    showCaret: true,
    none: "topic.create",
  },

  content: computed(function () {
    const items = [
      {
        id: "new_discussion",
        name: "Novo Tópico",
        description: "Iniciar uma nova discussão",
        icon: "comment",
      },
    ];

    items.push({
      id: "new_ticket",
      name: "Ticket de Suporte",
      description: "Iniciar uma solicitação de suporte",
      icon: "tag",
    });

    return items;
  }),

  @action
  onChange(selectedAction) {
    const composerController = getOwner(this).lookup("controller:composer");

    let tags = null;
    let categoryId = this.category ? this.category.id : null;

    if (selectedAction === "new_ticket") {
      tags = "ticket";
    }

    composerController.open({
      action: Composer.CREATE_TOPIC,
      draftKey: Composer.DRAFT,
      categoryId: categoryId,
      tags: tags,
    });
  },
});

Isso adiciona as opções “novo tópico” e “ticket de suporte” a um botão suspenso… “novo tópico” abre o composer como de costume, e “ticket de suporte” abre o composer com a tag “ticket” já adicionada.

…e então em javascripts/discourse/connectors/after-create-topic-button/new-topic-dropdown.hbs

{{#if currentUser}}
  {{new-topic-dropdown category=category}}
{{/if}}

…então, com algum CSS, você provavelmente vai querer ocultar o botão padrão:

.navigation-controls {
  #create-topic {
    display: none;
  }
}

[Fma965]

Lenda absoluta Obrigado