Создание модуля темы оформления
Структура хранения темы оформления организована таким образом, чтобы по значению опции 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;
}
Создайте файл theme.less, в начале файла необходимо подключить тему оформления "по умолчанию" или тему оформления более высокого уровня, которая больше похожа на ту, которую необходимо создать. Далее импортируйте в файл содержимое папки _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", этот файл будет загружен на клиент, а значения переменных будут применены к контролам.