Merge branch 'feature/custom-header-view' into develop

apps/api/documents/api.js

@@ -121,7 +121,10 @@
                     forcesave: false,
                     commentAuthorOnly: false,
                     showReviewChanges: false,
-                    help: true
+                    help: true,
+                    compactHeader: false,
+                    toolbarBreakTabs: false,
+                    toolbarHideFileName: false
                 },
                 plugins: {
                     autostart: ['asc.{FFE1F462-1EA2-4391-990D-4CC84940B754}'],
@@ -369,6 +372,7 @@
                     // _config.editorConfig.canBackToFolder = false;
                     if (!_config.editorConfig.customization) _config.editorConfig.customization = {};
                     _config.editorConfig.customization.about = false;
+                    _config.editorConfig.customization.compactHeader = false;
 
                     if ( window.AscDesktopEditor ) window.AscDesktopEditor.execCommand('webapps:events', 'loading');
                 }

apps/common/main/lib/controller/Desktop.js

@@ -53,7 +53,21 @@ define([
                     Common.NotificationCenter.on('app:ready', function (opts) {
                         _.extend(config, opts);
                         !!app && app.execCommand('doc:onready', '');
+
+                        $('.toolbar').addClass('editor-native-color');
                     });
+
+                    app.on_native_message = function (cmd, param) {
+                        if (/^style:change/.test(cmd)) {
+                            var obj = JSON.parse(param);
+
+                            if ( obj.element == 'toolbar' ) {
+                                if ( obj.action == 'off' && obj.style == 'native-color' ) {
+                                    $('.toolbar').removeClass('editor-native-color');
+                                }
+                            }
+                        }
+                    }
                 }
             },
             process: function (opts) {

apps/common/main/resources/less/toolbar.less

@@ -297,7 +297,115 @@
             left: 0;
         }
     }
+}
 
