Модули темы оформления

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

Структура хранения темы оформления организована таким образом, чтобы по значению опции 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
  • и другие.

Переменные темы оформления по умолчаннию

Список общих переменных расположен здесь.

Список переменных для отдельных библиотек контролов - здесь.

Чтобы пользоваться переменными, импортируйте файл:

@import 'Controls-default-theme/_theme'

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

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

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

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

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

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

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

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

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

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

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

Процесс описания собственной темы оформления сводится к определению общих параметров темы, а также заданию абсолютных значений стиля на любом из уровней определения аспектов внешнего вида:

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

Чтобы в рамках сборки создался CSS-файл со стилями контрола, который будет загружен в браузер, необходимо создать соответствующий less-файл с именем контрола в модуле с темой или папке модификации темы. Путь до файла в модуле темы должен совпадать с путем в оригинальном модуле контрола. Название less-файла в оригинальном модуле должно начинаться с нижнего подчеркивания, чтобы сборка этого файла не происходила в оригинальном модуле. Less-файл будет использоваться, как файл импорта в теме оформления.

Пример:

  • Controls
    • _input.less
  • Controls-default-theme
    • input.less
  • Controls-retail-theme
    • dark-large
      • input.less

В этом файле нужно подключить _theme.less и файл с оригинальными стилями контрола. Например, для input.less:

@import '_theme';
@import 'Controls/_input';

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