Войти

Создание модуля темы оформления

Пример
Исходный код

Структура хранения темы оформления организована таким образом, чтобы по значению опции theme можно было вычислить путь до соответствующего CSS-файла. Т.к. контролы распределены между модулями приложения СБИС (см. Модуль s3mod), тема оформления также может быть распределена между модулями.

Правила организации исходного кода:

  • для каждого модуля с контролами, поддерживающими темизацию, создается соответствующий модуль с темой оформления;
  • модуль с темой оформления должен получить имя по правилу:
${имя модуля, из которого темизируются контролы}-${имя темы}-theme

Например, для модуля Controls будут созданы следующие модули с темами оформления:

  • Controls-default-theme
  • Controls-retail-theme
  • Controls-cloud-theme
  • Controls-saby-theme
  • и другие.

Каждая тема оформления будет определена с помощью нескольких модулей, например retail:

  • Controls-retail-theme
  • ExtControls-retail-theme
  • RichEditor-retail-theme
  • Graphs-retail-theme
  • и другие.

Модификации темы

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

Исходный код каждой модификаций должен быть оформлен в виде директории в модуле с темой. Например, для темы оформления retail будет создана следующая структура каталога для темизации модуля Controls:

  • Controls-retail-theme:
    • dark-large;
    • dark-medium;
    • light-large;
    • light-medium;
    • и т.п.

При установке значения опции theme модификация указывается через символ __, что показано в следующем примере.

<Controls.input:Text theme="retail__dark-large"/>

Пример создания модуля темы оформления

Посмотреть пример готового модуля темы оформления можно на github.

При создании темы следует указывать параметр @themeName. Он необходим для корректной сборки css-стилей.

Например, тема называется retail и она будет наследоваться от темы "по умолчанию".

Согласно предыдущему разделу создаем модуль Controls-retail-theme.

Все параметры темы оформления определяются в одном файле theme.less, который должен быть расположен в корне модуля темы или папке модификации темы. В начале файла необходимо подключить тему оформления "по умолчанию" или тему оформления более высокого уровня, которая больше похожа на ту, которую необходимо создать.

Процесс описания собственной темы оформления сводится к переопределению значений css-переменных родительской темы.

Переопределяемые переменные должны лежать внутри селектора с классом .controls_theme-@{themeName}.

@import 'Controls-default-theme/theme'
@themeName: retail;
 
.controls_theme-@{themeName} {
  --background-color: #273749;
  --border-thickness: 2px;
  --border-color: #6D8DB0;
  --readonly_color: #4B688B;
}

После сборки less в модуле с темой оформления появится файл theme.css, который будет содержать переменные и их значения, определенные для темы retail.

При сборке дистрибутива все файлы theme.css пакуются специальным образом.

Например для набора модулей:

  • Controls-retail-theme
  • ExtControls-retail-theme
  • RichEditor-retail-theme
  • Graphs-retail-theme

Будет собран один итоговый retail.css, состоящий их всех theme.css, которые лежат в модулях.

Он располагается по адресу %resourceRoot%/themes/retail.css. В этом же каталоге лежат остальные собранные файлы тем и модификаторов.

Затем, при указании контролу опции theme="retail", этот файл будет загружен на клиент, а значения переменных будут применены к контролам.

© 2021 Тензор. Все права защищены.