Neues Thema-Schaltfläche in ein Untermenü konvertieren

[Fma965]

Hallo Leute,

Weiß jemand, wie ich den Button „Neues Thema“ für bestimmte Kategorien mit einem Untermenü versehen kann?

Derzeit habe ich das hier:

Aber ich hätte gerne etwas wie das hier, wenn auf den Button „Neues Thema“ geklickt wird:

Ich kann mir ein paar Möglichkeiten vorstellen, dies zu tun, bin mir aber nicht sicher, ob ich zu viel nachdenke. Das Ausblenden des Standardbuttons und das Hinzufügen eines komplett neuen Buttons mit dem Dropdown war eine meiner Ideen.

Dies ist der aktuelle Code, den ich habe. Bevor ich es auf die von mir beschriebene Weise mache, gibt es eine einfache Möglichkeit, einen Menüeintrag hinzuzufügen?

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

Auch wenn ich den Button „Thema erstellen“ ausblende, gibt es eine Variable oder Funktion, mit der ich den Link für den Button „Neues Thema“ abrufen kann?

EDIT: oder besser gesagt, wie wird der Bereich „Neues Thema“ geöffnet? Ich dachte, es wäre durch Klicken auf den Button, der einer ID oder Klasse entspricht, aber das scheint nicht der Fall zu sein?

Danke

[manuel (Manuel Kostka)]

Sie können sich diese Theme-Komponente ansehen:

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

Sie fügt einen Dropdown-Button im Header hinzu und ich werde möglicherweise noch ein paar Änderungen vornehmen. Aber sie sollte eine Vorstellung davon geben, wie der Standard-Button ersetzt werden kann und wie sich der Komponist öffnet und vorab gefüllt wird.

[Fma965]

Danke, das könnte funktionieren, ich werde es mir ansehen.

[Fma965]

Mein Problem ist jetzt, wie ich das in die Topic List-Schaltflächen einfüge, da man DecorateWidget anscheinend nicht mit Plugin-Outlets verwenden kann.

[manuel (Manuel Kostka)]

Ah ja, jetzt erinnere ich mich, warum ich es nicht veröffentlicht habe. Ich wollte es noch flexibler gestalten und anbieten, den Button an verschiedenen Stellen einzufügen. Aber ich hatte noch nicht herausgefunden, wie man das Widget hinzufügt, wenn es nur einen Plugin-Outlet gibt. Vielleicht kennt jemand einen guten Ansatz dafür?

[Fma965]

Hehe ich habe das hier gefunden, aber meine Fähigkeiten liegen nicht wirklich in JavaScript , daher bin ich mir nicht sicher, ob es nützlich ist

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…

Aber bisher gute Arbeit

[awesomerobot (Kris)]

Ich habe letzte Woche etwas Ähnliches gemacht…

In einem Theme können Sie dies zu javascripts/discourse/components/new-topic-dropdown.js hinzufügen

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: "Neues Thema",
        description: "Eine neue Diskussion starten",
        icon: "comment",
      },
    ];

    items.push({
      id: "new_ticket",
      name: "Support-Ticket",
      description: "Eine Support-Anfrage starten",
      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,
    });
  },
});

Dies fügt dem Dropdown-Button die Optionen „Neues Thema“ und „Support-Ticket“ hinzu. „Neues Thema“ öffnet den Composer wie gewohnt, und „Support-Ticket“ öffnet den Composer mit dem bereits hinzugefügten Tag „ticket“.

…und dann in javascripts/discourse/connectors/after-create-topic-button/new-topic-dropdown.hbs

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

…dann möchten Sie wahrscheinlich mit etwas CSS den Standard-Button ausblenden:

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

[Fma965]

Absolute Legende Danke