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

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

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

1. Обновить semantic-ui до версии 2.4.1
2. Установить с помощью команды ``npm i ember-flexberry-themes`

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

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

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

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

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

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

`less
@import 'src/flexberry-imports';
`

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

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

`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

`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']
}
}
]
}
}
});
...
}
`


$3

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

`js
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',
...
`

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

$3

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

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

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

`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,
}
...
}
`


$3


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

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

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

$3

`
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

`less
/*
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;
`


$3

| Свойство | Описание | Дефолтное значение |
|-------------------|--------------------------------------------------------|----------------------------------------------------------------------------------------|
| @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 |

$3

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

$3

Применяется ко всем компонентам для ввода данных
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` |