Enterprise: エディター：見出しボタンの構成が機能しない

これはids-enterpriseでも再現できます。 おそらく問題はそこにあります。

1. http：// localhost ：4000 / components / editor /example-customize-buttons.htmlにアクセスします
2. このコードは、h3とh4ではなくh1とh2を表示するように構成されていますが、これは効果がありませんhttps://github.com/infor-design/enterprise/blob/master/app/views/components/editor/example-customize -buttons.html＃L21

必要に応じてボタンをh1〜h6に設定できることを期待してください（ページ構造に一致させるため）。

@Fruko @tmcconechy 、ここのソースコードにあるのは少し間違った名前だと思います。

ソースを見ると、 header1とheader2は必ずしもそれぞれH1 / H2タグにマップされているとは限りません。 それらはH3 / H4にマップされます。 Editorコンポーネントは永遠にこのようになっています。その理由は、アプリケーションレベルでは、H1 / H2は、このコンポーネントを使用するユーザーが追加できるという意味で「編集可能」なものではないためだと思います。コンテンツ。

明らかに、要件/ニーズは元の一連の設計から変更されていますが、この問題は私にはそれほど単純ではありません。 これは、ちょっとした機能強化/機能追加です。 いくつかの質問：

• すべてのヘッダーレベルのサポートを組み込む必要がありますか？
• これに関する潜在的な重大な変更をどのように適切に処理しますか（header1 / 2を3/4に変更し、実際には「真の」3/4を追加します）。
• 両方のテーマの6つのヘッダーレベルすべてのアイコンを生成するには、@ infor-design / designが必要です。

もともとH2、H3を動作させたと思いますが、設定することでH4、H5を動作させることができます。
これはページ構造に基づいて設定するため、アクセシビリティは見出しで機能します。

これを修正するには、見出し1から見出し6を含むメニューボタンを作成して、ユーザーに決定させることができると思います。 または、どの見出しがその中で許可されているか（およびテキスト）に関して、それを知覚可能にすることができます。 したがって、アイコンは必要ありません（とにかく醜いものでした）

ユーザーは、入力中に階層を確立したいだけです。 後でそれをどのようにレンダリングするかは、まったく別の懸念事項です。

現在のデザインに固執する場合、ボタンはH1、H2、およびH3とだけ表示されます。

私はティムのドロップダウンメニューの提案が好きです。 多くのテキストエディタがそのパターンを使用しています。 そのデザインに切り替えると、段落、見出し1、見出し2、見出し3のオプションが表示されます。このアプローチでは、必要に応じてカスタム形式を考慮することもできます。

@EdwardCoyleユーザーとして。H3とH4だけでなく、より柔軟にテキストの階層を指定したいと思います。

メニューボタンピッカーのテキストとしてParagraph, Heading 1, Heading 2, and Heading 3.のアイデアが一番好きだと思います。 これは、エンドユーザーにとってHTMLタグのようには読めません。

次に、その下で、HNタグやマークアップに必要なものの代わりにクラスを使用できます。 つまり、テキストに階層を設定するだけです。

必要に応じて、RTEツールバーのデザインを更新してドロップダウンメニューを含めるためのチケットを自分で作成できます。

確かに、ドロップダウンではなくメニューボタンについて言及した理由の1つは、ツールバーでの作業が簡単なことです。 しかし、あなたが何かを作るなら、私たちは見ることができます。

上記の実装は、Googleドキュメントのように聞こえます。

メニューボタンに必要なものについて、いくつかの簡単なアイデアを変更して考えてみてください。 これらが正しい方向に進んでいるかどうかを教えてください。

• [x]メニュー項目をレンダリングして提供されたスタイルルールを表示できるカスタムメニューボタンを作成できる可能性があります（実際には「fontpicker」/「stylepicker」コンポーネントを作成する可能性があります）。 これを容易にするために、レンダリングパイプラインの変更が必要になる場合があります。
• []新しいピッカーのデフォルトを組み込むときに、フォントシステムの現在の「デフォルト」構成（h3 / h4 /段落）を模倣します。
• []その上に下位互換性を持たせる必要があります（fx：エディター構成が古い設定を検出した場合、それらを新しいシステムに自動的に変換する必要があります）。
• []タグ/スタイル間の変換を扱っている＃2679に取り組む良い機会かもしれません。

@tmcconechyはい、ごめんなさい。 私はメニューボタンを意味しました。

@EdwardCoyleええ、Googleドキュメントから投稿した例のように、適用されたスタイルでメニューオプションを表示するのはクールでしょう。

@elizabethhartleyは現在、カラーパレットとテーマの改良に取り組んでいるため、これらの色の一部は変更される

@kentonquatman新しいアイコンはどうですか？

@elizabethhartley IDS Webサイトで見たものから、それらはまだ採用されていません： https ： //design.infor.com/code/ids-enterprise/latest/demo/components/editor/example-index？theme = uplift＆variant = light＆colors = 0563C2

あなたのスクリーンショットは「ソーホー」アイコンを示しているようですか？ 質問を誤解しない限り、 https：//design.infor.com/code/ids-enterprise/latest/demo/components/editor/example-index ？

申し訳ありませんが、混乱を加えています。 私は、古いシステムアイコンを使用するIDSに現在あるものに基づいて設計しました。 活気のあるバージョンを見ると、私が何を意味しているのかがわかります。 これらのアイコンも更新する必要があります。

QAに失敗しました

1.ブラウザ：IE11

• []テキストが選択されていない場合（つまり、キャレットをテキストのどこかに配置するだけ）、フォントピッカーは機能しません。適用するには、テキストを選択する必要があります。

