Panel

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

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

Анатомия

Кнопка возврата на предыдущую страницу (опционально)
Заголовочный блок
Инструменты и элементы управления

Заголовочный блок

Заголовочный блок может содержать:

Текстовый заголовок (опционально может быть дополнен подзаголовком).

Текстовый заголовок может быть также дополнен иконкой и контролами (Toggle, CheckBox):

Табы (Tabs)

Для настройки необходимо выбрать конкретный таб и воспользоваться свойствами компонента.

Хлебные крошки (Breadcrumbs)

Пустой

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

Инструменты

Инструменты панели могут делиться на блоки по типу использования, например:

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

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

Содержимое

Панель инструментов может содержать элементы управления нескольких видов и комбинации из них.

Кнопки (Ghost Button \ Fill Button \ Outline Button)
Формы ввода (Input)
Элементы управления (Checkbox \ Radiobutton \ Toggle)

Они могут группироваться по возможным действиям или контентной привязке, группы элементов разделяются вертикальными разделительными линиями (дивайдер).

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

Интерактивность

Инструменты на панели должны нагорячую) реагировать на содержимое и действия пользователя.

При недоступности определенных действий кнопки выглядят недоступными (принимают состояние Disabled)
В некоторых случаях (если это описано в приложении и обусловлено требованиями) панель может менять содержимое на необходимое в данный момент
Все элементы панели инструментов должны иметь понятную всплывающую подсказку, которая выводится при наведении мыши
Счетчики должны автоматически обновляться (если иное поведение не обусловлено требованиями)
Элементы должны визуально реагировать на действия пользователя - отображать наведение, становиться "нажатыми", включаться/выключаться (отображаться соответственно статусу)

Если элементы управления панели не помещаются на видимой пользователю части экрана, в правом конце, перед основным действием, появляется кнопка кебаб, а сами инструменты “прячутся” в overlay-menu. Overlay-menu выравнивается по правому краю кебаб-кнопки.

Инструменты скрываются поблочно слева направо
В правом конце панели появляется кнопка Кебаб, при нажатии на которую, выпадает список кнопок, которые не уместились. Кебаб отделён от остальных инструментов разделителем

В некоторых ситуациях скрытие инструментов невозможно - тогда сокращается заголовок (уходит в “...”, при наведении на него появляется хинт с полным названием)

Отображение поиска

По умолчанию поиск отображается в виде стандартной формы ввода Search.

В случае, когда масштабируется панель и все инструменты кроме поиска скрыты в кебаб:

Поиск уменьшается до минимального размера - 200 рx

Если не вмещается поле поиска шириной в 200 рх, то состояние по умолчанию - кнопка-иконка

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

Панель может иметь некоторые настройки, как системные, так и пользовательские. Для каждой отдельной панели, при необходимости, свойства и возможности настроек будут описываться отдельно.

Настройка панелей

Общий принцип работы настроек панели (если нет требований к другому поведению).

Системное представление: имеется системная настройка панели, отвечающая за дефолтное содержимое панели, группировки и порядок вывода элементов управления.
Дефолтное представление: изначально совпадает с системным. Администратор приложения может настроить представление панели, отличающееся от дефолтного системного, а именно: вывод/невывод элементов, порядок их вывода, перегруппировать. Данное представление будет может быть доступно по умолчанию для всех пользователей. Администратор может сбросить представление до системной настройки панели.
Пользовательское представление: пользователь может настроить вывод определенных элементов панели, их порядок. Настроенное пользователем представление сохраняется и выводится для него на любых устройствах, после его идентификации.

Варианты использования

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

Она может располагаться:

на навигационной панели (и/или групповых панелях навигационного меню)
в панели уведомлений
в области приложения (для работы со всем функционалом области приложения):

во вкладке (для работы с содержимым вкладки)
в модальном окне (для работы с контекстом окна)
в виджете (для работы с содержимым виджета)
в области свойств элементов
в прочих областях, в которых требуется совершать некие действия с контентом.

Размеры

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

Высота панели является настраеваемой, в зависимости от наполнения. В нашей ДС используется размер - 48px. Ширина зависит от вида комбинации элементов, разрешения монитора и доп.требований.

Элемент

Значение

Типографика

Элемент

Название стиля

Гарнитура

Кегль

Начертание

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

Цвета

Фоновый цвет панели уровня приложения

bg/body (#FFFFFF - для светлой темы, #20222B - для темной темы) для стандартоной панели

Фоновый цвет панели уровня приложения с вкладками

Gray/G11-G3 (#D6DBE7 - для светлой темы, #303340 - для темной темы) - фон
bg/dashboard&forms (#F4F6FB - для светлой темы, #13151C - для темной темы) для активной вкладки