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

Fix menu alignment in equation toolbar

apps/common/main/lib/component/DataView.js

@@ -1368,12 +1368,30 @@ define([
                 props = {minScrollbarLength  : this.minScrollbarLength};
             this.scrollAlwaysVisible && (props.alwaysVisibleY = this.scrollAlwaysVisible);
 
-            if (top + menuH > docH ) {
+            var menuUp = false;
-                innerEl.css('max-height', (docH - top - paddings - margins) + 'px');
+            if (this.parentMenu.menuAlign) {
-                this.scroller.update(props);
+                var m = this.parentMenu.menuAlign.match(/^([a-z]+)-([a-z]+)/);
-            } else if ( top + menuH < docH && innerEl.height() < this.options.restoreHeight ) {
+                menuUp = (m[1]==='bl' || m[1]==='br');
-                innerEl.css('max-height', (Math.min(docH - top - paddings - margins, this.options.restoreHeight)) + 'px');
+            }
-                this.scroller.update(props);
+            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);
+                }
             }
         },
 

apps/common/main/lib/component/Menu.js

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

apps/documenteditor/main/app/controller/DocumentHolder.js

@@ -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]))});
+            showPoint[1] = Math.min(me._Height - eqContainer.outerHeight(), Math.max(0, showPoint[1]));
-            // menu.menuAlign = validation ? 'tr-br' : 'tl-bl';
+            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();

apps/documenteditor/main/resources/less/toolbar.less

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

apps/presentationeditor/main/app/controller/DocumentHolder.js

@@ -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]))});
+            showPoint[1] = Math.min(me._Height - eqContainer.outerHeight(), Math.max(0, showPoint[1]));
-            // menu.menuAlign = validation ? 'tr-br' : 'tl-bl';
+            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();

apps/presentationeditor/main/resources/less/toolbar.less

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

apps/spreadsheeteditor/main/app/controller/DocumentHolder.js

@@ -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]))});
+            showPoint[1] = Math.min(me.tooltips.coauth.apiHeight - eqContainer.outerHeight(), Math.max(0, showPoint[1]));
-            // menu.menuAlign = validation ? 'tr-br' : 'tl-bl';
+            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();

apps/spreadsheeteditor/main/resources/less/toolbar.less

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