ember-flexberry-themes

v0.3.1

Published

a month ago

Новая тема реализована на основе фреймворка Semantic-UI. [Статья на официальном сайте фреймворка](https://semantic-ui.com/usage/theming.html)

Downloads

199

0High
0Medium
0Low

flexberry

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

Новая тема реализована на основе фреймворка 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 #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 |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme