Раздел «Темы» предназначен для создания и редактирования пользовательских тем проектов.
Чтобы открыть раздел, нажмите на панели навигации кнопку « Темы».
Реестр тем отображается при переходе в раздел «Темы».
Реестр тем представляет собой таблицу, содержащую сведения о каждой теме.
Сведения о темах включают в себя следующие колонки:
Превью. Цвета, которые используются в теме;
Название. Наименование темы;
Описание. Описание темы;
Автор. Пользователь, который создал тему;
Создание. Дата и время создания темы;
Редактирование. Дата и время внесения изменений в настройки темы;
Действия. Редактирование и удаление темы.
Для добавления темы необходимо нажать на кнопку , расположенную над списком тем. После нажатия откроется окно для создания темы:
Введите название и описание темы. Поле "Название" обязательно к заполнению, описание опционально.
На вкладке "Настройки оформления" представлены настройки темы, которые действуют на все виджеты и таблицы.
Настройки в панели разнесены по вкладкам:
Настройки темы влияют только на виджеты и таблицы. Для более тонкой настройки темы следует использовать код CSS и JavaScript. |
С помощью CSS можно настраивать любые элементы проекта, находящиеся в пространстве от шапки проекта до панели слоев включительно.
Названия параметров проекта для настройки и их значения можно посмотреть в консоли разработчика в любом браузере. Для примера возьмем проект с примененной стандартной темой и консоль Google Chrome:
Для того чтобы изменить параметры отображения проекта с помощью 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; } |
С помощью 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); |
Для настройки прав доступа к теме см. раздел Права доступа к сущности приложения.
После заполнения полей в окне добавления темы необходимо нажать кнопку .
Для закрытия окна следует нажать кнопку .
Необходимо перейти в раздел "Проекты" и открыть настройки проекта, в котором должна быть применена эта тема. В окне редактирования проекта нажать на значок изменения темы и выбрать пользовательскую тему. Тема будет применена в проекте после нажатия кнопки "Сохранить".
При применении темы следует учитывать, что:
|
Таким образом, если требуется заменить тему проекта, необходимо выполнить следующее:
Из этого следует, что если нужно добавить настройку отображения, которой нет в теме проекта (например, включить отображение названия), необходимо: