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

changed toolbar's markup

Browse source
This commit is contained in:
Maxim Kadushkin 2018-02-07 00:55:24 +03:00
parent d3b23c19f8
commit 14c19f8369
5 changed files with 83 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -257,7 +257,7 @@ define([
return config.tabs[index].action; 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; config.tabs[after + 1] = tab;
var _after_action = _get_tab_action(after); var _after_action = _get_tab_action(after);

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

@ -22,11 +22,11 @@
} }
&:not(.expanded):not(.cover){ &:not(.expanded):not(.cover){
.ribtab.active { .ribtab.active {
> a { > a {
font-weight: normal; font-weight: normal;
}
} }
}
} }
} }
@ -59,90 +59,73 @@
overflow: hidden; overflow: hidden;
display: flex; display: flex;
> ul { > ul {
padding: 0; padding: 4px 0 0;
margin: 0; margin: 0;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
list-style: none; list-style: none;
font-size: 0; font-size: 0;
}
li {
display: inline-block;
height: 100%;
//background-color: #a6c995;
position: relative;
.tab-bg {
position: absolute;
height: 28px;
width: 100%;
top: 4px;
background-color: @tabs-bg-color;
} }
&:hover { li {
.tab-bg { display: inline-flex;
align-items: center;
height: 100%;
&:hover {
background-color: rgba(255,255,255,0.2); background-color: rgba(255,255,255,0.2);
} }
}
&.active { &.active {
.tab-bg {
background-color: @gray-light; background-color: @gray-light;
} }
> a {
display: inline-block;
padding: 0 12px;
text-decoration: none;
cursor: default;
font-size: 12px;
text-align: center;
color: #fff;
}
&.active {
> a {
color: #444;
}
}
} }
&:not(.short) {
> a { .scroll {
display: inline-block; display: none;
line-height: @height-tabs; }
height: 100%; }
padding: 1px 12px;
text-decoration: none; .scroll {
cursor: default; line-height: @height-tabs;
font-size: 12px; min-width: 20px;
text-align: center; text-align: center;
color: #fff; z-index: 1;
cursor: pointer;
position: relative; color: #fff;
}
&:hover {
&.active { text-decoration: none;
> a { }
color: #444;
&.left{
box-shadow: 5px 0 20px 5px @tabs-bg-color
}
&.right{
box-shadow: -5px 0 20px 5px @tabs-bg-color
}
} }
}
} }
&:not(.short) {
.scroll {
display: none;
}
}
.scroll {
line-height: @height-tabs;
min-width: 20px;
text-align: center;
z-index: 1;
cursor: pointer;
color: #fff;
&:hover {
text-decoration: none;
}
&.left{
box-shadow: 5px 0 20px 5px @tabs-bg-color
}
&.right{
box-shadow: -5px 0 20px 5px @tabs-bg-color
}
}
}
.box-controls { .box-controls {
//height: @height-controls; // button has strange offset in IE when odd height //height: @height-controls; // button has strange offset in IE when odd height
padding: 10px 0; padding: 10px 0;
@ -230,11 +213,33 @@
margin-top: 3px; 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 { .toolbar-fullview-panel {
position: absolute; position: absolute;
top: @height-tabs;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
z-index: 1041; z-index: 1041;

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

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

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

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

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

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