🚧Panel

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

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

Анатомия

1. Кнопка возврата на предыдущую страницу (опционально)

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

3. Инструменты и элементы управления

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

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

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

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

1. Табы (Tabs)

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

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

1. Пустой

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

Инструменты

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

1. Поиск (для поиска небходимого контента внутри контейнера)

2. Влияют непосредственно на контент (добавить, копировать, редактировать, удалить)

3. Влияют на отображение контейнера (вписать, открыть на новой странице, отобразить доп. панель, обновить)

4. Основное действие на экране - кнопка (обновить / сохранить)

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

Содержимое

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

• Кнопки (Ghost Button \ Fill Button \ Outline Button)

• Формы ввода (Input)

• Элементы управления (Checkbox \ Radiobutton \ Toggle)

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

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

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

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

• При недоступности определенных действий кнопки выглядят недоступными (принимают состояние Disabled)

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

• Все элементы панели инструментов должны иметь понятную всплывающую подсказку, которая выводится при наведении мыши

• Счетчики должны автоматически обновляться (если иное поведение не обусловлено требованиями)

• Элементы должны визуально реагировать на действия пользователя - отображать наведение, становиться "нажатыми", включаться/выключаться (отображаться соответственно статусу)

Адаптив панели

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

При уменьшении размера панели первым скрывается заголовок в три точки.

Когда в заголовке остаётся одна буква и три точки, в правом конце панели появляется кнопка Кебаб, при нажатии на которую, выпадает список кнопок, которые не уместились. Управляющие элементы скрываются поблочно справа налево. Если в первом блоке одна кнопка, она скрывается вместе со следующим блоком. Если же в панели инструментов есть кнопки запрещенные для скрытия в оверлей меню (например, "Сохранить", "Скрыть/показать панель свойств"), кнопка Кебаб отделена разделителями и расположена перед ними.

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

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

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

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

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

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

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

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

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

• Системное представление: имеется системная настройка панели, отвечающая за дефолтное содержимое панели, группировки и порядок вывода элементов управления.

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

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

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

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

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

1. на навигационной панели (и/или групповых панелях навигационного меню)

2. в панели уведомлений

3. в области приложения (для работы со всем функционалом области приложения):

• во вкладке (для работы с содержимым вкладки)

• в модальном окне (для работы с контекстом окна)

• в виджете (для работы с содержимым виджета)

• в области свойств элементов

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

Размеры

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

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

Элемент	Значение
Значение	16px * 16px
Дивайдер	1px
Кнопка	Height: 32px
Инпут Search	Height: 32px (outer)
Панель	Height: 48px Border: 1px

Типографика

Элемент	Название стиля	Гарнитура	Кегль	Начертание
Заголовок	Static_title/h4	Inter	14px	Semi Bold
Подзаголовок	Main/Body-text 12	Inter	12px	Regular

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

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

Цвета

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

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

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

• Gray/G11-G3 (#D6DBE7 - для светлой темы, #303340 - для темной темы) - фон

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

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

• Gray/G11-G3 (#D6DBE7 - для светлой темы, #303340 - для темной темы)

Для активной вкладки выбирается цвет слоя, на котором лежит панель (подробное описание в Tabs). Например:

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