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

[DE] added scroll buttons for the short tabs panel

Browse source
This commit is contained in:
Maxim Kadushkin 2017-02-20 17:51:33 +03:00
parent d9858934d0
commit 62587692c6
4 changed files with 2271 additions and 1805 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
apps/documenteditor/main/app/controller/Viewport.js
View file

@ -133,6 +133,7 @@ define([
onWindowResize: function(e) {
this.onLayoutChanged('window');
Common.NotificationCenter.trigger('window:resize');
}
});
});

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

@ -2,7 +2,7 @@
<div class="box-tabs">
<div class="extra left"></div>
<section class="tabs">
<a href="#" class="link">
<a href="#" class="scroll left">
<i class="icon">&lt;</i>
</a>
<ul>
@ -11,11 +11,11 @@
<a href="#" data-tab="<%= tabs[i].action %>" title="<%= tabs[i].caption %>"><%= tabs[i].caption %></a>
</li>
<% } %>
<div class="marker"></div>
</ul>
<a href="#" class="link">
<a href="#" class="scroll right">
<i class="icon">&gt;</i>
</a>
<div class="marker"></div>
</section>
<div class="extra right">SomeDocument.docx</div>
</div>

4042
apps/documenteditor/main/app/view/Toolbar.js
View file

File diff suppressed because it is too large Load diff

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

@ -21,18 +21,21 @@
ul {
padding: 0;
margin: 0;
height: 100%;
white-space: nowrap;
overflow: hidden;
flex-grow: 1;
list-style: none;
font-size: 0;
}
li {
display: inline-block;
height: 100%;
//background-color: #a6c995;
> a {
display: inline-block;
line-height: @height-tabs;
height: 100%;
padding: 0 10px;
text-decoration: none;
cursor: default;
@ -58,17 +61,31 @@
}
.marker {
position: absolute;
position: relative;
border-top: 3px solid green;
bottom: 0;
top: -4px;
-webkit-transition: width .2s, left .2s ease-out;
transition: width .2s, left .2s ease-out;
}
.link {
.tabs:not(.short) {
.scroll {
display: none;
}
}
.scroll {
line-height: @height-tabs;
min-width: 20px;
text-align: center;
z-index: 1;
&.left{
box-shadow: 5px 0 20px 5px rgba(208, 221, 182, .8)
}
&.right{
box-shadow: -5px 0 20px 5px rgba(208, 221, 182, .8)
}
}
.extra {