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 * 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) if (Common === undefined)
@ -165,6 +170,11 @@ define([
this.menuAlignEl = this.options.menuAlignEl; this.menuAlignEl = this.options.menuAlignEl;
this.scrollAlwaysVisible = this.options.scrollAlwaysVisible; 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'; if (!this.options.cyclic) this.options.cls += ' no-cyclic';
_.each(this.options.items, function(item) { _.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({ menuRoot.css({
'max-height': me.options.maxHeight||'none',
position : 'fixed', position : 'fixed',
right : 'auto', right : 'auto',
left : -1000, left : -1000,
@ -354,27 +373,14 @@ define([
onBeforeShowMenu: function(e) { onBeforeShowMenu: function(e) {
Common.NotificationCenter.trigger('menu:show'); Common.NotificationCenter.trigger('menu:show');
this.trigger('show:before', this, e); 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(); this.alignPosition();
}, },
onAfterShowMenu: function(e) { onAfterShowMenu: function(e) {
this.trigger('show:after', this, e); this.trigger('show:after', this, e);
if (this.scroller) { 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]'), var menuRoot = (this.cmpEl.attr('role') === 'menu') ? this.cmpEl : this.cmpEl.find('[role=menu]'),
$selected = menuRoot.find('> li .checked'); $selected = menuRoot.find('> li .checked');
if ($selected.length) { if ($selected.length) {
@ -486,10 +492,14 @@ define([
if (typeof (this.options.restoreHeight) == "number") { if (typeof (this.options.restoreHeight) == "number") {
if (top + menuH > docH) { if (top + menuH > docH) {
menuRoot.css('max-height', (docH - top) + 'px'); menuRoot.css('max-height', (docH - top) + 'px');
menuH = menuRoot.outerHeight(); (!this.scroller) && (this.scroller = new Common.UI.Scroller({
} else if ( top + menuH < docH && menuRoot.height() < this.options.restoreHeight ) { 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'); menuRoot.css('max-height', (Math.min(docH - top, this.options.restoreHeight)) + 'px');
menuH = menuRoot.outerHeight();
} }
} }
} else { } else {

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

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

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

@ -231,7 +231,6 @@ define([
this.langMenu = new Common.UI.Menu({ this.langMenu = new Common.UI.Menu({
cls: 'lang-menu', cls: 'lang-menu',
style: 'margin-top:-5px;', style: 'margin-top:-5px;',
maxHeight: 300,
restoreHeight: 300, restoreHeight: 300,
itemTemplate: _.template([ itemTemplate: _.template([
'<a id="<%= id %>" tabindex="-1" type="menuitem" style="padding-left: 28px !important;" langval="<%= options.value.value %>">', '<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', iconCls: 'btn-pagesize',
caption: me.capBtnPageSize, caption: me.capBtnPageSize,
menu: new Common.UI.Menu({ menu: new Common.UI.Menu({
maxHeight: 571, restoreHeight: true,
restoreHeight: 571,
items: [ items: [
{ {
caption: 'US Letter', caption: 'US Letter',
@ -963,8 +962,7 @@ define([
iconCls: 'btn-colorschemas', iconCls: 'btn-colorschemas',
menu: new Common.UI.Menu({ menu: new Common.UI.Menu({
items: [], items: [],
maxHeight: 560, restoreHeight: true
restoreHeight: 560
}) })
}); });
this.toolbarControls.push(this.btnColorSchemas); this.toolbarControls.push(this.btnColorSchemas);
@ -2071,8 +2069,7 @@ define([
if (this.mnuColorSchema == null) { if (this.mnuColorSchema == null) {
this.mnuColorSchema = new Common.UI.Menu({ this.mnuColorSchema = new Common.UI.Menu({
maxHeight: 560, restoreHeight: true
restoreHeight: 560
}); });
} }
this.mnuColorSchema.items = []; this.mnuColorSchema.items = [];

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

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

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

@ -265,7 +265,6 @@ define([
this.langMenu = new Common.UI.Menu({ this.langMenu = new Common.UI.Menu({
cls: 'lang-menu', cls: 'lang-menu',
style: 'margin-top:-5px;', style: 'margin-top:-5px;',
maxHeight: 300,
restoreHeight: 300, restoreHeight: 300,
itemTemplate: _.template([ itemTemplate: _.template([
'<a id="<%= id %>" tabindex="-1" type="menuitem" style="padding-left: 28px !important;" langval="<%= options.value.value %>">', '<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], lock: [_set.themeLock, _set.slideDeleted, _set.lostConnect, _set.noSlides, _set.disableOnStart],
menu: new Common.UI.Menu({ menu: new Common.UI.Menu({
items: [], items: [],
maxHeight: 560, restoreHeight: true
restoreHeight: 560
}) })
}); });
me.slideOnlyControls.push(me.btnColorSchemas); me.slideOnlyControls.push(me.btnColorSchemas);
@ -1268,8 +1267,7 @@ define([
if (mnuColorSchema == null) { if (mnuColorSchema == null) {
mnuColorSchema = new Common.UI.Menu({ mnuColorSchema = new Common.UI.Menu({
maxHeight: 560, restoreHeight: true
restoreHeight: 560
}); });
} }
mnuColorSchema.items = []; mnuColorSchema.items = [];

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

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