# 新しいトピックボタンをサブメニューにする

**URL:** https://meta.discourse.org/t/convert-the-new-topic-button-to-a-have-a-sub-menu/212300
**Category:** Development
**Created:** [2021 年 12 月 16 日午後 1:09 UTC](https://meta.discourse.org/t/convert-the-new-topic-button-to-a-have-a-sub-menu/212300 "2021-12-16T13:09:13Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![Fma965](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fma965/32/259795_2.png) [@Fma965](https://meta.discourse.org/u/Fma965)
#### Post date: [2021 年 12 月 16 日午後 1:09 UTC](https://meta.discourse.org/t/convert-the-new-topic-button-to-a-have-a-sub-menu/212300/1 "2021-12-16T13:09:14Z")

</div>

皆さん、こんにちは。

特定のカテゴリで「新規トピック」ボタンにサブメニューを付ける方法をご存知の方はいらっしゃいますか？

現在は以下のようになっています。

 ![image](https://global.discourse-cdn.com/meta/original/3X/8/b/8b3e7af6213316670dc5b8b6a0e783f6376f6679.png)

「新規トピック」ボタンをクリックしたときに、以下のような表示になることを期待しています。

 ![image](https://global.discourse-cdn.com/meta/original/3X/d/a/da0f7d41d56e6d9830d7c5d7eb91cf7767935070.png)

これを実現する方法はいくつか考えられますが、考えすぎているかもしれません。標準のボタンを非表示にして、ドロップダウン付きのまったく新しいボタンを追加するというアイデアもありました。

これは現在使用しているコードですが、上記の方法で実装する前に、簡単にメニュー項目を追加する方法はありますか？

```html
<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="Create a new topic using the SYNC 3 Issue template">
    <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">New Sync Issue</span>
  </button>
</script>

```

また、「トピックを作成」ボタンを非表示にする場合、その「新規トピック」ボタンへのリンクを取得するために使用できる変数や関数はありますか？

編集：むしろ、「新規トピック」セクションはどのように開かれるのですか？IDまたはクラスに一致するボタンをクリックすることで開かれると思っていましたが、そうではないようです。

よろしくお願いします。

---

<div class="post-metadata">

### Author: ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [2021 年 12 月 16 日午後 1:56 UTC](https://meta.discourse.org/t/convert-the-new-topic-button-to-a-have-a-sub-menu/212300/2 "2021-12-16T13:56:36Z")

</div>

このテーマコンポーネントをご覧ください。

> **[GitHub - nolosb/discourse-wizards-dropdown-button: A Discourse theme component. Adds a button with a...](https://github.com/nolosb/discourse-wizards-dropdown-button)**
>
> A Discourse theme component. Adds a button with a custom dropdown menu to the header.

ヘッダーにドロップダウンボタンを追加するもので、まだいくつか変更を加えるかもしれませんが、デフォルトのボタンを置き換え、コンポーザーを開いて事前入力する方法のアイデアを得られるはずです。

---

<div class="post-metadata">

### Author: ![Fma965](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fma965/32/259795_2.png) [@Fma965](https://meta.discourse.org/u/Fma965)
#### Post date: [2021 年 12 月 16 日午後 2:29 UTC](https://meta.discourse.org/t/convert-the-new-topic-button-to-a-have-a-sub-menu/212300/3 "2021-12-16T14:29:12Z")

</div>

ありがとうございます。これでうまくいくかもしれません。調べてみます。

---

<div class="post-metadata">

### Author: ![Fma965](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fma965/32/259795_2.png) [@Fma965](https://meta.discourse.org/u/Fma965)
#### Post date: [2021 年 12 月 16 日午後 2:47 UTC](https://meta.discourse.org/t/convert-the-new-topic-button-to-a-have-a-sub-menu/212300/4 "2021-12-16T14:47:00Z")

</div>

Topic List ボタンにそれをどのように配置するかが問題だと思います。プラグインのアウトレットでは DecorateWidget を使用できないようです。

---

<div class="post-metadata">

### Author: ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [2021 年 12 月 16 日午後 3:03 UTC](https://meta.discourse.org/t/convert-the-new-topic-button-to-a-have-a-sub-menu/212300/5 "2021-12-16T15:03:42Z")

</div>

ああ、そうだ、だから公開しなかったんだ。もっと柔軟にして、ボタンを色々な場所に挿入できるようにしたかったんだ。でも、プラグインのアウトレットしかない場合に、ウィジェットをどのように追加すればよいかわからなかった。誰か良い方法を知っているかな？

---

<div class="post-metadata">

### Author: ![Fma965](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fma965/32/259795_2.png) [@Fma965](https://meta.discourse.org/u/Fma965)
#### Post date: [2021 年 12 月 16 日午後 3:04 UTC](https://meta.discourse.org/t/convert-the-new-topic-button-to-a-have-a-sub-menu/212300/6 "2021-12-16T15:04:42Z")

</div>

へへ 🙂 これを見つけましたが、私のスキルは実際にはJavaScriptにはないので、役に立つかどうかはわかりません 😆

> [@api.decorateWidget - how can I find the template's names?](https://meta.discourse.org/t/api-decoratewidget-how-can-i-find-the-templates-names/172907/4?u=fma965):
>
> 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…

今のところ、素晴らしい仕事です 🙂

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2021 年 12 月 16 日午後 4:05 UTC](https://meta.discourse.org/t/convert-the-new-topic-button-to-a-have-a-sub-menu/212300/7 "2021-12-16T16:05:24Z")

</div>

先週も似たようなことをしました…

 ![Screen Shot 2021-12-16 at 11.01.16 AM](https://global.discourse-cdn.com/meta/original/3X/f/6/f60db88f77067ec99883b74af2d7f71f66693c2e.png)

テーマでは、これを `javascripts/discourse/components/new-topic-dropdown.js` に追加できます。

```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` で

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

```

…次に、CSSでデフォルトのボタンを非表示にしたい場合があります。

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

```

---

<div class="post-metadata">

### Author: ![Fma965](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fma965/32/259795_2.png) [@Fma965](https://meta.discourse.org/u/Fma965)
#### Post date: [2021 年 12 月 16 日午後 5:38 UTC](https://meta.discourse.org/t/convert-the-new-topic-button-to-a-have-a-sub-menu/212300/8 "2021-12-16T17:38:13Z")

</div>

絶対的なレジェンド 🙂 ありがとう

 ![image](https://global.discourse-cdn.com/meta/original/3X/9/6/968845c052080f1a845026e4a0d013c35086ddd7.png)

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [2023 年 5 月 2 日午後 4:06 UTC](https://meta.discourse.org/t/convert-the-new-topic-button-to-a-have-a-sub-menu/212300/10 "2023-05-02T16:06:21Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.