4.5.7.1.2. Расширение существующей темы

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

Для адаптации (расширения) темы в проекте необходимо создать специальную файловую структуру в модуле web. Это удобно сделать с помощью CUBA Studio: откройте секцию Project properties и нажмите ссылку Create theme extension. В диалоговом окне выберите тему, которую вы хотите расширить. В результате в проекте будет создана структура каталогов, аналогичная описанной в предыдущем разделе. Кроме того, скрипт сборки build.gradle будет дополнен задачей buildScssThemes, автоматически запускаемой при сборке модуля web.

Рассмотрим пример расширения темы Halo, так как она основана на теме Valo фреймворка Vaadin, и предоставляет максимальные возможности адаптации.

Файл themes/halo/halo-ext-defaults.scss предназначен для размещения в нем переменных темы. Большинство переменных Halo соответствует описанным в документации по Valo, ниже приведены основные: 

$v-background-color: #fafafa;        /* цвет фона компонентов */
$v-app-background-color: #e7ebf2;    /* цвет фона приложения */
$v-panel-background-color: #fff;     /* цвет фона панелей */
$v-focus-color: #3b5998;             /* цвет выделения компонентов в фокусе */
$v-error-indicator-color: #ed473b;   /* цвет выделения обязательных незаполненных полей */

$v-line-height: 1.35;                /* высота строк */
$v-font-size: 14px;                  /* размер шрифта */
$v-font-weight: 400;                 /* начертание шрифта */
$v-unit-size: 30px;                  /* базовый размер темы, определяет высоту кнопок, полей и другие размеры компонентов */

$v-font-size--h1: 24px;              /* размер шрифта Label со стилем h1 */
$v-font-size--h2: 20px;              /* размер шрифта Label со стилем h2 */
$v-font-size--h3: 16px;              /* размер шрифта Label со стилем h3 */

/* размеры отступов margin для контейнеров */
$v-layout-margin-top: 10px;
$v-layout-margin-left: 10px;
$v-layout-margin-right: 10px;
$v-layout-margin-bottom: 10px;

/* размер отступа между компонентами в контейнере с включенной опцией spacing */
$v-layout-spacing-vertical: 10px;
$v-layout-spacing-horizontal: 10px;

/* базовые размеры для строк таблицы */
$v-table-row-height: 30px;
$v-table-header-font-size: 13px;
$v-table-cell-padding-horizontal: 7px;

/* стиль фокуса для полей ввода */
$v-focus-style: inset 0px 0px 5px 1px rgba($v-focus-color, 0.5);
/* стиль, применяемый к обязательным полям ввода в фокусе */
$v-error-focus-style: inset 0px 0px 5px 1px rgba($v-error-indicator-color, 0.5);

/* анимация элементов по умолчанию включена */
$v-animations-enabled: true;
/* анимация всплывающих окон по умолчанию выключена */
$v-window-animations-enabled: false;

/* инверсный заголовок управляется свойством cuba.web.useInverseHeader */
$v-support-inverse-menu: true;

Пример содержимого файла halo-ext-defaults.scss для темы с темным фоном и немного уменьшенными отступами: 

$v-background-color: #444D50;

$v-font-size--h1: 22px;
$v-font-size--h2: 18px;
$v-font-size--h3: 16px;

$v-layout-margin-top: 8px;
$v-layout-margin-left: 8px;
$v-layout-margin-right: 8px;
$v-layout-margin-bottom: 8px;

$v-layout-spacing-vertical: 8px;
$v-layout-spacing-horizontal: 8px;

$v-table-row-height: 25px;
$v-table-header-font-size: 13px;
$v-table-cell-padding-horizontal: 5px;

$v-support-inverse-menu: false;

Для изменения параметров отдельных компонентов необходимо добавить соответствующий код CSS в блок @mixin halo-ext {...} файла halo-ext.scss. Например, для того, чтобы пункты главного меню отображались жирным шрифтом, содержимое файла halo-ext.scss должно быть следующим: 

@import "../halo/halo";

@mixin halo-ext {
@include halo;

.v-menubar-menuitem-caption {
  font-weight: bold;
}
}
Пред.  Наверх  След.
  Начало