From 73d2690100cf5e01f509c5264bf0b2bf2897bfff Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Thu, 8 Jun 2017 18:14:36 +0300 Subject: [PATCH] toolbar's redesigne --- apps/common/main/lib/component/Mixtbar.js | 14 +-- .../main/resources/img/header/header-logo.png | Bin 864 -> 1050 bytes .../resources/img/header/header-logo@2x.png | Bin 1863 -> 2367 bytes apps/common/main/resources/less/header.less | 4 +- apps/common/main/resources/less/toolbar.less | 80 +++++++++++------- .../main/app/template/Toolbar.template | 1 + .../main/resources/less/toolbar.less | 2 +- .../main/app/template/Toolbar.template | 1 + .../main/resources/less/toolbar.less | 2 +- .../main/app/template/Toolbar.template | 1 + .../main/resources/less/toolbar.less | 2 +- 11 files changed, 67 insertions(+), 40 deletions(-) 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 5baf86a667a902d975dfc9f815fcfdb4da2bdd3f..bace6a10041848af132f24df3d1d045f5a3430b0 100644 GIT binary patch literal 1050 zcmV+#1m*jQP)TREKTt-9zs4SoWY1PIwlrnmg^)dD9ZPnS7+Zre*0N5r4r3kWJ>OHGr_=4enaB7` z_gA0popaAQ_uTJqIp@5O3S$CE31i?M2~5xIvL zE4sS$H64$M#o{D?dzOo^C3GExptYhLmnN2qt>UXEqr0%_y4L;6@mEE2m-a>?QFIhV zM5r>pv$ZI@(R?t0uaOVdAw2Fn3!~USx}FBFSZ5pI@{TL&O+SJxW3E5wV+Hp0yUI z>C;!d6;s7-F-a^CB}HjO+axZrmNGaZhWp}H8Jd8D)`@2HH}~(ve7<9zxXt^r`K~0M zpGTa#;xO~RqAh?^(`moMo)Ta!#wn{rWpNyb_^q{?ez(M4Ti74srf7pGrX+NVP-9Ps zCE|vt!C0rwVO~?OGiZw!^@zqbwA~j$u^dtIvPWXFSV@EhC|#Y!XCnWbm@cvyW3pyD z4!l6y3z2Ni+lA|OaVo;Q<3ts)jZNLQ;+B)n+QKekP!5qZN)#r7`_sOIbTjGIQ;ft@ z4~Qh&T9C#W4yTxuYfQQtE6TeLiJ?SNUS?9XkC?_9*YYuiNZnLRR3DB{qa;$-KHOll=j z%kr`iPIxHZP+I=fjM$&J&&DY}qCMQ66X94I%w^tp)Ldg3;Zk6ti-K{wPxd z4)9^6B9wv@BBYWPwMNYLoFLL1{l^n&qoWk&srZ8Pvn+w0P#OYOyPpjCAYRgDzICBX zDL9-W+Mrb!pkVuaim6&G(LnU8;B-|Wp>Mbju*^efyvbC zOlo6OF~y1spS4k}iXd!F>SNf}=20fh<~5i59BO+xHm_hlPEY$ejSOZ}y+x##;B0TK zg1tBS8B`m=s>2(0$rT7#gW6e^ahdGC_gxlok)u;0bBB*x{jB5GN5`01q8F!yZ)C@N zA~4BC*i1()HFgPx# literal 864 zcmeAS@N?(olHy`uVBq!ia0vp^DL^d3!3-pQA+A1|g)T&c?p>bB;5+Uj%3KrR@mK^QX+*>Bhr_O>hIWo^WhOuGlM`j?ZG?*+*}$#HyI z;P$dQ^i6x}yZNC6O~9D12|{B`c}*S4D;8LxYwvGQKnp6AbsJRhf7Jx;d{a*k3K8~dfdMx$S;^dP|4UOG_8E*s@-SqzWe|G|NHmv|NlR~ zfByXbhK7QEAX!l0;9#I2pkPo?(9kfyfB$`u0x)=gfB$-r6i^7L?>~)og5i_+d!nXU+8F2%FC9ets8_je(x)3-*nj_`rrTaE7vQtvh$z)qNqQ& zj(=Zz&GCO}@1}m}FRZQj_VvvNDdi`x9(eaRYxi`VUVQ$%Osvu((YA#qam(XQ9iPu; z`A*Vk(z=Q4mz=t$a%lL=&O0_S=Nf~vV|x!;LWgF^0Z9H?b?xDhF6J_a1E4+my zqAE>PO}2cDd#Y)A?2411=OLYoYQ3@#(%yfmeNytCttoZ$kNM5Z7HfMySTQx-x3Yas z3tO9%gO1WiKgE4oH}cNEomVe#uKf9}+X5alSDflzb~5ACq!zQ(u04zgZ?AHxVxIIe zY_+N3?&6PclhVtS&R^b}$vXX7PF7XuqyrPjO)PCQWfGTbO}gOi z^Pl5>t@yj?_jT`!zvOE@dhE1@kcy*{3+JRqMp_{%la@~ZrmuW0uimD3cbkW-bKqC| xFIf@^wJ+2AmzMTS=smhT-oIP=$9aJ|<_|))xmACHcLGxmgQu&X%Q~loCIBQdsXqV! 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 212d5180e97795c35f21f9ffe86c3bbc15de5445..57644434a25700778c3e8297a63c2d422fb58bbf 100644 GIT binary patch literal 2367 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 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 @@
      <% for(var i in tabs) { %>
    • +
      <%= tabs[i].caption %>
      • <% } %> diff --git a/apps/documenteditor/main/resources/less/toolbar.less b/apps/documenteditor/main/resources/less/toolbar.less index 1043dd1be..42dc97c62 100644 --- a/apps/documenteditor/main/resources/less/toolbar.less +++ b/apps/documenteditor/main/resources/less/toolbar.less @@ -1,5 +1,5 @@ -@tabs-bg-color: #5170b5; +@tabs-bg-color: #4f6279; #toolbar { //z-index: 101; diff --git a/apps/presentationeditor/main/app/template/Toolbar.template b/apps/presentationeditor/main/app/template/Toolbar.template index 114afb9ff..722f60a90 100644 --- a/apps/presentationeditor/main/app/template/Toolbar.template +++ b/apps/presentationeditor/main/app/template/Toolbar.template @@ -8,6 +8,7 @@
        <% for(var i in tabs) { %>
      • +
        <%= tabs[i].caption %>
        • <% } %> diff --git a/apps/presentationeditor/main/resources/less/toolbar.less b/apps/presentationeditor/main/resources/less/toolbar.less index a60b1277f..44826f3fc 100644 --- a/apps/presentationeditor/main/resources/less/toolbar.less +++ b/apps/presentationeditor/main/resources/less/toolbar.less @@ -1,4 +1,4 @@ -@tabs-bg-color: #c65d27; +@tabs-bg-color: #aa5252; .toolbar { &:not(.cover) { diff --git a/apps/spreadsheeteditor/main/app/template/Toolbar.template b/apps/spreadsheeteditor/main/app/template/Toolbar.template index 057f851a0..e82fc8eb4 100644 --- a/apps/spreadsheeteditor/main/app/template/Toolbar.template +++ b/apps/spreadsheeteditor/main/app/template/Toolbar.template @@ -8,6 +8,7 @@
          <% for(var i in tabs) { %>
        • +
          <%= tabs[i].caption %>
          • <% } %> diff --git a/apps/spreadsheeteditor/main/resources/less/toolbar.less b/apps/spreadsheeteditor/main/resources/less/toolbar.less index 1edcba2ab..4656c8602 100644 --- a/apps/spreadsheeteditor/main/resources/less/toolbar.less +++ b/apps/spreadsheeteditor/main/resources/less/toolbar.less @@ -1,4 +1,4 @@ -@tabs-bg-color: #7e983f; +@tabs-bg-color: #48795c; .toolbar { &:not(.cover) {