Perché così tante opzioni nel menu dell'editor di ingranaggi?

UX
1

Sul desktop, dove c’è molto spazio nella barra del menu principale, perché così tante opzioni sono nascoste dietro l’opzione del menu a forma di ingranaggio? Testo preformattato, Elenco puntato e Elenco numerato non erano precedentemente nella barra del menu principale?

image
image938×417 33.2 KB

4 Mi Piace
2

Presumo che questo provenga da Meta, a giudicare dallo screenshot. :slight_smile:

Sul mio laptop (Windows/Firefox) questa è la mia barra dei formati:

image
image767×166 6.13 KB

C’è qualcosa nel dispositivo che stai usando che potrebbe spiegare la differenza?

3

Vedo la stessa cosa anche io come @JammyDodger, anche quando riduco la finestra del browser:

image
image676×420 7.77 KB

4

Ciao,

Questo è un dispositivo touchscreen?

4 Mi Piace
5

È un laptop touchscreen, sì. Spero che questo possa essere ripristinato, con un’altra soluzione trovata solo per iPad / tablet, perché l’esperienza sul mio laptop da 13 pollici (non particolarmente grande) è peggiorata molto da questo cambiamento.

6

Ho lo stesso problema.

Fino a quando/se non ci sarà un’interfaccia utente per fornire maggiori opzioni per il layout dei pulsanti del compositore/editor, @awesomerobot ha fornito alcuni esempi CSS per riorganizzarli, e funziona.

Grazie Kris!!!

Kris suggerisce anche che potrebbe essere meglio aggiungere questo come componente del tema, in modo che sia separato dal tuo tema attuale.

Come farlo:

  1. vai su admin\u003ecustomize\u003ethemes quindi fai clic su new
  2. dagli un nome come “Tiles button order”, seleziona “component” dal menu a tendina, fai clic su create
  3. Quindi puoi fare clic su Edit CSS/HTML, copiare e incollare il CSS sopra in common \u003e css

Ora il componente è creato e devi aggiungerlo al tuo tema attuale

  1. torna alla pagina precedente, quindi passa dalla scheda componenti alla scheda temi
  2. seleziona il tuo tema attualmente attivo (avrà un segno di spunta verde)
  3. all’interno delle impostazioni del tema qui c’è una sezione Theme Components, trova il tuo nuovo componente dal menu a tendina e quindi fai clic su “add”
  4. :tada: Ora, quando torni alla home page del tuo forum e aggiorni, dovrebbe essere attivo.

Da Tiles Image Gallery - #66 by awesomerobot
e Tiles Image Gallery - #68 by awesomerobot

7

Vedo anche meno opzioni sul mio iPhone 8. Non sono sicuro se sia correlato a questo cambiamento, ma c’è chiaramente molto spazio aggiuntivo nella barra del menu principale.

image
image750×1283 98.6 KB

8

Abbiamo evitato di osservare la larghezza della barra degli strumenti e il suo contenuto e di adattarla in base allo spazio disponibile perché sarebbe una modifica piuttosto complicata che probabilmente introdurrebbe una certa fragilità.

Quindi la sfida è che dobbiamo far sì che tutte le icone si adattino senza fuoriuscire dal composer in un modo che funzioni per la maggior parte dei dispositivi (alcuni dispositivi touch screen più stretti non potevano accedere affatto al menu a ingranaggio prima di questa modifica). Sfortunatamente, ciò significa che in alcuni casi più icone finiscono nel menu a ingranaggio del necessario.

Abbiamo discusso in modo informale di aggiungere alcune impostazioni del sito che consentano a un amministratore di decidere cosa nascondere nel menu a discesa dell’ingranaggio, quindi in futuro potrebbe diventare configurabile.

13 Mi Piace
9

Un grande +1 per questo.

5 Mi Piace
10

Sarebbe meglio un’impostazione utente. :slight_smile:

Principalmente perché non sono un amministratore haha. Così com’è, uso principalmente il menu per il testo spoiler e i dettagli nascosti. Poterli mostrare nel menu principale sarebbe bello. Ma sembra molto specifico per l’utente, quindi c’è solo una certa misura in cui un’impostazione del sito aiuterà.

3 Mi Piace
11

