Ember-flexberry-themes NPM

Инструкция по переходу на новую тему оформления

Новая тема реализована на основе фреймворка Semantic-UI. Статья на официальном сайте фреймворка

Настройка импорта стилей

Обновить semantic-ui до версии 2.4.1
Установить с помощью команды npm i ember-flexberry-themes
Проверить, что в ember-cli-build.js прописаны пути до пакетов с темами (semantic-ui и ember-flexberry-themes)

  lessOptions: {
    paths: [
      'bower_components/semantic-ui',
      'node_modules/ember-flexberry-themes',
    ]
  }

Настроить файл theme.config (можно скопировать из примера)

@semanticUiThemesFolder - путь до папки с темой semantic-ui @emberFlexberryThemesFolder - путь до папки с темой ember-flexberry-themes @siteFolder - папака с локальными стилями приложения

Настроить файл app/styles/theme.less (можно скопировать из примера)

Прописать в app/styles/app.less импорт стилей (помимо импорта локальных стилей должна остаться одна строка, semantic импортировать не нужно)

  @import 'src/flexberry-imports';

Настройка шрифтов

Добавить импорт шрифтов GOSTUI2, guideline-icons в ember-cli-build.js
Добавить импорт стилей и настроек для иконок и шрифтов в ember-cli-build.js

  // GOSTUI2
  const ghostThemeAssetsDir = 'node_modules/ember-flexberry-themes/src/themes/ghost/assets';
  app.import(`${ghostThemeAssetsDir}/fonts.css`);
  app.import(`${ghostThemeAssetsDir}/fonts/GOSTUI2/GOSTUI2-w170-regular_g_temp.eot`, { destDir: 'assets/fonts' });
  app.import(`${ghostThemeAssetsDir}/fonts/GOSTUI2/GOSTUI2-w170-regular_g_temp.ttf`, { destDir: 'assets/fonts' });
  app.import(`${ghostThemeAssetsDir}/fonts/GOSTUI2/GOSTUI2-w170-regular_g_temp.woff`, { destDir: 'assets/fonts' });
  app.import(`${ghostThemeAssetsDir}/fonts/GOSTUI2/GOSTUI2-w170-regular_g_temp.woff2`, { destDir: 'assets/fonts' });
  app.import(`${ghostThemeAssetsDir}/fonts/GOSTUI2/GOSTUI2-w450-medium_g_temp.eot`, { destDir: 'assets/fonts' });
  app.import(`${ghostThemeAssetsDir}/fonts/GOSTUI2/GOSTUI2-w450-medium_g_temp.ttf`, { destDir: 'assets/fonts' });
  app.import(`${ghostThemeAssetsDir}/fonts/GOSTUI2/GOSTUI2-w450-medium_g_temp.woff`, { destDir: 'assets/fonts' });
  app.import(`${ghostThemeAssetsDir}/fonts/GOSTUI2/GOSTUI2-w450-medium_g_temp.woff2`, { destDir: 'assets/fonts' });
  app.import(`${ghostThemeAssetsDir}/fonts/GOSTUI2/GOSTUI2-w706-bold_g_temp.eot`, { destDir: 'assets/fonts' });
  app.import(`${ghostThemeAssetsDir}/fonts/GOSTUI2/GOSTUI2-w706-bold_g_temp.ttf`, { destDir: 'assets/fonts' });
  app.import(`${ghostThemeAssetsDir}/fonts/GOSTUI2/GOSTUI2-w706-bold_g_temp.woff`, { destDir: 'assets/fonts' });
  app.import(`${ghostThemeAssetsDir}/fonts/GOSTUI2/GOSTUI2-w706-bold_g_temp.woff2`, { destDir: 'assets/fonts' });

  // guideline-icons
  app.import(`${ghostThemeAssetsDir}/guideline-icons.css`);
  app.import(`${ghostThemeAssetsDir}/fonts/guideline-icons/guideline-icons.eot`, { destDir: 'assets/fonts/guideline-icons' });
  app.import(`${ghostThemeAssetsDir}/fonts/guideline-icons/guideline-icons.ttf`, { destDir: 'assets/fonts/guideline-icons' });
  app.import(`${ghostThemeAssetsDir}/fonts/guideline-icons/guideline-icons.woff`, { destDir: 'assets/fonts/guideline-icons' });
  app.import(`${ghostThemeAssetsDir}/fonts/guideline-icons/guideline-icons.woff2`, { destDir: 'assets/fonts/guideline-icons' });
  app.import(`${ghostThemeAssetsDir}/fonts/guideline-icons/guideline-icons.svg`, { destDir: 'assets/fonts/guideline-icons' });

Настройка приложения

Установить пакет autoprefixer и добавить настройку в ember-cli-build.js

  const autoprefixer = require('autoprefixer');
  module.exports = function(defaults) {
    let app = new EmberAddon(defaults, {
      ...
      postcssOptions: {
        compile: {
          enabled: false,
          browsers: ['last 3 versions'],
        },
        filter: {
          enabled: true,
          plugins: [
            {
              module: autoprefixer,
              options: {
                browsers: ['last 2 versions']
              }
            }
          ]
        }
      }
    });
    ...
  }

Основное меню приложения

