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

[SSE] Refactoring advanced settings and document info: apply button is always visible

Browse source
This commit is contained in:
Julia Radzhabova 2020-08-07 15:27:04 +03:00
parent 1b5abe0aa9
commit d615fae287
2 changed files with 133 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

125
apps/spreadsheeteditor/main/app/view/FileMenuPanels.js
View file

@ -270,7 +270,9 @@ define([
menu: undefined, menu: undefined,
template: _.template([ template: _.template([
'<table class="main"><tbody>', '<div>',
'<div class="flex-settings">',
'<table class="main" style="margin: 30px 0 0;"><tbody>',
'<tr>', '<tr>',
'<td class="left"><label><%= scope.textSettings %></label></td>', '<td class="left"><label><%= scope.textSettings %></label></td>',
'<td class="right"><div id="advsettings-print-combo-sheets" class="input-group-nr"></div></td>', '<td class="right"><div id="advsettings-print-combo-sheets" class="input-group-nr"></div></td>',
@ -307,7 +309,7 @@ define([
'</tr>', '</tr>',
'</table>', '</table>',
'</div></td>', '</div></td>',
'</tr>','<tr class="divider"></tr>', '</tr>',
'<tr>', '<tr>',
'<td class="left" style="vertical-align: top;"><label><%= scope.strMargins %></label></td>', '<td class="left" style="vertical-align: top;"><label><%= scope.strMargins %></label></td>',
'<td class="right" style="vertical-align: top;"><div id="advsettings-margins">', '<td class="right" style="vertical-align: top;"><div id="advsettings-margins">',
@ -330,19 +332,25 @@ define([
'</tr>', '</tr>',
'</table>', '</table>',
'</div></td>', '</div></td>',
'</tr>','<tr class="divider"></tr>', '</tr>',
'<tr>', '<tr>',
'<td class="left" style="vertical-align: top;"><label><%= scope.strPrint %></label></td>', '<td class="left" style="vertical-align: top;"><label><%= scope.strPrint %></label></td>',
'<td class="right" style="vertical-align: top;"><div id="advsettings-print">', '<td class="right" style="vertical-align: top;"><div id="advsettings-print">',
'<div id="advsettings-print-chb-grid" style="margin-bottom: 10px;"></div>', '<div id="advsettings-print-chb-grid" style="margin-bottom: 10px;"></div>',
'<div id="advsettings-print-chb-rows"></div>', '<div id="advsettings-print-chb-rows"></div>',
'</div></td>', '</div></td>',
'</tr>','<tr class="divider"></tr>','<tr class="divider"></tr>', '</tr>','<tr class="divider"></tr>',
'</tbody></table>',
'</div>',
'<div>',
'<table class="main" style="margin: 10px 0;"><tbody>',
'<tr>', '<tr>',
'<td class="left"></td>', '<td class="left"></td>',
'<td class="right"><button id="advsettings-print-button-save" class="btn normal dlg-btn primary"><%= scope.okButtonText %></button></td>', '<td class="right"><button id="advsettings-print-button-save" class="btn normal dlg-btn primary"><%= scope.okButtonText %></button></td>',
'</tr>', '</tr>',
'</tbody></table>' '</tbody></table>',
'</div>',
'</div>'
].join('')), ].join('')),
initialize: function(options) { initialize: function(options) {
@ -512,18 +520,27 @@ define([
el: $markup.findById('#advsettings-print-button-save') el: $markup.findById('#advsettings-print-button-save')
}); });
this.pnlSettings = $markup.find('.flex-settings').addBack().filter('.flex-settings');
// if (parentEl) // if (parentEl)
// this.setElement(parentEl, false); // this.setElement(parentEl, false);
this.$el = $(parentEl).html($markup); this.$el = $(parentEl).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
}); });
} }
var me = this;
Common.NotificationCenter.on({
'window:resize': function() {
me.isVisible() && me.updateScroller();
}
});
this.fireEvent('render:after', this); this.fireEvent('render:after', this);
return this; return this;
}, },
@ -582,10 +599,21 @@ define([
this.updateMetricUnit(); this.updateMetricUnit();
this._initSettings = false; this._initSettings = false;
} }
this.scroller && this.scroller.update(); this.updateScroller();
this.fireEvent('show', this); this.fireEvent('show', this);
}, },
isVisible: function() {
return (this.$el || $(this.el)).is(":visible");
},
updateScroller: function() {
if (this.scroller) {
this.scroller.update();
this.pnlSettings.toggleClass('bordered', this.scroller.isVisible());
}
},
okButtonText: 'Save', okButtonText: 'Save',
strPortrait: 'Portrait', strPortrait: 'Portrait',
strLandscape: 'Landscape', strLandscape: 'Landscape',
@ -618,7 +646,9 @@ define([
menu: undefined, menu: undefined,
template: _.template([ template: _.template([
'<table class="main"><tbody>', '<div>',
'<div class="flex-settings">',
'<table class="main" 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>',
@ -693,11 +723,17 @@ 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 class="main" 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>',
'</div>'
].join('')), ].join('')),
initialize: function(options) { initialize: function(options) {
@ -751,7 +787,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: 50, displayValue: "50%" }, { value: 50, displayValue: "50%" },
{ value: 60, displayValue: "60%" }, { value: 60, displayValue: "60%" },
@ -946,18 +982,26 @@ define([
this.btnApply = new Common.UI.Button({ this.btnApply = new Common.UI.Button({
el: $markup.findById('#fms-btn-apply') el: $markup.findById('#fms-btn-apply')
}); });
this.btnApply.on('click', _.bind(this.applySettings, this)); this.btnApply.on('click', _.bind(this.applySettings, this));
this.pnlSettings = $markup.find('.flex-settings').addBack().filter('.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;
}, },
@ -965,7 +1009,18 @@ 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();
},
isVisible: function() {
return (this.$el || $(this.el)).is(":visible");
},
updateScroller: function() {
if (this.scroller) {
this.scroller.update();
this.pnlSettings.toggleClass('bordered', this.scroller.isVisible());
}
}, },
setMode: function(mode) { setMode: function(mode) {
@ -1226,7 +1281,7 @@ define([
menu: undefined, menu: undefined,
template: _.template([ template: _.template([
'<table class="main"><tbody>', '<table class="main" style="margin: 30px 0;"><tbody>',
'<tr>', '<tr>',
'<td class="left" style="padding-bottom: 8px;"><label><%= scope.strDictionaryLanguage %></label></td>', '<td class="left" style="padding-bottom: 8px;"><label><%= scope.strDictionaryLanguage %></label></td>',
'<td class="right" style="padding-bottom: 8px;"><span id="fms-cmb-dictionary-language"></span></td>', '<td class="right" style="padding-bottom: 8px;"><span id="fms-cmb-dictionary-language"></span></td>',
@ -1542,7 +1597,8 @@ define([
this.rendered = false; this.rendered = false;
this.template = _.template([ this.template = _.template([
'<table class="main">', '<div class="flex-settings">',
'<table class="main" style="margin: 30px 0 0;">',
'<tr>', '<tr>',
'<td class="left"><label>' + this.txtPlacement + '</label></td>', '<td class="left"><label>' + this.txtPlacement + '</label></td>',
'<td class="right"><label id="id-info-placement">-</label></td>', '<td class="right"><label id="id-info-placement">-</label></td>',
@ -1599,12 +1655,17 @@ define([
'</table>', '</table>',
'</div></td>', '</div></td>',
'</tr>', '</tr>',
'<tr class="divider"></tr>', '<tr style="height: 5px;"></tr>',
'</table>',
'</div>',
'<div id="fms-flex-apply">',
'<table class="main" style="margin: 10px 0;">',
'<tr>', '<tr>',
'<td class="left"></td>', '<td class="left"></td>',
'<td class="right"><button id="fminfo-btn-apply" class="btn normal dlg-btn primary"><%= scope.okButtonText %></button></td>', '<td class="right"><button id="fminfo-btn-apply" class="btn normal dlg-btn primary"><%= scope.okButtonText %></button></td>',
'</tr>', '</tr>',
'</table>' '</table>',
'</div>'
].join('')); ].join(''));
this.menu = options.menu; this.menu = options.menu;
@ -1671,6 +1732,7 @@ define([
idx = me.tblAuthor.find('tr').index(el); idx = me.tblAuthor.find('tr').index(el);
el.remove(); el.remove();
me.authors.splice(idx, 1); me.authors.splice(idx, 1);
me.updateScroller(true);
} }
}); });
@ -1692,6 +1754,7 @@ define([
if (!isFromApply) { if (!isFromApply) {
var div = $(Common.Utils.String.format(me.authorTpl, Common.Utils.String.htmlEncode(str))); var div = $(Common.Utils.String.format(me.authorTpl, Common.Utils.String.htmlEncode(str)));
me.trAuthor.before(div); me.trAuthor.before(div);
me.updateScroller();
} }
} }
}); });
@ -1704,6 +1767,9 @@ define([
}); });
this.btnApply.on('click', _.bind(this.applySettings, this)); this.btnApply.on('click', _.bind(this.applySettings, this));
this.pnlInfo = $markup.find('.flex-settings').addBack().filter('.flex-settings');
this.pnlApply = $markup.findById('#fms-flex-apply');
this.rendered = true; this.rendered = true;
this.updateInfo(this.doc); this.updateInfo(this.doc);
@ -1711,12 +1777,18 @@ define([
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.pnlInfo,
suppressScrollX: true, suppressScrollX: true,
alwaysVisibleY: true alwaysVisibleY: true
}); });
} }
Common.NotificationCenter.on({
'window:resize': function() {
me.isVisible() && me.updateScroller();
}
});
return this; return this;
}, },
@ -1724,13 +1796,24 @@ define([
Common.UI.BaseView.prototype.show.call(this,arguments); Common.UI.BaseView.prototype.show.call(this,arguments);
this.updateFileInfo(); this.updateFileInfo();
this.scroller && this.scroller.update(); this.scroller && this.scroller.scrollTop(0);
this.updateScroller();
}, },
hide: function() { hide: function() {
Common.UI.BaseView.prototype.hide.call(this,arguments); Common.UI.BaseView.prototype.hide.call(this,arguments);
}, },
updateScroller: function(destroy) {
if (this.scroller) {
this.scroller.update(destroy ? {
suppressScrollX: true,
alwaysVisibleY: true
} : undefined);
this.pnlInfo.toggleClass('bordered', this.scroller.isVisible());
}
},
updateInfo: function(doc) { updateInfo: function(doc) {
if (!this.doc && doc && doc.info) { if (!this.doc && doc && doc.info) {
doc.info.author && console.log("Obsolete: The 'author' parameter of the document 'info' section is deprecated. Please use 'owner' instead."); doc.info.author && console.log("Obsolete: The 'author' parameter of the document 'info' section is deprecated. Please use 'owner' instead.");
@ -1841,7 +1924,7 @@ define([
setMode: function(mode) { setMode: function(mode) {
this.mode = mode; this.mode = mode;
this.inputAuthor.setVisible(mode.isEdit); this.inputAuthor.setVisible(mode.isEdit);
this.btnApply.setVisible(mode.isEdit); this.pnlApply.toggleClass('hidden', !mode.isEdit);
this.tblAuthor.find('.close').toggleClass('hidden', !mode.isEdit); this.tblAuthor.find('.close').toggleClass('hidden', !mode.isEdit);
if (!mode.isEdit) { if (!mode.isEdit) {
this.inputTitle._input.attr('placeholder', ''); this.inputTitle._input.attr('placeholder', '');
@ -1913,7 +1996,7 @@ define([
this.rendered = false; this.rendered = false;
this.template = _.template([ this.template = _.template([
'<table class="main">', '<table class="main" style="margin: 30px 0;">',
'<tr class="rights">', '<tr class="rights">',
'<td class="left" style="vertical-align: top;"><label>' + this.txtRights + '</label></td>', '<td class="left" style="vertical-align: top;"><label>' + this.txtRights + '</label></td>',
'<td class="right"><div id="id-info-rights"></div></td>', '<td class="right"><div id="id-info-rights"></div></td>',

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

@ -179,6 +179,31 @@
} }
} }
.flex-settings {
&.bordered {
border-bottom: 1px solid @gray;
}
overflow: hidden;
position: relative;
}
#panel-settings-general,
#panel-settings-print {
& > div {
width: 100%;
height: 100%;
padding: 0;
display: flex;
flex-direction: column;
}
}
#panel-info {
padding: 0;
display: flex;
flex-direction: column;
}
#panel-settings { #panel-settings {
padding: 0; padding: 0;
@ -250,7 +275,6 @@
&.main { &.main {
width: 100%; width: 100%;
margin: 30px 0;
} }
&.no-padding { &.no-padding {
@ -428,9 +452,12 @@
} }
} }
#panel-info,
#panel-rights { #panel-rights {
padding: 0 30px; padding: 0 30px;
}
#panel-info,
#panel-rights {
table { table {
tr { tr {
td { td {
@ -459,7 +486,6 @@
&.main { &.main {
width: 100%; width: 100%;
margin: 30px 0;
} }
} }