Превратить кнопку «Новая тема» в выпадающее меню

[Fma965]

Привет, ребята,

Подскажите, как можно сделать так, чтобы кнопка «Новая тема» имела выпадающее меню для определённых категорий?

Сейчас у меня вот что:

Но хотелось бы получить что-то вроде этого при нажатии на кнопку «Новая тема»:

В голову приходит несколько способов, но не уверен, не усложняю ли я себе жизнь. Одна из идей — скрыть стандартную кнопку и добавить совершенно новую кнопку с выпадающим списком.

Вот текущий код, который у меня есть. Прежде чем делать так, как я описал выше, есть ли способ просто легко добавить пункт в меню?

<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="Создать новую тему, используя шаблон проблемы 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">Новая проблема SYNC</span>
  </button>
</script>

Также, если я скрою кнопку «Создать тему», есть ли какая-то переменная или функция, которую я могу использовать, чтобы получить ссылку на кнопку «Новая тема»?

РЕДАКТИРОВАНИЕ: или, скорее, как открывается раздел «Новая тема»? Я думал, что это происходит при клике на кнопку с определённым ID или классом, но, кажется, это не так?

Спасибо

[manuel (Manuel Kostka)]

Вы можете посмотреть этот компонент темы:

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

Он добавляет выпадающую кнопку в заголовок, и я, возможно, внесу ещё несколько изменений. Но это должно дать представление о том, как заменить кнопку по умолчанию и как работает открытие и предварительное заполнение редактора.

[Fma965]

Спасибо, это может сработать, я займусь этим.

[Fma965]

Полагаю, моя проблема сейчас в том, как добавить это в кнопки списка тем, так как, похоже, нельзя использовать DecorateWidget с плагинными выходами.

[manuel (Manuel Kostka)]

Ага, теперь я вспомнил, почему я это не опубликовал… Я всё ещё хотел сделать его более гибким и предложить вставлять кнопку в разных местах. Но я так и не придумал, как добавить виджет, когда есть только плагин-аутлет. Может, кто-то знает хороший подход к этому?

[Fma965]

Хе-хе Я нашел это, но мои навыки не совсем в JavaScript , поэтому не уверен, что это пригодится

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…

Тем не менее, отличная работа пока что

[awesomerobot (Kris)]

О, я как раз делал что-то подобное на прошлой неделе…

В теме вы можете добавить это в 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: "Новая тема",
        description: "Начать новое обсуждение",
        icon: "comment",
      },
    ];

    items.push({
      id: "new_ticket",
      name: "Заявка в поддержку",
      description: "Создать запрос в поддержку",
      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,
    });
  },
});

Это добавляет в выпадающую кнопку опции «Новая тема» и «Заявка в поддержку»… «Новая тема» открывает композер как обычно, а «Заявка в поддержку» открывает композер с уже добавленным тегом «ticket».

…а затем в javascripts/discourse/connectors/after-create-topic-button/new-topic-dropdown.hbs:

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

…и с помощью CSS вы, вероятно, захотите скрыть кнопку по умолчанию:

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

[Fma965]

Абсолютная легенда Спасибо