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

Update bootstrap (fix ComboDataView position, fix class hidden)

Browse source
This commit is contained in:
JuliaSvinareva 2020-10-07 18:06:42 +03:00
parent 25f232e839
commit 1ec07ddcd6
60 changed files with 190 additions and 113 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -613,13 +613,13 @@ define([
var tip = this.btnEl.data('bs.tooltip'); var tip = this.btnEl.data('bs.tooltip');
if (tip) { if (tip) {
disabled && tip.hide(); disabled && tip.hide();
!Common.Utils.isGecko && (tip.enabled = !disabled); !Common.Utils.isGecko && (!disabled ? tip.enable() : tip.disable());
} }
if (this.btnMenuEl) { if (this.btnMenuEl) {
tip = this.btnMenuEl.data('bs.tooltip'); tip = this.btnMenuEl.data('bs.tooltip');
if (tip) { if (tip) {
disabled && tip.hide(); disabled && tip.hide();
!Common.Utils.isGecko && (tip.enabled = !disabled); !Common.Utils.isGecko && (!disabled ? tip.enable() : tip.disable());
} }
} }
} }
@ -727,13 +727,13 @@ define([
var tip = this.btnEl.data('bs.tooltip'); var tip = this.btnEl.data('bs.tooltip');
if (tip) { if (tip) {
this.disabled && tip.hide(); this.disabled && tip.hide();
!Common.Utils.isGecko && (tip.enabled = !this.disabled); !Common.Utils.isGecko && (!this.disabled ? tip.enable() : tip.disable());
} }
if (this.btnMenuEl) { if (this.btnMenuEl) {
tip = this.btnMenuEl.data('bs.tooltip'); tip = this.btnMenuEl.data('bs.tooltip');
if (tip) { if (tip) {
this.disabled && tip.hide(); this.disabled && tip.hide();
!Common.Utils.isGecko && (tip.enabled = !this.disabled); !Common.Utils.isGecko && (!this.disabled ? tip.enable() : tip.disable());
} }
} }
} }

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

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

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

