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

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

Реестр тем

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

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

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

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

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

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

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

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

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

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

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

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

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

2. Ввести название темы.
3. При желании ввести описание темы.

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

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

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

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

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

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

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

1. В поле "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, необходимо:

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

   //лого проекта 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); // Применение новой иконки

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

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

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

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

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