Convertir el botón Nuevo Tema a un submenú

[Fma965]

Hola chicos,

¿Alguien sabe cómo puedo hacer que el botón “Nuevo tema” tenga un submenú en ciertas categorías?

Actualmente tengo esto:

Pero esperaba obtener algo como esto cuando se hace clic en el botón “Nuevo tema”:

Se me ocurren algunas formas de hacerlo, pero no estoy seguro de si lo estoy pensando demasiado, ocultar el botón predeterminado y agregar un botón completamente nuevo con el menú desplegable fue una de las ideas que tuve.

Este es el código actual que tengo, antes de hacerlo de la manera que dije anteriormente, ¿hay alguna forma de agregar fácilmente una entrada de menú?

<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="Crear un nuevo tema usando la plantilla de problema 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">Nuevo problema de sincronización</span>
  </button>
</script>

Además, si oculto el botón “Crear tema”, ¿hay alguna variable o función que pueda usar para recuperar el enlace del botón “Nuevo tema”?

EDITAR: o más bien, ¿cómo se abre la sección “Nuevo tema”? Pensé que sería al hacer clic en el botón que coincide con un ID o clase, pero parece que este no es el caso.

Gracias

[manuel (Manuel Kostka)]

Puedes echar un vistazo a este componente de tema:

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

Añade un botón desplegable a la cabecera y es posible que aún haga algunos cambios. Pero debería dar una idea de cómo reemplazar el botón predeterminado y cómo funciona la apertura y el prellenado del compositor.

[Fma965]

Gracias, esto podría funcionar, lo investigaré.

[Fma965]

Supongo que mi problema ahora es cómo pongo eso en los botones de la Lista de Temas, ya que parece que no puedes usar DecorateWidget con enchufes de complementos.

[manuel (Manuel Kostka)]

Ah sí, ahora recuerdo por qué no lo publiqué. Todavía quería hacerlo más flexible y ofrecer insertar el botón en varios lugares. Pero no había descubierto cómo añadir el widget cuando solo hay una salida de plugin. ¿Quizás alguien conoce un buen enfoque para esto?

[Fma965]

Jeje encontré esto, pero mis habilidades no son realmente en javascript así que no estoy seguro de que sea de utilidad

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…

Buen trabajo hasta ahora

[awesomerobot (Kris)]

Oh, acabo de hacer algo similar la semana pasada…

En un tema puedes añadir esto a 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,
    });
  },
});

Esto añade las opciones “new topic” y “support ticket” a un botón desplegable… “new topic” abre el composer como de costumbre, y “support ticket” abre el composer con la etiqueta “ticket” ya añadida.

…y luego en javascripts/discourse/connectors/after-create-topic-button/new-topic-dropdown.hbs

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

…luego, con algo de CSS, probablemente querrás ocultar el botón predeterminado:

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

[Fma965]

Leyenda absoluta Gracias