Перейти к основному содержимому

13 Персонализация

Для того, чтобы перейти в раздел «Персонализация», кликните на его обложку на стартовой странице либо выберите этот раздел в панели навигации.

Раздел “Персонализация” на стартовой странице LuxmsBI

Платформа LuxmsBI позволяет менять темы оформления. Сделать это можно в Редакторе тем.

Окно редактора тем

По умолчанию пользователю доступны две темы: светлая и тёмная. Их нельзя изменить или удалить. Даже в режиме редактирования кнопка “Сохранить” для этих тем неактивна.

Убрать в архив можно любую тему, как предустановленную, так и созданную пользователем. Для этого необходимо кликнуть правой кнопкой мыши по обложке темы и выбрать пункт “Снять с публикации”.

Контекстное меню редактора тем

После этого тема переместится из раздела “Опубликованные темы” в раздел “Черновики”.

Опубликованные темы и черновики

Чтобы вернуть тему в раздел Опубликованных, необходимо открыть контекстное меню кликом по обложке темы и выбрать пункт “Опубликовать”.

Создание новой темы

В Редакторе тем можно не только редактировать существующие, но и создавать новые темы. Для этого нужно нажать на кнопку рядом с заголовком раздела. Откроется окно создания новой темы.

Окно создание новой темы

Окно создание новой темы делится на несколько частей:

1) Поле для ввода названия новой темы. 2) Выбор базового шаблона темы, на основе которой создаётся новая тема. 3) Блок выбора цветов для различных элементов темы. 4) Окно предпросмотра темы и отдельных её элементов. 5) Выбор одного из наборов элемента для предпросмотра.

Окно создания новой темы

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

1) Ввести название новой темы.

осторожно

Название новой темы может начинаться только с буквы.

2) Выбрать базовый шаблон (светлый или тёмный) для создания новой темы.

Выбор названия и шаблона темы

3) Выбрать цвета для различных элементов интерфейса. Определить, для какого именно элемента выбирается цвет можно двумя способами:

  • Кликнув по кнопке соответствющего элемента в блоке выбора цветов;
Кнопки для выбора цвета
  • Наведя курсор на окно предпросмотра темы и кликнув курсором-пипеткой по нужному элементу на ней.

4) Откроется окно выбора цвета.

Окно выбора цвета на общем фоне

5) В нём можно увидеть образец текущего цвета (1), название элемента или области, за цвет которой он отвечает (2), кнопку сброса настроек (3), информацию о том, на какие элементы повлияет изменение (4), палитру (5), полоску для выбора цвета (6), поля для ввода цвета в кодировках RGB (7) и HEX (8).

Окно выбора цвета

6) Новые настройки применятся автоматически, для выхода из окна достаточно только кликнуть по любому участку за его границами. Чтобы вернуть любую настройку к исходному состоянию, достаточно нажать на кнопку сброса настроек в окне выбора цвета для этого элемента.

Изменившийся интерфейс

7) Для сохранения созданной темы, нажмите кнопку “Сохранить”. Обложка новой темы появится в Окне редактора тем, в разделе Черновики.

8) Для того чтобы начать пользоваться новой темой, необходимо кликнуть правой кнопкой по её обложке и в открывшемся контекстном меню выбрать пункт “Опубликовать”.

Публикация новой темы

Тема переместится в раздел Опубликованные темы.

Новая тема в разделе опубликованных

Новую тему можно вернуть в черновики с помощью пункта “Снять с публикации” в контекстном меню.

Снять с публикации

Панель выбора цветов

В этом разделе речь пойдёт о блоках цветов и элементах, за которые отвечают разные кнопки.

Системные цвета.

Системные цвета используются для фона панелей управления, виджетов, выпадающих списков, таблиц, для интерактивных элементов (чек-боксов, радиобаттонов, иконок и скроллов).

Системные цвета

1) Panel. Для фона, панелей навигации, графиков, ячеек таблиц, диалоговых окон.

2) Background. Для фона всех основных разделов, а также дешбордов.

3) Effect. Для отображения эффекта наведения на системные элементы (строки таблицы/ элементы контекстного меню, иконки и тд). Также используется в шапке таблиц.

4) Selection. Для отображения активного элемента в контекстном меню, для размеки таблиц, разделителей.

5) Element. Для активных иконок, чек-боксов, радиобаттонов, индикаторов скролла, обводки активных элементов.

Нейтральные цвета

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

Нейтральные цвета
к сведению

Чем меньше значение, тем контрастнее цвет

1) 300. Самый контрастный цвет. Для выделения заголовков, активных текстовых элементов, например, в выпадающих списках.

2) 400. Второй по контрастности цвет. Для выделения заголовков, активных текстовых элементов, например, в выпадающих списках.

3) 500. Основной цвет для большинства текстовых элементов.

4) 600. Для состояния по умолчанию текстовых элементов в выпадающих списках, контекстных меню.

5) 700. Для второстепенного текста, иконок, подписей.

6) 800. Для неактивных текстовых элементов и иконок. Для эффекта наведения на поля ввода.

7) 900. Для обводки полей ввода.

8) 1000. Для заливки неактивного состояния полей ввода, разделителей.

9) White. Для контрастных элементов на ярком/ цветном фоне.

Активные цвета

Активные цвета используют для кнопок и микровзаимодействий с ними.

Активные цвета

1) FirstDefault. Для состояния “по умолчанию” первостепенных кнопок, обводки кнопок без заливки, текстовых кнопок.

2) FirstHover. Для эффекта наведения на первостепенные кнопки.

3) FirstContrast. Для текста и иконок на первостепенных кнопках с заливкой.

4) SecDefault. Для состояния “по умолчанию” второстепенных кнопок.

5) SecHover. Для эффекта наведения на второстепенные кнопки.

6) SecContrast. Для текста и иконок на второстепенных кнопках.

7) SecEffect. Для эффекта наведения на текстовые кнопки.

Цвета состояний

Цвета состояний используются для отображения успехов, ошибок и предупреждений, а также для “опасных” кнопок, например, “Удалить”.

Цвета состояний

1) Success. Для отображения успешно выполненных или разрешённых действий.

2) Warning. Для отображения предупреждений.

3) Error. Для отображения различных видов ошибок, запретов, а также для индикации состояния “по умолчанию” кнопок критических действий.

4) ErrorHover. Для эффекта наведения на кнопки критических действий.

5) ErrorContrast. Для текста и иконок на кнопках критических действий, а также для эффекта наведения на текстовые кнопки критических действий.

Цвета данных

Цвета данных используются для всех диаграмм и графиков.

Цвета данных

В этом разделе всегда должен быть задан хотя бы один цвет. Цвета диаграммам будут присваиваться в соответствии с порядком, в котором они указаны в данном окне. Увидеть изменения на макете можно во втором окне предпросмотра.

Второе окно предпросмотра с макетом цветов данных

Платформа позволяет создавать дополнительные цвета данных. Для этого необходимо:

1) Кликнуть по плюсу в конце ряда с цветами.

Добавление цвета

2) Нажать левой кнопкой мыши по появившемуся квадратику с цветом. 3) В открывшемся окне выбрать подходящий оттенок. Чтобы закрыть окно выбора цвета, нужно клинкуть по любой части экрана за пределами окна.

Выбор цвета

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

Цвета теней

В интерфейсе тени есть у кнопок, выпадающих списков и всплывающих окон. Мы рекомендуем подбирать цвет теней в соответствии с цветами Panel и Background.