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

Debug toolbar layout.

Browse source
This commit is contained in:
Julia Radzhabova 2017-06-15 16:18:40 +03:00
parent 697c21d457
commit 5d40fdc1ed
15 changed files with 43 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -191,7 +191,7 @@
.group { .group {
display: table-cell; display: table-cell;
vertical-align: top; vertical-align: middle;
white-space: nowrap; white-space: nowrap;
padding-left: 12px; padding-left: 12px;
@ -200,11 +200,6 @@
} }
} }
.group {
//background-color: #a9f261;
vertical-align: middle;
}
.elset { .elset {
height: 20px; height: 20px;
font-size: 0; font-size: 0;

9
apps/documenteditor/main/app/controller/Toolbar.js
View file

@ -2714,10 +2714,7 @@ define([
toolbar.$el.find('.toolbar').toggleClass('masked', disable); toolbar.$el.find('.toolbar').toggleClass('masked', disable);
toolbar.btnHide.setDisabled(disable); toolbar.btnHide.setDisabled(disable);
if(disable) { if(disable) {
mask = $("<div class='toolbar-mask'>").appendTo(toolbar.$el); mask = $("<div class='toolbar-mask'>").appendTo(toolbar.$el.find('.toolbar'));
var left = toolbar.isCompactView ? 75 : 48;
mask.css('left', left + 'px');
mask.css('right', (toolbar.isCompactView ? 0 : 45) + 'px');
Common.util.Shortcuts.suspendEvents('alt+h'); Common.util.Shortcuts.suspendEvents('alt+h');
} else { } else {
mask.remove(); mask.remove();
@ -2781,7 +2778,7 @@ define([
onAppReady: function (config) { onAppReady: function (config) {
var me = this; var me = this;
if ( config.canComments ) { if ( config.canCoAuthoring && config.canComments ) {
var _btnsComment = []; var _btnsComment = [];
var slots = me.toolbar.$el.find('.slot-comment'); var slots = me.toolbar.$el.find('.slot-comment');
slots.each(function(index, el) { slots.each(function(index, el) {
@ -2791,7 +2788,7 @@ define([
var button = new Common.UI.Button({ var button = new Common.UI.Button({
cls: _cls, cls: _cls,
iconCls: 'btn-menu-comments', iconCls: 'btn-menu-comments',
caption: 'Comment' caption: me.toolbar.capBtnComment
}).render( slots.eq(index) ); }).render( slots.eq(index) );
_btnsComment.push(button); _btnsComment.push(button);

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

@ -75,7 +75,7 @@ define([
toolbar.setExtra('left', me.header.getPanel('left', config)); toolbar.setExtra('left', me.header.getPanel('left', config));
}, },
'view:compact' : function (toolbar, state) { 'view:compact' : function (toolbar, state) {
me.viewport.vlayout.panels[0].height = state ? 40 : 40+67; me.viewport.vlayout.panels[0].height = state ? 32 : 32+67;
} }
}, },
'Common.Views.Header': { 'Common.Views.Header': {
@ -123,7 +123,7 @@ define([
if ( !config.isEdit || if ( !config.isEdit ||
( !Common.localStorage.itemExists("de-compact-toolbar") && ( !Common.localStorage.itemExists("de-compact-toolbar") &&
config.customization && config.customization.compactToolbar )) { config.customization && config.customization.compactToolbar )) {
me.viewport.vlayout.panels[0].height = 40; me.viewport.vlayout.panels[0].height = 32;
} }
}, },

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

@ -2486,7 +2486,8 @@ define([
capImgGroup: 'Group', capImgGroup: 'Group',
capImgForward: 'Move forward', capImgForward: 'Move forward',
capImgBackward: 'Move backward', capImgBackward: 'Move backward',
capImgWrapping: 'Wrapping' capImgWrapping: 'Wrapping',
capBtnComment: 'Comment'
} }
})(), DE.Views.Toolbar || {})); })(), DE.Views.Toolbar || {}));
}); });

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

@ -31,7 +31,7 @@
top: 32px; top: 32px;
left: 48px; left: 48px;
right: 45px; right: 45px;
height: 100%; bottom: 0;
opacity: 0; opacity: 0;
background-color: @gray-light; background-color: @gray-light;
z-index: @zindex-tooltip + 1; z-index: @zindex-tooltip + 1;

9
apps/presentationeditor/main/app/controller/Toolbar.js
View file

@ -2028,10 +2028,7 @@ define([
this.toolbar.lockToolbar(PE.enumLock.menuFileOpen, disable, {array: [toolbar.btnAddSlide, toolbar.btnChangeSlide, toolbar.btnPreview, toolbar.btnHide]}); this.toolbar.lockToolbar(PE.enumLock.menuFileOpen, disable, {array: [toolbar.btnAddSlide, toolbar.btnChangeSlide, toolbar.btnPreview, toolbar.btnHide]});
if(disable) { if(disable) {
mask = $("<div class='toolbar-mask'>").appendTo(toolbar.$el); mask = $("<div class='toolbar-mask'>").appendTo(toolbar.$el.find('.toolbar'));
var left = toolbar.isCompactView ? 150 : (toolbar.mode.nativeApp ? 190 : 145 );
mask.css('left', left + 'px');
mask.css('right', (toolbar.isCompactView ? 0 : 45) + 'px');
Common.util.Shortcuts.suspendEvents('command+k, ctrl+k, alt+h, command+f5, ctrl+f5'); Common.util.Shortcuts.suspendEvents('command+k, ctrl+k, alt+h, command+f5, ctrl+f5');
} else { } else {
mask.remove(); mask.remove();
@ -2062,7 +2059,7 @@ define([
onAppReady: function (config) { onAppReady: function (config) {
var me = this; var me = this;
if ( config.canComments ) { if ( config.canCoAuthoring && config.canComments ) {
var _btnsComment = []; var _btnsComment = [];
var slots = me.toolbar.$el.find('.slot-comment'); var slots = me.toolbar.$el.find('.slot-comment');
slots.each(function(index, el) { slots.each(function(index, el) {
@ -2072,7 +2069,7 @@ define([
var button = new Common.UI.Button({ var button = new Common.UI.Button({
cls: _cls, cls: _cls,
iconCls: 'svgicon svg-btn-comments', iconCls: 'svgicon svg-btn-comments',
caption: 'Comment' caption: me.toolbar.capBtnComment
}).render( slots.eq(index) ); }).render( slots.eq(index) );
_btnsComment.push(button); _btnsComment.push(button);

4
apps/presentationeditor/main/app/controller/Viewport.js
View file

@ -76,7 +76,7 @@ define([
toolbar.setExtra('left', me.header.getPanel('left', config)); toolbar.setExtra('left', me.header.getPanel('left', config));
}, },
'view:compact' : function (toolbar, state) { 'view:compact' : function (toolbar, state) {
me.viewport.vlayout.panels[0].height = state ? 40 : 40+67; me.viewport.vlayout.panels[0].height = state ? 32 : 32+67;
} }
}, },
'Common.Views.Header': { 'Common.Views.Header': {
@ -126,7 +126,7 @@ define([
( !Common.localStorage.itemExists("pe-compact-toolbar") && ( !Common.localStorage.itemExists("pe-compact-toolbar") &&
config.customization && config.customization.compactToolbar )) config.customization && config.customization.compactToolbar ))
{ {
me.viewport.vlayout.panels[0].height = 40; me.viewport.vlayout.panels[0].height = 32;
} }
}, },

11
apps/presentationeditor/main/app/view/Toolbar.js
View file

@ -209,7 +209,7 @@ define([
me.btnPrint = new Common.UI.Button({ me.btnPrint = new Common.UI.Button({
id : 'id-toolbar-btn-print', id : 'id-toolbar-btn-print',
cls : 'btn-toolbar', cls : 'btn-toolbar',
iconCls : 'btn-print', iconCls : 'btn-print no-mask',
lock : [_set.slideDeleted, _set.noSlides, _set.cantPrint] lock : [_set.slideDeleted, _set.noSlides, _set.cantPrint]
}); });
me.paragraphControls.push(me.btnPrint); me.paragraphControls.push(me.btnPrint);
@ -217,7 +217,7 @@ define([
me.btnSave = new Common.UI.Button({ me.btnSave = new Common.UI.Button({
id : 'id-toolbar-btn-save', id : 'id-toolbar-btn-save',
cls : 'btn-toolbar', cls : 'btn-toolbar',
iconCls : me.btnSaveCls, iconCls : 'no-mask ' + me.btnSaveCls,
lock : [_set.lostConnect] lock : [_set.lostConnect]
}); });
@ -625,7 +625,7 @@ define([
me.btnHide = new Common.UI.Button({ me.btnHide = new Common.UI.Button({
id : 'id-toolbar-btn-hidebars', id : 'id-toolbar-btn-hidebars',
cls : 'btn-toolbar', cls : 'btn-toolbar',
iconCls : 'btn-hidebars', iconCls : 'btn-hidebars no-mask',
lock : [_set.menuFileOpen, _set.slideDeleted, _set.disableOnStart], lock : [_set.menuFileOpen, _set.slideDeleted, _set.disableOnStart],
menu : true menu : true
}); });
@ -642,7 +642,7 @@ define([
me.btnAdvSettings = new Common.UI.Button({ me.btnAdvSettings = new Common.UI.Button({
id : 'id-toolbar-btn-settings', id : 'id-toolbar-btn-settings',
cls : 'btn-toolbar', cls : 'btn-toolbar',
iconCls : 'btn-settings', iconCls : 'btn-settings no-mask',
lock : [_set.slideDeleted, _set.disableOnStart] lock : [_set.slideDeleted, _set.disableOnStart]
}); });
me.slideOnlyControls.push(me.btnAdvSettings); me.slideOnlyControls.push(me.btnAdvSettings);
@ -1821,7 +1821,8 @@ define([
capAddSlide: 'Add Slide', capAddSlide: 'Add Slide',
capTabFile: 'File', capTabFile: 'File',
capTabHome: 'Home', capTabHome: 'Home',
capTabInsert: 'Insert' capTabInsert: 'Insert',
capBtnComment: 'Comment'
} }
}()), PE.Views.Toolbar || {})); }()), PE.Views.Toolbar || {}));
}); });

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

@ -6,13 +6,10 @@
} }
&.masked { &.masked {
.btn-toolbar.disabled .icon:not(.btn-print):not(.btn-save):not(.btn-save-coauth):not(.btn-settings):not(.btn-hidebars) { button.disabled .icon:not(.no-mask) {
background-position-x: 0px !important; background-position-x: 0px !important;
} }
.btn-toolbar.large.disabled .icon:not(.btn-print):not(.btn-save) { .group:not(.no-mask) {
background-position-y: -5px !important;
}
.toolbar-group:not(.no-mask) {
opacity: 0.4; opacity: 0.4;
} }
} }
@ -29,7 +26,7 @@
top: 32px; top: 32px;
left: 48px; left: 48px;
right: 45px; right: 45px;
height: 100%; bottom: 0;
opacity: 0; opacity: 0;
background-color: @gray-light; background-color: @gray-light;
z-index: @zindex-tooltip + 1; z-index: @zindex-tooltip + 1;

9
apps/spreadsheeteditor/main/app/controller/Toolbar.js
View file

@ -2840,10 +2840,7 @@ define([
this.toolbar.lockToolbar(SSE.enumLock.menuFileOpen, disable, {array: [toolbar.btnShowMode]}); this.toolbar.lockToolbar(SSE.enumLock.menuFileOpen, disable, {array: [toolbar.btnShowMode]});
if(disable) { if(disable) {
mask = $("<div class='toolbar-mask'>").appendTo(toolbar.$el); mask = $("<div class='toolbar-mask'>").appendTo(toolbar.$el.find('.toolbar'));
var left = toolbar.isCompactView ? 75 : (toolbar.mode.nativeApp ? 80 : 48 );
mask.css('left', left + 'px');
mask.css('right', (toolbar.isCompactView ? 0 : 45) + 'px');
Common.util.Shortcuts.suspendEvents('command+l, ctrl+l, command+shift+l, ctrl+shift+l, command+k, ctrl+k, command+alt+h, ctrl+alt+h, command+1, ctrl+1'); Common.util.Shortcuts.suspendEvents('command+l, ctrl+l, command+shift+l, ctrl+shift+l, command+k, ctrl+k, command+alt+h, ctrl+alt+h, command+1, ctrl+1');
} else { } else {
mask.remove(); mask.remove();
@ -2887,7 +2884,7 @@ define([
onAppReady: function (config) { onAppReady: function (config) {
var me = this; var me = this;
if ( config.canComments ) { if ( config.canCoAuthoring && config.canComments ) {
var _btnsComment = []; var _btnsComment = [];
var slots = me.toolbar.$el.find('.slot-comment'); var slots = me.toolbar.$el.find('.slot-comment');
slots.each(function(index, el) { slots.each(function(index, el) {
@ -2897,7 +2894,7 @@ define([
var button = new Common.UI.Button({ var button = new Common.UI.Button({
cls: _cls, cls: _cls,
iconCls: 'svgicon svg-btn-comments', iconCls: 'svgicon svg-btn-comments',
caption: 'Comment' caption: me.toolbar.capBtnComment
}).render( slots.eq(index) ); }).render( slots.eq(index) );
_btnsComment.push(button); _btnsComment.push(button);

2
apps/spreadsheeteditor/main/app/controller/Viewport.js
View file

@ -99,7 +99,7 @@ define([
( !Common.localStorage.itemExists("sse-compact-toolbar") && ( !Common.localStorage.itemExists("sse-compact-toolbar") &&
config.customization && config.customization.compactToolbar )) config.customization && config.customization.compactToolbar ))
{ {
me.viewport.vlayout.panels[0].height = 40; me.viewport.vlayout.panels[0].height = 32;
} else } else
if ( config.isEditDiagram || config.isEditMailMerge ) { if ( config.isEditDiagram || config.isEditMailMerge ) {
me.viewport.vlayout.panels[0].height = 41; me.viewport.vlayout.panels[0].height = 41;

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

@ -154,10 +154,14 @@
<span class="btn-slot text x-huge" id="slot-btn-insshape"></span> <span class="btn-slot text x-huge" id="slot-btn-insshape"></span>
<span class="btn-slot text x-huge" id="slot-btn-instext"></span> <span class="btn-slot text x-huge" id="slot-btn-instext"></span>
<span class="btn-slot text x-huge" id="slot-btn-inschart"></span> <span class="btn-slot text x-huge" id="slot-btn-inschart"></span>
<div class="separator long"></div> </div>
<div class="separator long"></div>
<div class="group">
<span class="btn-slot text x-huge slot-comment"></span> <span class="btn-slot text x-huge slot-comment"></span>
<span class="btn-slot text x-huge" id="slot-btn-inshyperlink"></span> <span class="btn-slot text x-huge" id="slot-btn-inshyperlink"></span>
<div class="separator long"></div> </div>
<div class="separator long"></div>
<div class="group">
<span class="btn-slot text x-huge" id="slot-btn-insequation"></span> <span class="btn-slot text x-huge" id="slot-btn-insequation"></span>
</div> </div>
</section> </section>

11
apps/spreadsheeteditor/main/app/view/Toolbar.js
View file

@ -360,14 +360,14 @@ define([
me.btnPrint = new Common.UI.Button({ me.btnPrint = new Common.UI.Button({
id : 'id-toolbar-btn-print', id : 'id-toolbar-btn-print',
cls : 'btn-toolbar', cls : 'btn-toolbar',
iconCls : 'btn-print', iconCls : 'btn-print no-mask',
lock : [_set.editCell, _set.cantPrint] lock : [_set.editCell, _set.cantPrint]
}); });
me.btnSave = new Common.UI.Button({ me.btnSave = new Common.UI.Button({
id : 'id-toolbar-btn-save', id : 'id-toolbar-btn-save',
cls : 'btn-toolbar', cls : 'btn-toolbar',
iconCls : me.btnSaveCls iconCls : 'no-mask ' + me.btnSaveCls
}); });
me.btnIncFontSize = new Common.UI.Button({ me.btnIncFontSize = new Common.UI.Button({
@ -1045,7 +1045,7 @@ define([
me.btnShowMode = new Common.UI.Button({ me.btnShowMode = new Common.UI.Button({
id : 'id-toolbar-btn-showmode', id : 'id-toolbar-btn-showmode',
cls : 'btn-toolbar', cls : 'btn-toolbar',
iconCls : 'btn-showmode', iconCls : 'btn-showmode no-mask',
lock : [_set.menuFileOpen, _set.editCell], lock : [_set.menuFileOpen, _set.editCell],
menu : true menu : true
}); });
@ -1053,7 +1053,7 @@ define([
me.btnSettings = new Common.UI.Button({ me.btnSettings = new Common.UI.Button({
id : 'id-toolbar-btn-settings', id : 'id-toolbar-btn-settings',
cls : 'btn-toolbar', cls : 'btn-toolbar',
iconCls : 'btn-settings' iconCls : 'btn-settings no-mask'
}); });
// Is unique for the short view // Is unique for the short view
@ -2049,6 +2049,7 @@ define([
capInsertShape: 'Shape', capInsertShape: 'Shape',
capInsertChart: 'Chart', capInsertChart: 'Chart',
capInsertHyperlink: 'Hyperlink', capInsertHyperlink: 'Hyperlink',
capInsertEquation: 'Equation' capInsertEquation: 'Equation',
capBtnComment: 'Comment'
}, SSE.Views.Toolbar || {})); }, SSE.Views.Toolbar || {}));
}); });

2
apps/spreadsheeteditor/main/app/view/Viewport.js
View file

@ -91,7 +91,7 @@ define([
// height: 5 // height: 5
// }, { // }, {
el: items[0], el: items[0],
height: Common.localStorage.getBool('sse-compact-toolbar') ? 40 : 40+67 height: Common.localStorage.getBool('sse-compact-toolbar') ? 32 : 32+67
}, { }, {
el: items[1], el: items[1],
stretch: true stretch: true

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

@ -6,10 +6,10 @@
} }
&.masked { &.masked {
button.disabled .btn-icon:not(.btn-print):not(.btn-save):not(.btn-save-coauth):not(.btn-settings):not(.btn-showmode) { button.disabled .icon:not(.no-mask) {
background-position-x: 0px !important; background-position-x: 0px !important;
} }
.toolbar-group:not(.no-mask) { .group:not(.no-mask) {
opacity: 0.4; opacity: 0.4;
} }
} }
@ -48,7 +48,7 @@
top: 32px; top: 32px;
left: 48px; left: 48px;
right: 45px; right: 45px;
height: 100%; bottom: 0;
opacity: 0; opacity: 0;
background-color: @gray-light; background-color: @gray-light;
z-index: @zindex-tooltip + 1; z-index: @zindex-tooltip + 1;