From 14c19f8369b9561cdfdeb4cad10b292cd91a214a Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Wed, 7 Feb 2018 00:55:24 +0300
Subject: [PATCH] changed toolbar's markup

---
 apps/common/main/lib/component/Mixtbar.js     |   2 +-
 apps/common/main/resources/less/toolbar.less  | 159 +++++++++---------
 .../main/app/template/Toolbar.template        |   1 -
 .../main/app/template/Toolbar.template        |   1 -
 .../main/app/template/Toolbar.template        |   1 -
 5 files changed, 83 insertions(+), 81 deletions(-)

diff --git a/apps/common/main/lib/component/Mixtbar.js b/apps/common/main/lib/component/Mixtbar.js
index 0edc4d4821..89f646ce03 100644
--- a/apps/common/main/lib/component/Mixtbar.js
+++ b/apps/common/main/lib/component/Mixtbar.js
@@ -257,7 +257,7 @@ define([
                     return config.tabs[index].action;
                 }
 
-                var _tabTemplate = _.template('<li class="ribtab" style="display: none;"><div class="tab-bg" /><a href="#" data-tab="<%= action %>" data-title="<%= caption %>"><%= caption %></a></li>');
+                var _tabTemplate = _.template('<li class="ribtab" style="display: none;"><a href="#" data-tab="<%= action %>" data-title="<%= caption %>"><%= caption %></a></li>');
 
                 config.tabs[after + 1] = tab;
                 var _after_action = _get_tab_action(after);
diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less
index 00a4ce170e..50d1f97414 100644
--- a/apps/common/main/resources/less/toolbar.less
+++ b/apps/common/main/resources/less/toolbar.less
@@ -22,11 +22,11 @@
         }
 
         &:not(.expanded):not(.cover){
-          .ribtab.active {
-            > a {
-              font-weight: normal;
+            .ribtab.active {
+                > a {
+                    font-weight: normal;
+                }
             }
-          }
         }
     }
 
@@ -59,90 +59,73 @@
         overflow: hidden;
         display: flex;
 
