Dialog

Общая информация

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

Анатомия

Заголовок. Краткое описание контента или суть процесса. Опционально может содержать подпись.
Контентная область. Уведомляет пользователя о чем-либо.
Блок кнопок (footer). Содержит основные действия, также может содержать кнопку закрытия окна.
Кнопка закрытия (Х). Закрывает модальное окно.

Описание работы

Dialog может быть как модальным так и немодальным.

Модальные окна

Контент страницы недоступен, пока пользователь не совершил какое-либо действие со всплывающим окном. При появлении модального окна обязательно появление лайтбокса (затемнение основного контента страницы).

Немодальные окна

Пользователь может взаимодействовать с контентом страницы (нажимать на кнопки и переходить по ссылкам) при открытом всплывающем окне. При появлении немодального окна лайтбокс не появляется.

Закрытие

Закрытие ConfirmPopup может происходить:

кнопками действия
клавишей ESC

Оформление

Кнопки

Максимальное количество кнопок в блоке - 4. Старайтесь не применять большое количество стилей кнопок. Важность действия должна соответствовать оформлению кнопки.

В качестве текстовой метки используйте слова, описывающие действия. Например, «Добавить», «Удалить» и «Сохранить». Избегайте расплывчатых формулировок, таких как «Готово» или «ОК».

Отменить и закрыть (х)

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

Задача проектировщика:

определить, есть ли разница между отменой и закрытием
предоставить пользователю четкие варианты.

Если разница между закрытием (Х) и Отменой все же есть, используйте следующие варианты (в зависимости от решаемой задачи):

Откажитесь от кнопки-иконки закрытия (Х)
Используйте недвусмысленные текстовые метки (“Отменить расчет”, “Выйти без сохранения” и пр.)

Если кнопка «Отменить» работает по принципу кнопки закрытия (Х), то закрывает окно без сохранения введенных данных.

Блок кнопок

В окне Dialog схема расположения кнопок горизонтальная. В нашей дизайн-системе мы применяем единую схему горизонтального расположения кнопок, соответствующую Z-контенту.

Оверлей

Общее

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

На платформе

В этом случае не блокируется общефункциональная оболочка (ОФО). Центральный диалог выравнивается по оверлею.

Не на платформе

В этом случае блокируется овесь экран. Центральный диалог выравнивается по центру экрана.

Цвет и тематизация

В светлой и тёмной темах используется оверлей с одинаковыми параметрами. В светлой затемняет, в темной осветляет.

#777B92
Переменная цвета — G7/G7
Opacity 50%

Размеры

Внешние размеры

Высота окна Dialog зависит от его контеного наполнения и не должна превышать 60% от высоты экрана. Ширина не дожна превышать 50% от ширины экрана.

Типографика

Внутренние размеры

Контентный блок отделяется отступами в 32 рх
Боковые паддинги - 16 рх

Вертикальные паддинги для футера - 16 рх
Расстояние между кнопками - 8 рх

Расположение

Dialog может располагаться в 9 позициях относительно окна приложения:

TopLeft, TopCenter, TopRight
CenterLeft, CenterCenter, CenterRight
BottomLeft, BottomCenter, BottomRight

Расположение окна зависит от решаемой задачи. Для стандартных ситуаций мы рекомендуем использовать выравнивание CenterCenter.

Всплывающие окна позиционируются относительно окна приложения (в случае, если приложение на Платформе Zyfra - шапка и меню приложений не учитываются).

Отступы всплывающего окна от края окна приложения 16рх.