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

Пример

Исходный код

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

В корне модуля создаем папку _variables, в которой размещаем less-файлы с описанием переменных (например, _button.less). Процесс описания собственной темы оформления сводится к переопределению значений css-переменных родительской темы. Переопределяемые переменные должны лежать внутри селектора с классом .controls_theme-@{themeName}.

.controls_theme-@{themeName} {
  --background-color: #273749;
  --border-thickness: 2px;
  --border-color: #6D8DB0;
  --readonly_color: #4B688B;
}

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

@import 'Controls-default-theme/theme'
@themeName: retail;
 
@import '_variables/_button'

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

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

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

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

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

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

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