Merge 0a56daa into e18c3e4

src/layout/behaviors/LayoutBehavior.ts

@@ -16,6 +16,9 @@ export default Marionette.Behavior.extend({
             this.$el.toggleClass(classes.HIDDEN, !nextState.visible);
             this.view.trigger('change:visible', this.view, nextState.visible);
         }
+        if (this.view.setEnablement) {
+            this.view.setEnablement();
+        }
         this.__state = nextState;
     },
 

src/layout/button/ButtonView.js

@@ -5,13 +5,21 @@ import LayoutBehavior from '../behaviors/LayoutBehavior';
 const classes = {
     CLASS_NAME: 'layout__button',
     PALE: 'btn-pale',
-    STRONG: 'btn-strong'
+    STRONG: 'btn-strong',
+    DISABLED: 'btn-disabled'
 };
 
 export default Marionette.View.extend({
     initialize(options) {
         helpers.ensureOption(options, 'text');
         helpers.ensureOption(options, 'handler');
+        this.setEnablement = () => {
+            if (typeof options.isEnabled === 'function') {
+                const isEnabled = options.isEnabled();
+                const el = this.$el;
+                isEnabled ? el.removeClass(classes.DISABLED) : el.addClass(classes.DISABLED);
+            }
+        };
     },
 
     template: Handlebars.compile(template),
@@ -21,11 +29,14 @@ export default Marionette.View.extend({
             customClass: this.options.class || '',
             brightnessClass: this.options.id === false ? classes.PALE : classes.STRONG,
             text: this.options.text,
-            iconClass: this.options.iconClass
+            iconClass: this.options.iconClass,
+            isNext: this.options.iconClass === 'chevron-right'
         };
     },
 
-    className: classes.CLASS_NAME,
+    className() {
+        return `${classes.CLASS_NAME} ${this.options.backButtonClass}`;
+    },
 
     behaviors: {
         LayoutBehavior: {

src/layout/button/button.hbs

@@ -1,8 +1,15 @@
 <div class="toolbar-btn js-btn {{customClass}} {{brightnessClass}}" tabindex="0">
+    {{#unless isNext}}
     {{#if iconClass}}
     <div class="toolbar__icons">
         <i class="{{iconPrefixer iconClass}}" aria-hidden="true"></i>
     </div>
     {{/if}}
+    {{/unless}}
     <span class="toolbar-btn__text">{{text}}</span>
+    {{#if isNext}}
+    <div class="toolbar__icons">
+        <i class="{{iconPrefixer iconClass}}" aria-hidden="true"></i>
+    </div>
+    {{/if}}
 </div>

src/layout/index.ts

@@ -7,6 +7,7 @@ import './resources/popup.css';
 import './resources/form.css';
 import './resources/button.css';
 import './resources/group.css';
+import './resources/wizard.css';
 
 export { default as TabLayout } from './tabLayout/TabLayoutView';
 export { default as VerticalLayout } from './VerticalLayoutView';
@@ -17,5 +18,6 @@ export { default as Popup } from './popup/PopupView';
 export { default as Group } from './group/GroupView';
 export { default as PlainText } from './plainText/PlainTextView';
 export { default as SplitPanel } from './split/SplitPanel';
+export { default as Wizard } from './wizard/WizardView';
 
 export * from './factory';

src/layout/popup/PopupView.ts

@@ -40,6 +40,7 @@ export default Marionette.View.extend({
     templateContext() {
         return {
             headerText: this.options.header,
+            isResizerHidden: this.options.isResizerHidden,
             ...iconsNames
         };
     },
@@ -91,9 +92,14 @@ export default Marionette.View.extend({
         if (this.options.size && !MobileService.isMobile) {
             this.ui.window.css(this.options.size);
         }
+        if (this.options.bgc) {
+            this.ui.window.css('background-color', this.options.bgc);
+        }
         this.__setExpandState(this.options.expand);
         this.showChildView('contentRegion', this.options.content);
-        this.showChildView('buttonsRegion', this.__createButtonsView());
+        if (this.options.buttons) {
+            this.showChildView('buttonsRegion', this.__createButtonsView());
+        }
         this.__updateState();
 
         if (!this.options.newTabUrl) {

src/layout/popup/popup.hbs

@@ -3,7 +3,7 @@
     <div class="layout__popup-view-header js-header">
         <span class="layout__popup-view-header-text js-header-text">{{headerText}}</span>
         <span class="layout__popup-view-header__btn {{iconPrefixer goTo}} js-new-tab"></span>
-        <span class="layout__popup-view-header__btn {{iconPrefixer expand}} {{iconPrefixer minimize}} js-fullscreen-toggle"></span>
+        {{#unless isResizerHidden}}<span class="layout__popup-view-header__btn {{iconPrefixer expand}} {{iconPrefixer minimize}} js-fullscreen-toggle"></span>{{/unless}}
         <span class="layout__popup-view-header__btn layout__popup-view-header__btn_equate {{iconPrefixer close}} js-close"></span>
     </div>
     <div class="layout__popup-view-content js-content-region"></div>

src/layout/resources/wizard.css

@@ -0,0 +1,174 @@
+.layout__wizard {
+    display: flex;
+    flex-direction: column;
+    flex: 1 0 auto;
+}
+
+.layout__wizard__step-hidden {
+    display: none;
+}
+
+/* header */
+
+.layout__wizard__header-region {
+    flex: 0 0 auto;
+    display: flex;
+    justify-content: space-between;
+}
+
+.layout__wizard__header-view {
+    width: 100%;
+    margin-bottom: -1px;
+    overflow-x: hidden;
+    overflow-y: visible;
+    display: flex;
+    flex-flow: row nowrap;
+}
+
+.layout__wizard__header-view ul {
+    list-style: none;
+    display: flex;
+    flex-wrap: nowrap;
+    width: 100%;
+    min-width: 0;
+    margin: 0;
+    overflow: hidden;
+    padding: 0;
+}
+
+.layout__wizard__header-view-item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 35px;
+    flex: 0 1 100%;
+    border-radius: 4px 4px 0 0;
+    margin-bottom: 0;
+    background-color: #f5f5f5;
+    color: black;
+    padding: 4px 15px;
+    font-size: 14px;
+    transform: skewX(-35deg);
+}
+
+.layout__wizard__header-view-item:hover {
+    cursor: default;
+}
+
+.layout__wizard__header-view-item:first-child::before,
+.layout__wizard__header-view-item:last-child::after {
+    content: '';
+    position: absolute;
+    height: 100%;
+    width: 20%;
+    border-radius: 4px;
+    transform: skewX(35deg);
+    z-index: -1;
+}
+
+.layout__wizard__header-view-item:first-child::before {
+    top: 0;
+    left: 0;
+    background-color: rgba(5, 117, 189, 1);
+}
+
+.layout__wizard__header-view-item:last-child::after {
+    bottom: 0;
+    right: 0;
+    background-color: #f5f5f5;
+}
+
+.layout__wizard__header-view-item_selected:last-child::after,
+.layout__wizard__header-view-item_completed:last-child::after {
+    background-color: rgba(5, 117, 189, 1);
+}
+
+.layout__wizard__header-view-item:not(:last-child) {
+    margin-right: 3px;
+}
+
+.layout__wizard__header-view-item_selected,
+.layout__wizard__header-view-item_completed {
+    background-color: rgba(5, 117, 189, 1);
+    color: #fff;
+}
+
+.layout__wizard__header-view-item_selected .layout__wizard__header-view-item-index,
+.layout__wizard__header-view-item_completed .layout__wizard__header-view-item-index {
+    color: rgba(5, 117, 189, 1);
+}
+
+.layout__wizard__header-view-item_hidden {
+    display: none;
+}
+
+.layout__wizard__header-view-item_error {
+    color: #e1462c;
+    border: 1px solid #e1462c;
+}
+
+.layout__wizard__header-view-item-index {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    background-color: #fff;
+    transform: skewX(35deg);
+    margin-right: 5px;
+}
+
+.layout__wizard__header-view-item-text {
+    transform: skewX(35deg);
+}
+
+.layout__wizard__header-view-item-index > .fal {
+    font-weight: 500;
+}
+
+/* panel */
+
+.layout__wizard__panel-region {
+    height: 100%;
+}
+
+.layout__wizard__panel-container {
+    height: 100%;
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    background-color: #fff;
+    border: 1px solid #c1c1c1;
+    border-top: none;
+    border-radius: 0 0 4px 4px;
+    padding: 20px 15px;
+}
+
+/* buttons */
+
+.layout__wizard__buttons-layout {
+    justify-content: flex-end;
+}
+
+.layout__wizard__buttons-layout > .layout__button {
+    align-self: unset;
+}
+
+.layout__wizard__buttons-layout > .layout__button > .toolbar-btn {
+    height: 30px;
+}
+
+.layout__wizard__back-button {
+    margin-right: auto;
+}
+
+.layout__wizard__final-button {
+    background-color: #ffa500;
+    border: 1px solid #ffa500;
+}
+
+.layout__wizard__final-button:hover {
+    background-color: #ff8800;
+    border: 1px solid #ff8800;
+}

src/layout/wizard/StepHeaderView.ts

@@ -0,0 +1,36 @@
+import { helpers } from 'utils';
+import template from './templates/stepHeader.hbs';
+import StepHeadersView from './StepHeadersView';
+
+const defaultOptions = {
+    headerClass: ''
+};
+
+export default Marionette.View.extend({
+    initialize(options) {
+        helpers.ensureOption(options, 'collection');
+        _.defaults(options, defaultOptions);
+
+        this.StepHeadersView = new StepHeadersView({
+            collection: this.options.collection
+        });
+        this.listenTo(this.StepHeadersView, 'select', (model: Backbone.Model) => this.trigger('select', model));
+    },
+
+    template: Handlebars.compile(template),
+
+    className() {
+        return `layout__wizard__header-view ${this.getOption('headerClass') || ''}`;
+    },
+
+    regions: {
+        tabsHeaderRegion: {
+            el: '.js-tabs-headers-region',
+            replaceElement: true
+        }
+    },
+
+    onRender() {
+        this.showChildView('tabsHeaderRegion', this.StepHeadersView);
+    }
+});

src/layout/wizard/StepHeadersView.ts

@@ -0,0 +1,7 @@
+import HeaderItemView from './WizardHeaderItemView';
+
+export default Marionette.CollectionView.extend({
+    tagName: 'ul',
+
+    childView: HeaderItemView
+});