Enterprise: Editor: Überschriftsschaltflächen konfigurieren funktioniert nicht

Dies kann auch in ids-enterprise reproduziert werden. Das Problem ist also wahrscheinlich da.

1. Gehen Sie zu http://localhost :4000/components/editor/example-customize-buttons.html
2. Dieser Code ist so konfiguriert, dass er h1 und h2 und nicht h3 und h4 anzeigt, aber dies hat keine Auswirkungen https://github.com/infor-design/enterprise/blob/master/app/views/components/editor/example-customize -buttons.html#L21

Erwarten Sie, dass Sie die Tasten nach Belieben auf h1-h6 setzen können (entsprechend der Seitenstruktur).

@Fruko @tmcconechy , ich denke, der Quellcode hier ist ein bisschen falsch.

Betrachtet man die Quelle , sind header1 und header2 nicht unbedingt einem H1/H2-Tag zugeordnet. Sie sind H3/H4 zugeordnet. Die Editor-Komponente war schon immer so, und ich glaube, die Überlegung war, dass H1/H2 auf Anwendungsebene nicht "bearbeitbar" in dem Sinne sind, dass ein Benutzer, der diese Komponente verwendet, nur eine hinzufügen kann der Inhalt.

Offensichtlich haben sich die Anforderungen/Bedürfnisse seit unserem ursprünglichen Designsatz geändert, aber dieses Problem ist für mich nicht ganz einfach. Es ist eine kleine Verbesserung/Funktionsergänzung. Einige Fragen:

• Sollten wir Unterstützung für alle Header-Ebenen einbauen?
• Wie gehen wir anmutig mit den möglichen Breaking Changes um dieses Thema um (Header 1/2 in 3/4 ändern, tatsächlich ein "echtes" 3/4 hinzufügen).
• Wir benötigen @infor-design/design, um Icons für alle 6 Header-Ebenen in beiden Themes zu generieren.

Ich denke, ursprünglich habe ich H2, H3 zum Laufen gebracht, dann können Sie durch die Einstellung H4 und H5 zum Laufen bringen.
Sie würden dies basierend auf Ihrer Seitenstruktur festlegen, damit die Barrierefreiheit mit den Überschriften funktioniert.

Ich denke, um dies zu beheben, können wir vielleicht einfach eine Menüschaltfläche mit Überschrift 1 - Überschrift 6 erstellen und die Benutzer entscheiden lassen. Oder kann das nachvollziehbar machen, welche Überschriften darin (und im Text) erlaubt sind. Also brauchen wir keine Icons (sie waren sowieso irgendwie hässlich)

Der Benutzer möchte nur während der Eingabe eine Hierarchie aufbauen; Wie wir das später wiedergeben, ist eine ganz andere Sache.

Wenn wir beim aktuellen Design bleiben, sollten die Tasten nur H1, H2 und H3 heißen.

Ich mag Tims Vorschlag eines Dropdown-Menüs; Viele Texteditoren verwenden dieses Muster. Wenn wir zu diesem Design wechseln, können wir folgende Optionen haben: Absatz, Überschrift 1, Überschrift 2 und Überschrift 3. Dieser Ansatz könnte sogar benutzerdefinierte Formate berücksichtigen, falls sie jemals benötigt werden.

@EdwardCoyle Ich stimme @kentonquatman als Benutzer zu Ich möchte die Hierarchie des Textes mit mehr Flexibilität als nur H3 und H4 angeben

Ich denke, mir gefällt jetzt am besten die Idee von Paragraph, Heading 1, Heading 2, and Heading 3. als Text in einer Menüschaltflächenauswahl. Diese lesen sich für den Endbenutzer weniger wie HTML-Tags.

Darunter können wir dann class anstelle von HN-Tags oder was auch immer wir im Markup wollen verwenden. Es ist also nur die Einstellung der Hierarchie im Text.

Bei Bedarf kann ich selbst ein Ticket erstellen, um das Design der RTE-Symbolleiste mit einem Dropdown-Menü zu aktualisieren.

Sicher und ein Grund, warum ich die Menüschaltfläche anstelle der Dropdown-Liste erwähnt habe, ist, dass diese mit Symbolleisten einfacher arbeiten. Aber wenn Sie sich etwas einfallen lassen, können wir es uns ansehen.

Die oben beschriebene Implementierung klingt für mich so, wie es Google Docs macht:

Geben Sie nur einige schnelle Ideen an, was die Menüschaltfläche möglicherweise benötigt, um Änderungen vorzunehmen. Lassen Sie mich wissen, ob diese auf dem richtigen Weg sind:

