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

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

Browse source
This commit is contained in:
Julia Radzhabova 2020-08-06 23:17:32 +03:00
parent 9d0fda6105
commit 08b5e32261
2 changed files with 92 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
apps/presentationeditor/main/app/view/FileMenuPanels.js
View file

@ -180,7 +180,8 @@ define([
menu: undefined, menu: undefined,
template: _.template([ template: _.template([
'<table><tbody>', '<div id="fms-flex-settings">',
'<table style="margin: 30px 0 0;"><tbody>',
'<tr class="edit">', '<tr class="edit">',
'<td class="left"><label><%= scope.txtSpellCheck %></label></td>', '<td class="left"><label><%= scope.txtSpellCheck %></label></td>',
'<td class="right"><div id="fms-chb-spell-check"></div></td>', '<td class="right"><div id="fms-chb-spell-check"></div></td>',
@ -235,11 +236,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) {
@ -267,7 +273,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.txtFitSlide }, { value: -1, displayValue: this.txtFitSlide },
{ value: -2, displayValue: this.txtFitWidth }, { value: -2, displayValue: this.txtFitWidth },
@ -389,16 +395,24 @@ define([
this.btnApply.on('click', _.bind(this.applySettings, this)); this.btnApply.on('click', _.bind(this.applySettings, 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;
}, },
@ -406,7 +420,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) {
@ -731,7 +752,8 @@ define([
this.rendered = false; this.rendered = false;
this.template = _.template([ this.template = _.template([
'<table class="main">', '<div id="fms-flex-info">',
'<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>',
@ -792,12 +814,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;
@ -864,6 +891,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);
} }
}); });
@ -885,6 +913,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();
} }
} }
}); });
@ -897,6 +926,9 @@ define([
}); });
this.btnApply.on('click', _.bind(this.applySettings, this)); this.btnApply.on('click', _.bind(this.applySettings, this));
this.pnlInfo = $markup.findById('#fms-flex-info');
this.pnlApply = $markup.findById('#fms-flex-apply');
this.rendered = true; this.rendered = true;
this.updateInfo(this.doc); this.updateInfo(this.doc);
@ -904,12 +936,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;
}, },
@ -917,13 +955,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.");
@ -1034,7 +1083,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', '');
@ -1107,7 +1156,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>',

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

@ -190,9 +190,19 @@
} }
#panel-settings { #panel-settings {
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 {
@ -375,9 +385,27 @@
} }
} }
#panel-info, #panel-info {
padding: 0;
display: flex;
flex-direction: column;
#fms-flex-info {
&.bordered {
border-bottom: 1px solid @gray;
}
overflow: hidden;
position: relative;
}
}
#panel-rights { #panel-rights {
padding: 0 30px; padding: 0 30px;
}
#panel-info,
#panel-rights {
table { table {
tr { tr {
td { td {
@ -406,7 +434,6 @@
&.main { &.main {
width: 100%; width: 100%;
margin: 30px 0;
} }
} }