4.5.7.1.3. Создание новой темы

В проекте можно создать одну или несколько новых тем и дать возможность пользователям выбирать среди них подходящую. Создание новой темы позволяет также переопределять переменные файла *-theme.properties, задающие некоторые параметры, требуемые на стороне сервера:

  • Размеры диалоговых окон по умолчанию.

  • Ширина полей ввода по умолчанию.

  • Размеры некоторых компонентов (Filter, FileMultiUploadField).

  • Соответствие между именами пиктограмм и именами констант перечисления com.vaadin.server.FontAwesome для использования элементов шрифта Font Awesome в стандартных действиях и экранах платформы при включенном свойстве cuba.web.useFontIcons.

Рассмотрим пример создания на основе Halo новой темы Facebook, напоминающей интерфейс сайта известной социальной сети.

  1. В CUBA Studio откройте секцию Project properties и нажмите ссылку Create theme extension. В диалоговом окне выберите halo и нажмите Create. В проекте будет создано расширение темы Halo, как описано в предыдущем разделе.

  2. Переименуйте созданный в модуле web каталог themes/halo в themes/facebook, внутри него файл halo-ext.scss переименуйте в facebook.scss, halo-ext-defaults.scss в facebook-defaults.scss.

  3. Отредактируйте файл styles.scss, заменив в нем импорты halo-ext и корневой селектор halo: 

    @import "halo-defaults";
@import "facebook-defaults";
@import "facebook";

.facebook {
@include facebook;
}

.v-theme-version {
display: none;
}

  4. Отредактируйте файл facebook.scss, заменив в нем @mixin halo-ext: 

    @import "../halo/halo";

@mixin facebook {
@include halo;
}

  5. Поместите в файл facebook-defaults.scss следующие переменные: 

    $v-background-color: #fafafa;
$v-app-background-color: #e7ebf2;
$v-panel-background-color: #fff;
$v-focus-color: #3b5998;

$v-border-radius: 0;
$v-textfield-border-radius: 0;

$v-font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif;
$v-font-size: 14px;
$v-font-color: #37404E;
$v-font-weight: 400;

$v-link-text-decoration: none;
$v-shadow: 0 1px 0 (v-shade 0.2);
$v-bevel: inset 0 1px 0 v-tint;
$v-unit-size: 30px;
$v-gradient: v-linear 12%;
$v-overlay-shadow: 0 3px 8px v-shade, 0 0 0 1px (v-shade 0.7);
$v-shadow-opacity: 20%;
$v-selection-overlay-padding-horizontal: 0;
$v-selection-overlay-padding-vertical: 6px;
$v-selection-item-border-radius: 0;

$v-line-height: 1.35;
$v-font-size: 14px;
$v-font-weight: 400;
$v-unit-size: 25px;

$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-focus-style: inset 0px 0px 1px 1px rgba($v-focus-color, 0.5);
$v-error-focus-style: inset 0px 0px 1px 1px rgba($v-error-indicator-color, 0.5);

  6. Создайте в подкаталоге src модуля web файл facebook-theme.properties со следующим содержимым: 

    @include=halo-theme.properties

    При необходимости в этом файле можно переопределять server-side переменные темы, заданные в файле halo-theme.properties платформы.

  7. В файл web-app.properties добавьте следующие свойства: 

    cuba.web.theme = facebook
cuba.themeConfig = havana-theme.properties halo-theme.properties facebook-theme.properties

  8. Пересоберите приложение и запустите сервер. Теперь при первом входе пользователь увидит приложение в теме Facebook, и в окне Help -> Settings сможет выирать между темами Facebook, Halo, Havana.

Пред.  Наверх  След.
  Начало