Convert the New Topic button to a have a sub menu

[Fma965]

Hey guys,

Does any one know how i can go about making the New Topic button have a sub menu on certain categories?

Currently i have this

But was hoping to get something like this when the “New Topic” button is clicked

I can think of a few ways to do this but not sure if i’m over thinking it, hiding the stock button and adding a whole new button with the dropdown was one of the ideas i had.

This is the current code i have, before i do it the way i said above, is there a way to just add a menu entry easily?

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

Also if i do hide the “Create Topic” button is there some variable or function i can use to retrive the link for the “New Topic” button?

EDIT: or rather how is the New Topic section opened, i thought it would be from clicking the button matching a ID or class but it seems this isn’t the case?

Thanks

[nolo (Manuel)]

You can have a look at this theme component:

GitHub - nolosb/discourse-wizards-dropdown-button: A Discourse theme...

It adds a dropdown button to the header and I might still make a few changes. But it should give an idea how to replace the default button and how opening and pre-filling the composer works.

[Fma965]

Thanks, this might work, i’ll look in to it.

[Fma965]

I guess my problem now is how i put that in the Topic List buttons, as it seems you can’t use DecorateWidget with plugin outlets.

[nolo (Manuel)]

Ah yeah, now I remember that’s why I didn’t publish it… I still wanted to make it more flexible and offer to insert the button at various places. But I hadn’t figured out how to add the widget when there’s only a plugin outlet. Maybe someone knows a good approach to this?

[Fma965]

Hehe i found this, but my skill isn’t really in javscript so not sure it’s any use

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…

Nice work so far though

[awesomerobot (Kris)]

Oh I just did something like this last week…

In a theme you can add this to 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,
    });
  },
});

This adds “new topic” and “support ticket” options to a dropdown button… “new topic” opens the composer as usual, and “support ticket” opens the composer with the tag “ticket” already added.

…and then in javascripts/discourse/connectors/after-create-topic-button/new-topic-dropdown.hbs

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

…then with some CSS you’ll probably want to hide the default button:

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

[Fma965]

Absolute legend Thanks