Чтобы отображать новое меню нужно использовать компонент flexberry-sitemap-guideline. Пример на стенде.
Чтобы отображать элементы в подвале сайдбара, их нужно поместить в блок с классом sitebar-footer. Пример на стенде
Для установки иконок в пункты меню при объявлении sitemap'а добавить для узла параметр icon

  sitemap: computed('i18n.locale', function() {
    let i18n = this.get('i18n');

    return {
      nodes: [{
        link: 'index',
        caption: i18n.t('forms.application.sitemap.index.caption'),
        title: i18n.t('forms.application.sitemap.index.title'),
        icon: 'home',
        children: null
      }, {
        link: null,
        caption: i18n.t('forms.application.sitemap.application.caption'),
        title: i18n.t('forms.application.sitemap.application.title'),
        icon: 'clock outline',
        ...

toggleSidebar скопировать отсюда

Модальные окна в режиме `Sidepage`

В новой теме добавлен дополнительный режим открытия модального окна sidepage. В данном режиме модальное окно открывается справа во всю высоту страницы а на мобильных устройствах распахивается на весь экран. Чтобы модальное окно открылось в режиме sidepage, необходимо в разметку добавить класс flexberry-sidepage, а также использовать анимацию transition:'slide left'.

При использовании компоеннта modal-dialog достаточно указать useSidePageMode=true.

Для того, чтобы модальные окна lookup'a и настройки столбцов открывались в режиме sidepage, необходимо добавить следующие настройки в environment.js:

components: {
  ...
  // For guideline theme
  // Settings for flexberry-objectlistview component.
  flexberryObjectlistview: {
    // Flag indicates whether to side page or usually mode.
    useSidePageMode: true,
  },

  // Settings for flexberry-lookup component.
  flexberryLookup: {
    // Flag: indicates whether to side page or usually mode.
    useSidePageMode: true,
  }
  ...
}

Некоторые классы

Чтобы модальное окно распахивалось на мобильнольном устройстве на весь экран необходимо использовать класс fullhight-mobile-modal.

Доработка стилей в приложении

Добавить папку site в app/styles
Стили рассортированы по компонентам ember-flexberry
Файл *.variables для переменных, *.overrides для добавления новых стилей.
В первую очередь нужно использовать переменные для изменения стилей.

Структура каталога

  app
  ├── ...
  ├── styles
  |   ├── site
  |   |   ├── components
  |   |   |   ├── flexberry-button.variables/.overrides
  |   |   |   ├── flexberry-checkbox.variables/.overrides
  |   |   |   ├── flexberry-colsconfig.variables/.overrides
  |   |   |   ├── flexberry-dropdown.variables/.overrides
  |   |   |   ├── flexberry-field.variables/.overrides
  |   |   |   ├── flexberry-file.variables/.overrides
  |   |   |   ├── flexberry-groupedit.variables/.overrides
  |   |   |   ├── flexberry-lookup.variables/.overrides
  |   |   |   ├── flexberry-modal.variables/.overrides
  |   |   |   ├── flexberry-objectlistview.variables/.overrides
  |   |   |   ├── flexberry-sidebar.variables/.overrides
  |   |   |   ├── flexberry-simpledatetime.variables/.overrides
  |   |   |   └── flexberry-validationsummary.variables/.overrides
  |   |   ├── globals
  |   |   |   └── site.variables/.overrides
  |   |   └── pages
  |   |   |   ├── login-form.variables/.overrides
  |   |   |   └── main.variables/.overrides
  |   └── app.less
  └──...

В теме используется цветовая схема, таким образом, если поменять основной цвет глобально, то он поменяется для кнопок и чекбокса и тд. Цветовая схема задается в globals/site.variables

  /*******************************
            COLOR SCHEME
  *******************************/

  // Main
  @defaultColor                   : #ECF2FB;
  @primaryColor                   : @cobaltBlue;
  @activeColor                    : @mayaBlue;
  @accentColor                    : #E94B3D;
  @secondaryColor                 : #7699B3;
  @disabledColor                  : @lightGrayishBlue;

  // Sidebar
  @sidebarBackgroundColor         : @textColor;

  // Page
  @simplePageBackground           : @defaultColor;
  @textColor                      : @blueZodiak;
  @iconColor                      : @lightGrayishBlue;

  // Input
  @inputBorderColor               : @defaultColor;
  @inputBackground                : @defaultColor;
  @inputHoverBorderColor          : @chambray;

  @defaultInputFocusBackground    : @white;
  @defaultFocusBorderColor        : @activeColor;
  @focusedFormBorderColor         : @activeColor;

Список основных цветов

Свойство	Описание	Дефолтное значение
`@defaultColor`	Основной цвет (заливка полей, фон, кнопки по умолчанию)	`#ECF2FB`
`@primaryColor`	Основной цвет (кнопки с классом `primary`, чекбоксы)	@cobaltBlue: `#0C49CD`
`@accentColor`	Акцентный цвет (акцентные элементы управления)	`#E94B3D`
`@secondaryColor`	Вспомогательный цвет (кнопка secondary, ссылки)	`#7699B3`
`@textColor`	Цвет текста	@blueZodiak: `#3B4256`
`@iconColor`	Иконки в полях	@lightGrayishBlue: `#848E99`
`@disabledColor`	Недоступные элементы управления	@lightGrayishBlue: `#848E99`

Интерактивные

Свойство	Описание	Дефолтное значение
`@activeColor`	Активный элемент (focus)	@mayaBlue: `#62B0FF`
`@negativeColor`	Ошибка (error)	@cinnabar: `#E53935`

Список цветов полей на форме

Применяется ко всем компонентам для ввода данных flexberry-field, flexberry-dropdown, flexberry-lookup и тд.

Свойство	Описание	Дефолтное значение
`@inputBorderColor`	Цвет бордера поля	@defaultColor: `#ECF2FB`
`@inputHoverBorderColor`	Цвет бордера поля при наведении	@chambray: `#B3BBC3`
`@inputBackground`	Цвет заливки поля	@defaultColor: `#ECF2FB`
`@defaultInputFocusBackground`	Цвет заливки поля, когда оно в фокусе	@white: `#FFFFFF`
`@focusedFormBorderColor`	Цвет бордера поля, когда оно в фокусе	@activeColor: `#62B0FF`