• [x] Wir können wahrscheinlich eine benutzerdefinierte Menüschaltfläche erstellen (vielleicht sogar eine "fontpicker"/"stylepicker"-Komponente erstellen), die Menüelemente rendern kann, um die bereitgestellten Stilregeln anzuzeigen. Möglicherweise sind einige Änderungen an der Rendering-Pipeline erforderlich, um dies zu erleichtern.
• [ ] Imitieren Sie die aktuelle "Standard"-Konfiguration des Schriftsystems (h3/h4/Absatz), wenn Sie die Standardeinstellungen für den neuen Picker einbauen.
• [ ] Müsste obendrein etwas Abwärtskompatibilität herstellen (z. B.: Wenn die Editorkonfiguration die alten Einstellungen erkennt, sollte sie diese automatisch in das neue System konvertieren).
• [ ] Könnte auch ein guter Zeitpunkt sein, #2679 anzusprechen, das sich mit der Konvertierung zwischen Tags/Stilen befasst.

@tmcconechy Ja, tut mir leid. Ich meinte die Menütaste.

@EdwardCoyle Ja, es wäre cool, die anzuzeigen , wie in dem Beispiel, das Sie von Google Docs gepostet haben.

Einige der Farben auf diesen können sich ändern, da @elizabethhartley derzeit an Verfeinerungen unserer Farbpalette und Themen arbeitet.

@kentonquatman was ist mit neuen

@elizabethhartley Nach dem, was ich auf der IDS-Website gesehen habe, wurden diese noch nicht übernommen: https://design.infor.com/code/ids-enterprise/latest/demo/components/editor/example-index?theme=uplift&variant =Licht&Farben=0563C2

Ihr Screenshot scheint die "Soho"-Symbole zu zeigen? https://design.infor.com/code/ids-enterprise/latest/demo/components/editor/example-index, es sei denn, ich verstehe die Frage falsch?

Entschuldigung, ich füge Verwirrung hinzu. Ich habe das Design auf dem basiert, was wir derzeit in IDS haben, das die älteren Systemsymbole verwendet. Wenn Sie sich die lebendige Version ansehen, werden Sie sehen, was ich meine. Wir sollten auch diese Symbole aktualisieren.

QA FEHLGESCHLAGEN

1. Browser: IE11

• [ ] Die Schriftartauswahl funktioniert nicht, wenn der Text nicht ausgewählt ist (dh platzieren Sie einfach die Einfügemarke irgendwo im Text). Sie müssen den Text auswählen, damit er angewendet wird.

2. Browser: Chrome, IE 11, EDGE, Safari

• [ ] Caret verschwindet, nachdem der Kopfzeilentyp angewendet oder die Schriftartauswahl verwendet wurde

3. Browser: IE 11, EDGE, Firefox

• [ ] Sie können Blockquote und Header-Typ kombinieren

4. Browser: IE 11, EDGE

• [ ] Beim Wechseln der Kopfzeilentypen werden die Schriftstile des Textes entfernt (z. B. Fett, Kursiv, Durchgestrichen)

Zu diesen Punkten, die ich nummeriert habe. Ich glaube nicht, dass einer von ihnen zusätzlichen Aufwand erfordert.

1. Eine Reparatur lohnt sich nicht, da IE 11 bald nicht mehr unterstützt wird und geringfügig und zu schwierig (wenn nicht unmöglich) zu beheben ist
2. Möglicherweise lohnt es sich, all diese drei zu reparieren, aber der Cursor kommt zurück, sobald Sie auswählen, also ist es nicht einfach. Mal sehen, ob Kunden ähnliche Probleme haben.
3. Dies ist nicht erforderlich.
4. Das ist wahrscheinlich gut, dass es diese Stile entfernt und den Stil des Headers verwendet.

All dies zu gering, um eine Zeit damit zu verbringen.

Es sieht so aus, als ob das Styling dieses Elements nicht mit dem Design übereinstimmt.

| Design | Aktuelle Version |
| --- | --- |
| | |

Es sieht so aus, als würde die Implementierung nur die Standardkomponente menubutton verwenden. Ich möchte den Pfeil entfernen und das Menü näher an die Symbolleiste verschieben. Ist es möglich, mehr Styling aus dem Design zu übernehmen oder müssten wir die menubutton-Komponente aktualisieren?

Ok, lass uns wieder öffnen und anpassen. Ich habe mich über die Größe des Buttons gewundert. Gibt es einen Grund, warum das Design den Pfeil so weit vom Text entfernt hat? Dies ist eine Anpassung der Menüschaltfläche, sodass wir sie nicht speziell ändern müssen.

@kentonquatman ist der Stil im Design etwas, das allgemeiner für alle Menüschaltflächentypen angewendet werden muss? Oder erstellen wir nur dafür einen sekundären Stil?