+.style-off-tabs {
+    .toolbar {
+        @underscore_height: 2px;
+
+        .tabs, .extra {
+            background-color: transparent;
+            box-shadow: inset 0 -1px 0 0 @gray;
+        }
+
+        .tabs {
+            ul {
+                padding: 0;
+            }
+
+            li {
+                position: relative;
+
+                &:after {
+                    //transition: opacity .1s;
+                    //transition: bottom .1s;
+                    border-top: @underscore_height solid @gray-deep;
+                    content: '';
+                    position: absolute;
+                    width: 100%;
+                    bottom: -@underscore_height;
+                    opacity: 0;
+                }
+
+                &.active {
+                    background-color: transparent;
+
+                    &:after {
+                        opacity: 1;
+                        bottom: 0;
+                    }
+                }
+
+                &:hover:not(.active) {
+                    background-color: rgba(0, 0, 0, .05);
+                    //background-color: @secondary;
+                }
+
+                > a {
+                    color: @gray-deep;
+                }
+            }
+        }
+
+        .extra {
+            #header-logo {
+                i {
+                    .background-ximage('@{common-image-path}/header/dark-logo.png', '@{common-image-path}/header/dark-logo@2x.png', 86px);
+                }
+            }
+        }
+
+        .tabs .scroll {
+            &.left {
+                box-shadow: 5px 0 20px 5px @gray-light;
+            }
+
+            &.right {
+                box-shadow: -5px 0 20px 5px @gray-light;
+            }
+
+            &:after {
+                border-color: @gray-deep;
+            }
+        }
+
+        // TODO: move to appropriate module
+        .btn-header {
+            svg.icon {
+                fill: #000;
+            }
+
+            &:hover:not(.disabled) {
+                background-color: @secondary;
+            }
+
+            &:active, &.active {
+                &:not(.disabled) {
+                    background-color: @primary;
+
+                    svg.icon {
+                        fill: #fff;
+                    }
+                }
+            }
+        }
+
+        #rib-doc-name {
+            color: @gray-deep;
+        }
+
+        &.editor-native-color {
+            .tabs li:after {
+                border-color: @tabs-bg-color;
+            }
+        }
+    }
+
+    &.style-skip-docname .toolbar {
+        #box-doc-name > input {
+            display: none;
+        }
+    }
 }
 
 .toolbar-fullview-panel {

apps/documenteditor/main/app/controller/Main.js

@@ -1159,6 +1159,10 @@ define([
                 this.appOptions.canBranding  = (licType === Asc.c_oLicenseResult.Success) && (typeof this.editorConfig.customization == 'object');
                 if (this.appOptions.canBranding)
                     appHeader.setBranding(this.editorConfig.customization);
+                else if (typeof this.editorConfig.customization == 'object') {
+                    this.editorConfig.customization.compactHeader = this.editorConfig.customization.toolbarBreakTabs =
+                    this.editorConfig.customization.toolbarHideFileName = false;
+                }
 
                 this.appOptions.canRename && appHeader.setCanRename(true);
 

apps/documenteditor/main/app/controller/Toolbar.js

@@ -2768,15 +2768,17 @@ define([
 
                 me.toolbar.btnSave.on('disabled', _.bind(me.onBtnChangeState, me, 'save:disabled'));
 
-                // hide 'print' and 'save' buttons group and next separator
+                if (!(config.customization && config.customization.compactHeader)) {
-                me.toolbar.btnPrint.$el.parents('.group').hide().next().hide();
+                    // hide 'print' and 'save' buttons group and next separator
+                    me.toolbar.btnPrint.$el.parents('.group').hide().next().hide();
 
-                // hide 'undo' and 'redo' buttons and retrieve parent container
+                    // hide 'undo' and 'redo' buttons and retrieve parent container
-                var $box =  me.toolbar.btnUndo.$el.hide().next().hide().parent();
+                    var $box = me.toolbar.btnUndo.$el.hide().next().hide().parent();
 
-                // move 'paste' button to the container instead of 'undo' and 'redo'
+                    // move 'paste' button to the container instead of 'undo' and 'redo'
-                me.toolbar.btnPaste.$el.detach().appendTo($box);
+                    me.toolbar.btnPaste.$el.detach().appendTo($box);
-                me.toolbar.btnCopy.$el.removeClass('split');
+                    me.toolbar.btnCopy.$el.removeClass('split');
+                }
 
                 if ( config.isDesktopApp ) {
                     if ( config.canProtect ) {

apps/documenteditor/main/app/controller/Viewport.js

@@ -76,7 +76,7 @@ define([
                     'render:before' : function (toolbar) {
                         var config = DE.getController('Main').appOptions;
                         toolbar.setExtra('right', me.header.getPanel('right', config));
-                        if (!config.isEdit)
+                        if (!config.isEdit || config.customization && !!config.customization.compactHeader)
                             toolbar.setExtra('left', me.header.getPanel('left', config));
                     },
                     'view:compact'  : function (toolbar, state) {
@@ -162,7 +162,15 @@ define([
                 if ( panel ) panel.height = _intvars.get('toolbar-height-tabs');
             }
 
-            if ( config.isEdit ) {
+            if ( config.customization ) {
+                if ( config.customization.toolbarBreakTabs )
+                    me.viewport.vlayout.getItem('toolbar').el.addClass('style-off-tabs');
+
+                if ( config.customization.toolbarHideFileName )
+                    me.viewport.vlayout.getItem('toolbar').el.addClass('style-skip-docname');
+            }
+
+            if ( config.isEdit && (!(config.customization && config.customization.compactHeader))) {
                 var $title = me.viewport.vlayout.getItem('title').el;
                 $title.html(me.header.getPanel('title', config)).show();
                 $title.find('.extra').html(me.header.getPanel('left', config));

apps/documenteditor/main/app/view/Toolbar.js

@@ -1565,9 +1565,6 @@ define([
 
                 var me = this;
 
-                // if (this.mode.isDesktopApp || this.mode.canBrandingExt && this.mode.customization && this.mode.customization.header === false)
-                //     this.mnuitemHideTitleBar.hide();
-
                 this.btnMarkers.setMenu(
                     new Common.UI.Menu({
                         style: 'min-width: 139px',
@@ -2111,7 +2108,7 @@ define([
 
             createSynchTip: function () {
                 this.synchTooltip = new Common.UI.SynchronizeTip({
-                    extCls: 'inc-index',
+                    extCls: (this.mode.customization && !!this.mode.customization.compactHeader) ? undefined : 'inc-index',
                     target: this.btnCollabChanges.$el
                 });
                 this.synchTooltip.on('dontshowclick', function () {

apps/presentationeditor/main/app/controller/Main.js

@@ -897,6 +897,10 @@ define([
                 this.appOptions.canBranding  = (licType === Asc.c_oLicenseResult.Success) && (typeof this.editorConfig.customization == 'object');
                 if (this.appOptions.canBranding)
                     appHeader.setBranding(this.editorConfig.customization);
+                else if (typeof this.editorConfig.customization == 'object') {
+                    this.editorConfig.customization.compactHeader = this.editorConfig.customization.toolbarBreakTabs =
+                    this.editorConfig.customization.toolbarHideFileName = false;
+                }
 
                 this.appOptions.canRename && appHeader.setCanRename(true);
 

apps/presentationeditor/main/app/controller/Toolbar.js

@@ -2008,15 +2008,18 @@ define([
                     me.toolbar.addTab(tab, $panel, 3);
 
                 me.toolbar.btnSave.on('disabled', _.bind(me.onBtnChangeState, me, 'save:disabled'));
-                // hide 'print' and 'save' buttons group and next separator
-                me.toolbar.btnPrint.$el.parents('.group').hide().next().hide();
 
-                // hide 'undo' and 'redo' buttons and get container
+                if (!(config.customization && config.customization.compactHeader)) {
-                var $box =  me.toolbar.btnUndo.$el.hide().next().hide().parent();
+                    // hide 'print' and 'save' buttons group and next separator
+                    me.toolbar.btnPrint.$el.parents('.group').hide().next().hide();
 
-                // move 'paste' button to the container instead of 'undo' and 'redo'
+                    // hide 'undo' and 'redo' buttons and get container
-                me.toolbar.btnPaste.$el.detach().appendTo($box);
+                    var $box = me.toolbar.btnUndo.$el.hide().next().hide().parent();
-                me.toolbar.btnCopy.$el.removeClass('split');
+
+                    // move 'paste' button to the container instead of 'undo' and 'redo'
+                    me.toolbar.btnPaste.$el.detach().appendTo($box);
+                    me.toolbar.btnCopy.$el.removeClass('split');
+                }
 
                 if ( config.isDesktopApp ) {
                     if ( config.canProtect ) { // don't add protect panel to toolbar

apps/presentationeditor/main/app/controller/Viewport.js

@@ -77,7 +77,7 @@ define([
                     'render:before' : function (toolbar) {
                         var config = PE.getController('Main').appOptions;
                         toolbar.setExtra('right', me.header.getPanel('right', config));
-                        if (!config.isEdit)
+                        if (!config.isEdit || config.customization && !!config.customization.compactHeader)
                             toolbar.setExtra('left', me.header.getPanel('left', config));
                     },
                     'view:compact'  : function (toolbar, state) {
@@ -165,7 +165,7 @@ define([
                 me.viewport.vlayout.getItem('toolbar').height = _intvars.get('toolbar-height-compact');
             }
 
-            if ( config.isEdit ) {
+            if ( config.isEdit && (!(config.customization && config.customization.compactHeader))) {
                 var $title = me.viewport.vlayout.getItem('title').el;
                 $title.html(me.header.getPanel('title', config)).show();
                 $title.find('.extra').html(me.header.getPanel('left', config));
@@ -184,6 +184,14 @@ define([
                 toolbar = me.getApplication().getController('Toolbar').getView('Toolbar');
                 toolbar.btnCollabChanges = me.header.btnSave;
             }
+
+            if ( config.customization ) {
+                if ( config.customization.toolbarBreakTabs )
+                    me.viewport.vlayout.getItem('toolbar').el.addClass('style-off-tabs');
+
+                if ( config.customization.toolbarHideFileName )
+                    me.viewport.vlayout.getItem('toolbar').el.addClass('style-skip-docname');
+            }
         },
 
         onAppReady: function (config) {

apps/presentationeditor/main/app/view/Toolbar.js

@@ -1429,7 +1429,7 @@ define([
 
             createSynchTip: function () {
                 this.synchTooltip = new Common.UI.SynchronizeTip({
-                    extCls: 'inc-index',
+                    extCls: (this.mode.customization && !!this.mode.customization.compactHeader) ? undefined : 'inc-index',
                     target: this.btnCollabChanges.$el
                 });
                 this.synchTooltip.on('dontshowclick', function () {

apps/spreadsheeteditor/main/app/controller/Main.js

@@ -916,6 +916,10 @@ define([
                     this.appOptions.canBranding  = (licType === Asc.c_oLicenseResult.Success) && (typeof this.editorConfig.customization == 'object');
                     if (this.appOptions.canBranding)
                         this.headerView.setBranding(this.editorConfig.customization);
+                    else if (typeof this.editorConfig.customization == 'object') {
+                        this.editorConfig.customization.compactHeader = this.editorConfig.customization.toolbarBreakTabs =
+                        this.editorConfig.customization.toolbarHideFileName = false;
+                    }
 
                     this.appOptions.canRename && this.headerView.setCanRename(true);
                 } else

apps/spreadsheeteditor/main/app/controller/Toolbar.js

@@ -3111,15 +3111,17 @@ define([
                         if ( $panel )
                             me.toolbar.addTab(tab, $panel, 4);
 
-                        // hide 'print' and 'save' buttons group and next separator
+                        if (!(config.customization && config.customization.compactHeader)) {
-                        me.toolbar.btnPrint.$el.parents('.group').hide().next().hide();
+                            // hide 'print' and 'save' buttons group and next separator
+                            me.toolbar.btnPrint.$el.parents('.group').hide().next().hide();
 
-                        // hide 'undo' and 'redo' buttons and get container
+                            // hide 'undo' and 'redo' buttons and get container
-                        var $box =  me.toolbar.btnUndo.$el.hide().next().hide().parent();
+                            var $box = me.toolbar.btnUndo.$el.hide().next().hide().parent();
 
-                        // move 'paste' button to the container instead of 'undo' and 'redo'
+                            // move 'paste' button to the container instead of 'undo' and 'redo'
-                        me.toolbar.btnPaste.$el.detach().appendTo($box);
+                            me.toolbar.btnPaste.$el.detach().appendTo($box);
-                        me.toolbar.btnCopy.$el.removeClass('split');
+                            me.toolbar.btnCopy.$el.removeClass('split');
+                        }
 
                         if ( config.isDesktopApp ) {
                             if ( config.canProtect ) {

apps/spreadsheeteditor/main/app/controller/Viewport.js

@@ -78,10 +78,10 @@ define([
                     'render:before' : function (toolbar) {
                         var config = SSE.getController('Main').appOptions;
                         toolbar.setExtra('right', me.header.getPanel('right', config));
-                        if (!config.isEdit)
+                        if (!config.isEdit || config.customization && !!config.customization.compactHeader)
                             toolbar.setExtra('left', me.header.getPanel('left', config));
 
-                        if ( me.appConfig && me.appConfig.isEdit && toolbar.btnCollabChanges )
+                        if ( me.appConfig && me.appConfig.isEdit && !(config.customization && config.customization.compactHeader) && toolbar.btnCollabChanges )
                             toolbar.btnCollabChanges = me.header.btnSave;
 
                     },
@@ -148,7 +148,7 @@ define([
                 me.viewport.vlayout.getItem('toolbar').height = 41;
             }
 
-            if ( config.isEdit && !config.isEditDiagram && !config.isEditMailMerge ) {
+            if ( config.isEdit && !config.isEditDiagram && !config.isEditMailMerge && !(config.customization && config.customization.compactHeader)) {
                 var $title = me.viewport.vlayout.getItem('title').el;
                 $title.html(me.header.getPanel('title', config)).show();
                 $title.find('.extra').html(me.header.getPanel('left', config));
@@ -164,6 +164,14 @@ define([
 
                 $filemenu.css('top', _tabs_new_height + _intvars.get('document-title-height'));
             }
+
+            if ( config.customization ) {
+                if ( config.customization.toolbarBreakTabs )
+                    me.viewport.vlayout.getItem('toolbar').el.addClass('style-off-tabs');
+
+                if ( config.customization.toolbarHideFileName )
+                    me.viewport.vlayout.getItem('toolbar').el.addClass('style-skip-docname');
+            }
         },
 
         onAppReady: function (config) {

apps/spreadsheeteditor/main/app/view/Toolbar.js

@@ -2092,7 +2092,7 @@ define([
 
         createSynchTip: function () {
             this.synchTooltip = new Common.UI.SynchronizeTip({
-                extCls: 'inc-index',
+                extCls: (this.mode.customization && !!this.mode.customization.compactHeader) ? undefined : 'inc-index',
                 target: this.btnCollabChanges.$el
             });
             this.synchTooltip.on('dontshowclick', function() {