@ -51,6 +51,7 @@ define([
options : { options : {
id : null, id : null,
cls : '', cls : '',
menuCls : '',
style : '', style : '',
hint : false, hint : false,
itemWidth : 80, itemWidth : 80,
@ -88,6 +89,7 @@ define([
this.rendered = false; this.rendered = false;
this.needFillComboView = false; this.needFillComboView = false;
this.minWidth = this.options.minWidth; this.minWidth = this.options.minWidth;
this.menuCls = this.options.menuCls;
this.fieldPicker = new Common.UI.DataView({ this.fieldPicker = new Common.UI.DataView({
cls: 'field-picker', cls: 'field-picker',
@ -105,6 +107,7 @@ define([
this.openButton = new Common.UI.Button({ this.openButton = new Common.UI.Button({
cls: 'open-menu', cls: 'open-menu',
menu: new Common.UI.Menu({ menu: new Common.UI.Menu({
cls: this.menuCls,
menuAlign: 'tl-tl', menuAlign: 'tl-tl',
offset: [0, 3], offset: [0, 3],
items: [ items: [
@ -204,6 +207,11 @@ define([
me.onResize(); me.onResize();
// set align element for dropdown
me.openButton.cmpEl.find('button[data-toggle="dropdown"]').data('reference', me.cmpEl.find('.view > .dataview'));
me.openButton.cmpEl.find('button[data-toggle="dropdown"]').data('boundary', $('#viewport')[0]);
me.openButton.cmpEl.find('button[data-toggle="dropdown"]').data('flip', false);
me.rendered = true; me.rendered = true;
me.trigger('render:after', me); me.trigger('render:after', me);

8
apps/common/main/lib/view/AutoCorrectDialog.js
View file

@ -84,8 +84,8 @@ define([ 'text!common/main/lib/template/AutoCorrectDialog.template',
'<div class="separator horizontal"></div>', '<div class="separator horizontal"></div>',
'<div class="footer center">', '<div class="footer center">',
'<button class="btn normal dlg-btn" result="cancel" style="width: 86px;">' + this.closeButtonText + '</button>', '<button class="btn normal dlg-btn" result="cancel" style="width: 86px;">' + this.closeButtonText + '</button>',
'<button class="btn normal dlg-btn primary can-apply hidden" result="ok" style="width: 86px;">' + this.okButtonText + '</button>', '<button class="btn normal dlg-btn primary can-apply d-none" result="ok" style="width: 86px;">' + this.okButtonText + '</button>',
'<button class="btn normal dlg-btn can-apply hidden" result="cancel" style="width: 86px;">' + this.cancelButtonText + '</button>', '<button class="btn normal dlg-btn can-apply d-none" result="cancel" style="width: 86px;">' + this.cancelButtonText + '</button>',
'</div>' '</div>'
].join('') ].join('')
}, options || {}); }, options || {});
@ -767,8 +767,8 @@ define([ 'text!common/main/lib/template/AutoCorrectDialog.template',
}, },
updateFooterButtons: function(apply) { updateFooterButtons: function(apply) {
this.applyButtons.toggleClass('hidden', !apply); this.applyButtons.toggleClass('d-none', !apply);
this.closeButtons.toggleClass('hidden', apply); this.closeButtons.toggleClass('d-none', apply);
}, },

5
apps/common/main/lib/view/LanguageDialog.js
View file

@ -82,16 +82,17 @@ define([
el: $window.find('#id-document-language'), el: $window.find('#id-document-language'),
cls: 'input-group-nr', cls: 'input-group-nr',
menuStyle: 'min-width: 318px; max-height: 285px;', menuStyle: 'min-width: 318px; max-height: 285px;',
menuCls: 'position-bottom',
editable: false, editable: false,
template: _.template([ template: _.template([
'<span class="input-group combobox <%= cls %> combo-langs" id="<%= id %>" style="<%= style %>">', '<span class="input-group combobox <%= cls %> combo-langs" id="<%= id %>" style="<%= style %>">',
'<input type="text" class="form-control">', '<input type="text" class="form-control">',
'<span class="icon input-icon spellcheck-lang toolbar__icon btn-ic-docspell"></span>', '<span class="icon input-icon spellcheck-lang toolbar__icon btn-ic-docspell"></span>',
'<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-reference="parent"><span class="caret img-commonctrl"></span></button>',
'<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">', '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
'<% _.each(items, function(item) { %>', '<% _.each(items, function(item) { %>',
'<li id="<%= item.id %>" data-value="<%= item.value %>">', '<li id="<%= item.id %>" data-value="<%= item.value %>">',
'<a tabindex="-1" type="menuitem" style="padding-left: 28px !important;" langval="<%= item.value %>">', '<a class="dropdown-item" tabindex="-1" type="menuitem" style="padding-left: 28px !important;" langval="<%= item.value %>">',
'<i class="icon <% if (item.spellcheck) { %> toolbar__icon btn-ic-docspell spellcheck-lang <% } %>"></i>', '<i class="icon <% if (item.spellcheck) { %> toolbar__icon btn-ic-docspell spellcheck-lang <% } %>"></i>',
'<%= scope.getDisplayValue(item) %>', '<%= scope.getDisplayValue(item) %>',
'</a>', '</a>',

2
apps/common/main/lib/view/ListSettingsDialog.js
View file

@ -339,7 +339,7 @@ define([
}, },
ShowHideElem: function(value) { ShowHideElem: function(value) {
this.numberingControls.toggleClass('hidden', value==0); this.numberingControls.toggleClass('d-none', value==0);
this.cmbNumFormat.setVisible(value==1); this.cmbNumFormat.setVisible(value==1);
this.cmbBulletFormat.setVisible(value==0); this.cmbBulletFormat.setVisible(value==0);
}, },

4
apps/common/main/lib/view/SignDialog.js
View file

@ -105,7 +105,7 @@ define([
'<td><label style="font-weight: bold;margin-bottom: 3px;">' + this.textCertificate + '</label></td>' + '<td><label style="font-weight: bold;margin-bottom: 3px;">' + this.textCertificate + '</label></td>' +
'<td rowspan="2" style="vertical-align: top; padding-left: 30px;"><button id="id-dlg-sign-change" class="btn btn-text-default" style="">' + this.textSelect + '</button></td>', '<td rowspan="2" style="vertical-align: top; padding-left: 30px;"><button id="id-dlg-sign-change" class="btn btn-text-default" style="">' + this.textSelect + '</button></td>',
'</tr>', '</tr>',
'<tr><td><div id="id-dlg-sign-certificate" class="hidden" style="max-width: 212px;overflow: hidden;"></td></tr>', '<tr><td><div id="id-dlg-sign-certificate" class="d-none" style="max-width: 212px;overflow: hidden;"></td></tr>',
'</table>', '</table>',
'</div>' '</div>'
].join(''); ].join('');
@ -318,7 +318,7 @@ define([
var date = certificate.date, var date = certificate.date,
arr_date = (typeof date == 'string') ? date.split(' - ') : ['', '']; arr_date = (typeof date == 'string') ? date.split(' - ') : ['', ''];
this.cntCertificate.html(this.templateCertificate({name: certificate.name, valid: this.textValid.replace('%1', arr_date[0]).replace('%2', arr_date[1])})); this.cntCertificate.html(this.templateCertificate({name: certificate.name, valid: this.textValid.replace('%1', arr_date[0]).replace('%2', arr_date[1])}));
this.cntCertificate.toggleClass('hidden', _.isEmpty(this.certificateId) || this.certificateId<0); this.cntCertificate.toggleClass('d-none', _.isEmpty(this.certificateId) || this.certificateId<0);
this.btnChangeCertificate.setCaption((_.isEmpty(this.certificateId) || this.certificateId<0) ? this.textSelect : this.textChange); this.btnChangeCertificate.setCaption((_.isEmpty(this.certificateId) || this.certificateId<0) ? this.textSelect : this.textChange);
this.btnOk.setDisabled(_.isEmpty(this.certificateId) || this.certificateId<0); this.btnOk.setDisabled(_.isEmpty(this.certificateId) || this.certificateId<0);
}, },

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

@ -115,4 +115,24 @@
} }
} }
} }
&.position-top-left {
transform: none !important;
}
&.position-top-right {
transform: none !important;
right: 0 !important;
left: auto !important;
}
&.position-bottom {
transform: none !important;
top: 100% !important;
}
}
.combo-styles {
.dropdown-menu {
&.position-top-right {
right: 30px !important;
}
}
} }

2
apps/common/main/resources/less/input.less
View file

@ -3,6 +3,8 @@
.box-shadow(none); .box-shadow(none);
color: @gray-deep; color: @gray-deep;
.user-select(text); .user-select(text);
height: 22px;
padding: 1px 3px;
&:focus { &:focus {
border-color: @input-border; border-color: @input-border;

4
apps/documenteditor/main/app/template/ChartSettings.template
View file

@ -24,7 +24,7 @@
</tr> </tr>
<tr> <tr>
<td class="padding-small" colspan=2> <td class="padding-small" colspan=2>
<div id="chart-combo-wrap" style="width: 100%;"></div> <div id="chart-combo-wrap" style="width: 100%; position: relative;"></div>
</td> </td>
</tr> </tr>
<tr> <tr>
@ -44,7 +44,7 @@
</tr> </tr>
<tr> <tr>
<td class="padding-small" colspan=2> <td class="padding-small" colspan=2>
<div class="" id="chart-combo-style" style="width: 100%;"></div> <div class="" id="chart-combo-style" style="width: 100%; position: relative;"></div>
</td> </td>
</tr> </tr>
<tr> <tr>

2
apps/documenteditor/main/app/template/ImageSettings.template
View file

@ -65,7 +65,7 @@
</tr> </tr>
<tr> <tr>
<td class="padding-small" colspan=2> <td class="padding-small" colspan=2>
<div id="image-combo-wrap" style="width: 100%;"></div> <div id="image-combo-wrap" style="width: 100%; position: relative;"></div>
</td> </td>
</tr> </tr>
<tr> <tr>

4
apps/documenteditor/main/app/template/ShapeSettings.template
View file

@ -41,7 +41,7 @@
</div> </div>
<div id="shape-panel-pattern-fill" class="settings-hidden padding-small" style="width: 100%;"> <div id="shape-panel-pattern-fill" class="settings-hidden padding-small" style="width: 100%;">
<label class="input-label" style="margin-top: 3px;"><%= scope.strPattern %></label> <label class="input-label" style="margin-top: 3px;"><%= scope.strPattern %></label>
<div id="shape-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px;"></div> <div id="shape-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px; position: relative;"></div>
<div style="width: 100%; height: 25px; margin-bottom: 8px;"> <div style="width: 100%; height: 25px; margin-bottom: 8px;">
<label class="input-label" style="margin-top: 3px;"><%= scope.strForeground %></label> <label class="input-label" style="margin-top: 3px;"><%= scope.strForeground %></label>
<div id="shape-foreground-color-btn" style="display: inline-block; float:right;"></div> <div id="shape-foreground-color-btn" style="display: inline-block; float:right;"></div>
@ -186,7 +186,7 @@
</tr> </tr>
<tr class="shape-only"> <tr class="shape-only">
<td> <td>
<div id="shape-combo-wrap" style="width: 100%;"></div> <div id="shape-combo-wrap" style="width: 100%; position: relative;"></div>
</td> </td>
</tr> </tr>
<tr class="shape-only"> <tr class="shape-only">

4
apps/documenteditor/main/app/template/TextArtSettings.template
View file

@ -6,7 +6,7 @@
</tr> </tr>
<tr> <tr>
<td class="padding-small"> <td class="padding-small">
<div class="" id="textart-combo-template" style="width: 100%; height: 64px;"></div> <div class="" id="textart-combo-template" style="width: 100%; height: 64px; position: relative;"></div>
</td> </td>
</tr> </tr>
<tr> <tr>
@ -132,7 +132,7 @@
</tr> </tr>
<tr> <tr>
<td class="padding-small"> <td class="padding-small">
<div class="" id="textart-combo-transform" style="width: 100%; height: 42px;"></div> <div class="" id="textart-combo-transform" style="width: 100%; height: 42px; position: relative;"></div>
</td> </td>
</tr> </tr>
<tr class="finish-cell"></tr> <tr class="finish-cell"></tr>

2
apps/documenteditor/main/app/template/Toolbar.template
View file

@ -77,7 +77,7 @@
<span class="btn-slot" id="slot-btn-mailrecepients"></span> <span class="btn-slot" id="slot-btn-mailrecepients"></span>
</div> </div>
</div> </div>
<div class="group" id="slot-field-styles"></div> <div class="group" id="slot-field-styles" style="position: relative;"></div>
</section> </section>
<section class="panel" data-tab="ins"> <section class="panel" data-tab="ins">
<div class="group"> <div class="group">

6
apps/documenteditor/main/app/view/ChartSettings.js
View file

@ -226,7 +226,8 @@ define([
menuMaxHeight: 300, menuMaxHeight: 300,
enableKeyEvents: true, enableKeyEvents: true,
store: new Common.UI.DataViewStore(viewData), store: new Common.UI.DataViewStore(viewData),
cls: 'combo-chart-style' cls: 'combo-chart-style',
menuCls: 'position-top-left'
}); });
this.cmbWrapType.menuPicker.itemTemplate = this.cmbWrapType.fieldPicker.itemTemplate = _.template([ this.cmbWrapType.menuPicker.itemTemplate = this.cmbWrapType.fieldPicker.itemTemplate = _.template([
'<div class="style" id="<%= id %>">', '<div class="style" id="<%= id %>">',
@ -425,7 +426,8 @@ define([
itemHeight: 50, itemHeight: 50,
menuMaxHeight: 270, menuMaxHeight: 270,
enableKeyEvents: true, enableKeyEvents: true,
cls: 'combo-chart-style' cls: 'combo-chart-style',
menuCls: 'position-top-left'
}); });
this.cmbChartStyle.render($('#chart-combo-style')); this.cmbChartStyle.render($('#chart-combo-style'));
this.cmbChartStyle.openButton.menu.cmpEl.css({ this.cmbChartStyle.openButton.menu.cmpEl.css({

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

@ -1236,8 +1236,8 @@ define([
setMode: function(mode) { setMode: function(mode) {
this.mode = mode; this.mode = mode;
this.inputAuthor.setVisible(mode.isEdit); this.inputAuthor.setVisible(mode.isEdit);
this.pnlApply.toggleClass('hidden', !mode.isEdit); this.pnlApply.toggleClass('d-none', !mode.isEdit);
this.tblAuthor.find('.close').toggleClass('hidden', !mode.isEdit); this.tblAuthor.find('.close').toggleClass('d-none', !mode.isEdit);
if (!mode.isEdit) { if (!mode.isEdit) {
this.inputTitle._input.attr('placeholder', ''); this.inputTitle._input.attr('placeholder', '');
this.inputSubject._input.attr('placeholder', ''); this.inputSubject._input.attr('placeholder', '');

3
apps/documenteditor/main/app/view/ImageSettings.js
View file

@ -136,7 +136,8 @@ define([
menuMaxHeight: 300, menuMaxHeight: 300,
enableKeyEvents: true, enableKeyEvents: true,
store: new Common.UI.DataViewStore(viewData), store: new Common.UI.DataViewStore(viewData),
cls: 'combo-chart-style' cls: 'combo-chart-style',
menuCls: 'position-top-left'
}); });
this.cmbWrapType.menuPicker.itemTemplate = this.cmbWrapType.fieldPicker.itemTemplate = _.template([ this.cmbWrapType.menuPicker.itemTemplate = this.cmbWrapType.fieldPicker.itemTemplate = _.template([
'<div class="style" id="<%= id %>">', '<div class="style" id="<%= id %>">',

6
apps/documenteditor/main/app/view/ShapeSettings.js
View file

@ -1217,7 +1217,8 @@ define([
itemHeight: 28, itemHeight: 28,
menuMaxHeight: 300, menuMaxHeight: 300,
enableKeyEvents: true, enableKeyEvents: true,
cls: 'combo-pattern' cls: 'combo-pattern',
menuCls: 'position-top-left'
}); });
this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.itemTemplate = _.template([ this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.itemTemplate = _.template([
'<div class="style" id="<%= id %>">', '<div class="style" id="<%= id %>">',
@ -1536,7 +1537,8 @@ define([
menuMaxHeight: 300, menuMaxHeight: 300,
enableKeyEvents: true, enableKeyEvents: true,
store: new Common.UI.DataViewStore(viewData), store: new Common.UI.DataViewStore(viewData),
cls: 'combo-chart-style' cls: 'combo-chart-style',
menuCls: 'position-top-left'
}); });
this.cmbWrapType.menuPicker.itemTemplate = this.cmbWrapType.fieldPicker.itemTemplate = _.template([ this.cmbWrapType.menuPicker.itemTemplate = this.cmbWrapType.fieldPicker.itemTemplate = _.template([
'<div class="style" id="<%= id %>">', '<div class="style" id="<%= id %>">',

7
apps/documenteditor/main/app/view/TextArtSettings.js
View file

@ -1050,7 +1050,8 @@ define([
itemHeight: 50, itemHeight: 50,
menuMaxHeight: 300, menuMaxHeight: 300,
enableKeyEvents: true, enableKeyEvents: true,
cls: 'combo-textart' cls: 'combo-textart',
menuCls: 'position-top-left'
}); });
this.cmbTransform.render($('#textart-combo-transform')); this.cmbTransform.render($('#textart-combo-transform'));
this.cmbTransform.openButton.menu.cmpEl.css({ this.cmbTransform.openButton.menu.cmpEl.css({
@ -1083,14 +1084,14 @@ define([
menuMaxHeight: 300, menuMaxHeight: 300,
enableKeyEvents: true, enableKeyEvents: true,
showLast: false, showLast: false,
cls: 'combo-textart' cls: 'combo-textart',
menuCls: 'position-top-left'
}); });
this.cmbTextArt.render($('#textart-combo-template')); this.cmbTextArt.render($('#textart-combo-template'));
this.cmbTextArt.openButton.menu.cmpEl.css({ this.cmbTextArt.openButton.menu.cmpEl.css({
'min-width': 178, 'min-width': 178,
'max-width': 178 'max-width': 178
}); });
this.cmbTextArt.on('click', _.bind(this.onTextArtSelect, this));
this.cmbTextArt.openButton.menu.on('show:after', function () { this.cmbTextArt.openButton.menu.on('show:after', function () {
me.cmbTextArt.menuPicker.scroller.update({alwaysVisibleY: true}); me.cmbTextArt.menuPicker.scroller.update({alwaysVisibleY: true});
}); });

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

@ -1119,6 +1119,8 @@ define([
this.listStyles = new Common.UI.ComboDataView({ this.listStyles = new Common.UI.ComboDataView({
cls: 'combo-styles', cls: 'combo-styles',
menuCls: 'position-top-right',
style: 'position: relative;',
itemWidth: 104, itemWidth: 104,
itemHeight: 38, itemHeight: 38,
// hint : this.tipParagraphStyle, // hint : this.tipParagraphStyle,

2
apps/presentationeditor/main/app/template/ChartSettings.template
View file

@ -36,7 +36,7 @@
</tr> </tr>
<tr> <tr>
<td class="padding-small"> <td class="padding-small">
<div id="chart-combo-style" style=""></div> <div id="chart-combo-style" style="position: relative;"></div>
</td> </td>
</tr> </tr>
<tr> <tr>

2
apps/presentationeditor/main/app/template/ShapeSettings.template
View file

@ -41,7 +41,7 @@
</div> </div>
<div id="shape-panel-pattern-fill" class="settings-hidden padding-small" style="width: 100%;"> <div id="shape-panel-pattern-fill" class="settings-hidden padding-small" style="width: 100%;">
<label class="input-label" style="margin-top: 3px;"><%= scope.strPattern %></label> <label class="input-label" style="margin-top: 3px;"><%= scope.strPattern %></label>
<div id="shape-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px;"></div> <div id="shape-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px; position: relative;"></div>
<div style="width: 100%; height: 25px; margin-bottom: 8px;"> <div style="width: 100%; height: 25px; margin-bottom: 8px;">
<label class="input-label" style="margin-top: 3px;"><%= scope.strForeground %></label> <label class="input-label" style="margin-top: 3px;"><%= scope.strForeground %></label>
<div id="shape-foreground-color-btn" style="display: inline-block; float:right;"></div> <div id="shape-foreground-color-btn" style="display: inline-block; float:right;"></div>

2
apps/presentationeditor/main/app/template/SlideSettings.template
View file

@ -41,7 +41,7 @@
</div> </div>
<div id="slide-panel-pattern-fill" class="settings-hidden padding-small" style="width: 100%;"> <div id="slide-panel-pattern-fill" class="settings-hidden padding-small" style="width: 100%;">
<label class="input-label" style="margin-top: 3px;"><%= scope.strPattern %></label> <label class="input-label" style="margin-top: 3px;"><%= scope.strPattern %></label>
<div id="slide-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px;"></div> <div id="slide-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px; position: relative;"></div>
<div style="width: 100%; height: 25px; margin-bottom: 8px;"> <div style="width: 100%; height: 25px; margin-bottom: 8px;">
<label class="input-label" style="margin-top: 3px;"><%= scope.strForeground %></label> <label class="input-label" style="margin-top: 3px;"><%= scope.strForeground %></label>
<div id="slide-foreground-color-btn" style="display: inline-block; float:right;"></div> <div id="slide-foreground-color-btn" style="display: inline-block; float:right;"></div>

6
apps/presentationeditor/main/app/template/TextArtSettings.template
View file

@ -6,7 +6,7 @@
</tr> </tr>
<tr> <tr>
<td class="padding-small"> <td class="padding-small">
<div class="" id="textart-combo-template" style="width: 100%; height: 64px;"></div> <div class="" id="textart-combo-template" style="width: 100%; height: 64px; position: relative;"></div>
</td> </td>
</tr> </tr>
<tr> <tr>
@ -59,7 +59,7 @@
</div> </div>
<div id="textart-panel-pattern-fill" class="settings-hidden padding-small" style="width: 100%;"> <div id="textart-panel-pattern-fill" class="settings-hidden padding-small" style="width: 100%;">
<label class="input-label" style="margin-top: 3px;"><%= scope.strPattern %></label> <label class="input-label" style="margin-top: 3px;"><%= scope.strPattern %></label>
<div id="textart-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px;"></div> <div id="textart-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px; position: relative;"></div>
<div style="width: 100%; height: 25px; margin-bottom: 8px;"> <div style="width: 100%; height: 25px; margin-bottom: 8px;">
<label class="input-label" style="margin-top: 3px;"><%= scope.strForeground %></label> <label class="input-label" style="margin-top: 3px;"><%= scope.strForeground %></label>
<div id="textart-foreground-color-btn" style="display: inline-block; float:right;"></div> <div id="textart-foreground-color-btn" style="display: inline-block; float:right;"></div>
@ -172,7 +172,7 @@
</tr> </tr>
<tr> <tr>
<td class="padding-small"> <td class="padding-small">
<div class="" id="textart-combo-transform" style="width: 100%; height: 42px;"></div> <div class="" id="textart-combo-transform" style="width: 100%; height: 42px; position: relative;"></div>
</td> </td>
</tr> </tr>
<tr class="finish-cell"></tr> <tr class="finish-cell"></tr>

2
apps/presentationeditor/main/app/template/Toolbar.template
View file

@ -96,7 +96,7 @@
<span class="btn-slot split" id="slot-btn-slidesize"></span> <span class="btn-slot split" id="slot-btn-slidesize"></span>
</div> </div>
</div> </div>
<div class="group flex" id="slot-field-styles" style="width: 100%; min-width: 148px;" data-group-width="100%"></div> <div class="group flex" id="slot-field-styles" style="width: 100%; min-width: 148px; position: relative;" data-group-width="100%"></div>
</section> </section>
<section class="panel" data-tab="ins"> <section class="panel" data-tab="ins">
<div class="group"> <div class="group">

3
apps/presentationeditor/main/app/view/ChartSettings.js
View file

@ -357,7 +357,8 @@ define([
itemHeight: 50, itemHeight: 50,
menuMaxHeight: 270, menuMaxHeight: 270,
enableKeyEvents: true, enableKeyEvents: true,
cls: 'combo-chart-style' cls: 'combo-chart-style',
menuCls: 'position-top-left'
}); });
this.cmbChartStyle.render($('#chart-combo-style')); this.cmbChartStyle.render($('#chart-combo-style'));
this.cmbChartStyle.openButton.menu.cmpEl.css({ this.cmbChartStyle.openButton.menu.cmpEl.css({

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

@ -1131,7 +1131,8 @@ define([
itemHeight: 28, itemHeight: 28,
menuMaxHeight: 300, menuMaxHeight: 300,
enableKeyEvents: true, enableKeyEvents: true,
cls: 'combo-pattern' cls: 'combo-pattern',
menuCls: 'position-top-left'
}); });
this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.itemTemplate = _.template([ this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.itemTemplate = _.template([
'<div class="style" id="<%= id %>">', '<div class="style" id="<%= id %>">',

3
apps/presentationeditor/main/app/view/SlideSettings.js
View file

@ -705,7 +705,8 @@ define([
itemHeight: 28, itemHeight: 28,
menuMaxHeight: 300, menuMaxHeight: 300,
enableKeyEvents: true, enableKeyEvents: true,
cls: 'combo-pattern' cls: 'combo-pattern',
menuCls: 'position-top-left'
}); });
this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.itemTemplate = _.template([ this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.itemTemplate = _.template([
'<div class="style" id="<%= id %>">', '<div class="style" id="<%= id %>">',

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

@ -124,7 +124,7 @@ define([
this.btnZoomUp = new Common.UI.Button({ this.btnZoomUp = new Common.UI.Button({
el: $('#btn-zoom-up',this.el), el: $('#btn-zoom-up',this.el),
hint: this.tipZoomIn+Common.Utils.String.platformKey('Ctrl++'), hint: this.tipZoomIn+Common.Utils.String.platformKey('Ctrl++'),
hintAnchor: 'top-right' hintAnchor: 'top'
}); });
this.cntZoom = new Common.UI.Button({ this.cntZoom = new Common.UI.Button({

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

@ -1093,7 +1093,8 @@ define([
itemHeight: 28, itemHeight: 28,
menuMaxHeight: 300, menuMaxHeight: 300,
enableKeyEvents: true, enableKeyEvents: true,
cls: 'combo-pattern' cls: 'combo-pattern',
menuCls: 'position-top-left'
}); });
this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.itemTemplate = _.template([ this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.itemTemplate = _.template([
'<div class="style" id="<%= id %>">', '<div class="style" id="<%= id %>">',
@ -1357,7 +1358,8 @@ define([
itemHeight: 50, itemHeight: 50,
menuMaxHeight: 300, menuMaxHeight: 300,
enableKeyEvents: true, enableKeyEvents: true,
cls: 'combo-textart' cls: 'combo-textart',
menuCls: 'position-top-left'
}); });
this.cmbTransform.render($('#textart-combo-transform')); this.cmbTransform.render($('#textart-combo-transform'));
this.cmbTransform.openButton.menu.cmpEl.css({ this.cmbTransform.openButton.menu.cmpEl.css({
@ -1493,7 +1495,8 @@ define([
menuMaxHeight: 300, menuMaxHeight: 300,
enableKeyEvents: true, enableKeyEvents: true,
showLast: false, showLast: false,
cls: 'combo-textart' cls: 'combo-textart',
menuCls: 'position-top-left'
}); });
this.cmbTextArt.render($('#textart-combo-template')); this.cmbTextArt.render($('#textart-combo-template'));
this.cmbTextArt.openButton.menu.cmpEl.css({ this.cmbTextArt.openButton.menu.cmpEl.css({

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

@ -797,6 +797,8 @@ define([
me.listTheme = new Common.UI.ComboDataView({ me.listTheme = new Common.UI.ComboDataView({
cls: 'combo-styles', cls: 'combo-styles',
menuCls: 'position-top-right',
style: 'position: relative;',
itemWidth: 85, itemWidth: 85,
enableKeyEvents: true, enableKeyEvents: true,
itemHeight: 38, itemHeight: 38,

7
apps/presentationeditor/main/app_dev.js
View file

@ -48,6 +48,7 @@ require.config({
jquery : '../vendor/jquery/jquery', jquery : '../vendor/jquery/jquery',
underscore : '../vendor/underscore/underscore', underscore : '../vendor/underscore/underscore',
backbone : '../vendor/backbone/backbone', backbone : '../vendor/backbone/backbone',
popper : '../vendor/popper/popper',
bootstrap : '../vendor/bootstrap/dist/js/bootstrap', bootstrap : '../vendor/bootstrap/dist/js/bootstrap',
text : '../vendor/requirejs-text/text', text : '../vendor/requirejs-text/text',
perfectscrollbar: 'common/main/lib/mods/perfect-scrollbar', perfectscrollbar: 'common/main/lib/mods/perfect-scrollbar',
@ -78,7 +79,8 @@ require.config({
}, },
bootstrap: { bootstrap: {
deps: [ deps: [
'jquery' 'jquery',
'popper'
] ]
}, },
perfectscrollbar: { perfectscrollbar: {
@ -121,7 +123,8 @@ require([
'locale', 'locale',
'sockjs', 'sockjs',
'xregexp', 'xregexp',
'underscore' 'underscore',
'popper'
], function (Backbone, Bootstrap, Core) { ], function (Backbone, Bootstrap, Core) {
Backbone.history.start(); Backbone.history.start();

29
apps/presentationeditor/main/resources/less/app.less
View file

@ -8,6 +8,8 @@
@import "../../../../common/main/resources/less/asc-mixins.less"; @import "../../../../common/main/resources/less/asc-mixins.less";
// Bootstrap overwrite // Bootstrap overwrite
@import "../../../../../vendor/bootstrap/less/_functions.less";
@import "../../../../../vendor/bootstrap/less/_variables.less";
@import "../../../../common/main/resources/less/variables.less"; @import "../../../../common/main/resources/less/variables.less";
// //
@ -16,27 +18,28 @@
// Core variables and mixins // Core variables and mixins
//@import "../../../../vendor/bootstrap/less/variables.less"; //@import "../../../../vendor/bootstrap/less/variables.less";
@import "../../../../../vendor/bootstrap/less/mixins.less"; @import "../../../../../vendor/bootstrap/less/_mixins.less";
@import "../../../../../vendor/bootstrap/less/_root";
// Reset // Reset
@import "../../../../../vendor/bootstrap/less/normalize.less"; @import "../../../../../vendor/bootstrap/less/_reboot.less";
//@import "print.less"; //@import "print.less";
// Core CSS // Core CSS
@import "../../../../../vendor/bootstrap/less/scaffolding.less"; //@import "../../../../../vendor/bootstrap/less/scaffolding.less";
@import "../../../../../vendor/bootstrap/less/type.less"; @import "../../../../../vendor/bootstrap/less/_type.less";
//@import "code.less"; //@import "code.less";
//@import "grid.less"; //@import "grid.less";
//@import "tables.less"; //@import "tables.less";
@import "../../../../../vendor/bootstrap/less/forms.less"; @import "../../../../../vendor/bootstrap/less/_forms.less";
@import "../../../../../vendor/bootstrap/less/buttons.less"; @import "../../../../../vendor/bootstrap/less/_buttons.less";
// Components // Components
@import "../../../../../vendor/bootstrap/less/component-animations.less"; @import "../../../../../vendor/bootstrap/less/_transitions.less";
//@import "glyphicons.less"; //@import "glyphicons.less";
@import "../../../../../vendor/bootstrap/less/dropdowns.less"; @import "../../../../../vendor/bootstrap/less/_dropdown.less";
@import "../../../../../vendor/bootstrap/less/button-groups.less"; @import "../../../../../vendor/bootstrap/less/_button-group.less";
@import "../../../../../vendor/bootstrap/less/input-groups.less"; @import "../../../../../vendor/bootstrap/less/_input-group.less";
//@import "navs.less"; //@import "navs.less";
//@import "navbar.less"; //@import "navbar.less";
//@import "breadcrumbs.less"; //@import "breadcrumbs.less";
@ -56,13 +59,13 @@
// Components w/ JavaScript // Components w/ JavaScript
//@import "modals.less"; //@import "modals.less";
@import "../../../../../vendor/bootstrap/less/tooltip.less"; @import "../../../../../vendor/bootstrap/less/_tooltip.less";
//@import "popovers.less"; //@import "popovers.less";
//@import "carousel.less"; //@import "carousel.less";
// Utility classes // Utility classes
@import "../../../../../vendor/bootstrap/less/utilities.less"; @import "../../../../../vendor/bootstrap/less/_utilities.less";
@import "../../../../../vendor/bootstrap/less/responsive-utilities.less"; //@import "../../../../../vendor/bootstrap/less/responsive-utilities.less";
// //
// Perfect scrollbar // Perfect scrollbar

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

@ -132,7 +132,7 @@
} }
&.devider { &.devider {
.dropdown-menu .dropdown-divider; //.dropdown-menu .dropdown-divider;
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
} }

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

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

6
apps/presentationeditor/main/resources/less/statusbar.less
View file

@ -79,6 +79,12 @@
color: #000; color: #000;
margin-left: 6px; margin-left: 6px;
.caret {
display: inline-block;
margin-left: 2px;
vertical-align: middle;
}
.caret.up { .caret.up {
background-position: @arrow-up-small-offset-x @arrow-up-small-offset-y; background-position: @arrow-up-small-offset-x @arrow-up-small-offset-y;

2
apps/spreadsheeteditor/main/app/template/CellSettings.template
View file

@ -16,7 +16,7 @@
</div> </div>
<div id="cell-panel-pattern-fill" class="settings-hidden padding-small" style="width: 100%;"> <div id="cell-panel-pattern-fill" class="settings-hidden padding-small" style="width: 100%;">
<label class="input-label" style="margin-top: 3px;"><%= scope.textPattern %></label> <label class="input-label" style="margin-top: 3px;"><%= scope.textPattern %></label>
<div id="cell-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px;"></div> <div id="cell-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px; position: relative;"></div>
<div style="width: 100%; height: 25px; margin-bottom: 8px;"> <div style="width: 100%; height: 25px; margin-bottom: 8px;">
<label class="input-label" style="margin-top: 3px;"><%= scope.textForeground %></label> <label class="input-label" style="margin-top: 3px;"><%= scope.textForeground %></label>
<div id="cell-foreground-color-btn" style="display: inline-block; float:right;"></div> <div id="cell-foreground-color-btn" style="display: inline-block; float:right;"></div>

4
apps/spreadsheeteditor/main/app/template/ChartSettings.template
View file

@ -33,7 +33,7 @@
<tr> <tr>
<td class="padding-small"> <td class="padding-small">
<label class="header" style=""><%= scope.textStyle %></label> <label class="header" style=""><%= scope.textStyle %></label>
<div class="" id="chart-combo-style" style="width: 100%;"></div> <div class="" id="chart-combo-style" style="width: 100%; position: relative;"></div>
</td> </td>
</tr> </tr>
<tr> <tr>
@ -72,7 +72,7 @@
<tr> <tr>
<td class="padding-small"> <td class="padding-small">
<label class="input-label" style=""><%= scope.strTemplate %></label> <label class="input-label" style=""><%= scope.strTemplate %></label>
<div class="" id="spark-combo-style" style="width: 100%;"></div> <div class="" id="spark-combo-style" style="width: 100%; position: relative;"></div>
</td> </td>
</tr> </tr>
<tr> <tr>

2
apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template
View file

@ -320,7 +320,7 @@
</td> </td>
<td class="padding-large"> <td class="padding-large">
<label class="header"><%= scope.textStyle %></label> <label class="header"><%= scope.textStyle %></label>
<div id="spark-dlg-combo-style" style="width: 190px;"></div> <div id="spark-dlg-combo-style" style="width: 190px; position: relative;"></div>
</td> </td>
</tr> </tr>
</table> </table>

2
apps/spreadsheeteditor/main/app/template/ImageSettings.template
View file

@ -67,7 +67,7 @@
</tr> </tr>
<tr> <tr>
<td class="padding-small" colspan=2> <td class="padding-small" colspan=2>
<button type="button" class="btn btn-text-default hidden" id="image-button-edit-object" style="width:100%;"><%= scope.textEditObject %></button> <button type="button" class="btn btn-text-default d-none" id="image-button-edit-object" style="width:100%;"><%= scope.textEditObject %></button>
</td> </td>
</tr> </tr>
<tr> <tr>

2
apps/spreadsheeteditor/main/app/template/ShapeSettings.template
View file

@ -41,7 +41,7 @@
</div> </div>
<div id="shape-panel-pattern-fill" class="settings-hidden padding-small" style="width: 100%;"> <div id="shape-panel-pattern-fill" class="settings-hidden padding-small" style="width: 100%;">
<label class="input-label" style="margin-top: 3px;"><%= scope.strPattern %></label> <label class="input-label" style="margin-top: 3px;"><%= scope.strPattern %></label>
<div id="shape-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px;"></div> <div id="shape-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px; position: relative;"></div>
<div style="width: 100%; height: 25px; margin-bottom: 8px;"> <div style="width: 100%; height: 25px; margin-bottom: 8px;">
<label class="input-label" style="margin-top: 3px;"><%= scope.strForeground %></label> <label class="input-label" style="margin-top: 3px;"><%= scope.strForeground %></label>
<div id="shape-foreground-color-btn" style="display: inline-block; float:right;"></div> <div id="shape-foreground-color-btn" style="display: inline-block; float:right;"></div>

2
apps/spreadsheeteditor/main/app/template/SlicerSettings.template
View file

@ -72,7 +72,7 @@
</tr> </tr>
<tr> <tr>
<td class="padding-small" colspan=2> <td class="padding-small" colspan=2>
<div id="slicer-btn-style" style="width: 100%;"></div> <div id="slicer-btn-style" style="width: 100%; position: relative;"></div>
</td> </td>
</tr> </tr>
<tr> <tr>

4
apps/spreadsheeteditor/main/app/template/TableSettings.template
View file

@ -51,12 +51,12 @@
<div class="separator horizontal"></div> <div class="separator horizontal"></div>
</td> </td>
</tr> </tr>
<tr class="hidden"> <tr class="d-none">
<td colspan=2> <td colspan=2>
<label class="header"><%= scope.textTableName %></label> <label class="header"><%= scope.textTableName %></label>
</td> </td>
</tr> </tr>
<tr class="hidden"> <tr class="d-none">
<td colspan=2 class="padding-small"> <td colspan=2 class="padding-small">
<div id="table-txt-name" class="input-row" style="width: 100%;"></div> <div id="table-txt-name" class="input-row" style="width: 100%;"></div>
</td> </td>

6
apps/spreadsheeteditor/main/app/template/TextArtSettings.template
View file

@ -6,7 +6,7 @@
</tr> </tr>
<tr> <tr>
<td class="padding-small"> <td class="padding-small">
<div class="" id="textart-combo-template" style="width: 100%; height: 64px;"></div> <div class="" id="textart-combo-template" style="width: 100%; height: 64px; position: relative;"></div>
</td> </td>
</tr> </tr>
<tr> <tr>
@ -59,7 +59,7 @@
</div> </div>
<div id="textart-panel-pattern-fill" class="settings-hidden padding-small" style="width: 100%;"> <div id="textart-panel-pattern-fill" class="settings-hidden padding-small" style="width: 100%;">
<label class="input-label" style="margin-top: 3px;"><%= scope.strPattern %></label> <label class="input-label" style="margin-top: 3px;"><%= scope.strPattern %></label>
<div id="textart-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px;"></div> <div id="textart-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px; position: relative;"></div>
<div style="width: 100%; height: 25px; margin-bottom: 8px;"> <div style="width: 100%; height: 25px; margin-bottom: 8px;">
<label class="input-label" style="margin-top: 3px;"><%= scope.strForeground %></label> <label class="input-label" style="margin-top: 3px;"><%= scope.strForeground %></label>
<div id="textart-foreground-color-btn" style="display: inline-block; float:right;"></div> <div id="textart-foreground-color-btn" style="display: inline-block; float:right;"></div>
@ -172,7 +172,7 @@
</tr> </tr>
<tr> <tr>
<td class="padding-small"> <td class="padding-small">
<div class="" id="textart-combo-transform" style="width: 100%; height: 42px;"></div> <div class="" id="textart-combo-transform" style="width: 100%; height: 42px; position: relative;"></div>
</td> </td>
</tr> </tr>
<tr class="finish-cell"></tr> <tr class="finish-cell"></tr>

2
apps/spreadsheeteditor/main/app/template/Toolbar.template
View file

@ -116,7 +116,7 @@
<span class="btn-slot split" id="slot-btn-table-tpl"></span> <span class="btn-slot split" id="slot-btn-table-tpl"></span>
</div> </div>
</div> </div>
<div class="group" id="slot-field-styles" style="width: 100%; min-width: 160px;"></div> <div class="group" id="slot-field-styles" style="width: 100%; min-width: 160px; position: relative;"></div>
</section> </section>
<section class="panel" data-tab="ins"> <section class="panel" data-tab="ins">
<div class="group"> <div class="group">

6
apps/spreadsheeteditor/main/app/view/AutoFilterDialog.js
View file

@ -588,7 +588,7 @@ define([
this.cmbCondition1.on('selected', _.bind(function(combo, record) { this.cmbCondition1.on('selected', _.bind(function(combo, record) {
var isBetween = record.value == -2 || record.value == -3; var isBetween = record.value == -2 || record.value == -3;
this.inputValue2.setVisible(isBetween); this.inputValue2.setVisible(isBetween);
this.lblAnd.toggleClass('hidden', !isBetween); this.lblAnd.toggleClass('d-none', !isBetween);
this.inputValue.$el.width(isBetween ? 100 : 225); this.inputValue.$el.width(isBetween ? 100 : 225);
var me = this; var me = this;
_.defer(function () { _.defer(function () {
@ -707,7 +707,7 @@ define([
this.inputValue.setValue(null === customFilters[0].asc_getVal() ? '' : customFilters[0].asc_getVal()); this.inputValue.setValue(null === customFilters[0].asc_getVal() ? '' : customFilters[0].asc_getVal());
this.inputValue.$el.width((value==-2 || value==-3) ? 100 : 225); this.inputValue.$el.width((value==-2 || value==-3) ? 100 : 225);
this.lblAnd.toggleClass('hidden', !(value==-2 || value==-3)); this.lblAnd.toggleClass('d-none', !(value==-2 || value==-3));
this.inputValue2.setVisible(value==-2 || value==-3); this.inputValue2.setVisible(value==-2 || value==-3);
this.inputValue2.setValue((customFilters.length>1) ? (null === customFilters[1].asc_getVal() ? '' : customFilters[1].asc_getVal()) : ''); this.inputValue2.setValue((customFilters.length>1) ? (null === customFilters[1].asc_getVal() ? '' : customFilters[1].asc_getVal()) : '');
} }
@ -1832,7 +1832,7 @@ define([
} }
if (isPivot && pivotObj.asc_getIsPageFilter()) { if (isPivot && pivotObj.asc_getIsPageFilter()) {
this.setResizable(true, [this.initConfig.minwidth - this.menuPanelWidth, this.initConfig.minheight]); this.setResizable(true, [this.initConfig.minwidth - this.menuPanelWidth, this.initConfig.minheight]);
menuPanel.addClass('hidden'); menuPanel.addClass('d-none');
width -= this.menuPanelWidth; width -= this.menuPanelWidth;
this.menuPanelWidth = 0; this.menuPanelWidth = 0;
} }

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

@ -302,7 +302,8 @@ define([
itemHeight: 28, itemHeight: 28,
menuMaxHeight: 300, menuMaxHeight: 300,
enableKeyEvents: true, enableKeyEvents: true,
cls: 'combo-pattern' cls: 'combo-pattern',
menuCls: 'position-top-left'
}); });
this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.itemTemplate = _.template([ this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.itemTemplate = _.template([
'<div class="style" id="<%= id %>">', '<div class="style" id="<%= id %>">',

6
apps/spreadsheeteditor/main/app/view/ChartSettings.js
View file

@ -980,7 +980,8 @@ define([
itemHeight: 50, itemHeight: 50,
menuMaxHeight: 270, menuMaxHeight: 270,
enableKeyEvents: true, enableKeyEvents: true,
cls: 'combo-chart-style' cls: 'combo-chart-style',
menuCls: 'position-top-left'
}); });
this.cmbChartStyle.render($('#chart-combo-style')); this.cmbChartStyle.render($('#chart-combo-style'));
this.cmbChartStyle.openButton.menu.cmpEl.css({ this.cmbChartStyle.openButton.menu.cmpEl.css({
@ -1032,7 +1033,8 @@ define([
itemHeight: 50, itemHeight: 50,
menuMaxHeight: 272, menuMaxHeight: 272,
enableKeyEvents: true, enableKeyEvents: true,
cls: 'combo-spark-style' cls: 'combo-spark-style',
menuCls: 'position-top-left'
}); });
this.cmbSparkStyle.render($('#spark-combo-style')); this.cmbSparkStyle.render($('#spark-combo-style'));
this.cmbSparkStyle.openButton.menu.cmpEl.css({ this.cmbSparkStyle.openButton.menu.cmpEl.css({

1
apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js
View file

@ -763,6 +763,7 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
menuMaxHeight: 272, menuMaxHeight: 272,
enableKeyEvents: true, enableKeyEvents: true,
cls: 'combo-spark-style', cls: 'combo-spark-style',
menuCls: 'position-top-left',
minWidth: 190 minWidth: 190
}); });
this.cmbSparkStyle.render($('#spark-dlg-combo-style')); this.cmbSparkStyle.render($('#spark-dlg-combo-style'));

1
apps/spreadsheeteditor/main/app/view/PivotTable.js
View file

@ -245,6 +245,7 @@ define([
this.pivotStyles = new Common.UI.ComboDataView({ this.pivotStyles = new Common.UI.ComboDataView({
cls : 'combo-pivot-template', cls : 'combo-pivot-template',
menuCls : 'position-top-left',
enableKeyEvents : true, enableKeyEvents : true,
itemWidth : 61, itemWidth : 61,
itemHeight : 49, itemHeight : 49,

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

@ -1157,7 +1157,8 @@ define([
itemHeight: 28, itemHeight: 28,
menuMaxHeight: 300, menuMaxHeight: 300,
enableKeyEvents: true, enableKeyEvents: true,
cls: 'combo-pattern' cls: 'combo-pattern',
menuCls: 'position-top-left'
}); });
this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.itemTemplate = _.template([ this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.itemTemplate = _.template([
'<div class="style" id="<%= id %>">', '<div class="style" id="<%= id %>">',

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

@ -639,7 +639,8 @@ define([
itemHeight: 49, itemHeight: 49,
menuMaxHeight: 235, menuMaxHeight: 235,
enableKeyEvents: true, enableKeyEvents: true,
cls: 'combo-slicer-style' cls: 'combo-slicer-style',
menuCls: 'position-top-left'
}); });
this.btnSlicerStyle.render($('#slicer-btn-style')); this.btnSlicerStyle.render($('#slicer-btn-style'));
this.btnSlicerStyle.openButton.menu.cmpEl.css({ this.btnSlicerStyle.openButton.menu.cmpEl.css({

6
apps/spreadsheeteditor/main/app/view/TableOptionsDialog.js
View file

@ -65,7 +65,7 @@ define([
this.template = [ this.template = [
'<div class="box">', '<div class="box">',
'<div id="id-dlg-tableoptions-range" class="input-row" style="margin-bottom: 5px;"></div>', '<div id="id-dlg-tableoptions-range" class="input-row" style="margin-bottom: 5px;"></div>',
'<div class="input-row hidden" id="id-dlg-tableoptions-title" style="margin-top: 5px;"></div>', '<div class="input-row d-none" id="id-dlg-tableoptions-title" style="margin-top: 5px;"></div>',
'<label class="" id="id-dlg-tableoptions-lbl" style="margin-top: 5px;">' + this.txtNote + '</label>', '<label class="" id="id-dlg-tableoptions-lbl" style="margin-top: 5px;">' + this.txtNote + '</label>',
'</div>' '</div>'
].join(''); ].join('');
@ -120,8 +120,8 @@ define([
me.inputRange.setValue(settings.range); me.inputRange.setValue(settings.range);
me.api.asc_setSelectionDialogMode(Asc.c_oAscSelectionDialogType.FormatTable, settings.range); me.api.asc_setSelectionDialogMode(Asc.c_oAscSelectionDialogType.FormatTable, settings.range);
} else { } else {
me.cbTitle.$el && me.cbTitle.$el.removeClass('hidden'); me.cbTitle.$el && me.cbTitle.$el.removeClass('d-none');
me.lblNote.addClass('hidden'); me.lblNote.addClass('d-none');
me.setHeight(152); me.setHeight(152);
var options = me.api.asc_getAddFormatTableOptions(); var options = me.api.asc_getAddFormatTableOptions();
me.inputRange.setValue(options.asc_getRange()); me.inputRange.setValue(options.asc_getRange());

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

@ -339,7 +339,7 @@ define([
this.btnPivot.on('click', _.bind(this.onInsertPivotClick, this)); this.btnPivot.on('click', _.bind(this.onInsertPivotClick, this));
this.lockedControls.push(this.btnPivot); this.lockedControls.push(this.btnPivot);
this.$el.find('.pivot-only').toggleClass('hidden', !this.mode.canFeaturePivot); this.$el.find('.pivot-only').toggleClass('d-none', !this.mode.canFeaturePivot);
$(this.el).on('click', '#table-advanced-link', _.bind(this.openAdvancedSettings, this)); $(this.el).on('click', '#table-advanced-link', _.bind(this.openAdvancedSettings, this));

9
apps/spreadsheeteditor/main/app/view/TextArtSettings.js
View file

@ -1097,7 +1097,8 @@ define([
itemHeight: 28, itemHeight: 28,
menuMaxHeight: 300, menuMaxHeight: 300,
enableKeyEvents: true, enableKeyEvents: true,
cls: 'combo-pattern' cls: 'combo-pattern',
menuCls: 'position-top-left'
}); });
this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.itemTemplate = _.template([ this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.itemTemplate = _.template([
'<div class="style" id="<%= id %>">', '<div class="style" id="<%= id %>">',
@ -1361,7 +1362,8 @@ define([
itemHeight: 50, itemHeight: 50,
menuMaxHeight: 300, menuMaxHeight: 300,
enableKeyEvents: true, enableKeyEvents: true,
cls: 'combo-textart' cls: 'combo-textart',
menuCls: 'position-top-left'
}); });
this.cmbTransform.render($('#textart-combo-transform')); this.cmbTransform.render($('#textart-combo-transform'));
this.cmbTransform.openButton.menu.cmpEl.css({ this.cmbTransform.openButton.menu.cmpEl.css({
@ -1498,7 +1500,8 @@ define([
menuMaxHeight: 300, menuMaxHeight: 300,
enableKeyEvents: true, enableKeyEvents: true,
showLast: false, showLast: false,
cls: 'combo-textart' cls: 'combo-textart',
menuCls: 'position-top-left'
}); });
this.cmbTextArt.render($('#textart-combo-template')); this.cmbTextArt.render($('#textart-combo-template'));
this.cmbTextArt.openButton.menu.cmpEl.css({ this.cmbTextArt.openButton.menu.cmpEl.css({

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

@ -250,7 +250,7 @@ define([
var formatTemplate = var formatTemplate =
_.template([ _.template([
'<% _.each(items, function(item) { %>', '<% _.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">',
'<div style="position: relative;"><div style="position: absolute; left: 0; width: 100px;"><%= scope.getDisplayValue(item) %></div>', '<div style="position: relative;"><div style="position: absolute; left: 0; width: 100px;"><%= scope.getDisplayValue(item) %></div>',
'<div style="display: inline-block; width: 100%; max-width: 300px; overflow: hidden; text-overflow: ellipsis; text-align: right; vertical-align: bottom; padding-left: 100px; color: silver;white-space: nowrap;"><%= item.exampleval ? item.exampleval : "" %></div>', '<div style="display: inline-block; width: 100%; max-width: 300px; overflow: hidden; text-overflow: ellipsis; text-align: right; vertical-align: bottom; padding-left: 100px; color: silver;white-space: nowrap;"><%= item.exampleval ? item.exampleval : "" %></div>',
'</div></a></li>', '</div></a></li>',
@ -776,6 +776,8 @@ define([
me.listStyles = new Common.UI.ComboDataView({ me.listStyles = new Common.UI.ComboDataView({
cls : 'combo-styles', cls : 'combo-styles',
style : 'position: relative;',
menuCls : 'position-top-right',
enableKeyEvents : true, enableKeyEvents : true,
itemWidth : 112, itemWidth : 112,
itemHeight : 38, itemHeight : 38,
@ -814,12 +816,12 @@ define([
var formatTemplate = var formatTemplate =
_.template([ _.template([
'<% _.each(items, function(item) { %>', '<% _.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">',
'<div style="position: relative;"><div style="position: absolute; left: 0; width: 100px;"><%= scope.getDisplayValue(item) %></div>', '<div style="position: relative;"><div style="position: absolute; left: 0; width: 100px;"><%= scope.getDisplayValue(item) %></div>',
'<div style="display: inline-block; width: 100%; max-width: 300px; overflow: hidden; text-overflow: ellipsis; text-align: right; vertical-align: bottom; padding-left: 100px; color: silver;white-space: nowrap;"><%= item.exampleval ? item.exampleval : "" %></div>', '<div style="display: inline-block; width: 100%; max-width: 300px; overflow: hidden; text-overflow: ellipsis; text-align: right; vertical-align: bottom; padding-left: 100px; color: silver;white-space: nowrap;"><%= item.exampleval ? item.exampleval : "" %></div>',
'</div></a></li>', '</div></a></li>',
'<% }); %>', '<% }); %>',
'<li class="divider">', '<li class="dropdown-divider">',
'<li id="id-toolbar-mnu-item-more-formats" data-value="-1"><a tabindex="-1" type="menuitem">' + me.textMoreFormats + '</a></li>' '<li id="id-toolbar-mnu-item-more-formats" data-value="-1"><a tabindex="-1" type="menuitem">' + me.textMoreFormats + '</a></li>'
].join('')); ].join(''));

7
apps/spreadsheeteditor/main/app_dev.js
View file

@ -48,6 +48,7 @@ require.config({
jquery : '../vendor/jquery/jquery', jquery : '../vendor/jquery/jquery',
underscore : '../vendor/underscore/underscore', underscore : '../vendor/underscore/underscore',
backbone : '../vendor/backbone/backbone', backbone : '../vendor/backbone/backbone',
popper : '../vendor/popper/popper',
bootstrap : '../vendor/bootstrap/dist/js/bootstrap', bootstrap : '../vendor/bootstrap/dist/js/bootstrap',
text : '../vendor/requirejs-text/text', text : '../vendor/requirejs-text/text',
perfectscrollbar: 'common/main/lib/mods/perfect-scrollbar', perfectscrollbar: 'common/main/lib/mods/perfect-scrollbar',
@ -80,7 +81,8 @@ require.config({
}, },
bootstrap: { bootstrap: {
deps: [ deps: [
'jquery' 'jquery',
'popper'
] ]
}, },
perfectscrollbar: { perfectscrollbar: {
@ -124,7 +126,8 @@ require([
'jszip', 'jszip',
'jsziputils', 'jsziputils',
'sockjs', 'sockjs',
'underscore' 'underscore',
'popper'
], function (Backbone, Bootstrap, Core) { ], function (Backbone, Bootstrap, Core) {
Backbone.history.start(); Backbone.history.start();

31
apps/spreadsheeteditor/main/resources/less/app.less
View file

@ -8,6 +8,8 @@
@import "../../../../common/main/resources/less/asc-mixins.less"; @import "../../../../common/main/resources/less/asc-mixins.less";
// Bootstrap overwrite // Bootstrap overwrite
@import "../../../../../vendor/bootstrap/less/_functions.less";
@import "../../../../../vendor/bootstrap/less/_variables.less";
@import "../../../../common/main/resources/less/variables.less"; @import "../../../../common/main/resources/less/variables.less";
// //
@ -16,28 +18,29 @@
// Core variables and mixins // Core variables and mixins
//@import "../../../../vendor/bootstrap/less/variables.less"; //@import "../../../../vendor/bootstrap/less/variables.less";
@import "../../../../../vendor/bootstrap/less/mixins.less"; @import "../../../../../vendor/bootstrap/less/_mixins.less";
@import "../../../../../vendor/bootstrap/less/_root";
// Reset // Reset
@import "../../../../../vendor/bootstrap/less/normalize.less"; @import "../../../../../vendor/bootstrap/less/_reboot.less";
//@import "print.less"; //@import "print.less";
// Core CSS // Core CSS
@import "../../../../../vendor/bootstrap/less/scaffolding.less"; //@import "../../../../../vendor/bootstrap/less/scaffolding.less";
@import "../../../../../vendor/bootstrap/less/type.less"; @import "../../../../../vendor/bootstrap/less/_type.less";
//@import "code.less"; //@import "code.less";
//@import "grid.less"; //@import "grid.less";
//@import "tables.less"; //@import "tables.less";
@import "../../../../../vendor/bootstrap/less/forms.less"; @import "../../../../../vendor/bootstrap/less/_forms.less";
@import "../../../../../vendor/bootstrap/less/buttons.less"; @import "../../../../../vendor/bootstrap/less/_buttons.less";
// Components // Components
@import "../../../../../vendor/bootstrap/less/component-animations.less"; @import "../../../../../vendor/bootstrap/less/_transitions.less";
//@import "glyphicons.less"; //@import "glyphicons.less";
@import "../../../../../vendor/bootstrap/less/dropdowns.less"; @import "../../../../../vendor/bootstrap/less/_dropdown.less";
@import "../../../../../vendor/bootstrap/less/button-groups.less"; @import "../../../../../vendor/bootstrap/less/_button-group.less";
@import "../../../../../vendor/bootstrap/less/input-groups.less"; @import "../../../../../vendor/bootstrap/less/_input-group.less";
@import "../../../../../vendor/bootstrap/less/navs.less"; @import "../../../../../vendor/bootstrap/less/_nav.less";
//@import "navbar.less"; //@import "navbar.less";
//@import "breadcrumbs.less"; //@import "breadcrumbs.less";
//@import "pagination.less"; //@import "pagination.less";
@ -56,13 +59,13 @@
// Components w/ JavaScript // Components w/ JavaScript
//@import "modals.less"; //@import "modals.less";
@import "../../../../../vendor/bootstrap/less/tooltip.less"; @import "../../../../../vendor/bootstrap/less/_utilities.less";
//@import "popovers.less"; //@import "popovers.less";
//@import "carousel.less"; //@import "carousel.less";
// Utility classes // Utility classes
@import "../../../../../vendor/bootstrap/less/utilities.less"; @import "../../../../../vendor/bootstrap/less/_utilities.less";
@import "../../../../../vendor/bootstrap/less/responsive-utilities.less"; //@import "../../../../../vendor/bootstrap/less/responsive-utilities.less";
// //
// Perfect scrollbar // Perfect scrollbar

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

@ -122,7 +122,7 @@
} }
&.devider { &.devider {
.dropdown-menu .dropdown-divider; //.dropdown-menu .dropdown-divider;
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
} }

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

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