Платформа 3V/Пользовательский навигатор/Настройка дизайна: различия между версиями

Материал из 3v-wiki
Перейти к навигации Перейти к поиску
 
Строка 29: Строка 29:
 
{| class="wikitable" clear:both;"
 
{| class="wikitable" clear:both;"
 
! Значение ячейки наименование !!  Описание !! Тип
 
! Значение ячейки наименование !!  Описание !! Тип
 +
|-
 +
| FAVICON || FavIcon окна браузера || base64 или svg
 +
|-
 +
| TABTITLE || Заголовок окна браузера || строковый
 
|-
 
|-
 
| USERINFO || Поля о пользователе из токена. || строковый. поля отделяются запятой
 
| USERINFO || Поля о пользователе из токена. || строковый. поля отделяются запятой
 +
|-
 +
| USERINFO_HTML || Html-оформление блока информации о пользовале, с подстановками полей из токена (пример подстановки: ${preffered_name}) || HTML
 +
|-
 +
| MAIN_CONTENT_CSS || Оформление главного окна в которое выводится пивот/форма/page/iframe || CSS
 
|-
 
|-
 
| TOPHEAD || Возможность скрывать шапку прикладного навигатора (по умолчанию шапка скрыта, т.е. при отсутствии этой строки) || логический
 
| TOPHEAD || Возможность скрывать шапку прикладного навигатора (по умолчанию шапка скрыта, т.е. при отсутствии этой строки) || логический
Строка 40: Строка 48:
 
| HEADER_CSS || Оформление шапки || CSS
 
| HEADER_CSS || Оформление шапки || CSS
 
|-
 
|-
| LOGO_IMAGE || Логотип для меню/шапки || base64
+
| LOGO_IMAGE || Логотип для меню/шапки || base64 или svg
 
|-
 
|-
 
| LOGO_CSS || Оформление для логотипа меню/шапки || CSS
 
| LOGO_CSS || Оформление для логотипа меню/шапки || CSS
 
|-
 
|-
| LOGO_IMAGE_COLLAPSED || Логотип для меню (в свернутом виде) || base64
+
| LOGO_IMAGE_COLLAPSED || Логотип для меню (в свернутом виде) || base64 или svg
 
|-
 
|-
| LOGO_COLLAPSED_CSS || Оформление для логотипа меню (в свернутом виде) || base64
+
| LOGO_COLLAPSED_CSS || Оформление для логотипа меню (в свернутом виде) || CSS
 
|-
 
|-
 
| MENU_CSS || Оформление меню (для задания фона например) || CSS
 
| MENU_CSS || Оформление меню (для задания фона например) || CSS
Строка 86: Строка 94:
 
| MENU_ITEM_EXPANDER_CSS || Оформление экспандера элемента меню || CSS
 
| MENU_ITEM_EXPANDER_CSS || Оформление экспандера элемента меню || CSS
 
|-
 
|-
| MENU_ITEM_EXPANDER_IMAGE || Иконка экспандера элемента меню || base64
+
| MENU_ITEM_EXPANDER_IMAGE || Иконка экспандера элемента меню || base64 или svg
 
|-
 
|-
| MENU_EXPANDER_IMAGE || Иконка экспандера меню || base64
+
| MENU_EXPANDER_IMAGE || Иконка экспандера меню || base64 или svg
 
|-
 
|-
| FAVICON || FavIcon окна браузера || base64
+
| MENU_ACCORDION_BEHAVIOR || Поведение меню как в аккордеоне (схлапывать другие открытые блоки при раскрытии нового) || логический
 
|-
 
|-
| TABTITLE || Заголовок окна браузера || строковый
+
| LOGOUT_BUTTON_CSS || Оформление кнопки выхода || CSS
 
|-
 
|-
| USERINFO_HTML || Html-оформление блока информации о пользователе, с подстановками полей из токена (пример подстановки: ${preffered_name}) || HTML
+
| LOGOUT_BUTTON_IMAGE || Иконка для кнопки выхода || base64 или svg
 
|-
 
|-
| MAIN_CONTENT_CSS || Оформление главного окна в которое выводится пивот/форма/htmlPage/iframe || CSS
+
| LOGOUT_BUTTON_IMAGE_CSS || Оформление иконки для кнопки выхода || CSS
 
|-
 
|-
| MENU_ACCORDION_BEHAVIOR || Поведение меню как в аккордеоне (схлапывать другие открытые блоки при раскрытии нового) || логический
+
| LOGOUT_BUTTON_TEXT || Текст для кнопки выхода || строковый
 
|-
 
|-
 
|}
 
|}

