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

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

Реестр тем

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



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

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

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

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

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

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

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

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

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


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

CSS-код

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

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


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

  1. В поле "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. //Иконка проекта "Герб РФ"  
    
    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. Зайти в настройки оформления компонента проекта и включить нужную настройку.