Il nostro sito ha molti snippet di codice, script e output di log pubblicati dai nostri utenti. Spostare il pulsante del codice preformattato nel menu a ingranaggio quando si dispone di uno schermo tattile, dal nostro punto di vista, non è stata la migliore idea. Esiste un modo (a parte la modifica di javascript) per riportare questo pulsante nella barra dei pulsanti o scambiarlo con un altro pulsante che non riteniamo altrettanto importante?

2 Mi Piace
12

Ciao,

In questo modo puoi aggiungere un nuovo pulsante per il testo preformattato ai dispositivi touch.

Aggiungi quanto segue a una nuova sezione Common/Header del componente.

<script type="text/discourse-plugin" version="0.8">
  const container = Discourse.__container__;
  this.capabilities = container.lookup("capabilities:main");

  if (this.capabilities.touch) {
    api.onToolbarCreate(function(toolbar) {
      toolbar.addButton({
        id: "code",
        group: "insertions",
        preventFocus: true,
        trimLeading: true,
        action: "formatCode",
      });
    });
  }
</script>

Aggiungi questo alla sezione Common/CSS. Questo nasconderà il pulsante del testo preformattato dal menu a comparsa.

.select-kit.dropdown-select-box.toolbar-popup-menu-options {
  li[data-value="applyFormatCode"] {
    display: none;
  }
}

Screenshot_20221204_145422
Screenshot_20221204_1454221080×1389 164 KB

4 Mi Piace
13

@Don - molti, molti ringraziamenti. Funziona alla grande.

1 Mi Piace
14

Questo sarebbe molto utile. Ho notato che la maggior parte degli utenti sul mio sito non ha idea che ci siano opzioni sotto il menu della rotella/ingranaggio.

1 Mi Piace
15

E ho notato che la stragrande maggioranza degli utenti non utilizza affatto la barra degli strumenti. Compreso qui su Meta.

Quindi la Grande Domanda ™ non è cosa abbiamo o non abbiamo sotto il menu a ingranaggio, ma dovremmo mettere tutto sotto l’ingranaggio e offrire un’esperienza di scrittura più pulita :smirking_face:

1 Mi Piace
16

A seguito dell’ultimo aggiornamento di Discourse, sembra che la soluzione fornita da @Don non funzioni più, e anche il pulsante di formattazione del codice è scomparso dal menu a forma di ingranaggio. Modifica: Rimuovendo il componente personalizzato, il pulsante riappare nel menu a forma di ingranaggio. Ora abbiamo bisogno di una soluzione alternativa per ripristinare il pulsante nel menu di intestazione su dispositivi mobili.

In qualità di moderatore di un forum di apprendimento della programmazione, è molto importante che i nostri utenti possano formattare correttamente il loro codice, anche sui dispositivi mobili. Questo problema ci sta rendendo le cose più difficili. :confused:

1 Mi Piace
17

Ciao @sableraph :wave:

Grazie, ho creato un componente tematico funzionante per questo. GitHub - VaperinaDEV/touch-composer-code-button-to-insertions

2 Mi Piace
18

Grazie per la tua risposta!

Non sono sicuro di come installare il tema, ma sono riuscito a patchare il tuo componente originale in questo modo:

<script type="text/discourse-plugin" version="0.8">
  const container = Discourse.__container__;
  this.capabilities = container.lookup("capabilities:main");

  if (this.capabilities.touch) {
    withPluginApi("0.8", api => {
        api.onToolbarCreate(toolbar => {
          toolbar.addButton({
            id: "code",
            group: "insertions",
            icon: "code",
            preventFocus: true,
            trimLeading: true,
            action: "formatCode",
          });
        });
      });
  }
</script>

Il CSS rimane lo stesso.

19

Sembra che questo sia rotto nell’ultimo aggiornamento di Discourse (v3.3.0-beta2). Il pulsante è nella barra degli strumenti ma selezionandolo viene generato un errore riguardo a ‘formatCode’ non è una funzione. Il pulsante che rimane sull’ingranaggio funziona correttamente. Cosa è cambiato?

20

Sostituisci

action: "formatCode",

con

action: () => toolbar.context.send("formatCode")

Questo dovrebbe risolvere il problema :+1:

1 Mi Piace