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