Enterprise: Редактор: не работает настройка кнопок заголовков

Это также можно воспроизвести в ids-enterprise. Так что, скорее всего, проблема в этом.

1. Перейдите по адресу http: // localhost : 4000 / components / editor / example-customize-buttons.html.
2. Этот код настроен для отображения h1 и h2, а не h3 и h4, но это не имеет никакого эффекта 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).
• Нам понадобится @ infor-design / design для создания иконок для всех 6 уровней заголовков в обеих темах.

Я думаю, что изначально я заставил работать H2, H3, затем, установив, вы можете заставить работать H4 и H5.
Вы должны установить это на основе структуры вашей страницы, чтобы специальные возможности работали с заголовками.

Я думаю, чтобы исправить это, возможно, мы можем просто сделать кнопку меню с заголовком 1 - заголовком 6 и позволить пользователям решать. Или можете сделать это понятным, какие заголовки разрешены в нем (и тексте). Так что нам не нужны иконки (все равно они были уродливыми)

Пользователь просто хочет установить иерархию во время набора текста; как мы это сделаем потом - это совсем другой вопрос.

Если мы будем придерживаться текущего дизайна, на кнопках должно быть написано только H1, H2 и H3.

Мне действительно нравится предложение Тима о раскрывающемся меню; многие текстовые редакторы используют этот шаблон. Если мы переключимся на этот дизайн, у нас могут быть варианты, которые читаются: абзац, заголовок 1, заголовок 2 и заголовок 3. Этот подход может даже учитывать настраиваемые форматы, если они когда-либо понадобятся.

@EdwardCoyle Я согласен с @kentonquatman как пользователь Я хочу указать иерархию текста с большей гибкостью, чем просто H3 и H4

Думаю, теперь мне больше всего нравится идея Paragraph, Heading 1, Heading 2, and Heading 3. виде текста в средстве выбора кнопок меню. Это не похоже на HTML-теги для конечного пользователя.

Затем мы можем использовать класс вместо тегов HN или чего угодно в разметке. Так что это просто установка иерархии в тексте.

При необходимости я могу сделать себе билет, чтобы обновить дизайн панели инструментов RTE, чтобы включить раскрывающееся меню.

Конечно, и одна из причин, по которой я упомянул кнопку меню вместо раскрывающегося списка, - это то, что они легче работают с панелями инструментов. Но если вы что-нибудь придумаете, мы можем взглянуть.

Описанная выше реализация мне кажется похожей на то, как это делают в Документах Google:

Просто уточняю, какие изменения могут понадобиться кнопке меню. Дайте мне знать, если они на правильном пути:

• [x] Мы, вероятно, сможем создать пользовательскую кнопку меню (возможно, фактически создать компонент «fontpicker» / «stylepicker»), который может отображать элементы меню для отображения предоставленных правил стиля. Для этого могут потребоваться некоторые изменения конвейера рендеринга.
• [] Имитируйте текущую конфигурацию системы шрифтов "по умолчанию" (h3 / h4 / параграф) при построении значений по умолчанию для нового средства выбора.
• [] Вдобавок к этому потребуется сделать некоторую обратную совместимость (например: если конфигурация редактора обнаруживает старые настройки, она должна автоматически преобразовать их в новую систему).
• [] Возможно, самое время обратиться к # 2679, который касается преобразования между тегами / стилями.

@tmcconechy Да, извините. Я имел в виду кнопку меню.

@EdwardCoyle Да, было бы здорово показать параметры меню с примененным стилем, как в примере, который вы опубликовали из Документов Google.

Некоторые цвета в них могут быть изменены, поскольку @elizabethhartley в настоящее время работает над улучшением нашей цветовой палитры и тем.

@kentonquatman как насчет новых иконок?

@elizabethhartley Из того, что я видел на веб-сайте IDS, они еще не приняты: https://design.infor.com/code/ids-enterprise/latest/demo/components/editor/example-index?theme=uplift&variant = свет и цвета = 0563C2

На вашем снимке экрана видны значки "сохо"? https://design.infor.com/code/ids-enterprise/latest/demo/components/editor/example-index, если я не понимаю вопрос?

Извините, я добавляю путаницу. Я основывал дизайн на том, что у нас есть сейчас в IDS, где используются старые системные значки. Если вы посмотрите на яркую версию, вы поймете, что я имею в виду. Мы также должны обновить эти значки.

QA FAILED

1. Браузер: IE11

• [] Средство выбора шрифта не работает, если текст не выделен (т.е. просто поместите курсор где-нибудь в тексте), вы должны выбрать текст для его применения.

2. Браузер: Chrome, IE 11, EDGE, Safari.

• [] Каретка исчезает после применения типа заголовка или использования средства выбора шрифта

3. Браузер: IE 11, EDGE, Firefox.

• [] Вы можете комбинировать цитату и тип заголовка

