[All] underscore instead tabs in toolbar's style

apps/api/documents/api.js

@@ -123,7 +123,8 @@
                     commentAuthorOnly: false,
                     showReviewChanges: false,
                     help: true,
-                    compactHeader: false
+                    compactHeader: false,
+                    toolbarBreakTabs: false
                 },
                 plugins: {
                     autostart: ['asc.{FFE1F462-1EA2-4391-990D-4CC84940B754}'],
@@ -578,6 +579,8 @@
             customization: {
                 about: true,
                 feedback: false
+                // ,compactHeader:true
+                // ,toolbarBreakTabs:true
             }
         }
     };

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

@@ -278,7 +278,82 @@
             height: 28px;
         }
     }
+}
 
+.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;
+                }
+            }
+
+            > 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);
+            }
+        }
+    }
+
+    // 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;
+    }
 }
 
 .toolbar-fullview-panel {

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

@@ -162,6 +162,10 @@ define([
                 if ( panel ) panel.height = _intvars.get('toolbar-height-tabs');
             }
 
+            if ( config.canBranding ) {
+                if ( config.customization.toolbarBreakTabs )
+                    me.viewport.vlayout.getItem('toolbar').el.addClass('style-off-tabs');
+            }
             if ( config.isEdit && (!config.canBranding || !config.customization.compactHeader)) {
                 var $title = me.viewport.vlayout.getItem('title').el;
                 $title.html(me.header.getPanel('title', config)).show();

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

@@ -184,6 +184,11 @@ define([
                 toolbar = me.getApplication().getController('Toolbar').getView('Toolbar');
                 toolbar.btnCollabChanges = me.header.btnSave;
             }
+
+            if ( config.canBranding ) {
+                if ( config.customization.toolbarBreakTabs )
+                    me.viewport.vlayout.getItem('toolbar').el.addClass('style-off-tabs');
+            }
         },
 
         onAppReady: function (config) {

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

@@ -164,6 +164,11 @@ define([
 
                 $filemenu.css('top', _tabs_new_height + _intvars.get('document-title-height'));
             }
+
+            if ( config.canBranding ) {
+                if ( config.customization.toolbarBreakTabs )
+                    me.viewport.vlayout.getItem('toolbar').el.addClass('style-off-tabs');
+            }
         },
 
         onAppReady: function (config) {