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

Menu component: refactoring, adjust menu to browser height

Browse source
This commit is contained in:
Julia Radzhabova 2019-06-21 10:46:00 +03:00
parent 20a45dda5f
commit 15aac51ab4
8 changed files with 41 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
apps/common/main/lib/component/Menu.js
View file

@ -76,6 +76,11 @@
* Arrow of the {Common.UI.MenuItem} menu items
*
*
* @property {Boolean/Number} restoreHeight
*
* Adjust to the browser height and restore to restoreHeight when it's Number
*
*
*/
if (Common === undefined)
@ -165,6 +170,11 @@ define([
this.menuAlignEl = this.options.menuAlignEl;
this.scrollAlwaysVisible = this.options.scrollAlwaysVisible;
if (this.options.restoreHeight) {
this.options.restoreHeight = (typeof (this.options.restoreHeight) == "number") ? this.options.restoreHeight : (this.options.maxHeight ? this.options.maxHeight : 100000);
!this.options.maxHeight && (this.options.maxHeight = this.options.restoreHeight);
}
if (!this.options.cyclic) this.options.cls += ' no-cyclic';
_.each(this.options.items, function(item) {
@ -230,8 +240,17 @@ define([
});
}
if (this.options.maxHeight) {
menuRoot.css({'max-height': me.options.maxHeight});
this.scroller = new Common.UI.Scroller({
el: $(this.el).find('.dropdown-menu '),
minScrollbarLength: 30,
suppressScrollX: true,
alwaysVisibleY: this.scrollAlwaysVisible
});
}
menuRoot.css({
'max-height': me.options.maxHeight||'none',
position : 'fixed',
right : 'auto',
left : -1000,
@ -354,27 +373,14 @@ define([
onBeforeShowMenu: function(e) {
Common.NotificationCenter.trigger('menu:show');
this.trigger('show:before', this, e);
if (this.options.maxHeight && !this.scroller) {
this.scroller = new Common.UI.Scroller({
el: $(this.el).find('.dropdown-menu '),
minScrollbarLength: 30,
suppressScrollX: true,
alwaysVisibleY: this.scrollAlwaysVisible
});
}
this.alignPosition();
},
onAfterShowMenu: function(e) {
this.trigger('show:after', this, e);
if (this.scroller) {
if (this.options.restoreHeight)
this.scroller.update();
this.scroller.update();
var menuRoot = (this.cmpEl.attr('role') === 'menu') ? this.cmpEl : this.cmpEl.find('[role=menu]'),
$selected = menuRoot.find('> li .checked');
if ($selected.length) {
@ -486,10 +492,14 @@ define([
if (typeof (this.options.restoreHeight) == "number") {
if (top + menuH > docH) {
menuRoot.css('max-height', (docH - top) + 'px');
menuH = menuRoot.outerHeight();
} else if ( top + menuH < docH && menuRoot.height() < this.options.restoreHeight ) {
(!this.scroller) && (this.scroller = new Common.UI.Scroller({
el: $(this.el).find('.dropdown-menu '),
minScrollbarLength: 30,
suppressScrollX: true,
alwaysVisibleY: this.scrollAlwaysVisible
}));
} else if ( top + menuH < docH && menuRoot.height() < this.options.restoreHeight) {
menuRoot.css('max-height', (Math.min(docH - top, this.options.restoreHeight)) + 'px');
menuH = menuRoot.outerHeight();
}
}
} else {

6
apps/documenteditor/main/app/view/DocumentHolder.js
View file

@ -2711,7 +2711,7 @@ define([
caption : me.moreText,
menu : new Common.UI.Menu({
menuAlign: 'tl-tr',
maxHeight: 300,
restoreHeight: true,
items : [
]
})
@ -2722,7 +2722,6 @@ define([
menu : new Common.UI.Menu({
cls: 'lang-menu',
menuAlign: 'tl-tr',
maxHeight: 300,
restoreHeight: 300,
items : []
})
@ -3336,7 +3335,7 @@ define([
caption : me.moreText,
menu : new Common.UI.Menu({
menuAlign: 'tl-tr',
maxHeight: 300,
restoreHeight: true,
items: []
})
});
@ -3346,7 +3345,6 @@ define([
menu : new Common.UI.Menu({
cls: 'lang-menu',
menuAlign: 'tl-tr',
maxHeight: 300,
restoreHeight: 300,
items : []
})

1
apps/documenteditor/main/app/view/Statusbar.js
View file

@ -231,7 +231,6 @@ define([
this.langMenu = new Common.UI.Menu({
cls: 'lang-menu',
style: 'margin-top:-5px;',
maxHeight: 300,
restoreHeight: 300,
itemTemplate: _.template([
'<a id="<%= id %>" tabindex="-1" type="menuitem" style="padding-left: 28px !important;" langval="<%= options.value.value %>">',

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

@ -827,8 +827,7 @@ define([
iconCls: 'btn-pagesize',
caption: me.capBtnPageSize,
menu: new Common.UI.Menu({
maxHeight: 571,
restoreHeight: 571,
restoreHeight: true,
items: [
{
caption: 'US Letter',
@ -963,8 +962,7 @@ define([
iconCls: 'btn-colorschemas',
menu: new Common.UI.Menu({
items: [],
maxHeight: 560,
restoreHeight: 560
restoreHeight: true
})
});
this.toolbarControls.push(this.btnColorSchemas);
@ -2071,8 +2069,7 @@ define([
if (this.mnuColorSchema == null) {
this.mnuColorSchema = new Common.UI.Menu({
maxHeight: 560,
restoreHeight: 560
restoreHeight: true
});
}
this.mnuColorSchema.items = [];

6
apps/presentationeditor/main/app/view/DocumentHolder.js
View file

@ -2147,7 +2147,7 @@ define([
caption : me.moreText,
menu : new Common.UI.Menu({
menuAlign: 'tl-tr',
maxHeight: 300,
restoreHeight: true,
items : [
]
})
@ -2158,7 +2158,6 @@ define([
menu : new Common.UI.Menu({
cls: 'lang-menu',
menuAlign: 'tl-tr',
maxHeight: 300,
restoreHeight: 300,
items : [
]
@ -2216,7 +2215,7 @@ define([
caption : me.moreText,
menu : new Common.UI.Menu({
menuAlign: 'tl-tr',
maxHeight: 300,
restoreHeight: true,
items: [
]
})
@ -2227,7 +2226,6 @@ define([
menu : new Common.UI.Menu({
cls: 'lang-menu',
menuAlign: 'tl-tr',
maxHeight: 300,
restoreHeight: 300,
items : [
]

1
apps/presentationeditor/main/app/view/Statusbar.js
View file

@ -265,7 +265,6 @@ define([
this.langMenu = new Common.UI.Menu({
cls: 'lang-menu',
style: 'margin-top:-5px;',
maxHeight: 300,
restoreHeight: 300,
itemTemplate: _.template([
'<a id="<%= id %>" tabindex="-1" type="menuitem" style="padding-left: 28px !important;" langval="<%= options.value.value %>">',

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

@ -578,8 +578,7 @@ define([
lock: [_set.themeLock, _set.slideDeleted, _set.lostConnect, _set.noSlides, _set.disableOnStart],
menu: new Common.UI.Menu({
items: [],
maxHeight: 560,
restoreHeight: 560
restoreHeight: true
})
});
me.slideOnlyControls.push(me.btnColorSchemas);
@ -1268,8 +1267,7 @@ define([
if (mnuColorSchema == null) {
mnuColorSchema = new Common.UI.Menu({
maxHeight: 560,
restoreHeight: 560
restoreHeight: true
});
}
mnuColorSchema.items = [];

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

@ -1005,8 +1005,7 @@ define([
lock : [_set.editCell, _set.lostConnect, _set.coAuth],
menu : new Common.UI.Menu({
items: [],
maxHeight : 560,
restoreHeight: 560
restoreHeight: true
})
});
@ -1192,6 +1191,7 @@ define([
caption: me.capBtnPageSize,
lock : [_set.docPropsLock, _set.lostConnect, _set.coAuth],
menu: new Common.UI.Menu({
restoreHeight: true,
items: [
{
caption: 'US Letter',
@ -1914,8 +1914,8 @@ define([
}
if (this.mnuColorSchema == null) {
this.mnuColorSchema = new Common.UI.Menu({maxHeight : 560,
restoreHeight: 560
this.mnuColorSchema = new Common.UI.Menu({
restoreHeight: true
});
}