Ряды категорий: одно меню и захват Blink прямо в категорию

Что изменилось

Каждый ряд категорий — в Blinks, Goals, Projects and Businesses — раньше содержал пять элементов управления: имя, значок счета и кнопки для Профиля, Редактировать и Удалить, плюс “+” для добавления подкатегории. На телефоне эти кнопки переходили на вторую строку, и ряд выглядел загроможденным.

Теперь ряд отображает две вещи после имени и счета:

• иконка захвата Blink, которая помещает новый Blink прямо в эту категорию;
• “…” меню, содержащее Профиль, Редактировать, Добавить подкатегорию и Удалить.

Таким образом, ряд получил одну функцию и потерял три элемента управления одновременно. Удалить находится в конце меню с разделителем выше, потому что разрушительное действие никогда не должно быть тем, за что ваш палец может случайно зацепиться.

Захват Blink в категорию

Нажмите на иконку захвата в любом ряду, и обычная форма Blink откроется с той категорией уже выбранной во вкладке Связь. Заполните ее как обычно. Когда вы сохраняете, вы возвращаетесь на страницу категории, с которой начали, чтобы вы могли сразу же подать еще один неприкосновенный.

Ничего в форме не меняется — это та же страница, те же поля и то же сохранение. Единственное отличие в том, откуда вы начали и где приземляетесь.

Какие приложения имеют что

Спокойный ряд и “…” меню присутствуют в всех четырех приложениях, потому что они делят один компонент ряда. Два элемента меню появляются только там, где они действительно могут работать:

• Добавить подкатегорию — только Blinks пока. Страницы создания других трех приложений пока не могут принимать родительскую категорию, и предложение элемента управления, который молча ничего не делает, хуже, чем отсутствие его.
• Иконка захвата — только Blinks пока, по той же причине: только форма Blink в настоящее время может открываться с предвыбранной категорией. Каждое из других приложений может подключить ее позже, передав одно дополнительное значение ряду; никакой новый код не нужен для самого поведения.

Клавиатура и программы чтения с экрана

Обе иконки содержат имя категории в своем ярлыке — “Захватить Blink в Работу”, “Больше действий для Работы” — потому что кто-то, слышащий страницу один ряд за раз, должен знать какой ряд говорит. Меню открывается с клавиатуры, закрывается с помощью Escape, и перемещает фокус через свои элементы. Нажатие на имя категории по-прежнему открывает страницу категории, точно так же, как и раньше.

Для разработчиков

Меню это выпадающий список Bootstrap, оформленный с существующим .of-dropdown-menu — не шестой шаблон расширения/сжатия. Меню не является раскрытием: <details> не может висеть над рядом, так что оно выдвинет список вместо наложения на него.

Путь возврата проверяется с обеих сторон. Значение next приходит в строке запроса, поэтому оно выбирается атакующим: оно отклоняется, если это не путь одного и того же сайта, как при отображении формы, так и при перенаправлении на сохранение. Также отклоняется относительный //host — он начинается с косой черты и успешно пройдет наивную проверку.

Две ловушки, найденные при создании этого, которые стоит знать: min-w-0 не является классом в этом коде (домашний класс — of-min-w-0), а пять молчаливых безделушек были причиной того, что ряд заполз на телефон; и btn-outline-* это классы цвета Bootstrap, которые в данный момент не учитываются в дизайне, так что они могут накапливаться незамеченными.