Merge pull request #2042 from ONLYOFFICE/fix/equation-toolbar-align
Fix menu alignment in equation toolbar
This commit is contained in:
commit
f1ca54cf55
|
@ -1368,12 +1368,30 @@ define([
|
|||
props = {minScrollbarLength : this.minScrollbarLength};
|
||||
this.scrollAlwaysVisible && (props.alwaysVisibleY = this.scrollAlwaysVisible);
|
||||
|
||||
if (top + menuH > docH ) {
|
||||
innerEl.css('max-height', (docH - top - paddings - margins) + 'px');
|
||||
this.scroller.update(props);
|
||||
} else if ( top + menuH < docH && innerEl.height() < this.options.restoreHeight ) {
|
||||
innerEl.css('max-height', (Math.min(docH - top - paddings - margins, this.options.restoreHeight)) + 'px');
|
||||
this.scroller.update(props);
|
||||
var menuUp = false;
|
||||
if (this.parentMenu.menuAlign) {
|
||||
var m = this.parentMenu.menuAlign.match(/^([a-z]+)-([a-z]+)/);
|
||||
menuUp = (m[1]==='bl' || m[1]==='br');
|
||||
}
|
||||
if (menuUp) {
|
||||
var bottom = top + menuH;
|
||||
if (top<0) {
|
||||
innerEl.css('max-height', (bottom - paddings - margins) + 'px');
|
||||
menuRoot.css('top', 0);
|
||||
this.scroller.update(props);
|
||||
} else if (top>0 && innerEl.height() < this.options.restoreHeight) {
|
||||
innerEl.css('max-height', (Math.min(bottom - paddings - margins, this.options.restoreHeight)) + 'px');
|
||||
menuRoot.css('top', bottom - menuRoot.outerHeight());
|
||||
this.scroller.update(props);
|
||||
}
|
||||
} else {
|
||||
if (top + menuH > docH ) {
|
||||
innerEl.css('max-height', (docH - top - paddings - margins) + 'px');
|
||||
this.scroller.update(props);
|
||||
} else if ( top + menuH < docH && innerEl.height() < this.options.restoreHeight ) {
|
||||
innerEl.css('max-height', (Math.min(docH - top - paddings - margins, this.options.restoreHeight)) + 'px');
|
||||
this.scroller.update(props);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
@ -145,7 +145,7 @@ define([
|
|||
style : '',
|
||||
itemTemplate: null,
|
||||
items : [],
|
||||
menuAlign : 'tl-bl',
|
||||
menuAlign : 'tl-bl',//menu - parent
|
||||
menuAlignEl : null,
|
||||
offset : [0, 0],
|
||||
cyclic : true,
|
||||
|
|
|
@ -2367,7 +2367,7 @@ define([
|
|||
store: group.get('groupStore'),
|
||||
scrollAlwaysVisible: true,
|
||||
showLast: false,
|
||||
restoreHeight: 10000,
|
||||
restoreHeight: 450,
|
||||
itemTemplate: _.template(
|
||||
'<div class="item-equation" style="" >' +
|
||||
'<div class="equation-icon" style="background-position:<%= posX %>px <%= posY %>px;width:<%= width %>px;height:<%= height %>px;" id="<%= id %>"></div>' +
|
||||
|
@ -2381,6 +2381,12 @@ define([
|
|||
});
|
||||
menu.off('show:before', onShowBefore);
|
||||
};
|
||||
var bringForward = function (menu) {
|
||||
eqContainer.addClass('has-open-menu');
|
||||
};
|
||||
var sendBackward = function (menu) {
|
||||
eqContainer.removeClass('has-open-menu');
|
||||
};
|
||||
for (var i = 0; i < equationsStore.length; ++i) {
|
||||
var equationGroup = equationsStore.at(i);
|
||||
var btn = new Common.UI.Button({
|
||||
|
@ -2399,6 +2405,8 @@ define([
|
|||
})
|
||||
});
|
||||
btn.menu.on('show:before', onShowBefore);
|
||||
btn.menu.on('show:before', bringForward);
|
||||
btn.menu.on('hide:after', sendBackward);
|
||||
me.equationBtns.push(btn);
|
||||
}
|
||||
|
||||
|
@ -2430,8 +2438,14 @@ define([
|
|||
showPoint[1] = bounds[3] + 10;
|
||||
!Common.Utils.InternalSettings.get("de-hidden-rulers") && (showPoint[1] -= 26);
|
||||
}
|
||||
eqContainer.css({left: showPoint[0], top : Math.min(this._Height - eqContainer.outerHeight(), Math.max(0, showPoint[1]))});
|
||||
// menu.menuAlign = validation ? 'tr-br' : 'tl-bl';
|
||||
showPoint[1] = Math.min(me._Height - eqContainer.outerHeight(), Math.max(0, showPoint[1]));
|
||||
eqContainer.css({left: showPoint[0], top : showPoint[1]});
|
||||
|
||||
var menuAlign = (me._Height - showPoint[1] - eqContainer.outerHeight() < 220) ? 'bl-tl' : 'tl-bl';
|
||||
me.equationBtns.forEach(function(item){
|
||||
item && (item.menu.menuAlign = menuAlign);
|
||||
});
|
||||
me.equationSettingsBtn.menu.menuAlign = menuAlign;
|
||||
if (eqContainer.is(':visible')) {
|
||||
if (me.equationSettingsBtn.menu.isVisible()) {
|
||||
me.equationSettingsBtn.menu.options.initMenu();
|
||||
|
|
|
@ -179,7 +179,9 @@
|
|||
.separator {
|
||||
height: 20px;
|
||||
}
|
||||
z-index: @zindex-dropdown - 19;
|
||||
&.has-open-menu {
|
||||
z-index: @zindex-navbar + 1;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu.list-settings-level {
|
||||
|
|
|
@ -2282,7 +2282,7 @@ define([
|
|||
store: group.get('groupStore'),
|
||||
scrollAlwaysVisible: true,
|
||||
showLast: false,
|
||||
restoreHeight: group.get('groupHeight') ? parseInt(group.get('groupHeight')) : true,
|
||||
restoreHeight: 450,
|
||||
itemTemplate: _.template(
|
||||
'<div class="item-equation" style="" >' +
|
||||
'<div class="equation-icon" style="background-position:<%= posX %>px <%= posY %>px;width:<%= width %>px;height:<%= height %>px;" id="<%= id %>"></div>' +
|
||||
|
@ -2296,6 +2296,12 @@ define([
|
|||
});
|
||||
menu.off('show:before', onShowBefore);
|
||||
};
|
||||
var bringForward = function (menu) {
|
||||
eqContainer.addClass('has-open-menu');
|
||||
};
|
||||
var sendBackward = function (menu) {
|
||||
eqContainer.removeClass('has-open-menu');
|
||||
};
|
||||
for (var i = 0; i < equationsStore.length; ++i) {
|
||||
var equationGroup = equationsStore.at(i);
|
||||
var btn = new Common.UI.Button({
|
||||
|
@ -2315,6 +2321,8 @@ define([
|
|||
})
|
||||
});
|
||||
btn.menu.on('show:before', onShowBefore);
|
||||
btn.menu.on('show:before', bringForward);
|
||||
btn.menu.on('hide:after', sendBackward);
|
||||
me.equationBtns.push(btn);
|
||||
}
|
||||
|
||||
|
@ -2341,8 +2349,14 @@ define([
|
|||
if (showPoint[1]<0) {
|
||||
showPoint[1] = bounds[3] + 10;
|
||||
}
|
||||
eqContainer.css({left: showPoint[0], top : Math.min(me._Height - eqContainer.outerHeight(), Math.max(0, showPoint[1]))});
|
||||
// menu.menuAlign = validation ? 'tr-br' : 'tl-bl';
|
||||
showPoint[1] = Math.min(me._Height - eqContainer.outerHeight(), Math.max(0, showPoint[1]));
|
||||
eqContainer.css({left: showPoint[0], top : showPoint[1]});
|
||||
|
||||
var menuAlign = (me._Height - showPoint[1] - eqContainer.outerHeight() < 220) ? 'bl-tl' : 'tl-bl';
|
||||
me.equationBtns.forEach(function(item){
|
||||
item && (item.menu.menuAlign = menuAlign);
|
||||
});
|
||||
me.equationSettingsBtn.menu.menuAlign = menuAlign;
|
||||
if (eqContainer.is(':visible')) {
|
||||
if (me.equationSettingsBtn.menu.isVisible()) {
|
||||
me.equationSettingsBtn.menu.options.initMenu();
|
||||
|
|
|
@ -111,6 +111,9 @@
|
|||
.separator {
|
||||
height: 20px;
|
||||
}
|
||||
&.has-open-menu {
|
||||
z-index: @zindex-navbar + 1;
|
||||
}
|
||||
}
|
||||
|
||||
.item-theme {
|
||||
|
|
|
@ -4348,7 +4348,7 @@ define([
|
|||
store: group.get('groupStore'),
|
||||
scrollAlwaysVisible: true,
|
||||
showLast: false,
|
||||
restoreHeight: group.get('groupHeight') ? parseInt(group.get('groupHeight')) : true,
|
||||
restoreHeight: 450,
|
||||
itemTemplate: _.template(
|
||||
'<div class="item-equation" style="" >' +
|
||||
'<div class="equation-icon" style="background-position:<%= posX %>px <%= posY %>px;width:<%= width %>px;height:<%= height %>px;" id="<%= id %>"></div>' +
|
||||
|
@ -4362,6 +4362,12 @@ define([
|
|||
});
|
||||
menu.off('show:before', onShowBefore);
|
||||
};
|
||||
var bringForward = function (menu) {
|
||||
eqContainer.addClass('has-open-menu');
|
||||
};
|
||||
var sendBackward = function (menu) {
|
||||
eqContainer.removeClass('has-open-menu');
|
||||
};
|
||||
for (var i = 0; i < equationsStore.length; ++i) {
|
||||
var equationGroup = equationsStore.at(i);
|
||||
var btn = new Common.UI.Button({
|
||||
|
@ -4381,6 +4387,8 @@ define([
|
|||
})
|
||||
});
|
||||
btn.menu.on('show:before', onShowBefore);
|
||||
btn.menu.on('show:before', bringForward);
|
||||
btn.menu.on('hide:after', sendBackward);
|
||||
me.equationBtns.push(btn);
|
||||
}
|
||||
|
||||
|
@ -4410,8 +4418,14 @@ define([
|
|||
if (showPoint[1]<0) {
|
||||
showPoint[1] = bounds[3] + 10;
|
||||
}
|
||||
eqContainer.css({left: showPoint[0], top : Math.min(me.tooltips.coauth.apiHeight - eqContainer.outerHeight(), Math.max(0, showPoint[1]))});
|
||||
// menu.menuAlign = validation ? 'tr-br' : 'tl-bl';
|
||||
showPoint[1] = Math.min(me.tooltips.coauth.apiHeight - eqContainer.outerHeight(), Math.max(0, showPoint[1]));
|
||||
eqContainer.css({left: showPoint[0], top : showPoint[1]});
|
||||
|
||||
var menuAlign = (me.tooltips.coauth.apiHeight - showPoint[1] - eqContainer.outerHeight() < 220) ? 'bl-tl' : 'tl-bl';
|
||||
me.equationBtns.forEach(function(item){
|
||||
item && (item.menu.menuAlign = menuAlign);
|
||||
});
|
||||
me.equationSettingsBtn.menu.menuAlign = menuAlign;
|
||||
if (eqContainer.is(':visible')) {
|
||||
if (me.equationSettingsBtn.menu.isVisible()) {
|
||||
me.equationSettingsBtn.menu.options.initMenu();
|
||||
|
|
|
@ -123,6 +123,9 @@
|
|||
.separator {
|
||||
height: 20px;
|
||||
}
|
||||
&.has-open-menu {
|
||||
z-index: @zindex-navbar + 1;
|
||||
}
|
||||
}
|
||||
|
||||
#slot-field-fontsize {
|
||||
|
|
Loading…
Reference in a new issue