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

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

Реестр тем

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


Реестр тем


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

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

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

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

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

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

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

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

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

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

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

Окно создания темы

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

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

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

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

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

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


Окно создания темы, настройки цвета серии
Настройки темы влияют только на виджеты и таблицы. Для более тонкой настройки темы следует использовать код CSS и JavaScript.

CSS-код

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

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

Список элементов проекта в консоли 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":

    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);

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

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

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

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

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

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

Примененная тема с JS-кодом

Тема будет применена в проекте после нажатия кнопки "Сохранить".

Примененная пользовательская тема со всеми настройками выше



  • Нет меток