4. Браузер: IE 11, EDGE

• [] При переключении типа заголовка удаляются стили шрифта текста (например, полужирный, курсив, зачеркивание).

Относительно этих пунктов, которые я пронумеровал. Я не думаю, что работа кого-либо из них требует дополнительных усилий.

1. Не стоит исправлять, так как IE 11 скоро перестанет поддерживаться, это незначительно и слишком сложно (если не невозможно) исправить.
2. Возможно, стоит исправить все эти три, но курсор вернется, как только вы выберете, так что это непросто. Посмотрим, поднимают ли какие-либо клиенты подобные вопросы.
3. Это не требование.
4. Вероятно, хорошо, что он удалил эти стили и использует стиль заголовка.

Все это слишком незначительно, чтобы тратить время на одно.

Похоже, стиль этого элемента не соответствует дизайну.

| Дизайн | Текущая версия |
| --- | --- |
| | |

Похоже, что реализация просто использует стандартный компонент меню. Я хочу убрать стрелку и переместить меню ближе к панели инструментов. Можно ли добавить в дизайн больше стилей или нам нужно будет обновить компонент menubutton?

Хорошо, давайте снова откроемся и настроимся. Я задумался о размере кнопки. Есть ли причина, по которой в дизайне стрелка находится так далеко от текста? Это настройка кнопки меню, поэтому нам не нужно ее специально менять.

@kentonquatman - это стиль дизайна, который нужно применять в более общем плане для всех типов

@tmcconechy Стрелка находится в крайнем правом углу, чтобы учесть более крупные слова (заголовок 1 и значение по умолчанию), аналогично тому, как будет оформлено раскрывающееся меню. Ширина кнопки всегда должна быть одинаковой, а стрелка всегда должна находиться в одном и том же месте, независимо от того, какой стиль выбран.

@EdwardCoyle Я не уверен, следует ли применять этот стиль для каждого экземпляра кнопки меню. Мне нужно было бы изучить это немного подробнее, но я думаю, что нет.

Это немного сбивает с толку, так как это кнопка меню, несколько объединенная с раскрывающимся списком. Но я думаю, что вы просто занимаетесь лишним местом на панели инструментов. Стрелка может быть только в конце текста, будь то 8 против 7 знаков + 5 пикселей без последствий? Или можно было бы сказать, что самый большой текст - это заголовок 6, и используйте эту ширину. На самом деле мы не показываем стиль кнопки, когда она выбрана? Или это причина того, почему. (Заголовок Fx 1 отображается крупным шрифтом при выборе?)

Я не думаю, что стрелка должна двигаться в зависимости от длины этикетки. Лучше держать его в том же положении; это наиболее распространенное лечение этого типа элементов.

Примеры из Google Docs:

| Один | Два | Три |
| --- | --- | --- |
| | | |

Хорошо, единственное, что меня смутило, - это то, что кнопка меню теперь перемещается. Один пример (немного запутанный) http://master-enterprise.demo.design.infor.com/components/menubutton/test-on-toolbar.html . Это важно, чтобы на панели инструментов не было много пустого пространства, поэтому я бы не стал его менять, но они выровнены по правому краю.

Но для этого случая редактора я действительно мог бы увидеть исправление размера, как Google, но, может быть, мы просто не сделаем его немного, но меньше, чтобы размер был таким же, но ближе к фактическому набору значений? В пустом пространстве может быть 40 пикселей потраченных впустую, и это приведет к переполнению одной или двух кнопок панели инструментов?

Это может быть связано с тем, что или текст является «По умолчанию» и «заголовок 1» не «Текст заголовка» / «Заголовок 3»
что длиннее. Так, может быть, мы просто сделаем его ближе на основе значений, которые вы можете выбрать в нашем случае (например, 10 пикселей плюс максимальное текстовое значение)?

@kentonquatman , @tmcconechy , и я придумали этот список следующих шагов, чтобы закончить это:

• [x] Переключите "По умолчанию" на "Обычный текст" в первом элементе.
• [x] Создайте программное определение ширины самого большого элемента в списке и установите его как ширину верхнего уровня кнопки средства выбора.
• [x] В целом по всей панели инструментов форматировщика удалите стрелки из всплывающих меню и расположите меню немного над их кнопками-триггерами.
• [x] Локализовать размеры шрифта по умолчанию.

Еще я обнаружил, что в теме Soho текст для выбора очень большой. Это вроде как правильно, так как это стиль, но интересно, не немного ли это сбивает с толку. Действительно ли Google меняет размер таких элементов в сборщике? Считаем ли мы, что это вообще можно улучшить в теме сохо?

QA Failed

• [] Ширина меню такая же, как у кнопки запуска. Меню должно быть немного шире кнопки запуска. Смотрите скриншот для справки. Я не уверен, что это проблема всего лишь демонстрационного приложения

Проверено в 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.