diff --git a/apps/common/main/lib/component/Mixtbar.js b/apps/common/main/lib/component/Mixtbar.js index 331c47b6f..a99976da9 100644 --- a/apps/common/main/lib/component/Mixtbar.js +++ b/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()}); - else this.$marker.css({left: $tp.position().left}); + this.$marker.css({left: (offs-9/2)+$tc.position().left + $boxTabs.scrollLeft() - $scrollL.width()}); + 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('
  • <%= caption %>
    • '); + var _tabTemplate = _.template('
  • <%= caption %>
    • '); config.tabs[after + 1] = tab; var _after_action = _get_tab_action(after); diff --git a/apps/common/main/resources/img/header/header-logo.png b/apps/common/main/resources/img/header/header-logo.png index 5baf86a66..bace6a100 100644 Binary files a/apps/common/main/resources/img/header/header-logo.png and b/apps/common/main/resources/img/header/header-logo.png differ diff --git a/apps/common/main/resources/img/header/header-logo@2x.png b/apps/common/main/resources/img/header/header-logo@2x.png index 212d5180e..57644434a 100644 Binary files a/apps/common/main/resources/img/header/header-logo@2x.png and b/apps/common/main/resources/img/header/header-logo@2x.png differ diff --git a/apps/common/main/resources/less/header.less b/apps/common/main/resources/less/header.less index 783c7b1e6..644209b8e 100644 --- a/apps/common/main/resources/less/header.less +++ b/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); diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less index 0fc0d15fe..77a165dcb 100644 --- a/apps/common/main/resources/less/toolbar.less +++ b/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 { - content: ''; - position: absolute; - width: 100%; - border-top: 1px solid @gray-dark; - top: @height-tabs - 1; - left: 0; - z-index: 1; - } + //&::after { + // content: ''; + // position: absolute; + // width: 100%; + // border-top: 1px solid @gray-dark; + // top: @height-tabs - 1; + // left: 0; + // z-index: 1; + //} } .tabs { - flex-grow: 1; - background-color: @tabs-bg-color; - position: relative; - overflow: hidden; - display: flex; + flex-grow: 1; + background-color: @tabs-bg-color; + position: relative; + overflow: hidden; + 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 { - display: block; - content: attr(data-title); - font-weight: bold; - height: 1px; - overflow: hidden; - visibility: hidden; - } + position: relative; + + //&::after { + // display: block; + // content: attr(data-title); + // //font-weight: bold; + // height: 1px; + // overflow: hidden; + // visibility: hidden; + //} } &.active { > a { - //font-weight: bold; + color: #000; } } } .marker { position: relative; - border-top: 3px solid #fff; - top: -10px; + border-top: 2px solid #fff; + 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) { diff --git a/apps/documenteditor/main/app/template/Toolbar.template b/apps/documenteditor/main/app/template/Toolbar.template index 6f4f56149..1855e060d 100644 --- a/apps/documenteditor/main/app/template/Toolbar.template +++ b/apps/documenteditor/main/app/template/Toolbar.template @@ -8,6 +8,7 @@