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

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

Реестр тем

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

Реестр тем

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

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

Цветовая палитра. Цвета, которые используются в теме;
Название. Наименование темы;
Описание. Описание темы;
Автор. Пользователь, который создал тему;
Создание. Дата и время создания темы;
Редактирование. Дата и время внесения изменений в настройки темы;
Действия. Редактирование и удаление темы.

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

Для добавления темы необходимо:

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

Окно создания темы
Ввести название темы.
При желании ввести описание темы.

Пользовательская тема. Палитра

На вкладке "Палитра" необходимо выбрать цвета, которые будут использоваться в теме.
- Чтобы изменить цвет, необходимо нажать на значок в поле с указанием цвета. Отобразится раскрывающаяся палитра RGB для выбора цвета. Необходимо выбрать цвет и нажать на кнопку "Сохранить":
  
  Выбор цвета
- Чтобы добавить цвет в палитру темы, необходимо нажать на текстовую кнопку "Добавить". В палитру автоматически добавится новое поле выбора цвета. Необходимо выбрать цвет и нажать "Сохранить":
  
  Добавление нового цвета. По умолчанию - черный
- Чтобы удалить цвета из палитры, необходимо нажать на значок в поле выбора для каждого цвета, который нужно удалить.
  
  Удаление цветов. Все теплые цвета удалены из палитры
  
  Настройка цветов палитры в теме влияет только на окраску виджетов. Для более тонкой настройки темы следует использовать код CSS и JavaScript.

Пользовательская тема. CSS-код

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

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

Список элементов проекта в консоли Chrome (справа)

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

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

Код CSS в окне редактирования темы

Код для изменения темы

/* Общие настройки */
.content app-dashboard {/* Фон проекта*/
background: rgb(2,135,207); /* Цвет для обратной совместимости со старыми браузерами*/
/* Изображение на фоне градиента*/
background-image: url("https://wiki.polymatica.ru/download/attachments/502211652/%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B0.png"), linear-gradient(90deg, rgba(2,135,207,1), rgba(0,209,255,1), rgba(248,254,255,1));
background-repeat: no-repeat; /* Повтор изображения */
background-position: left 85% bottom 50%; /* Положение изображения */
}

/* Шапка проекта */  

.content app-project-header .box,
.content app-layers-bar {
  --sl-color-secondary-900: #fff; /* Цвет текста кнопок в шапке проекта: поделиться, экспорт и тд */
  --sl-input-color: #000; /* Цвет текста во всех инпутах */
  background: #0287cf; /* Фон панели слоев и шапки проекта */
  color: #fff !important; /* Цвет текста в наименовании проекта */
}

/* Элемент проекта: глобальный фильтр типа "Поиск" */
.dx-texteditor.dx-editor-outlined {
  background: #FFFFFFB2; /* Фон внутри фильтра */
  border: 2px solid #fff; /* Размер и цвет рамки ГФ */
  border-radius: 4px; /* Скругление рамки ГФ */
}
/* Наименование глобального фильтра */
sl-input::part(form-control-label), label {
  color: #000; /* Цвет */
  text-align: center; /* Выравнивание */
  font-weight: bold; /* Стиль */
}

/* Панель слоев */
.content app-layers-container .layer {
  color: #000; /* Цвет наименования неактивных слоев в панели снизу */
}
.content app-layers-container .layer:hover,
.content app-layers-container .layer.selected {
  color: #000; /* Цвет наименования активного слоя в панели снизу */
  background: #95c0ff; /* Цвет фона активного слоя в панели снизу */
}

Пользовательская тема. JS-код

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

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

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

JS-код в окне редактирования темы

Код для изменения иконки

//лого проекта 63

const wrapperImage = document.querySelector('.project-icon'); // Иконка проекта
const imageOld =  wrapperImage.querySelector('sl-icon'); // Текущая иконка проекта

wrapperImage.removeChild(imageOld); // Удаление стандартной иконки

const image =document.createElement("img"); // Создание новой иконки
// Новая иконка, изображение закодировано в строку Base64
image.src = "data:image/png;base64,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"
wrapperImage.appendChild(image); // Применение новой иконки

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

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

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

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

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

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

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

Быстрые ссылки

Дерево страниц