Skip to content

Latest commit

 

History

History
257 lines (211 loc) · 14.8 KB

README.md

File metadata and controls

257 lines (211 loc) · 14.8 KB

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

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

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

  1. Обновить semantic-ui до версии 2.4.1

  2. Установить с помощью команды npm i ember-flexberry-themes

  3. Проверить, что в ember-cli-build.js прописаны пути до пакетов с темами (semantic-ui и ember-flexberry-themes)

  lessOptions: {
    paths: [
      'bower_components/semantic-ui',
      'node_modules/ember-flexberry-themes',
    ]
  }
  1. Настроить файл theme.config (можно скопировать из примера)

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

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

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

  @import 'src/flexberry-imports';

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

  1. Добавить импорт шрифтов GOSTUI2, guideline-icons в ember-cli-build.js
  2. Добавить импорт стилей и настроек для иконок и шрифтов в 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']
              }
            }
          ]
        }
      }
    });
    ...
  }

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

  1. Чтобы отображать новое меню нужно использовать компонент flexberry-sitemap-guideline. Пример на стенде.
  2. Чтобы отображать элементы в подвале сайдбара, их нужно поместить в блок с классом sitebar-footer. Пример на стенде
  3. Для установки иконок в пункты меню при объявлении 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',
        ...
  1. 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.

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

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

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

  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 #ECF2FB
@primaryColor Основной цвет (кнопки с классом primary, чекбоксы) @cobaltBlue: #0C49CD #0C49CD
@accentColor Акцентный цвет (акцентные элементы управления) #E94B3D #E94B3D
@secondaryColor Вспомогательный цвет (кнопка secondary, ссылки) #7699B3 #7699B3
@textColor Цвет текста @blueZodiak: #3B4256 #3B4256
@iconColor Иконки в полях @lightGrayishBlue: #848E99 #848E99
@disabledColor Недоступные элементы управления @lightGrayishBlue: #848E99 #848E99

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

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

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

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

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