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) { onWindowResize: function(e) {
this.onLayoutChanged('window'); 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="box-tabs">
<div class="extra left"></div> <div class="extra left"></div>
<section class="tabs"> <section class="tabs">
<a href="#" class="link"> <a href="#" class="scroll left">
<i class="icon">&lt;</i> <i class="icon">&lt;</i>
</a> </a>
<ul> <ul>
@ -11,11 +11,11 @@
<a href="#" data-tab="<%= tabs[i].action %>" title="<%= tabs[i].caption %>"><%= tabs[i].caption %></a> <a href="#" data-tab="<%= tabs[i].action %>" title="<%= tabs[i].caption %>"><%= tabs[i].caption %></a>
</li> </li>
<% } %> <% } %>
<div class="marker"></div>
</ul> </ul>
<a href="#" class="link"> <a href="#" class="scroll right">
<i class="icon">&gt;</i> <i class="icon">&gt;</i>
</a> </a>
<div class="marker"></div>
</section> </section>
<div class="extra right">SomeDocument.docx</div> <div class="extra right">SomeDocument.docx</div>
</div> </div>

1366
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 { ul {
padding: 0; padding: 0;
margin: 0; margin: 0;
height: 100%;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
flex-grow: 1; list-style: none;
font-size: 0;
} }
li { li {
display: inline-block; display: inline-block;
height: 100%;
//background-color: #a6c995;
> a { > a {
display: inline-block; display: inline-block;
line-height: @height-tabs; line-height: @height-tabs;
height: 100%;
padding: 0 10px; padding: 0 10px;
text-decoration: none; text-decoration: none;
cursor: default; cursor: default;
@ -58,17 +61,31 @@
} }
.marker { .marker {
position: absolute; position: relative;
border-top: 3px solid green; border-top: 3px solid green;
bottom: 0; top: -4px;
-webkit-transition: width .2s, left .2s ease-out; -webkit-transition: width .2s, left .2s ease-out;
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; line-height: @height-tabs;
min-width: 20px; min-width: 20px;
text-align: center; 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 { .extra {