[DE] Refactoring advanced settings: apply button is always visible

This commit is contained in:
Julia Radzhabova 2020-08-06 17:03:17 +03:00
parent 3886bb0ce2
commit 382fb528e6
2 changed files with 40 additions and 9 deletions

View file

@ -188,7 +188,8 @@ define([
menu: undefined, menu: undefined,
template: _.template([ template: _.template([
'<table><tbody>', '<div id="fms-flex-settings">',
'<table style="margin: 30px 0 0;"><tbody>',
/** coauthoring begin **/ /** coauthoring begin **/
'<tr class="comments">', '<tr class="comments">',
'<td class="left"><label><%= scope.txtLiveComment %></label></td>', '<td class="left"><label><%= scope.txtLiveComment %></label></td>',
@ -261,11 +262,16 @@ define([
'<div><div id="fms-cmb-macros" style="display: inline-block; margin-right: 15px;vertical-align: middle;"></div>', '<div><div id="fms-cmb-macros" style="display: inline-block; margin-right: 15px;vertical-align: middle;"></div>',
'<label id="fms-lbl-macros" style="vertical-align: middle;"><%= scope.txtWarnMacrosDesc %></label></div></td>', '<label id="fms-lbl-macros" style="vertical-align: middle;"><%= scope.txtWarnMacrosDesc %></label></div></td>',
'</tr>','<tr class="divider macros"></tr>', '</tr>','<tr class="divider macros"></tr>',
'</tbody></table>',
'</div>',
'<div>',
'<table style="margin: 10px 0;"><tbody>',
'<tr>', '<tr>',
'<td class="left"></td>', '<td class="left"></td>',
'<td class="right"><button id="fms-btn-apply" class="btn normal dlg-btn primary"><%= scope.okButtonText %></button></td>', '<td class="right"><button id="fms-btn-apply" class="btn normal dlg-btn primary"><%= scope.okButtonText %></button></td>',
'</tr>', '</tr>',
'</tbody></table>' '</tbody></table>',
'</div>'
].join('')), ].join('')),
initialize: function(options) { initialize: function(options) {
@ -333,7 +339,7 @@ define([
style : 'width: 160px;', style : 'width: 160px;',
editable : false, editable : false,
cls : 'input-group-nr', cls : 'input-group-nr',
menuStyle : 'max-height: 210px;', menuStyle : 'max-height: 157px;',
data : [ data : [
{ value: -1, displayValue: this.txtFitPage }, { value: -1, displayValue: this.txtFitPage },
{ value: -2, displayValue: this.txtFitWidth }, { value: -2, displayValue: this.txtFitWidth },
@ -446,15 +452,24 @@ define([
this.btnApply.on('click', this.applySettings.bind(this)); this.btnApply.on('click', this.applySettings.bind(this));
this.pnlSettings = $markup.findById('#fms-flex-settings');
this.$el = $(node).html($markup); this.$el = $(node).html($markup);
if (_.isUndefined(this.scroller)) { if (_.isUndefined(this.scroller)) {
this.scroller = new Common.UI.Scroller({ this.scroller = new Common.UI.Scroller({
el: this.$el, el: this.pnlSettings,
suppressScrollX: true, suppressScrollX: true,
alwaysVisibleY: true alwaysVisibleY: true
}); });
} }
Common.NotificationCenter.on({
'window:resize': function() {
me.isVisible() && me.updateScroller();
}
});
return this; return this;
}, },
@ -462,7 +477,14 @@ define([
Common.UI.BaseView.prototype.show.call(this,arguments); Common.UI.BaseView.prototype.show.call(this,arguments);
this.updateSettings(); this.updateSettings();
this.scroller && this.scroller.update(); this.updateScroller();
},
updateScroller: function() {
if (this.scroller) {
this.scroller.update();
this.pnlSettings.toggleClass('bordered', this.scroller.isVisible());
}
}, },
setMode: function(mode) { setMode: function(mode) {

View file

@ -122,11 +122,20 @@
#panel-settings { #panel-settings {
#file-menu-panel & { #file-menu-panel & {
padding: 0 30px; padding: 0;
display: flex;
flex-direction: column;
}
#fms-flex-settings {
&.bordered {
border-bottom: 1px solid @gray;
}
overflow: hidden;
position: relative;
} }
table { table {
margin: 30px 0;
width: 100%; width: 100%;
tr { tr {