Текущая версия на 12:28, 29 июня 2022

Дизайн прикладного навигатора (D_NAVIGATOR_DESIGN)

польз нави.png




Атрибуты

Наименование атрибута Идентификатор атрибута Тип атрибута Назначение
Идентификатор id целое число системный атрибут
Наименование name строка наименование элементов
Текстовое значение VALUE строка значения
CLOB CLOB_VALUE длинный текст настройки оформления
Переключатель BOOLEAN_VALUE логический
Описание DESCRIPTION строка краткое описание элементов

Элементы

Пример заполненного справочника

оформление прикладного навигатора.png



Настроить дизайн пользовательского навигатора

Оформить шапку прикладного навигатора

Для того, чтобы показать шапку в пользовательском навигаторе следует включить флаг TOPHEAD. Заголовок задаётся в поле HEADERTITLE, а оформление шапки происходит в формате CSS в поле HEADER_CSS.

Оформить логотип

Для того, чтобы оформить логотип, необходимо добавить картинку логотипа в формате base64 в поле LOGO_IMAGE, а также в поле LOGO_IMAGE_COLLAPSED для отображения логотипа пи свернутом меню. Далее необходимо задать настройки оформления в CSS формате, такие как размер логотипа и отступы. Для стандартного логотипа в поле LOGO_CSS, а для свернутого - LOGO_COLLAPSED_CSS. Если в навигаторе есть шапка, то сворачивание логотипа происходить не будет.

Оформить заголовок

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

Для того, чтобы заголовок располагался в одной строке с логотипом, необходимо включить флаг MENU_LOGO_AND_TITLE_IN_ROW.

Оформить боковое меню

Оформление меню

  • Оформление всего бокового меню задается в формате CSS в поле MENU_CSS, где можно определить цвет боковой панели меню.
Область меню после задания цвета



  • Оформление свернутого бокового меню аналогично задается в формате CSS в поле MENU_COLLAPSED_CSS, где можно определить цвет боковой панели меню в свернутом виде.
свернутое меню изм.png




  • Настроить поведение раскрывающегося меню следует с помощью отметки в поле MENU_ACCORDION_BEHAVIOR, где включенный флаг означает, что раскрытая иерархия пункта меню сворачивается, если пользователь выбрал другой пункт меню, а выключенный флаг означает, что раскрытые пункты меню будут раскрытыми, пока пользователь сам их не закроет.
Accordion behavior



Оформление элемента меню

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




  • Для оформления ссылки (текстовой части) меню в формате CSS следует задать её оформление в поле MENU_ITEM_LINK_CSS. В данном поле можно задать шрифт, его размер, цвет:

Аналогичным образом задаются настройки для наведенных и выделенных пунктов меню:

  • Чтобы задать оформление контейнера наведенных пунктов меню, следует задать настройки в поле MENU_ITEM_HOVER_CSS в формате CSS, а для оформления ссылки - MENU_ITEM_HOVER_LINK_CSS.
  • Чтобы задать оформление контейнера выбранного пункта меню, следует задать настройки в поле MENU_ITEM_SELECTED_CSS, а для оформления ссылки - MENU_ITEM_SELECTED_LINK_CSS.
оформление пунктов меню.png



Оформить уведомления на элементе меню

Уведомления настраиваются в справочнике "Меню прикладного навигатора". Настройка уведомлений
Для того, чтобы настроить дизайн индикатора в уведомлении, необходимо задать настройки в формате CSS в поле MENU_ITEM_NOTIFICATION_CSS.
Пример настройки дизайна индикатора:

уведомление.png



Оформить статическую информацию

Неизменяемая информация задаётся в поле MENU_STATIC_INFO. Номер телефона указывается в текстовом формате, а email - в виде ссылки с помощью атрибута href (HTML тега <a>), который задает URL адрес на который ведёт ссылка. В том же теге <a> задается стиль ссылки. Пример:

статич инф.png



Информация о пользователе

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

Возможные поля из токена Значение
name Полное имя пользователя
preferred_username Основное имя пользователя
given_name Личное имя пользователя
family_name Фамилия пользоватля
email Почта пользователя

Оформление следует задать в поле USERINFO_HTML в формате HTML.

user info.png



Оформление вкладки

Для того, чтобы оформить вкладку следует задать фавикон в формате base64 в поле FAVICON и отображаемый заголовок вкладки в поле TABTITLE.

фавиконы.png