Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

toolbar's redesigne

Browse source
This commit is contained in:
Maxim Kadushkin 2017-06-08 18:14:36 +03:00
parent 09c1abf39e
commit 73d2690100
11 changed files with 67 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
apps/common/main/lib/component/Mixtbar.js
View file

@ -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('<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);

BIN
apps/common/main/resources/img/header/header-logo.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 864 B

After

Width:  |  Height:  |  Size: 1 KiB

BIN
apps/common/main/resources/img/header/header-logo@2x.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

4
apps/common/main/resources/less/header.less
View file

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

80
apps/common/main/resources/less/toolbar.less
View file

@ -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) {

1
apps/documenteditor/main/app/template/Toolbar.template
View file

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

2
apps/documenteditor/main/resources/less/toolbar.less
View file

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

1
apps/presentationeditor/main/app/template/Toolbar.template
View file

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

2
apps/presentationeditor/main/resources/less/toolbar.less
View file

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

1
apps/spreadsheeteditor/main/app/template/Toolbar.template
View file

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

2
apps/spreadsheeteditor/main/resources/less/toolbar.less
View file

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