将“新主题”按钮转换为具有子菜单

[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: "New Topic",
        description: "Start a new discussion",
        icon: "comment",
      },
    ];

    items.push({
      id: "new_ticket",
      name: "Support ticket",
      description: "Start a support request",
      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]

绝对传奇 谢谢