Раздел "Оформление" содержит глобальные темы, которые влияют на оформление приложения (в отличие от тем проектов).
Раздел доступен только администраторам и суперпользователям. |
|
Для добавления новой глобальной темы необходимо нажать на кнопку «Добавить» над списком тем. После нажатия откроется окно создания глобальной темы:
|
Окно «Редактирование темы» состоит из следующих полей и пространств:
.Пространство для ввода CSS-кода:
Поле предназначено для написания кода CSS.
Пространство для ввода JavaScript-кода.
Поле предназначено для написания кода JS.
Для создания глобальной темы необходимо загрузить следующие файлы:
Для загрузки файла необходимо нажать на кнопку «Загрузить». После нажатия откроется модальное окно с предложением загрузить файл:
|
Далее необходимо загрузить файл с нужным форматом.
Поля для ввода кода CSS и JS позволяют осуществлять глубокую настройку оформления системы.
(function () {
function waitForElement(selector, timeout = 10000) {
return new Promise((resolve, reject) => {
const element = document.querySelector(selector);
if (element) {
return resolve(element);
}
// Ожидаем инициализации DOM
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => {
startObserving(selector, resolve, reject, timeout);
});
} else {
startObserving(selector, resolve, reject, timeout);
}
});
}
function startObserving(selector, resolve, reject, timeout) {
const element = document.querySelector(selector);
if (element) {
return resolve(element);
}
const observer = new MutationObserver(() => {
const element = document.querySelector(selector);
if (element) {
observer.disconnect();
resolve(element);
}
});
// Проверяем что document.body существует
if (!document.body) {
reject(new Error('document.body не существует'));
return;
} observer.observe(document.body, {
childList: true,
subtree: true,
});
setTimeout(() => {
observer.disconnect();
reject(new Error(`Элемент ${selector} не найден за ${timeout}ms`));
},
timeout);
}
waitForElement('app-auth .logo')
.then((element) => {
const logoTextElement = element.querySelector('div');
const logoIconElement = element.querySelector('sl-icon');
// Измененяем подпись под логотипом
if (logoTextElement) {
logoTextElement.textContent = 'Example text'; // текст подписи
logoTextElement.style.cssText = `
color: #333; // цвет текста
font-size: 20px; // размер шрифта
font-family: Arial, sans-serif; // шрифт подписи
text-align: center; // выравнивание текста
`;
}
// Изменяем изображение логотипа
if (logoIconElement) {
const img = document.createElement('img');
img.src = 'https://www.fileserver.yourcompany.com/images/branding/logo/logo_color_272x92dp.png'; // ссылка на изображение
img.alt = 'Logo'; // альтернативный текст
img.style.cssText = `
width: 200px; // ширина
height: 80px; // высота
object-fit: contain; // важно для сохранения пропорций
`;
logoIconElement.parentNode.replaceChild(img, logoIconElement);
}
})
.catch((error) => {
console.error(error);
});
})(); |
Для импорта глобальной темы необходимо нажать на кнопку 
. После нажатия откроется модальное окно:
|
Далее необходимо загрузить ZIP-файл с глобальной темой и нажать "Сохранить".
Настроенную тему можно экспортировать. После сохранения темы и открытия ее на редактирование появляется кнопка
. При нажатии на кнопку формируется архив с темой, о чем сообщает нотификация "Тема успешно выгружена", и сохраняется напрямую на компьютер пользователя.
|
Архив с темой содержит:
Для применения созданной темы необходимо в колонке «Действия» нажать на кнопку 
. После нажатия откроется список действий, которые можно выполнять с глобальной темой:
|
Для того чтобы применить тему, необходимо выбрать из списка «Применить». Глобальная тема будет применена в приложении.
