Come personalizzare la barra degli strumenti del composer?

Funzionalità
1

Mi chiedo se ci sia un modo per personalizzare quali pulsanti vengono visualizzati (e in quale ordine) sulla barra degli strumenti del Nuovo argomento.

Nello specifico, voglio sostituire il pulsante Data/Ora con il pulsante Aggiungi evento. La Data/Ora crea solo confusione per i nuovi utenti e nel nostro contesto, gli Eventi sono ciò che vogliamo evidenziare. Istruire gli utenti a ignorare prima il pulsante simile a un calendario, fare clic sull’icona dell’ingranaggio e quindi fare clic sull’altra icona simile a un calendario non è il massimo, considerando che la nostra community ha molte persone non esperte di tecnologia e anziane che la utilizzano.

Vedo che ci sono discussioni sulla personalizzazione del pulsante del nuovo argomento, ma non della barra degli strumenti stessa.

3 Mi Piace
2

Sono curioso anche di questo. Recentemente abbiamo aggiunto uno strumento alla barra degli strumenti dell’editor e questo ha fatto sì che l’icona :gear: andasse a capo.

CleanShot 2024-08-27 at 10.44.59
CleanShot 2024-08-27 at 10.44.59644×386 17.4 KB

1 Mi Piace
3

Non c’è un’impostazione per configurare la barra degli strumenti, ma è possibile farlo tramite temi e plugin.

Sarebbe bello avere questa funzionalità, quindi la ricategorizzerò come richiesta di funzionalità.

Per ora, i pulsanti possono essere nascosti con CSS… ad esempio:

.d-editor-button-bar {
  .local-dates {  // nasconde il pulsante della data
    display: none;
  }
}

o per nascondere un’opzione dal menu :ingranaggio:

.toolbar-popup-menu-options {
  [data-name="Build Poll"] {
    display: none;
  }
}

Con CSS è anche abbastanza semplice riordinare gli elementi in questi menu… puoi fare qualcosa come:

.d-editor-button-bar {
  .local-dates {  // sposta il pulsante della data all'inizio
    order: -1/
  }
}

Abbiamo una guida per capire come apportare modifiche CSS qui:

Detto questo, la modifica più difficile è spostare qualcosa dal menu a discesa alla barra degli strumenti principale (o viceversa). Dovresti nascondere il pulsante originale con CSS e quindi aggiungere un pulsante duplicato utilizzando l’API.

Guardando un componente tema di esempio, come Discourse Gifs dà un’idea generale di come viene fatto… anche se questo diventa complicato se non sei uno sviluppatore.

9 Mi Piace
4

per il menu :gear:

Quando ho provato a scrivere in questo modo, l’ordine di visualizzazione non è cambiato.
PS: anche display: none; non ha funzionato.

.toolbar-popup-menu-options {
  [data-name="Create event"] {
    order: -1;
  }
}

La seguente sintassi funziona come previsto, spostando “Crea evento” in cima.

.select-kit-collection {
  display: flex;
  flex-direction: column;
}

.select-kit-row[data-name="Create event"] {
  order: -1;
}

Non ho familiarità con CSS, ChatGPT mi ha aiutato a creare il codice sopra.

1 Mi Piace
5

Sì, questo è davvero necessario. Non solo un’opzione “predefinita” per tutti gli utenti, ma poi ogni utente potrebbe personalizzarla, perché non tutti hanno bisogno di un pulsante per rendere il testo “Grassetto”, o “Corsivo”, o anche “Chiedi all’IA”.

Ma per ora, poter almeno spostare le cose a livello globale e aggiungerle al menu nascosto/ruota dentata, aiuterebbe.

Sul mio schermo da 13 pollici le cose stanno iniziando a diventare un po’ anguste (mi piace sempre avere una parte dell’argomento originale visibile per citare sezioni, ecc.):

image
image1013×596 51.4 KB

6

Sono curioso: come hai aggiunto quella nota “sono richiesti 20 caratteri” e poi mostra quanti ne ha già digitati una persona?

E per quanto riguarda il titolo?

7

Ad essere sincero, non sono del tutto sicuro. È stato installato su una community che gestivo in precedenza (ma che non gestisco più). Sembra che possa trovarsi qui.

2 Mi Piace
8

Grazie! È esattamente quello! :raising_hands:

1 Mi Piace
9

