[SSE] Refactoring advanced settings and document info: apply button is always visible
This commit is contained in:
Julia Radzhabova
parent
1b5abe0aa9
commit
d615fae287
|
|
@ -270,7 +270,9 @@ define([
|
|||
menu: undefined,
|
||||
|
||||
template: _.template([
|
||||
'<table class="main"><tbody>',
|
||||
'<div>',
|
||||
'<div class="flex-settings">',
|
||||
'<table class="main" style="margin: 30px 0 0;"><tbody>',
|
||||
'<tr>',
|
||||
'<td class="left"><label><%= scope.textSettings %></label></td>',
|
||||
'<td class="right"><div id="advsettings-print-combo-sheets" class="input-group-nr"></div></td>',
|
||||
|
|
@ -307,7 +309,7 @@ define([
|
|||
'</tr>',
|
||||
'</table>',
|
||||
'</div></td>',
|
||||
'</tr>','<tr class="divider"></tr>',
|
||||
'</tr>',
|
||||
'<tr>',
|
||||
'<td class="left" style="vertical-align: top;"><label><%= scope.strMargins %></label></td>',
|
||||
'<td class="right" style="vertical-align: top;"><div id="advsettings-margins">',
|
||||
|
|
@ -330,19 +332,25 @@ define([
|
|||
'</tr>',
|
||||
'</table>',
|
||||
'</div></td>',
|
||||
'</tr>','<tr class="divider"></tr>',
|
||||
'</tr>',
|
||||
'<tr>',
|
||||
'<td class="left" style="vertical-align: top;"><label><%= scope.strPrint %></label></td>',
|
||||
'<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-rows"></div>',
|
||||
'</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>',
|
||||
'<td class="left"></td>',
|
||||
'<td class="right"><button id="advsettings-print-button-save" class="btn normal dlg-btn primary"><%= scope.okButtonText %></button></td>',
|
||||
'</tr>',
|
||||
'</tbody></table>'
|
||||
'</tbody></table>',
|
||||
'</div>',
|
||||
'</div>'
|
||||
].join('')),
|
||||
|
||||
initialize: function(options) {
|
||||
|
|
@ -512,18 +520,27 @@ define([
|
|||
el: $markup.findById('#advsettings-print-button-save')
|
||||
});
|
||||
|
||||
this.pnlSettings = $markup.find('.flex-settings').addBack().filter('.flex-settings');
|
||||
|
||||
// if (parentEl)
|
||||
// this.setElement(parentEl, false);
|
||||
this.$el = $(parentEl).html($markup);
|
||||
|
||||
if (_.isUndefined(this.scroller)) {
|
||||
this.scroller = new Common.UI.Scroller({
|
||||
el: this.$el,
|
||||
el: this.pnlSettings,
|
||||
suppressScrollX: true,
|
||||
alwaysVisibleY: true
|
||||
});
|
||||
}
|
||||
|
||||
var me = this;
|
||||
Common.NotificationCenter.on({
|
||||
'window:resize': function() {
|
||||
me.isVisible() && me.updateScroller();
|
||||
}
|
||||
});
|
||||
|
||||
this.fireEvent('render:after', this);
|
||||
return this;
|
||||
},
|
||||
|
|
@ -582,10 +599,21 @@ define([
|
|||
this.updateMetricUnit();
|
||||
this._initSettings = false;
|
||||
}
|
||||
this.scroller && this.scroller.update();
|
||||
this.updateScroller();
|
||||
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',
|
||||
strPortrait: 'Portrait',
|
||||
strLandscape: 'Landscape',
|
||||
|
|
@ -618,7 +646,9 @@ define([
|
|||
menu: undefined,
|
||||
|
||||
template: _.template([
|
||||
'<table class="main"><tbody>',
|
||||
'<div>',
|
||||
'<div class="flex-settings">',
|
||||
'<table class="main" style="margin: 30px 0 0;"><tbody>',
|
||||
/** coauthoring begin **/
|
||||
'<tr class="comments">',
|
||||
'<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>',
|
||||
'<label id="fms-lbl-macros" style="vertical-align: middle;"><%= scope.txtWarnMacrosDesc %></label></div></td>',
|
||||
'</tr>','<tr class="divider macros"></tr>',
|
||||
'</tbody></table>',
|
||||
'</div>',
|
||||
'<div>',
|
||||
'<table class="main" style="margin: 10px 0;"><tbody>',
|
||||
'<tr>',
|
||||
'<td class="left"></td>',
|
||||
'<td class="right"><button id="fms-btn-apply" class="btn normal dlg-btn primary"><%= scope.okButtonText %></button></td>',
|
||||
'</tr>',
|
||||
'</tbody></table>'
|
||||
'</tbody></table>',
|
||||
'</div>',
|
||||
'</div>'
|
||||
].join('')),
|
||||
|
||||
initialize: function(options) {
|
||||
|
|
@ -751,7 +787,7 @@ define([
|
|||
style : 'width: 160px;',
|
||||
editable : false,
|
||||
cls : 'input-group-nr',
|
||||
menuStyle : 'max-height: 210px;',
|
||||
menuStyle : 'max-height: 157px;',
|
||||
data : [
|
||||
{ value: 50, displayValue: "50%" },
|
||||
{ value: 60, displayValue: "60%" },
|
||||
|
|
@ -946,18 +982,26 @@ define([
|
|||
this.btnApply = new Common.UI.Button({
|
||||
el: $markup.findById('#fms-btn-apply')
|
||||
});
|
||||
|
||||
this.btnApply.on('click', _.bind(this.applySettings, this));
|
||||
|
||||
this.pnlSettings = $markup.find('.flex-settings').addBack().filter('.flex-settings');
|
||||
|
||||
this.$el = $(node).html($markup);
|
||||
|
||||
if (_.isUndefined(this.scroller)) {
|
||||
this.scroller = new Common.UI.Scroller({
|
||||
el: this.$el,
|
||||
el: this.pnlSettings,
|
||||
suppressScrollX: true,
|
||||
alwaysVisibleY: true
|
||||
});
|
||||
}
|
||||
|
||||
Common.NotificationCenter.on({
|
||||
'window:resize': function() {
|
||||
me.isVisible() && me.updateScroller();
|
||||
}
|
||||
});
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
|
|
@ -965,7 +1009,18 @@ define([
|
|||
Common.UI.BaseView.prototype.show.call(this,arguments);
|
||||
|
||||
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) {
|
||||
|
|
@ -1226,7 +1281,7 @@ define([
|
|||
menu: undefined,
|
||||
|
||||
template: _.template([
|
||||
'<table class="main"><tbody>',
|
||||
'<table class="main" style="margin: 30px 0;"><tbody>',
|
||||
'<tr>',
|
||||
'<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>',
|
||||
|
|
@ -1542,7 +1597,8 @@ define([
|
|||
this.rendered = false;
|
||||
|
||||
this.template = _.template([
|
||||
'<table class="main">',
|
||||
'<div class="flex-settings">',
|
||||
'<table class="main" style="margin: 30px 0 0;">',
|
||||
'<tr>',
|
||||
'<td class="left"><label>' + this.txtPlacement + '</label></td>',
|
||||
'<td class="right"><label id="id-info-placement">-</label></td>',
|
||||
|
|
@ -1599,12 +1655,17 @@ define([
|
|||
'</table>',
|
||||
'</div></td>',
|
||||
'</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>',
|
||||
'<td class="left"></td>',
|
||||
'<td class="right"><button id="fminfo-btn-apply" class="btn normal dlg-btn primary"><%= scope.okButtonText %></button></td>',
|
||||
'</tr>',
|
||||
'</table>'
|
||||
'</table>',
|
||||
'</div>'
|
||||
].join(''));
|
||||
|
||||
this.menu = options.menu;
|
||||
|
|
@ -1671,6 +1732,7 @@ define([
|
|||
idx = me.tblAuthor.find('tr').index(el);
|
||||
el.remove();
|
||||
me.authors.splice(idx, 1);
|
||||
me.updateScroller(true);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -1692,6 +1754,7 @@ define([
|
|||
if (!isFromApply) {
|
||||
var div = $(Common.Utils.String.format(me.authorTpl, Common.Utils.String.htmlEncode(str)));
|
||||
me.trAuthor.before(div);
|
||||
me.updateScroller();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -1704,6 +1767,9 @@ define([
|
|||
});
|
||||
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.updateInfo(this.doc);
|
||||
|
|
@ -1711,12 +1777,18 @@ define([
|
|||
this.$el = $(node).html($markup);
|
||||
if (_.isUndefined(this.scroller)) {
|
||||
this.scroller = new Common.UI.Scroller({
|
||||
el: this.$el,
|
||||
el: this.pnlInfo,
|
||||
suppressScrollX: true,
|
||||
alwaysVisibleY: true
|
||||
});
|
||||
}
|
||||
|
||||
Common.NotificationCenter.on({
|
||||
'window:resize': function() {
|
||||
me.isVisible() && me.updateScroller();
|
||||
}
|
||||
});
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
|
|
@ -1724,13 +1796,24 @@ define([
|
|||
Common.UI.BaseView.prototype.show.call(this,arguments);
|
||||
|
||||
this.updateFileInfo();
|
||||
this.scroller && this.scroller.update();
|
||||
this.scroller && this.scroller.scrollTop(0);
|
||||
this.updateScroller();
|
||||
},
|
||||
|
||||
hide: function() {
|
||||
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) {
|
||||
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.");
|
||||
|
|
@ -1841,7 +1924,7 @@ define([
|
|||
setMode: function(mode) {
|
||||
this.mode = mode;
|
||||
this.inputAuthor.setVisible(mode.isEdit);
|
||||
this.btnApply.setVisible(mode.isEdit);
|
||||
this.pnlApply.toggleClass('hidden', !mode.isEdit);
|
||||
this.tblAuthor.find('.close').toggleClass('hidden', !mode.isEdit);
|
||||
if (!mode.isEdit) {
|
||||
this.inputTitle._input.attr('placeholder', '');
|
||||
|
|
@ -1913,7 +1996,7 @@ define([
|
|||
this.rendered = false;
|
||||
|
||||
this.template = _.template([
|
||||
'<table class="main">',
|
||||
'<table class="main" style="margin: 30px 0;">',
|
||||
'<tr class="rights">',
|
||||
'<td class="left" style="vertical-align: top;"><label>' + this.txtRights + '</label></td>',
|
||||
'<td class="right"><div id="id-info-rights"></div></td>',
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
padding: 0;
|
||||
|
||||
|
|
@ -250,7 +275,6 @@
|
|||
|
||||
&.main {
|
||||
width: 100%;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
&.no-padding {
|
||||
|
|
@ -428,9 +452,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
#panel-info,
|
||||
#panel-rights {
|
||||
padding: 0 30px;
|
||||
}
|
||||
|
||||
#panel-info,
|
||||
#panel-rights {
|
||||
table {
|
||||
tr {
|
||||
td {
|
||||
|
|
@ -459,7 +486,6 @@
|
|||
|
||||
&.main {
|
||||
width: 100%;
|
||||
margin: 30px 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue