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

[DE] updated toolbar layout

Browse source
This commit is contained in:
Maxim Kadushkin 2017-07-11 11:27:56 +03:00
parent d5bfc3244d
commit 27fd54d45e
5 changed files with 44 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
apps/common/main/resources/img/controls/toolbarbig.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.6 KiB

After

Width:  |  Height:  |  Size: 7.9 KiB

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

@ -281,3 +281,14 @@
.button-normal-icon(review-next, 16, @toolbar-big-icon-size); .button-normal-icon(review-next, 16, @toolbar-big-icon-size);
.button-normal-icon(review-prev, 17, @toolbar-big-icon-size); .button-normal-icon(review-prev, 17, @toolbar-big-icon-size);
.button-normal-icon(btn-dropcap, 18, @toolbar-big-icon-size); .button-normal-icon(btn-dropcap, 18, @toolbar-big-icon-size);
.button-normal-icon(~'x-huge .btn-pagebreak', 19, @toolbar-big-icon-size);
.button-normal-icon(btn-pageorient, 21, @toolbar-big-icon-size);
.button-normal-icon(btn-pagemargins, 22, @toolbar-big-icon-size);
.button-normal-icon(btn-pagesize, 23, @toolbar-big-icon-size);
.button-normal-icon(btn-columns, 24, @toolbar-big-icon-size);
.button-normal-icon(btn-img-align, 25, @toolbar-big-icon-size);
.button-normal-icon(btn-img-group, 26, @toolbar-big-icon-size);
.button-normal-icon(btn-img-bkwd, 27, @toolbar-big-icon-size);
.button-normal-icon(btn-img-frwd, 28, @toolbar-big-icon-size);
.button-normal-icon(btn-img-wrap, 29, @toolbar-big-icon-size);

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

@ -145,51 +145,19 @@
</section> </section>
<section class="panel" data-tab="layout"> <section class="panel" data-tab="layout">
<div class="group"> <div class="group">
<div class="elset"> <span class="btn-slot text x-huge btn-pagebreak"></span>
<span class="btn-slot text" id="slot-btn-pageorient"></span> <span class="btn-slot text x-huge" id="slot-btn-pageorient"></span>
</div> <span class="btn-slot text x-huge" id="slot-btn-pagemargins"></span>
<div class="elset"> <span class="btn-slot text x-huge" id="slot-btn-pagesize"></span>
<span class="btn-slot text" id="slot-btn-pagesize"></span> <span class="btn-slot text x-huge" id="slot-btn-columns"></span>
</div>
</div>
<div class="group">
<div class="elset">
<span class="btn-slot text" id="slot-btn-pagemargins"></span>
</div>
<div class="elset">
<span class="btn-slot text" id="slot-btn-columns"></span>
</div>
</div>
<div class="group">
<div class="elset">
<span class="btn-slot text btn-pagebreak"></span>
</div>
<div class="elset">
</div>
</div> </div>
<div class="separator long"></div> <div class="separator long"></div>
<div class="group"> <div class="group">
<div class="elset"> <span class="btn-slot text x-huge" id="slot-img-align"></span>
<span class="btn-slot text" id="slot-img-align"></span> <span class="btn-slot text x-huge" id="slot-img-group"></span>
</div> <span class="btn-slot text x-huge" id="slot-img-movefrwd"></span>
<div class="elset"> <span class="btn-slot text x-huge" id="slot-img-movebkwd"></span>
<span class="btn-slot text" id="slot-img-group"></span> <span class="btn-slot text x-huge" id="slot-img-wrapping"></span>
</div>
</div>
<div class="group">
<div class="elset">
<span class="btn-slot text" id="slot-img-movefrwd"></span>
</div>
<div class="elset">
<span class="btn-slot text" id="slot-img-movebkwd"></span>
</div>
</div>
<div class="group">
<div class="elset">
<span class="btn-slot text" id="slot-img-wrapping"></span>
</div>
<div class="elset">
</div>
</div> </div>
</section> </section>
</section> </section>

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

@ -608,7 +608,7 @@ define([
this.btnColumns = new Common.UI.Button({ this.btnColumns = new Common.UI.Button({
id: 'tlb-btn-columns', id: 'tlb-btn-columns',
cls: 'btn-toolbar', cls: 'btn-toolbar x-huge icon-top',
iconCls: 'btn-columns', iconCls: 'btn-columns',
caption: me.capBtnColumns, caption: me.capBtnColumns,
menu: new Common.UI.Menu({ menu: new Common.UI.Menu({
@ -658,7 +658,7 @@ define([
this.btnPageOrient = new Common.UI.Button({ this.btnPageOrient = new Common.UI.Button({
id: 'tlb-btn-pageorient', id: 'tlb-btn-pageorient',
cls: 'btn-toolbar', cls: 'btn-toolbar x-huge icon-top',
iconCls: 'btn-pageorient', iconCls: 'btn-pageorient',
caption: me.capBtnPageOrient, caption: me.capBtnPageOrient,
menu: new Common.UI.Menu({ menu: new Common.UI.Menu({
@ -694,7 +694,7 @@ define([
this.btnPageMargins = new Common.UI.Button({ this.btnPageMargins = new Common.UI.Button({
id: 'tlb-btn-pagemargins', id: 'tlb-btn-pagemargins',
cls: 'btn-toolbar', cls: 'btn-toolbar x-huge icon-top',
iconCls: 'btn-pagemargins', iconCls: 'btn-pagemargins',
caption: me.capBtnMargins, caption: me.capBtnMargins,
menu: new Common.UI.Menu({ menu: new Common.UI.Menu({
@ -753,7 +753,7 @@ define([
this.btnPageSize = new Common.UI.Button({ this.btnPageSize = new Common.UI.Button({
id: 'tlb-btn-pagesize', id: 'tlb-btn-pagesize',
cls: 'btn-toolbar', cls: 'btn-toolbar x-huge icon-top',
iconCls: 'btn-pagesize', iconCls: 'btn-pagesize',
caption: me.capBtnPageSize, caption: me.capBtnPageSize,
menu: new Common.UI.Menu({ menu: new Common.UI.Menu({
@ -967,34 +967,34 @@ define([
this.toolbarControls.push(this.btnAdvSettings); this.toolbarControls.push(this.btnAdvSettings);
me.btnImgAlign = new Common.UI.Button({ me.btnImgAlign = new Common.UI.Button({
cls: 'btn-toolbar', cls: 'btn-toolbar x-huge icon-top',
iconCls: 'btn-img-align', iconCls: 'btn-img-align',
caption: me.capImgAlign, caption: me.capImgAlign,
menu: true menu: true
}); });
me.btnImgGroup = new Common.UI.Button({ me.btnImgGroup = new Common.UI.Button({
cls: 'btn-toolbar', cls: 'btn-toolbar x-huge icon-top',
iconCls: 'btn-img-group', iconCls: 'btn-img-group',
caption: me.capImgGroup, caption: me.capImgGroup,
menu: true menu: true
}); });
me.btnImgForward = new Common.UI.Button({ me.btnImgForward = new Common.UI.Button({
cls: 'btn-toolbar', cls: 'btn-toolbar x-huge icon-top',
iconCls: 'btn-img-frwd', iconCls: 'btn-img-frwd',
caption: me.capImgForward, caption: me.capImgForward,
split: true, split: true,
menu: true menu: true
}); });
me.btnImgBackward = new Common.UI.Button({ me.btnImgBackward = new Common.UI.Button({
cls: 'btn-toolbar', cls: 'btn-toolbar x-huge icon-top',
iconCls: 'btn-img-bkwd', iconCls: 'btn-img-bkwd',
caption: me.capImgBackward, caption: me.capImgBackward,
split: true, split: true,
menu: true menu: true
}); });
me.btnImgWrapping = new Common.UI.Button({ me.btnImgWrapping = new Common.UI.Button({
cls: 'btn-toolbar', cls: 'btn-toolbar x-huge icon-top',
iconCls: 'btn-img-wrap', iconCls: 'btn-img-wrap',
caption: me.capImgWrapping, caption: me.capImgWrapping,
menu: true menu: true
@ -1205,7 +1205,7 @@ define([
}); });
if ( me.isCompactView ) if ( me.isCompactView )
me.setFolded(true); else me.setFolded(true), me.collapse(); else
me.setTab('home'); me.setTab('home');
var top = Common.localStorage.getItem("de-pgmargins-top"), var top = Common.localStorage.getItem("de-pgmargins-top"),
@ -1304,8 +1304,11 @@ define([
var $slots = $host.find('.btn-slot.btn-pagebreak'); var $slots = $host.find('.btn-slot.btn-pagebreak');
$slots.each(function(index, el) { $slots.each(function(index, el) {
var _cls = 'btn-toolbar';
/x-huge/.test(el.className) && (_cls += ' x-huge icon-top');
var button = new Common.UI.Button({ var button = new Common.UI.Button({
cls: 'btn-toolbar', cls: _cls,
iconCls: 'btn-pagebreak', iconCls: 'btn-pagebreak',
caption: me.capBtnInsPagebreak, caption: me.capBtnInsPagebreak,
split: true, split: true,

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

@ -266,8 +266,8 @@
.button-normal-icon(btn-setmarkers, 21, @toolbar-icon-size); .button-normal-icon(btn-setmarkers, 21, @toolbar-icon-size);
.button-normal-icon(btn-multilevels, 22, @toolbar-icon-size); .button-normal-icon(btn-multilevels, 22, @toolbar-icon-size);
.button-normal-icon(btn-numbering, 23, @toolbar-icon-size); .button-normal-icon(btn-numbering, 23, @toolbar-icon-size);
.button-normal-icon(btn-pageorient, 24, @toolbar-icon-size); //.button-normal-icon(btn-pageorient, 24, @toolbar-icon-size);
.button-normal-icon(btn-pagesize, 25, @toolbar-icon-size); //.button-normal-icon(btn-pagesize, 25, @toolbar-icon-size);
.button-normal-icon(btn-paste, 26, @toolbar-icon-size); .button-normal-icon(btn-paste, 26, @toolbar-icon-size);
.button-normal-icon(btn-print, 27, @toolbar-icon-size); .button-normal-icon(btn-print, 27, @toolbar-icon-size);
.button-normal-icon(btn-redo, 28, @toolbar-icon-size); .button-normal-icon(btn-redo, 28, @toolbar-icon-size);
@ -297,13 +297,13 @@
.button-normal-icon(mmerge-last, 72, @toolbar-icon-size); .button-normal-icon(mmerge-last, 72, @toolbar-icon-size);
.button-normal-icon(mmerge-prev, 73, @toolbar-icon-size); .button-normal-icon(mmerge-prev, 73, @toolbar-icon-size);
.button-normal-icon(mmerge-first, 74, @toolbar-icon-size); .button-normal-icon(mmerge-first, 74, @toolbar-icon-size);
.button-normal-icon(btn-columns, 75, @toolbar-icon-size); //.button-normal-icon(btn-columns, 75, @toolbar-icon-size);
.button-normal-icon(btn-pagemargins, 76, @toolbar-icon-size); //.button-normal-icon(btn-pagemargins, 76, @toolbar-icon-size);
.button-normal-icon(btn-img-frwd, 83, @toolbar-icon-size); //.button-normal-icon(btn-img-frwd, 83, @toolbar-icon-size);
.button-normal-icon(btn-img-bkwd, 84, @toolbar-icon-size); //.button-normal-icon(btn-img-bkwd, 84, @toolbar-icon-size);
.button-normal-icon(btn-img-wrap, 85, @toolbar-icon-size); //.button-normal-icon(btn-img-wrap, 85, @toolbar-icon-size);
.button-normal-icon(btn-img-group, 86, @toolbar-icon-size); //.button-normal-icon(btn-img-group, 86, @toolbar-icon-size);
.button-normal-icon(btn-img-align, 87, @toolbar-icon-size); //.button-normal-icon(btn-img-align, 87, @toolbar-icon-size);
.button-normal-icon(btn-goback, 88, @toolbar-icon-size); .button-normal-icon(btn-goback, 88, @toolbar-icon-size);
//.button-normal-icon(btn-insertimage, 17, @toolbar-icon-size); //.button-normal-icon(btn-insertimage, 17, @toolbar-icon-size);