@tmcconechy Der Pfeil befindet sich ganz rechts, um größere Wörter zu berücksichtigen (Überschrift 1 vs. Standard), ähnlich dem Stil eines Dropdown-Menüs. Die Schaltflächenbreite sollte immer gleich sein und der Pfeil sollte immer an der gleichen Stelle stehen, egal welcher Stil gewählt wird.

@EdwardCoyle Ich bin mir nicht sicher, ob dieses Styling für jede Instanz einer

Es ist etwas verwirrend, da es sich um eine Menüschaltfläche handelt, die etwas mit einem Dropdown-Menü kombiniert wird. Aber ich denke, dass Sie nur zusätzlichen Platz in der Symbolleiste einnehmen. Der Pfeil könnte nur am Ende des Textes sein, sei es 8 vs 7 Zeichen + 5px ohne Konsequenzen? Oder würde sagen, der größte Text ist Header 6 und verwendet diese Breite. Wir zeigen den Stil nicht wirklich in der Schaltfläche, wenn er ausgewählt ist? Oder ist das der Grund dafür. (Fx Header 1 wird bei Auswahl in großer Schrift angezeigt?)

Ich denke nicht, dass sich der Pfeil basierend auf der Länge des Etiketts bewegen sollte. Es ist besser, es in der gleichen Position zu halten; Dies ist die häufigste Behandlung für diese Art von Element.

Beispiele aus Google Docs:

| Eins | Zwei | Drei |
| --- | --- | --- |
| | | |

Ok, das einzige, was mich verwirrt hat, ist, dass sich unsere Menüschaltfläche jetzt bewegt. Ein Beispiel (ein bisschen unordentlich) http://master-enterprise.demo.design.infor.com/components/menubutton/test-on-toolbar.html . Dies ist wichtig, damit nicht viel Leerraum auf der Symbolleiste verschwendet wird, also würde ich das nicht ändern, aber diese sind rechtsbündig.

Aber für diesen Editor-Fall könnte ich tatsächlich sehen, wie die Größe wie bei Google festgelegt wird, aber vielleicht würden wir es nicht einfach ein wenig, aber weniger machen, damit die Größe gleich ist, aber näher an den tatsächlichen Werten? Es gibt vielleicht 40ish verschwendete Pixel im leeren Raum und es wird dazu führen, dass ein oder zwei Symbolleistenschaltflächen überlaufen?

Dies kann daran liegen, dass der Text "Standard" ist und "Kopfzeile 1" nicht "Kopfzeilentext" / "Überschrift 3" ist.
was länger ist. Vielleicht machen wir es also einfach näher, basierend auf den Werten, die Sie in unserem Fall auswählen können (z. B. 10 px plus der maximale Textwert)?

@kentonquatman , @tmcconechy und ich haben mir diese Liste der nächsten Schritte ausgedacht , um dies abzuschließen :

• [x] Wechseln Sie im ersten Element von "Standard" zu "Normaler Text".
• [x] Erstellen Sie eine programmgesteuerte Erkennung der Breite des größten Elements in der Liste und legen Sie diese als Breite der Auswahltaste auf oberster Ebene fest.
• [x] Entfernen Sie in der gesamten Formatierer-Symbolleiste die Pfeile aus den Popup-Menüs und positionieren Sie die Menüs leicht über ihren Trigger-Schaltflächen.
• [x] Lokalisieren Sie die Standardschriftgrößen.

Eine andere Sache, die ich gerade festgestellt habe, ist, dass der Auswahltext im Soho-Design sehr groß ist. Das ist irgendwie richtig, da das der Stil ist, aber frage mich, ob es ein bisschen abschreckend ist. Ändert Google tatsächlich die Größe der Dinge in der Auswahl so? Glauben wir, dass dies beim Thema Soho überhaupt verbessert werden könnte?

QA fehlgeschlagen

• [ ] Die Breite des Menüs entspricht der des Trigger-Buttons. Das Menü sollte etwas breiter als der Auslöser sein. Siehe Screenshot als Referenz. Ich bin mir nicht sicher, ob dies nur ein Problem mit der Demo-App ist

Verifiziert in http://4240-rc0-enterprise.demo.design.infor.com/components/editor/example-index?theme=uplift&variant=light

• [ ] Browser: EDGE
  Der Pfeil ist nicht ausgerichtet
  

Für Punkt 1 haben wir eine leichte Abweichung vorgenommen, um die Dinge konsistent zu machen. Lassen wir das so wie es ist.
Punkt 2 - wir sollten reparieren

• [x] Beheben Sie das erwähnte Layout-Problem
• [x] Wir haben auch festgestellt, dass ein Test in den NG-Details fehlgeschlagen ist:

-  checkout 6.3.x in ng and run:
- `npm run test`
- `npm run testdebug` to debug
- seems like this test page shows the issue http://localhost:4000/components/toolbar-flex/example-more-actions-ajax.html notice that beforeOpen is not being called anymore.