2.ブラウザ：Chrome、IE 11、EDGE、Safari

• []ヘッダータイプを適用するか、フォントピッカーを使用すると、キャレットが消えます

3.ブラウザ：IE 11、EDGE、Firefox

• []ブロッククォートとヘッダータイプを組み合わせることができます

4.ブラウザ：IE 11、EDGE

• []ヘッダータイプを切り替えると、テキストのフォントスタイル（太字、斜体、取り消し線など）が削除されます。

私が番号を付けたこれらの点に関して。 私はそれらのどれも追加の努力をしているとは思わない。

1. IE 11はまもなくサポートされなくなり、マイナーで修正が困難（不可能ではないにしても）であるため、修正する価値はありません。
2. これら3つすべてを修正する価値があるかもしれませんが、選択するとカーソルが戻るので、簡単なものではありません。 同様の問題を提起している顧客がいないかどうかを確認しましょう。
3. これは必須ではありません。
4. これらのスタイルを削除し、ヘッダーのスタイルを使用するのはおそらく良いことです。

これらはすべてマイナーすぎて、いつでも過ごすことはできません。

この要素のスタイリングがデザインと一致していないようです。

| デザイン| 現在のバージョン|
| --- | --- |
| | |

実装は標準のmenubuttonコンポーネントを使用しているようです。 矢印を削除して、メニューをツールバーに近づけたいのですが。 デザインからより多くのスタイリングを含めることは可能ですか、それともメニューボタンコンポーネントを更新する必要がありますか？

では、もう一度開いて調整しましょう。 ボタンの大きさは気になりました。 デザインがテキストから遠く離れている理由は何ですか？ これはメニューボタンのカスタマイズであるため、特に変更する必要はありません。

@kentonquatmanは、すべてのメニューボタンタイプにもっと一般的に適用する必要があるデザインのスタイルですか？ それとも、このためだけにセカンダリスタイルを作成していますか？

@tmcconechy矢印は、ドロップダウンメニューのスタイルと同様に、より大きな単語（ヘッダー1とデフォルト）を説明するために右端にあります。 どのスタイルを選択しても、ボタンの幅は常に同じで、矢印は常に同じ場所にある必要があります。

@EdwardCoyleこのスタイルをメニューボタンのすべてのインスタンスに適用する必要があるかどうかは

メニューボタンがドロップダウンと多少組み合わされているため、少し混乱します。 しかし、私の考えは、余分なツールバースペースを占有することです。 矢印はテキストの最後にある可能性があります。8対7文字+ 5pxで、結果はありませんか？ または、最大のテキストはヘッダー6であり、その幅を使用すると言うことができます。 ボタンを選択すると、実際にボタンにスタイルが表示されませんか？ またはそれが理由です。 （Fxヘッダー1を選択すると、大きなフォントで表示されますか？）

ラベルの長さに基づいて矢印が動くべきではないと思います。 同じ位置に保つことをお勧めします。 これは、このタイプの要素の最も一般的な処理です。

Googleドキュメントの例：

| 1つ| 2つ| 3つ|
| --- | --- | --- |
| | | |

わかりました。私が混乱していると思うのは、メニューボタンが移動することだけです。 一例（少し面倒） http://master-enterprise.demo.design.infor.com/components/menubutton/test-on-toolbar.html 。 これは重要なので、ツールバーに無駄な空白があまりないので、変更しませんが、これらは正しく配置されています。

しかし、このエディターの場合、私は確かにグーグルのようにサイズを修正するのを見ることができましたが、それを少しだけ小さくして、サイズは同じですが実際の値のセットに近いのではないでしょうか？ 空のスペースに40の無駄なピクセルがあり、1つまたは2つのツールバーボタンがオーバーフローする可能性がありますか？

これは、またはテキストが「デフォルト」であり、「ヘッダーテキスト」/「ヘッダー3」ではなく「ヘッダー1」であることが原因である可能性があります。
長いです。 それで、私たちの場合に選択できる値（10ピクセルと最大テキスト値など）に基づいて、それを近づけるだけでしょうか？

@ kentonquatman 、 @ tmcconechy 、そして私はこれを終わらせるための次のステップのリストを思いついた：

• [x]最初の項目で「デフォルト」を「通常のテキスト」に切り替えます
• [x]リスト内の最大のアイテムの幅のプログラムによる検出を構築し、それをピッカーのボタンの最上位の幅として設定します。
• [x]フォーマッターツールバー全体で、ポップアップメニューから矢印を削除し、メニューをトリガーボタンの少し上に配置します。
• [x]デフォルトのフォントサイズをローカライズします。

私が今見つけたもう1つのことは、ソーホーのテーマではピッカーのテキストが非常に大きいことです。 これはスタイルとしては正しいですが、少しずれているのではないかと思います。 グーグルは実際にこのようにピッカー内のもののサイズを変更しますか？ これはソーホーのテーマで改善できると思いますか？

QAに失敗しました

• []メニューの幅はトリガーボタンと同じレベルです。 メニューはトリガーボタンより少し広くする必要があります。 参考のためにスクリーンショットを参照してください。 これが単なるデモアプリの問題かどうかはわかりません

http://4240-rc0-enterprise.demo.design.infor.com/components/editor/example-index?theme=uplift&variant=lightで確認済み

• []ブラウザ：EDGE
  矢印が整列していません
  

ポイント1については、一貫性を保つためにわずかな差異を設けました。 これはそのままにしておきましょう。
ポイント2-修正する必要があります

• [x]記載されているレイアウトの問題を修正
• [x] NGの詳細でテストが失敗したこともわかりました。

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