Warum so viele Optionen im Ausrüstungseditor-Menü?

[seanblue]

Auf dem Desktop, wo in der Hauptmenüleiste viel Platz ist, warum sind so viele Optionen hinter der Zahnrad-Menüoption versteckt? Waren Vorgeformter Text, Aufzählungszeichen und Nummerierte Liste nicht früher in der Hauptmenüleiste?

[JammyDodger]

Ich gehe davon aus, dass dies von Meta stammt, dem Screenshot nach zu urteilen.

Auf meinem Laptop (Windows/Firefox) sieht meine Formatierungsleiste so aus:

Gibt es etwas an dem von Ihnen verwendeten Gerät, das den Unterschied erklären könnte?

[Tris20 (Tristan)]

Ich sehe dasselbe wie @JammyDodger, auch wenn ich das Browserfenster zusammenschiebe:

[Don]

Hallo,

Ist das ein Touchscreen-Gerät?

UX: improve composer toolbar flexibility

[seanblue]

Es ist ein Touchscreen-Laptop, ja. Ich hoffe, das kann rückgängig gemacht werden, indem eine andere Lösung nur für iPads/Tablets gefunden wird, denn die Erfahrung auf meinem 13-Zoll-Laptop (nicht besonders groß) ist durch diese Änderung erheblich schlechter geworden.

[denvergeeks]

Ich habe das gleiche Problem.

Bis/wann/falls es eine Benutzeroberfläche gibt, die mehr Optionen für das Layout der Composer-/Editor-Schaltflächen bietet, hat @awesomerobot einige CSS-Beispiele zum Neuanordnen bereitgestellt, und es funktioniert.

Danke Kris!!!

Um die Schaltflächen neu anzuordnen, kann dieses CSS zu Ihrem Theme hinzugefügt werden:

.d-editor-button-bar {
  button:nth-of-type(n+7) { // Schaltfläche, die an 8. Stelle steht, und das Zahnrad-Dropdown
    order: 2;
  }

  button.upload { // Lade-Schaltfläche vor den obigen Elementen platzieren
    order: 1;
  }
}

Was das bewirkt:

Standardmäßig ist order auf 0 gesetzt.

Das Hinzufügen von order: 2 zur 8. Schaltfläche und allen nachfolgenden Elementen bedeutet, dass sie nach allem mit einer niedrigeren order platziert werden. Da sie alle den gleichen order-Wert haben, fallen sie auf die Reihenfolge zurück, in der sie im HTML erscheinen.

Das Hinzufügen von order: 1 platziert die Lade-Schaltfläche vor allem mit order: 2 und nach allem mit dem Standard order: 0. Dies platziert sie also links von der Kachel-Schaltfläche anstatt rechts.

Kris schlägt auch vor, dass es am besten wäre, dies als Theme-Komponente hinzuzufügen, damit es von Ihrem aktuellen Theme getrennt ist.

So geht’s:

1. Gehen Sie zu admin\u003ecustomize\u003ethemes und klicken Sie dann auf new
2. Nennen Sie es etwas wie “Tiles button order”, wählen Sie “component” aus dem Dropdown-Menü und klicken Sie auf “create”
3. Dann können Sie auf Edit CSS/HTML klicken, das obige CSS in common \u003e css kopieren und einfügen

Jetzt ist die Komponente erstellt und Sie müssen sie zu Ihrem aktuellen Theme hinzufügen

1. Gehen Sie zurück zur vorherigen Seite, wechseln Sie dann vom Reiter “Components” zum Reiter “Themes”
2. Wählen Sie Ihr aktuell aktives Theme (es hat ein grünes Häkchen)
3. Innerhalb der Theme-Einstellungen gibt es einen Abschnitt “Theme Components”. Finden Sie Ihre neue Komponente im Dropdown-Menü und klicken Sie dann auf “add”
4. Wenn Sie jetzt zu Ihrer Foren-Homepage zurückkehren und aktualisieren, sollte sie aktiv sein.

Von Tiles Image Gallery - #66 by awesomerobot
und Tiles Image Gallery - #68 by awesomerobot

[seanblue]

Ich sehe auch weniger Optionen auf meinem iPhone 8. Ich bin mir nicht sicher, ob dies mit dieser Änderung zusammenhängt, aber es gibt eindeutig viel zusätzlichen Platz in der Hauptmenüleiste.

[awesomerobot (Kris)]

Wir haben bisher vermieden, die Breite der Symbolleiste und ihres Inhalts zu beobachten und sie an den verfügbaren Platz anzupassen, da dies eine recht komplizierte Änderung gewesen wäre, die wahrscheinlich einige Fehler eingeführt hätte.

Die Herausforderung besteht also darin, dass wir alle Symbole unterbringen müssen, ohne den Komponisten zu überlaufen, und zwar auf eine Weise, die für die meisten Geräte funktioniert (einige schmalere Touchscreen-Geräte konnten das Zahnradmenü vor dieser Änderung überhaupt nicht aufrufen). Leider bedeutet dies, dass in einigen Fällen mehr Symbole als nötig im Zahnradmenü landen.

