Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[DE][PE][SSE] Update bootstrap (Add new parameter in menu component 'display: static/dynamic', fix dropdowns into right panel)

Browse source
This commit is contained in:
JuliaSvinareva 2020-11-13 21:48:15 +03:00
parent 992929c99a
commit d0e120e974
24 changed files with 133 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/common/main/lib/component/ColorButton.js
View file

@ -48,7 +48,7 @@ define([
template: _.template([
'<div class="btn-group" id="<%= id %>">',
'<button type="button" class="btn btn-color dropdown-toggle <%= cls %>" data-toggle="dropdown" style="<%= style %>">',
'<button type="button" class="btn btn-color dropdown-toggle <%= cls %>" data-toggle="dropdown" data-display="static" style="<%= style %>">',
'<span>&nbsp;</span>',
'<span class="inner-box-caret"><i class="caret img-commonctrl"></i></span>',
'</button>',

8
apps/common/main/lib/component/ComboBorderSize.js
View file

@ -79,7 +79,7 @@ define([
'<div class="input-group combobox combo-border-size input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
'<div class="form-control" style="padding-top:2px; <%= style %>"></div>',
'<div style="display: table-cell;"></div>',
'<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-reference="parent"><span class="caret img-commonctrl"></span></button>',
'<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-reference="parent" data-display="static"><span class="caret img-commonctrl"></span></button>',
'<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
'<% _.each(items, function(item) { %>',
'<li id="<%= item.id %>" data-value="<%= item.value %>"><a class="dropdown-item" tabindex="-1" type="menuitem">',
@ -175,10 +175,10 @@ define([
template: _.template([
'<span class="input-group combobox combo-border-size input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
'<input type="text" class="form-control text">',
'<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret img-commonctrl"></span></button>',
'<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-display="static"><span class="caret img-commonctrl"></span></button>',
'<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
'<% _.each(items, function(item) { %>',
'<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem">',
'<li id="<%= item.id %>" data-value="<%= item.value %>"><a class="dropdown-item" tabindex="-1" type="menuitem">',
'<span><%= item.displayValue %></span>',
'<% if (item.offsety!==undefined) { %>',
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" align="right" style="background-position: 0 -<%= item.offsety %>px;">',
@ -226,7 +226,7 @@ define([
'<div class="input-group combobox combo-border-size input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
'<div class="form-control" style="<%= style %>"></div>',
'<div style="display: table-cell;"></div>',
'<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-reference="parent"><span class="caret img-commonctrl"></span></button>',
'<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-reference="parent" data-display="static"><span class="caret img-commonctrl"></span></button>',
'<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
'<% _.each(items, function(item) { %>',
'<li id="<%= item.id %>" data-value="<%= item.value %>"><a class="dropdown-item" tabindex="-1" type="menuitem" style="padding: 2px 0 2px 10px;">',

2
apps/common/main/lib/component/ComboBox.js
View file

@ -92,7 +92,7 @@ define([
template: _.template([
'<span class="input-group combobox <%= cls %>" id="<%= id %>" style="<%= style %>">',
'<input type="text" class="form-control" spellcheck="false">',
'<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-reference="parent"><span class="caret img-commonctrl"></span></button>',
'<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-reference="parent" data-display="static"><span class="caret img-commonctrl"></span></button>',
'<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
'<% _.each(items, function(item) { %>',
'<li id="<%= item.id %>" data-value="<%= item.value %>"><a class="dropdown-item" tabindex="-1" type="menuitem"><%= scope.getDisplayValue(item) %></a></li>',

2
apps/common/main/lib/component/ComboBoxFonts.js
View file

@ -72,7 +72,7 @@ define([
'<div class="input-group combobox fonts <%= cls %>" id="<%= id %>" style="<%= style %>">',
'<input type="text" class="form-control" spellcheck="false"> ',
'<div style="display: table-cell;"></div>',
'<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-reference="parent"><span class="caret img-commonctrl"></span></button>',
'<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-reference="parent" data-display="static"><span class="caret img-commonctrl"></span></button>',
'<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
'<li class="dropdown-divider">',
'<% _.each(items, function(item) { %>',

5
apps/common/main/lib/component/ComboDataView.js
View file

@ -61,7 +61,8 @@ define([
beforeOpenHandler : null,
additionalMenuItems : null,
showLast: true,
minWidth: -1
minWidth: -1,
displayMenu: 'static'
},
template: _.template([
@ -90,6 +91,7 @@ define([
this.needFillComboView = false;
this.minWidth = this.options.minWidth;
this.menuCls = this.options.menuCls;
this.displayMenu = this.options.displayMenu;
this.fieldPicker = new Common.UI.DataView({
cls: 'field-picker',
@ -107,6 +109,7 @@ define([
this.openButton = new Common.UI.Button({
cls: 'open-menu',
menu: new Common.UI.Menu({
display: this.displayMenu,
cls: this.menuCls,
menuAlign: 'tl-tl',
offset: [0, 3],

122
apps/common/main/lib/component/Menu.js
View file

@ -148,9 +148,11 @@ define([
menuAlign : 'tl-bl',
menuAlignEl : null,
offset : [0, 0],
popperOffset: '',
cyclic : true,
search : false,
scrollAlwaysVisible: true
scrollAlwaysVisible: true,
display : 'static' // 'dynamic' - position with popper.js
},
template: _.template([
@ -167,12 +169,14 @@ define([
this.rendered = false;
this.items = [];
this.offset = [0, 0];
this.popperOffset = this.options.popperOffset || '';
this.popperOffset = this.options.popperOffset;
this.menuAlign = this.options.menuAlign;
this.menuAlignEl = this.options.menuAlignEl;
this.scrollAlwaysVisible = this.options.scrollAlwaysVisible;
this.search = this.options.search;
this.display = this.options.display;
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);
@ -269,6 +273,12 @@ define([
function(e) { me.isOver = true;},
function(e) { me.isOver = false; }
);
this.parentEl.find('[data-toggle="dropdown"]').data('display', this.display);
if (this.display === 'static') {
menuRoot.css({'position': 'fixed'});
menuRoot.addClass('static');
}
}
this.rendered = true;
@ -544,14 +554,6 @@ define([
var left = offset.left - posMenu[m[1]][0] + posParent[m[2]][0] + this.offset[0];
var top = offset.top - posMenu[m[1]][1] + posParent[m[2]][1] + this.offset[1];
if (menuParent.is('li.dropdown-submenu')) {
if (left + menuW > docW) {
menuParent.addClass('dropleft');
} else {
menuParent.addClass('dropright');
}
}
if (this.options.restoreHeight) {
if (typeof (this.options.restoreHeight) == "number") {
if (top + menuH > docH) {
@ -563,42 +565,83 @@ define([
alwaysVisibleY: this.scrollAlwaysVisible
}));
this.wheelSpeed = undefined;
} else if ( top + menuH < docH && menuRoot.height() < this.options.restoreHeight) {
} else if (top + menuH < docH && menuRoot.height() < this.options.restoreHeight) {
menuRoot.css('max-height', (Math.min(docH - top, this.options.restoreHeight)) + 'px');
this.wheelSpeed = undefined;
}
}
} else {
var cg = Common.Utils.croppedGeometry();
docH = cg.height - 10;
var newTop = top;
if (top + menuH > docH + cg.top) {
if (fixedAlign && typeof fixedAlign == 'string') { // how to align if menu height > window height
m = fixedAlign.match(/^([a-z]+)-([a-z]+)/);
newTop = offset.top - posMenu[m[1]][1] + posParent[m[2]][1] + this.offset[1] + (fixedOffset || 0);
} else
newTop = docH - menuH;
}
if (newTop < cg.top)
newTop = cg.top;
var margin = newTop - top;
if (Math.abs(margin) > 1) {
menuRoot.css({'margin-top': margin});
}
}
if (this.display === 'static') {
if (left + menuW > docW)
if (menuParent.is('li.dropdown-submenu')) {
left = offset.left - menuW + 2;
} else {
left = docW - menuW;
}
if (left < 0)
left = 0;
if (!this.options.restoreHeight) {
var cg = Common.Utils.croppedGeometry();
docH = cg.height - 10;
if (top + menuH > docH + cg.top) {
if (fixedAlign && typeof fixedAlign == 'string') { // how to align if menu height > window height
m = fixedAlign.match(/^([a-z]+)-([a-z]+)/);
top = offset.top - posMenu[m[1]][1] + posParent[m[2]][1] + this.offset[1] + (fixedOffset || 0);
} else
top = docH - menuH;
}
if (top < cg.top)
top = cg.top;
}
if (!this.options.additionalAlign) {
var _css = {left: Math.ceil(left), top: Math.ceil(top)};
if (!(menuH < docH)) _css['margin-top'] = 0;
menuRoot.css(_css);
}
} else {
if (menuParent.is('li.dropdown-submenu')) {
menuParent.removeClass('dropleft dropright');
if (left + menuW > docW) {
menuParent.addClass('dropleft');
} else {
menuParent.addClass('dropright');
}
}
if (typeof (this.options.restoreHeight) !== "number") {
var cg = Common.Utils.croppedGeometry();
docH = cg.height - 10;
var newTop = top;
if (!this.options.restoreHeight) {
if (top + menuH > docH + cg.top) {
newTop = docH - menuH;
}
if (newTop < cg.top)
newTop = cg.top;
var margin = newTop - top;
if (Math.abs(margin) > 1) {
menuRoot.css({'margin-top': margin});
}
}
if (newTop + menuH > docH) {
menuRoot.css('max-height', (docH - newTop) + 'px');
if (!this.options.restoreHeight) {
(!this.scroller) && (this.scroller = new Common.UI.Scroller({
el: this.$el.find('.dropdown-menu'),
suppressScrollX: true,
alwaysVisibleY: true
}));
console.log(this.$el.find('.dropdown-menu'));
}
} else if (top + menuH - docH < 0.5 && menuRoot.height() < this.options.maxHeight) {
menuRoot.css('max-height', (Math.min(docH - top, this.options.maxHeight)) + 'px');
}
}
}
if (this.options.additionalAlign) {
this.options.additionalAlign.call(this, menuRoot, left, top);
} else {
/*var _css = {top: Math.ceil(newTop)};
if (!(menuH < docH)) _css['margin-top'] = 0;
menuRoot.css(_css);*/
}
},
@ -861,7 +904,7 @@ define([
onBeforeShowMenu: function(e) {
Common.NotificationCenter.trigger('menu:show');
this.trigger('show:before', this, e);
//this.alignPosition();
this.alignPosition();
},
onAfterShowMenu: function(e) {
@ -1012,6 +1055,7 @@ define([
var top = offset.top - posMenu[m[1]][1] + posParent[m[2]][1] + this.offset[1];
if (menuParent.is('li.dropdown-submenu')) {
menuParent.removeClass('dropleft dropright');
if (left + menuW > docW) {
menuParent.addClass('dropleft');
} else {

9
apps/common/main/resources/less/dropdown-menu.less
View file

@ -4,6 +4,7 @@
.dropdown-menu {
padding: 5px 0;
box-shadow: 0 6px 12px rgba(0,0,0,0.175);
&.scrollable-menu {
height: auto;
@ -127,12 +128,4 @@
transform: none !important;
top: 100% !important;
}
}
.combo-styles {
.dropdown-menu {
&.position-top-right {
right: 30px !important;
}
}
}

5
apps/common/main/resources/less/dropdown-submenu.less
View file

@ -8,6 +8,11 @@
right: 100%;
left: auto;
}
&.static {
margin-top: -6px;
margin-left: -1px;
}
}
& > a:after {

2
apps/documenteditor/main/app/controller/Toolbar.js
View file

@ -2578,6 +2578,7 @@ define([
var menuItem = new Common.UI.MenuItem({
caption: shapeGroup.get('groupName'),
menu: new Common.UI.Menu({
display: 'dynamic',
menuAlign: 'tl-tr',
items: [
{ template: _.template('<div id="id-toolbar-menu-shapegroup' + i + '" class="menu-shape" style="width: ' + (shapeGroup.get('groupWidth') - 8) + 'px; margin-left: 5px;"></div>') }
@ -2634,6 +2635,7 @@ define([
var menuItem = new Common.UI.MenuItem({
caption: equationGroup.get('groupName'),
menu: new Common.UI.Menu({
display: 'dynamic',
menuAlign: 'tl-tr',
items: [
{

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

@ -102,6 +102,10 @@ define([
menu.render(menuContainer);
menu.cmpEl.attr({tabindex: "-1"});
//position without popper
menu.cmpEl.data('display', 'static');
menu.cmpEl.css({'position': 'fixed'});
}
menuContainer.css({

5
apps/documenteditor/main/app/view/Toolbar.js
View file

@ -539,7 +539,7 @@ define([
iconCls: 'toolbar__icon btn-insertshape',
caption: me.capBtnInsShape,
enableToggle: true,
menu: new Common.UI.Menu({cls: 'menu-shapes'})
menu: new Common.UI.Menu({cls: 'menu-shapes', display: 'dynamic'})
});
this.paragraphControls.push(this.btnInsertShape);
@ -549,7 +549,7 @@ define([
iconCls: 'toolbar__icon btn-insertequation',
caption: me.capBtnInsEquation,
split: true,
menu: new Common.UI.Menu({cls: 'menu-shapes'})
menu: new Common.UI.Menu({cls: 'menu-shapes', display: 'dynamic'})
});
this.paragraphControls.push(this.btnInsertEquation);
@ -1167,7 +1167,6 @@ define([
this.listStyles = new Common.UI.ComboDataView({
cls: 'combo-styles',
menuCls: 'position-top-right',
style: 'position: relative;',
itemWidth: 104,
itemHeight: 38,

2
apps/documenteditor/main/resources/less/rightmenu.less
View file

@ -15,7 +15,7 @@
display: none;
padding: 0 10px 0 15px;
position: relative;
//overflow: hidden;
overflow: hidden;
border-left: 1px solid @gray-dark;
line-height: 15px;
}

1
apps/presentationeditor/main/app/controller/Toolbar.js
View file

@ -1843,6 +1843,7 @@ define([
var menuItem = new Common.UI.MenuItem({
caption: equationGroup.get('groupName'),
menu: new Common.UI.Menu({
display: 'dynamic',
menuAlign: 'tl-tr',
items: [
{ template: _.template('<div id="id-toolbar-menu-equationgroup' + i +

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

@ -94,6 +94,10 @@ define([
menu.render(menuContainer);
menu.cmpEl.attr({tabindex: "-1"});
//position without popper
menu.cmpEl.data('display', 'static');
menu.cmpEl.css({'position': 'fixed'});
}
menuContainer.css({

2
apps/presentationeditor/main/app/view/ShapeSettings.js
View file

@ -1222,7 +1222,7 @@ define([
this.cmbGradType = new Common.UI.ComboBox({
el: $('#shape-combo-grad-type'),
cls: 'input-group-nr',
menuStyle: 'min-width: 90px;',
menuStyle: 'min-width: 96px;',
editable: false,
data: this._arrGradType
});

2
apps/presentationeditor/main/app/view/TextArtSettings.js
View file

@ -1182,7 +1182,7 @@ define([
this.cmbGradType = new Common.UI.ComboBox({
el: $('#textart-combo-grad-type'),
cls: 'input-group-nr',
menuStyle: 'min-width: 90px;',
menuStyle: 'min-width: 96px;',
editable: false,
data: this._arrGradType
});

5
apps/presentationeditor/main/app/view/Toolbar.js
View file

@ -548,7 +548,7 @@ define([
caption: me.capInsertEquation,
lock: [_set.slideDeleted, _set.lostConnect, _set.noSlides, _set.disableOnStart],
split: true,
menu: new Common.UI.Menu({cls: 'menu-shapes'})
menu: new Common.UI.Menu({cls: 'menu-shapes', display: 'dynamic'})
});
me.slideOnlyControls.push(this.btnInsertEquation);
@ -797,7 +797,6 @@ define([
me.listTheme = new Common.UI.ComboDataView({
cls: 'combo-styles',
menuCls: 'position-top-right',
style: 'position: relative;',
itemWidth: 85,
enableKeyEvents: true,
@ -1042,6 +1041,7 @@ define([
btn.updateHint(me.tipInsertShape);
btn.setMenu(
new Common.UI.Menu({
display: 'dynamic',
cls: 'menu-shapes'
}).on('hide:after', function (e) {
me.fireEvent('insert:shape', ['menu:hide']);
@ -1486,6 +1486,7 @@ define([
var menuitem = new Common.UI.MenuItem({
caption: group.get('groupName'),
menu: new Common.UI.Menu({
display: 'dynamic',
menuAlign: 'tl-tr',
items: [
{template: _.template('<div class="shapegroup-' + i + '" class="menu-shape" style="width: ' + (group.get('groupWidth') - 8) + 'px; margin-left: 5px;"></div>')}

2
apps/presentationeditor/main/resources/less/rightmenu.less
View file

@ -15,7 +15,7 @@
display: none;
padding: 0 10px 0 15px;
position: relative;
//overflow: hidden;
overflow: hidden;
border-left: 1px solid @gray-dark;
line-height: 15px;
}

4
apps/spreadsheeteditor/main/app/controller/DocumentHolder.js
View file

@ -2054,6 +2054,10 @@ define([
menu.render(menuContainer);
menu.cmpEl.attr({tabindex: "-1"});
//position without popper
menu.cmpEl.data('display', 'static');
menu.cmpEl.css({'position': 'fixed'});
}
if (/*!this.mouse.isRightButtonDown &&*/ event.button !== 2) {

2
apps/spreadsheeteditor/main/app/controller/Toolbar.js
View file

@ -2766,6 +2766,7 @@ define([
var menuItem = new Common.UI.MenuItem({
caption: shapeGroup.get('groupName'),
menu: new Common.UI.Menu({
display: 'dynamic',
menuAlign: 'tl-tr',
items: [
{ template: _.template('<div id="id-toolbar-menu-shapegroup' + i + '" class="menu-shape" style="width: ' + (shapeGroup.get('groupWidth') - 8) + 'px; margin-left: 5px;"></div>') }
@ -2823,6 +2824,7 @@ define([
var menuItem = new Common.UI.MenuItem({
caption: equationGroup.get('groupName'),
menu: new Common.UI.Menu({
display: 'dynamic',
menuAlign: 'tl-tr',
items: [
{ template: _.template('<div id="id-toolbar-menu-equationgroup' + i +

2
apps/spreadsheeteditor/main/app/view/ShapeSettings.js
View file

@ -1248,7 +1248,7 @@ define([
this.cmbGradType = new Common.UI.ComboBox({
el: $('#shape-combo-grad-type'),
cls: 'input-group-nr',
menuStyle: 'min-width: 90px;',
menuStyle: 'min-width: 96px;',
editable: false,
data: this._arrGradType
});

3
apps/spreadsheeteditor/main/app/view/Statusbar.js
View file

@ -293,6 +293,7 @@ define([
});
var menuHiddenItems = new Common.UI.Menu({
display: 'dynamic',
maxHeight: 260,
menuAlign: 'tl-tr'
}).on('show:after', function () {
@ -303,6 +304,7 @@ define([
});
var menuColorItems = new Common.UI.Menu({
display: 'dynamic',
menuAlign: 'tl-tr',
cls: 'color-tab',
items: [
@ -320,6 +322,7 @@ define([
me.mnuTabColor = dummyCmp();
this.tabMenu = new Common.UI.Menu({
display: 'dynamic',
menuAlign: 'bl-tl',
items: [
{caption: this.itemInsert, value: 'ins'},

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

@ -704,7 +704,7 @@ define([
enableToggle: true,
caption : me.capInsertShape,
lock : [_set.editCell, _set.lostConnect, _set.coAuth],
menu : new Common.UI.Menu({cls: 'menu-shapes'})
menu : new Common.UI.Menu({cls: 'menu-shapes', display: 'dynamic'})
});
me.btnInsertText = new Common.UI.Button({
@ -737,7 +737,7 @@ define([
caption : me.capInsertEquation,
split : true,
lock : [_set.editCell, _set.lostConnect, _set.coAuth],
menu : new Common.UI.Menu({cls: 'menu-shapes'})
menu : new Common.UI.Menu({cls: 'menu-shapes', display: 'dynamic'})
});
me.btnInsertSymbol = new Common.UI.Button({
@ -779,7 +779,6 @@ define([
me.listStyles = new Common.UI.ComboDataView({
cls : 'combo-styles',
style : 'position: relative;',
menuCls : 'position-top-right',
enableKeyEvents : true,
itemWidth : 112,
itemHeight : 38,

2
apps/spreadsheeteditor/main/resources/less/rightmenu.less
View file

@ -15,7 +15,7 @@
display: none;
padding: 0 10px 0 15px;
position: relative;
//overflow: hidden;
overflow: hidden;
border-left: 1px solid @gray-dark;
line-height: 15px;
}