Ho anche persone anziane nel mio forum e mi sento sciocco a spiegarlo loro.

Anche l’ingranaggio è un simbolo molto poco intuitivo per “c’è di più”. Forse un’ellissi sarebbe più appropriata? C’è un modo semplice per cambiare l’icona?

Un altro ostacolo che ho trovato è che su mobile c’è una piccola icona a hamburger che nasconde/mostra la barra degli strumenti, e sembra essere disattivata per impostazione predefinita. Questo causa molta più confusione di qualsiasi beneficio potrebbe offrire. L’ho disattivata:

.composer-controls .toggle-toolbar {
  display: none;
}

.d-editor-button-bar {
  display: grid !important;
}
10

Ciao, mi stavo chiedendo se questo metodo è ancora consigliato, o se è influenzato da questo?

1 Mi Piace
11

L’uso di api.onToolbarCreate da un inizializzatore .js è ancora supportato :+1:

L’argomento che hai collegato si riferisce solo all’inclusione di javascript nei tag <script type="text/discourse-plugin">.

3 Mi Piace
12

Ciao,

Ho l’icona “crea evento” posizionata a destra e fuori dal menu +, ma puoi posizionarla a sinistra con queste istruzioni:

1° Nell’intestazione del tuo tema in admin > aspetto > tema > modifica > modifica codice > head aggiungi questo javascript

<!-- Pulsante Crea Evento Personalizzato (basato su icona, a prova di lingua) -->
<script>
(() => {
  const e = ".d-editor-button-bar";
  const t = ".btn.no-text.fk-d-menu__trigger.toolbar-menu__options-trigger.toolbar__button.options.toolbar-popup-menu-options";
  const n = ".fk-d-menu__inner-content";
  const o = ".d-modal.fk-d-menu-modal";

  const c = (e) => {
    const t = e.querySelector('svg use[href="#calendar-day"]');
    return t ? t.closest("button") : null;
  };

  const r = (e, t, n = 4000) => new Promise((o, c) => {
    const r = t(e);
    if (r) return o(r);
    const l = new MutationObserver(() => {
      const n = t(e);
      n && (l.disconnect(), o(n));
    });
    l.observe(e, { childList: !0, subtree: !0 });
    setTimeout(() => {
      l.disconnect();
      c();
    }, n);
  });

  const l = (e = 4000) => {
    const t = new MutationObserver(() => {
      document.querySelector(o) && t.disconnect();
    });
    t.observe(document.body, { childList: !0, subtree: !0 });
    setTimeout(() => {
      t.disconnect();
    }, e);
  };

  const s = (e) => {
    if (e.querySelector(".custom-create-event-btn")) return;
    const o = document.createElement("button");
    o.className = "btn no-text btn-icon toolbar__button link custom-create-event-btn";
    o.title = "Crea evento";
    o.innerHTML = '<svg class="fa d-icon d-icon-calendar-day svg-icon"><use href="#calendar-day"></use></svg>';
    e.appendChild(o);

    o.addEventListener("click", async () => {
      const e = document.querySelector(t);
      if (!e) return;
      e.click();
      let o = document.querySelector(n);
      if (!o) {
        await new Promise((e, t) => {
          const c = new MutationObserver(() => {
            o = document.querySelector(n);
            o && (c.disconnect(), e());
          });
          c.observe(document.body, { childList: !0, subtree: !0 });
          setTimeout(() => {
            c.disconnect();
            t();
          }, 2000);
        });
      }
      try {
        (await r(o, c)).click();
        l();
      } catch {}
    });
  };

  const u = new MutationObserver(() => {
    const t = document.querySelector(e);
    t && s(t);
  });
  u.observe(document.body, { childList: !0, subtree: !0 });

  const d = document.querySelector(e);
  d && s(d);
})();
</script>

2° Se vuoi l’icona a sinistra e non a destra: nella stessa pagina admin troverai una scheda CSS dove potrai aggiungere questo:

.btn.no-text.btn-icon.toolbar__button.link.custom-create-event-btn { order: -1; }

3° Bonus: se vuoi che questo pulsante sia visibile in questo punto solo in determinate categorie, usa lo script lì e modifica le condizioni con i nomi delle tue categorie Discourse Calendar (and Event) - #547 by opcourdis

image
image1034×334 33.8 KB

1 Mi Piace
13

Grazie mille a @david e @opcourdis per le risposte utili.

2 Mi Piace