changed toolbar's markup

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);

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

@@ -60,7 +60,7 @@
         display: flex;
 
         > ul {
-      padding: 0;
+            padding: 4px 0 0;
             margin: 0;
             white-space: nowrap;
             overflow: hidden;
@@ -69,44 +69,27 @@
         }
 
         li {
-      display: inline-block;
+            display: inline-flex;
+            align-items: center;
             height: 100%;
-      //background-color: #a6c995;
-
-        position: relative;
-        .tab-bg {
-            position: absolute;
-            height: 28px;
-            width: 100%;
-            top: 4px;
-            background-color: @tabs-bg-color;
-        }
 
             &:hover {
-            .tab-bg {
                 background-color: rgba(255,255,255,0.2);
             }
-        }
 
             &.active {
-            .tab-bg {
                 background-color: @gray-light;
             }
-        }
 
 
             > a {
                 display: inline-block;
-        line-height: @height-tabs;
+                padding: 0 12px;
-        height: 100%;
-        padding: 1px 12px;
                 text-decoration: none;
                 cursor: default;
                 font-size: 12px;
                 text-align: center;
                 color: #fff;
-
-          position: relative;
             }
 
             &.active {
@@ -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;

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>
                 <% } %>

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>
                 <% } %>

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>
                 <% } %>