Pourquoi tant d'options dans le menu de l'éditeur d'engrenages ?

Sur le bureau, où la barre de menu principale offre beaucoup d’espace, pourquoi tant d’options sont-elles cachées derrière l’option de menu en forme d’engrenage ? Le Texte préformaté, la Liste à puces et la Liste numérotée n’étaient-ils pas auparavant dans la barre de menu principale ?

4 « J'aime »

Je suppose que cela vient de Meta à en juger par la capture d’écran. :slight_smile:

Sur mon ordinateur portable (Windows/Firefox), voici ma barre de format :

Y a-t-il quelque chose concernant l’appareil que vous utilisez qui pourrait expliquer la différence ?

Je vois la même chose que @JammyDodger, même lorsque je réduis la fenêtre du navigateur :

Bonjour,

Est-ce un appareil à écran tactile ?

4 « J'aime »

C’est un ordinateur portable à écran tactile, oui. J’espère que cela pourra être annulé, avec une autre solution trouvée uniquement pour iPad / tablettes, car l’expérience sur mon ordinateur portable de 13 pouces (pas particulièrement grand) est bien moins bonne depuis ce changement.

J’ai le même problème.

En attendant/jusqu’à/si une interface utilisateur est fournie pour plus d’options concernant la disposition des boutons du compositeur/éditeur, @awesomerobot a fourni des exemples de CSS pour les réorganiser, et cela fonctionne.

Merci Kris !!!

Kris suggère également qu’il serait peut-être préférable d’ajouter cela en tant que composant de thème, afin qu’il soit séparé de votre thème actuel.

Comment faire :

  1. Allez dans admin\u003ecustomize\u003ethemes puis cliquez sur new
  2. Nommez-le quelque chose comme “Tiles button order”, sélectionnez “component” dans la liste déroulante, cliquez sur create
  3. Ensuite, vous pouvez cliquer sur Edit CSS/HTML, copier et coller le CSS ci-dessus dans common \u003e css

Maintenant, le composant est créé et vous devez l’ajouter à votre thème actuel.

  1. Revenez à la page précédente, puis passez de l’onglet des composants à l’onglet des thèmes.
  2. Sélectionnez votre thème actuellement actif (il aura une coche verte).
  3. Dans les paramètres du thème ici, il y a une section Theme Components, trouvez votre nouveau composant dans la liste déroulante, puis cliquez sur “add”.
  4. :tada: Maintenant, lorsque vous retournerez à la page d’accueil de votre forum et que vous actualiserez, il devrait être actif.

De Tiles Image Gallery - #66 by awesomerobot
et Tiles Image Gallery - #68 by awesomerobot

Je vois aussi moins d’options sur mon iPhone 8. Je ne sais pas si cela est lié à ce changement, mais il y a clairement beaucoup de place supplémentaire sur la barre de menu principale.

Nous avons évité d’observer la largeur de la barre d’outils et de son contenu et de nous adapter à l’espace disponible, car cela constituerait un changement quelque peu compliqué qui introduirait probablement une certaine fragilité.

Le défi est donc que nous devons faire en sorte que toutes les icônes s’intègrent sans déborder de l’éditeur d’une manière qui fonctionne pour la plupart des appareils (certains appareils à écran tactile plus étroits ne pouvaient pas du tout accéder au menu des engrenages avant ce changement). Malheureusement, cela signifie que plus d’icônes finissent dans le menu des engrenages que nécessaire dans certains cas.

Nous avons vaguement discuté de l’ajout de certains paramètres de site qui permettraient à un administrateur de décider de ce qui est caché dans le menu déroulant des engrenages, donc cela pourrait devenir configurable à l’avenir.

13 « J'aime »

Vraiment un gros +1 pour ça.

5 « J'aime »

Un paramètre utilisateur serait mieux. :slight_smile:

Principalement parce que je ne suis pas un administrateur haha. En l’état, j’utilise principalement le menu pour le texte spoiler et les détails cachés. Pouvoir les afficher dans le menu principal serait bien. Mais cela semble très spécifique à l’utilisateur, donc un paramètre de site n’aidera que dans une certaine mesure.

3 « J'aime »

Notre site contient de nombreux extraits de code, scripts et sorties de journal publiés par nos utilisateurs. Déplacer le bouton de code préformaté vers le menu roue dentée lorsque l’on dispose d’un écran tactile n’était, de notre point de vue, pas la meilleure idée. Existe-t-il un moyen (sans avoir à modifier le javascript) de replacer ce bouton dans la barre de boutons ou de l’échanger avec un autre bouton que nous ne jugeons pas aussi important ??

2 « J'aime »

Bonjour,

Voici comment vous pouvez ajouter un nouveau bouton de texte préformaté aux appareils tactiles.

Ajoutez ce qui suit à une nouvelle section Common/Header de composant.

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

Ajoutez ceci à la section Common/CSS. Cela masquera le bouton de texte préformaté du menu contextuel.

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

4 « J'aime »

@Don - un grand merci. Ça marche à merveille.

1 « J'aime »

Ce serait très utile. J’ai remarqué que la plupart des utilisateurs sur mon site n’ont aucune idée qu’il existe des options sous le menu de la roue/de l’engrenage.

1 « J'aime »

Et j’ai remarqué que la grande majorité des utilisateurs n’utilisent pas du tout la barre d’outils. Y compris ici sur Meta.

La grosse question ™ n’est donc pas ce que nous avons ou n’avons pas sous le menu roue dentée, mais devrions-nous tout mettre sous la roue dentée et offrir une expérience d’écriture plus épurée :smirking_face:

1 « J'aime »

Suite à la dernière mise à jour de Discourse, il semble que la solution fournie par @Don ne fonctionne plus, et le bouton de formatage du code a également disparu du menu de la roue dentée. Edit : En supprimant le composant personnalisé, le bouton réapparaît dans le menu de la roue dentée. Nous avons maintenant besoin d’une solution alternative pour ramener le bouton dans le menu d’en-tête sur mobile.

En tant que modérateur d’un forum d’apprentissage de la programmation, il est très important que nos utilisateurs puissent formater correctement leur code, y compris sur les appareils mobiles. Ce problème nous rend les choses plus difficiles. :confused:

1 « J'aime »

Salut @sableraph :wave:

Merci, j’ai maintenant créé un composant de thème fonctionnel pour cela. GitHub - VaperinaDEV/touch-composer-code-button-to-insertions

2 « J'aime »

Merci pour votre réponse !

Je ne suis pas sûr de la façon d’installer le thème, mais j’ai réussi à patcher votre composant d’origine comme ceci :

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

Le CSS reste le même.

Cela semble être cassé dans la dernière mise à jour de Discourse (v3.3.0-beta2). Le bouton est sur la barre d’outils mais sa sélection déclenche une erreur indiquant que « formatCode » n’est pas une fonction. Le bouton restant sur l’engrenage fonctionne correctement. Qu’est-ce qui a changé ?

Remplacez

action: "formatCode",

Par

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

Cela devrait résoudre le problème :+1:

1 « J'aime »