Wir haben lose darüber gesprochen, einige Site-Einstellungen hinzuzufügen, die es einem Administrator ermöglichen zu entscheiden, was im Zahnrad-Dropdown ausgeblendet wird. Dies könnte also in Zukunft konfigurierbar werden.

[Jagster (Jakke Lehtonen)]

@awesomerobot

einem Administrator erlauben zu entscheiden, was im Cog-Dropdown ausgeblendet wird, sodass dies in Zukunft konfigurierbar sein könnte

Wirklich großes +1 dafür.

[seanblue]

@awesomerobot

Wir haben lose darüber gesprochen, einige Site-Einstellungen hinzuzufügen, die es einem Administrator ermöglichen, zu entscheiden, was im Cog-Dropdown ausgeblendet wird, sodass dies in Zukunft konfigurierbar sein könnte.

Eine Benutzereinstellung wäre besser.

Hauptsächlich, weil ich kein Administrator bin, haha. So wie es jetzt ist, benutze ich das Menü hauptsächlich für Spoilertext und ausgeblendete Details. Es wäre schön, sie im Hauptmenü anzeigen zu können. Aber es scheint sehr benutzerspezifisch zu sein, daher hilft eine Site-Einstellung nur bis zu einem gewissen Grad.

[thess (Ted Hess)]

Unsere Website hat viele Code-Snippets, Skripte und Protokollausgaben, die von unseren Benutzern gepostet werden. Die Schaltfläche für vorformatierten Code in das Zahnradmenü zu verschieben, wenn man einen Touchscreen hat, war aus unserer Sicht keine gute Idee. Gibt es eine Möglichkeit (abgesehen vom Patchen von Javascript), diese Schaltfläche zurück in die Symbolleiste zu verschieben oder sie mit einer anderen Schaltfläche zu tauschen, die wir für weniger wichtig halten?

[Don]

Hallo,

So können Sie einen neuen Button für vorformatierten Text auf Touch-Geräten hinzufügen.

Fügen Sie Folgendes zu einem neuen Komponentenabschnitt Common/Header hinzu.

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

Fügen Sie dies zum Abschnitt Common/CSS hinzu. Dadurch wird die Schaltfläche für vorformatierten Text aus dem Popup-Menü ausgeblendet.

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

---

[thess (Ted Hess)]

@Don - vielen, vielen Dank. Funktioniert einwandfrei.

[rahim123]

@awesomerobot

Wir haben lose darüber gesprochen, einige Website-Einstellungen hinzuzufügen, die es einem Administrator ermöglichen zu entscheiden, was im Zahnrad-Dropdown ausgeblendet wird. Dies könnte in Zukunft konfigurierbar werden.

Das wäre sehr hilfreich. Mir ist aufgefallen, dass die meisten Benutzer auf meiner Website keine Ahnung haben, dass es im Menü des Zahnrads/Rads Optionen gibt.

[Jagster (Jakke Lehtonen)]

Und mir ist aufgefallen, dass die große Mehrheit der Nutzer die Symbolleiste überhaupt nicht verwendet. Auch hier bei Meta.

Die große Frage ™ ist also nicht, was wir im Zahnradmenü haben oder nicht haben, sondern ob wir alles unter das Zahnrad legen und ein saubereres Schreiberlebnis bieten sollten

[sableraph (Raphaël de Courville)]

Nach dem neuesten Update von Discourse scheint die von @Don bereitgestellte Lösung nicht mehr zu funktionieren, und der Codeformatierungsbutton fehlt auch im Zahnradmenü. Bearbeitung: Durch das Entfernen der benutzerdefinierten Komponente erscheint der Button wieder im Zahnradmenü. Wir benötigen nun eine alternative Lösung, um den Button im Header-Menü auf Mobilgeräten wieder einzublenden.

Als Moderator eines Forums zum Erlernen von Programmierung ist es für uns sehr wichtig, dass unsere Benutzer ihren Code richtig formatieren können, auch auf Mobilgeräten. Dieses Problem macht uns die Arbeit schwerer.

[Don]

Hallo @sableraph

Danke, ich habe jetzt eine funktionierende Theme-Komponente dafür erstellt. GitHub - VaperinaDEV/touch-composer-code-button-to-insertions

[sableraph (Raphaël de Courville)]

Vielen Dank für Ihre Antwort!

Ich bin mir nicht sicher, wie ich das Theme installieren soll, aber ich habe es geschafft, Ihre ursprüngliche Komponente wie folgt zu patchen:

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

Das CSS bleibt gleich.

[thess (Ted Hess)]

Dies scheint in der neuesten Version von Discourse (v3.3.0-beta2) defekt zu sein. Die Schaltfläche befindet sich in der Symbolleiste, aber die Auswahl löst einen Fehler aus, dass ‘formatCode’ keine Funktion ist. Die Schaltfläche, die im Zahnrad verbleibt, funktioniert einwandfrei. Was hat sich geändert?

[Arkshine]

@sableraph

action: "formatCode",

Ersetze

action: "formatCode",

durch

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

Das sollte das Problem beheben