toolbar's redesigne

apps/common/main/lib/component/Mixtbar.js

@@ -205,15 +205,19 @@ define([
                         panel.addClass('active');
                     }
 
-                    var $tp = this.$tabs.find('> a[data-tab=' + tab + ']').parent();
+                    var $tc = this.$tabs.find('> a[data-tab=' + tab + ']');
+                    var $tp = $tc.parent();
                     if ( $tp.length ) {
                         $tp.addClass('active');
 
-                        this.$marker.width($tp.width());
+                        // this.$marker.width($tp.width());
+
+                        var offs = ($tp.width() - $tc.width())/2-1;
+                        this.$marker.width($tc.width()+9);
 
                         if ( $scrollL.is(':visible') )
-                            this.$marker.css({left: $tp.position().left + $boxTabs.scrollLeft() - $scrollL.width()});
+                            this.$marker.css({left: (offs-9/2)+$tc.position().left + $boxTabs.scrollLeft() - $scrollL.width()});
-                        else this.$marker.css({left: $tp.position().left});
+                        else this.$marker.css({left: (offs-9/2)+$tc.position().left});
                     }
 
                     if ( panel.length ) {
@@ -233,7 +237,7 @@ define([
                     return config.tabs[index].action;
                 }
 
-                var _tabTemplate = _.template('<li class="ribtab"><a href="#" data-tab="<%= action %>" data-title="<%= caption %>"><%= caption %></a></li>');
+                var _tabTemplate = _.template('<li class="ribtab"><div class="tab-bg" /><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/header.less

@@ -87,10 +87,10 @@
         max-width: 200px;
         height: 100%;
         cursor: pointer;
-        padding: 10px 16px 10px 12px;
+        padding: 7px 16px 7px 12px;
 
         i {
-            width: 100px;
+            width: 86px;
             height: 20px;
             display: block;
             .background-ximage('@{common-image-path}/header/header-logo.png', '@{common-image-path}/header/header-logo@2x.png', 100px);

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

@@ -1,4 +1,4 @@
-@height-tabs: 40px;
+@height-tabs: 32px;
 @height-controls: 67px;
 
 //@tabs-bg-color: #fff;
@@ -43,23 +43,24 @@
       background-color: @tabs-bg-color;
     }
 
-    &::after {
+    //&::after {
-      content: '';
+    //  content: '';
-      position: absolute;
+    //  position: absolute;
-      width: 100%;
+    //  width: 100%;
-      border-top: 1px solid @gray-dark;
+    //  border-top: 1px solid @gray-dark;
-      top: @height-tabs - 1;
+    //  top: @height-tabs - 1;
-      left: 0;
+    //  left: 0;
-      z-index: 1;
+    //  z-index: 1;
-    }
+    //}
   }
 
     .tabs {
-    flex-grow: 1;
+        flex-grow: 1;
-    background-color: @tabs-bg-color;
+        background-color: @tabs-bg-color;
-    position: relative;
+        position: relative;
-    overflow: hidden;
+        overflow: hidden;
-    display: flex;
+        display: flex;
+        padding-top: 2px;
 
     > ul {
       padding: 0;
@@ -75,43 +76,62 @@
       height: 100%;
       //background-color: #a6c995;
 
+        position: relative;
+        .tab-bg {
+            position: absolute;
+            height: 28px;
+            width: 100%;
+            top: 4px;
+            background-color: @gray-light;
+            border-left: 4px solid  @tabs-bg-color;
+            border-right: 3px solid  @tabs-bg-color;
+        }
+
+        &:not(.active) {
+            .tab-bg {
+                display: none;
+            }
+        }
+
+
       > a {
         display: inline-block;
         line-height: @height-tabs;
         height: 100%;
-        padding: 0 10px;
+        padding: 0 14px;
         text-decoration: none;
         cursor: default;
-        font-size: 12px;
+        font-size: 11px;
         text-align: center;
-        color: #fff;
-        font-weight: bold;
 
-        &::after {
+          position: relative;
-          display: block;
+
-          content: attr(data-title);
+        //&::after {
-          font-weight: bold;
+        //  display: block;
-          height: 1px;
+        //  content: attr(data-title);
-          overflow: hidden;
+        //  //font-weight: bold;
-          visibility: hidden;
+        //  height: 1px;
-        }
+        //  overflow: hidden;
+        //  visibility: hidden;
+        //}
 
       }
 
       &.active {
         > a {
-          //font-weight: bold;
+            color: #000;
         }
       }
     }
 
     .marker {
       position: relative;
-      border-top: 3px solid #fff;
+      border-top: 2px solid #fff;
-      top: -10px;
+      top: -7px;
       -webkit-transition: width .2s, left .2s ease-out;
       opacity: 1;
       transition: width .2s, left .2s ease-out, opacity .2s;
+      display: none;
     }
 
     &:not(.short) {

apps/documenteditor/main/app/template/Toolbar.template

@@ -8,6 +8,7 @@
             <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/documenteditor/main/resources/less/toolbar.less

@@ -1,5 +1,5 @@
 
-@tabs-bg-color: #5170b5;
+@tabs-bg-color: #4f6279;
 
 #toolbar {
     //z-index: 101;

apps/presentationeditor/main/app/template/Toolbar.template

@@ -8,6 +8,7 @@
             <ul>
                 <% for(var i in tabs) { %>
                     <li class="ribtab<% if (tabs[i].extcls) print(' ' + tabs[i].extcls) %>">
+                        <div class="tab-back" />
                         <a data-tab="<%= tabs[i].action %>" data-title="<%= tabs[i].caption %>"><%= tabs[i].caption %></a>
                     </li>
                 <% } %>

apps/presentationeditor/main/resources/less/toolbar.less

@@ -1,4 +1,4 @@
-@tabs-bg-color: #c65d27;
+@tabs-bg-color: #aa5252;
 
 .toolbar {
     &:not(.cover) {

apps/spreadsheeteditor/main/app/template/Toolbar.template

@@ -8,6 +8,7 @@
             <ul>
                 <% for(var i in tabs) { %>
                 <li class="ribtab<% if (tabs[i].extcls) print(' ' + tabs[i].extcls) %>">
+                    <div class="tab-back" />
                     <a data-tab="<%= tabs[i].action %>" data-title="<%= tabs[i].caption %>"><%= tabs[i].caption %></a>
                 </li>
                 <% } %>

apps/spreadsheeteditor/main/resources/less/toolbar.less

@@ -1,4 +1,4 @@
-@tabs-bg-color: #7e983f;
+@tabs-bg-color: #48795c;
 
 .toolbar {
     &:not(.cover) {