Merge pull request #2042 from ONLYOFFICE/fix/equation-toolbar-align

Fix menu alignment in equation toolbar
This commit is contained in:
Julia Radzhabova 2022-11-10 21:11:47 +03:00 committed by GitHub
commit f1ca54cf55
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 85 additions and 17 deletions

View file

@ -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);
}
}
},

View file

@ -145,7 +145,7 @@ define([
style : '',
itemTemplate: null,
items : [],
menuAlign : 'tl-bl',
menuAlign : 'tl-bl',//menu - parent
menuAlignEl : null,
offset : [0, 0],
cyclic : true,

View file

@ -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();

View file

@ -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 {

View file

@ -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();

View file

@ -111,6 +111,9 @@
.separator {
height: 20px;
}
&.has-open-menu {
z-index: @zindex-navbar + 1;
}
}
.item-theme {

View file

@ -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();

View file

@ -123,6 +123,9 @@
.separator {
height: 20px;
}
&.has-open-menu {
z-index: @zindex-navbar + 1;
}
}
#slot-field-fontsize {