-    > ul {
-      padding: 0;
-      margin: 0;
-      white-space: nowrap;
-      overflow: hidden;
-      list-style: none;
-      font-size: 0;
-    }
-
-    li {
-      display: inline-block;
-      height: 100%;
-      //background-color: #a6c995;
-
-        position: relative;
-        .tab-bg {
-            position: absolute;
-            height: 28px;
-            width: 100%;
-            top: 4px;
-            background-color: @tabs-bg-color;
+        > ul {
+            padding: 4px 0 0;
+            margin: 0;
+            white-space: nowrap;
+            overflow: hidden;
+            list-style: none;
+            font-size: 0;
         }
 
-        &:hover {
-            .tab-bg {
+        li {
+            display: inline-flex;
+            align-items: center;
+            height: 100%;
+
+            &:hover {
                 background-color: rgba(255,255,255,0.2);
             }
-        }
 
-        &.active {
-            .tab-bg {
+            &.active {
                 background-color: @gray-light;
             }
+
+
+            > a {
+                display: inline-block;
+                padding: 0 12px;
+                text-decoration: none;
+                cursor: default;
+                font-size: 12px;
+                text-align: center;
+                color: #fff;
+            }
+
+            &.active {
+                > a {
+                    color: #444;
+                }
+            }
         }
 
-
-      > a {
-        display: inline-block;
-        line-height: @height-tabs;
-        height: 100%;
-        padding: 1px 12px;
-        text-decoration: none;
-        cursor: default;
-        font-size: 12px;
-        text-align: center;
-        color: #fff;
-
-          position: relative;
-      }
-
-      &.active {
-        > a {
-            color: #444;
+        &:not(.short) {
+            .scroll {
+                display: none;
+            }
+        }
+
+        .scroll {
+            line-height: @height-tabs;
+            min-width: 20px;
+            text-align: center;
+            z-index: 1;
+            cursor: pointer;
+            color: #fff;
+
+            &:hover {
+                text-decoration: none;
+            }
+
+            &.left{
+                box-shadow: 5px 0 20px 5px @tabs-bg-color
+            }
+            &.right{
+                box-shadow: -5px 0 20px 5px @tabs-bg-color
+            }
         }
-      }
     }
 
-    &:not(.short) {
-      .scroll {
-        display: none;
-      }
-    }
-
-    .scroll {
-      line-height: @height-tabs;
-      min-width: 20px;
-      text-align: center;
-      z-index: 1;
-      cursor: pointer;
-      color: #fff;
-
-      &:hover {
-        text-decoration: none;
-      }
-
-      &.left{
-        box-shadow: 5px 0 20px 5px @tabs-bg-color
-      }
-      &.right{
-        box-shadow: -5px 0 20px 5px @tabs-bg-color
-      }
-    }
-  }
-
     .box-controls {
         //height: @height-controls;         // button has strange offset in IE when odd height
         padding: 10px 0;
@@ -230,11 +213,33 @@
             margin-top: 3px;
         }
     }
+
+    .top-title > & {
+        &:not(.folded) {
+            height: 28 + @height-controls;
+        }
+
+        &.folded {
+            height: 28px;
+
+            &.expanded {
+                height: 28 + @height-controls;
+            }
+        }
+
+        .tabs > ul {
+            padding-top: 0;
+        }
+
+        .box-tabs {
+            height: 28px;
+        }
+    }
+
 }
 
 .toolbar-fullview-panel {
     position: absolute;
-    top: @height-tabs;
     bottom: 0;
     width: 100%;
     z-index: 1041;
diff --git a/apps/documenteditor/main/app/template/Toolbar.template b/apps/documenteditor/main/app/template/Toolbar.template
index 0cb15cfe0c..14e1db5aaf 100644
--- a/apps/documenteditor/main/app/template/Toolbar.template
+++ b/apps/documenteditor/main/app/template/Toolbar.template
@@ -8,7 +8,6 @@
             <ul>
                 <% for(var i in tabs) { %>
                     <li class="ribtab<% if (tabs[i].extcls) print(' ' + tabs[i].extcls) %>">
-                        <div class="tab-bg" />
                         <a data-tab="<%= tabs[i].action %>" data-title="<%= tabs[i].caption %>"><%= tabs[i].caption %></a>
                     </li>
                 <% } %>
diff --git a/apps/presentationeditor/main/app/template/Toolbar.template b/apps/presentationeditor/main/app/template/Toolbar.template
index a66ccad0ee..7cae88f910 100644
--- a/apps/presentationeditor/main/app/template/Toolbar.template
+++ b/apps/presentationeditor/main/app/template/Toolbar.template
@@ -8,7 +8,6 @@
             <ul>
                 <% for(var i in tabs) { %>
                     <li class="ribtab<% if (tabs[i].extcls) print(' ' + tabs[i].extcls) %>">
-                        <div class="tab-bg" />
                         <a data-tab="<%= tabs[i].action %>" data-title="<%= tabs[i].caption %>"><%= tabs[i].caption %></a>
                     </li>
                 <% } %>
diff --git a/apps/spreadsheeteditor/main/app/template/Toolbar.template b/apps/spreadsheeteditor/main/app/template/Toolbar.template
index b4c6605f63..6fc9e087c4 100644
--- a/apps/spreadsheeteditor/main/app/template/Toolbar.template
+++ b/apps/spreadsheeteditor/main/app/template/Toolbar.template
@@ -8,7 +8,6 @@
             <ul>
                 <% for(var i in tabs) { %>
                 <li class="ribtab<% if (tabs[i].extcls) print(' ' + tabs[i].extcls) %>">
-                    <div class="tab-bg" />
                     <a data-tab="<%= tabs[i].action %>" data-title="<%= tabs[i].caption %>"><%= tabs[i].caption %></a>
                 </li>
                 <% } %>