Раздел «Темы» предназначен для создания и редактирования пользовательских тем проектов.

Чтобы открыть раздел, нажмите на панели навигации кнопку « Темы».

Реестр тем

Реестр тем отображается при переходе в раздел «Темы».

Реестр тем представляет собой таблицу, содержащую сведения о каждой теме.

Сведения о темах включают в себя следующие колонки:

• Превью. Цвета, которые используются в теме;

• Название. Наименование темы;

• Описание. Описание темы;

• Автор. Пользователь, который создал тему;

• Создание. Дата и время создания темы;

• Редактирование. Дата и время внесения изменений в настройки темы;

При наведении на строку с компонентом в ее конце появится кнопка для выполнения действий (см. Действия с темой).

При наведении на столбец названия темы отображается иконка для добавления темы в избранное (см. Работа с реестром - Избранное). 

Действия с темой

Редактирование темы

Для открытия окна редактирования темы выберите в меню действий вариант «Редактировать»:

После выбора опции  «Редактировать» открывается окно редактирования темы:

Окно редактирования темы идентично окну создания темы (см. Добавление темы).

Удаление темы

Для удаления темы из реестра выберите в меню действий вариант "Удалить".

После нажатия на кнопку появляется окно подтверждения удаления с предупреждением о связанных проектах:

Для подтверждения удаления необходимо нажать кнопку «Удалить», для отмены удаления - «Отменить».

Для удаления нескольких или всех источников следует воспользоваться функциональностью группового удаления.

Добавление темы

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

Название и описание

Введите название и описание темы. Поле "Название" обязательно к заполнению, описание опционально.

Настройки темы

На вкладке "Настройки оформления" представлены настройки темы, которые действуют на все виджеты и таблицы. 

Настройки в панели разнесены по вкладкам:

• Общие настройки: 
  • Название и описание – настройки отображения названия и описания виджетов и таблиц. 
  • Область построения компонента – настройки отображения фона, рамки и тени для виджетов и таблиц. 
• Диаграммы;
  • Подписи – настройка используемых на виджете шрифтов и цветов подписей;
  • Графические элементы – настройка используемых на виджете цветов графических элементов (кроме серии);
  • Цвет серии – настройка используемых на виджете цветов для дифференциации данных;
• Таблицы:
  • Значения и текст  – настройки фона и отображения текста в строках и столбцах таблиц;
  • Заголовки столбцов  – настройки фона и отображения текста в заголовках столбцов таблицы;
  • Заголовки строк – настройки фона и отображения значений в заголовках строк таблиц;
  • Промежуточные итоги столбцов – настройки фона и отображения промежуточных итогов в столбцах сводной таблицы;
  • Промежуточные итоги строк – настройки фона и отображения промежуточных итогов в строках сводной таблицы;
  • Итоги по столбцу – настройки фона и отображения итога по столбцам сводной таблицы;
  • Итоги по строке  – настройки фона и отображения итога по столбцам сводной таблицы.

CSS-код

С помощью CSS можно настраивать любые элементы проекта, находящиеся в пространстве от шапки проекта до панели слоев включительно.

Названия параметров проекта для настройки и их значения можно посмотреть в консоли разработчика в любом браузере. Для примера возьмем проект с примененной стандартной темой и консоль Google Chrome:

Для того чтобы изменить параметры отображения проекта с помощью CSS, необходимо:

1. В поле "CSS" в настройках темы ввести код CSS, изменяющий необходимые параметры из списка в консоли:

   

   Код CSS в окне редактирования темы
   Код для изменения темы Развернуть исходный код

   app-dashboard {
   
   /* Фон проекта*/
   background: linear-gradient(90deg, rgb(2, 135, 207), rgb(255, 255, 255)) !important;
   }
   
   /*Шапка проекта*/
   
   .action-bar {
      background-color: #0287cf !important;
   }
   
   .box {
     background: #0287CF !important; 
   }
   
   .project-name {
     color:#fff !important;
   }
   
   
   /*Панель слоев*/
   
   app-layers-bar-dashboard {
   background-color: #0287cf !important; /* Фон панели слоев */
   }
   
   [plmtTab]._active {
       color: #F8FAFB;
   }

JS-код

С помощью JavaScript можно настраивать любые элементы проекта, находящиеся в пространстве от шапки проекта до панели слоев включительно.

Для того чтобы изменить параметры отображения проекта с помощью JS, необходимо:

1. Добавить код Javascript в поле "JavaScript":

2. 

   JS-код в окне редактирования темы
   Код для изменения иконки Развернуть исходный код

   //Иконка проекта "Герб РФ"  
   
   const wrapperImage = document.querySelector('.project-icon');
   const imageOld =  wrapperImage.querySelector('sl-icon');
   
   wrapperImage.removeChild(imageOld);
   
   const image =document.createElement("img");
   image.src = "data:image/png;base64,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"
   wrapperImage.appendChild(image);

Настройка прав доступа

Для настройки прав доступа к теме см. раздел Права доступа к сущности системы.

Сохранение темы

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

Применение созданной темы

Необходимо перейти в раздел "Проекты" и открыть настройки проекта, в котором должна быть применена эта тема. В окне редактирования проекта нажать на значок изменения темы и выбрать пользовательскую тему. Тема будет применена в проекте после нажатия кнопки "Сохранить".

Таким образом, если требуется заменить тему проекта, необходимо выполнить следующее:

1. Сбросить все индивидуальные настройки оформления компонентов.
2. Выбрать и применить пользовательскую тему.

Из этого следует, что если нужно добавить настройку отображения, которой нет в теме проекта (например, включить отображение названия), необходимо:

1. Применить пользовательскую тему.
2. Зайти в настройки оформления компонента проекта и включить нужную настройку.