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

Merge pull request #273 from ONLYOFFICE/feature/de-margins

Browse source 
Feature/de margins
This commit is contained in:
Julia Radzhabova 2019-11-28 15:14:29 +03:00 committed by GitHub
parent deb20246f5 c140cb85b2
commit 12400295fd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 200 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

213
apps/documenteditor/main/app/view/PageMarginsDialog.js
View file

@ -45,9 +45,9 @@ define([
DE.Views.PageMarginsDialog = Common.UI.Window.extend(_.extend({
options: {
width: 215,
width: 404,
header: true,
style: 'min-width: 216px;',
style: 'min-width: 404px;',
cls: 'modal-dlg',
id: 'window-page-margins',
buttons: ['ok', 'cancel']
@ -59,31 +59,50 @@ define([
}, options || {});
this.template = [
'<div class="box" style="height: 85px;">',
'<table cols="2" style="width: 100%;margin-bottom: 10px;">',
'<tr>',
'<td style="padding-right: 10px;padding-bottom: 8px;">',
'<div class="box" style="height: 245px;">',
'<div style="float: left;">',
'<label style="font-weight: bold;">' + this.textTitle + '</label>',
'<div style="margin-top: 2px;">',
'<div style="display: inline-block;">',
'<label class="input-label">' + this.textTop + '</label>',
'<div id="page-margins-spin-top"></div>',
'</td>',
'<td style="padding-bottom: 8px;">',
'</div>',
'<div style="display: inline-block; margin-left: 8px;">',
'<label class="input-label">' + this.textBottom + '</label>',
'<div id="page-margins-spin-bottom"></div>',
'</td>',
'</tr>',
'<tr>',
'<td class="padding-small" style="padding-right: 10px;">',
'<label class="input-label">' + this.textLeft + '</label>',
'</div>',
'</div>',
'<div style="margin-top: 4px;">',
'<div style="display: inline-block;">',
'<label class="input-label" id="margin-left-label">' + this.textLeft + '</label>',
'<div id="page-margins-spin-left"></div>',
'</td>',
'<td class="padding-small">',
'<label class="input-label">' + this.textRight + '</label>',
'</div>',
'<div style="display: inline-block; margin-left: 8px;">',
'<label class="input-label" id="margin-right-label">' + this.textRight + '</label>',
'<div id="page-margins-spin-right"></div>',
'</td>',
'</tr>',
'</table>',
'</div>',
'<div class="separator horizontal"/>'
'</div>',
'</div>',
'<div style="margin-top: 10px;">',
'<label style="font-weight: bold;">' + this.textGutterPosition + '</label>',
'<div>',
'<div style="display: inline-block;" id="page-margins-spin-gutter"></div>',
'<div style="display: inline-block; margin-left: 8px;" id="page-margins-spin-gutter-position"></div>',
'</div>',
'</div>',
'<div style="margin-top: 10px;">',
'<label style="font-weight: bold;">' + this.textOrientation + '</label>',
'<div id="page-margins-cmb-orientation"></div>',
'</div>',
'<div style="margin-top: 10px;">',
'<label style="font-weight: bold;">' + this.textMultiplePages + '</label>',
'<div id="page-margins-cmb-multiple-pages"></div>',
'</div>',
'</div>',
'<div style="float: right;">',
'<label style="font-weight: bold;">' + this.textPreview + '</label>',
'<div id="page-margins-preview" style="margin-top: 2px; height: 120px; width: 162px; border: 1px solid #cfcfcf;"></div>',
'</div>',
'</div>'
].join('');
this.options.tpl = _.template(this.template)(this.options);
@ -107,6 +126,13 @@ define([
maxValue: 55.88,
minValue: -55.87
});
this.spnTop.on('change', _.bind(function (field, newValue, oldValue) {
if (this.api) {
this.properties = (this.properties) ? this.properties : new Asc.CDocumentSectionProps();
this.properties.put_TopMargin(Common.Utils.Metric.fnRecalcToMM(field.getNumberValue()));
//this.api.SetDrawImagePreviewMargins('page-margins-preview', this.properties);
}
}, this));
this.spinners.push(this.spnTop);
this.spnBottom = new Common.UI.MetricSpinner({
@ -118,6 +144,13 @@ define([
maxValue: 55.88,
minValue: -55.87
});
this.spnBottom.on('change', _.bind(function (field, newValue, oldValue) {
if (this.api) {
this.properties = (this.properties) ? this.properties : new Asc.CDocumentSectionProps();
this.properties.put_BottomMargin(Common.Utils.Metric.fnRecalcToMM(field.getNumberValue()));
//this.api.SetDrawImagePreviewMargins('page-margins-preview', this.properties);
}
}, this));
this.spinners.push(this.spnBottom);
this.spnLeft = new Common.UI.MetricSpinner({
@ -129,6 +162,13 @@ define([
maxValue: 55.88,
minValue: 0
});
this.spnLeft.on('change', _.bind(function (field, newValue, oldValue) {
if (this.api) {
this.properties = (this.properties) ? this.properties : new Asc.CDocumentSectionProps();
this.properties.put_LeftMargin(Common.Utils.Metric.fnRecalcToMM(field.getNumberValue()));
//this.api.SetDrawImagePreviewMargins('page-margins-preview', this.properties);
}
}, this));
this.spinners.push(this.spnLeft);
this.spnRight = new Common.UI.MetricSpinner({
@ -140,10 +180,102 @@ define([
maxValue: 55.88,
minValue: 0
});
this.spnRight.on('change', _.bind(function (field, newValue, oldValue) {
if (this.api) {
this.properties = (this.properties) ? this.properties : new Asc.CDocumentSectionProps();
this.properties.put_RightMargin(Common.Utils.Metric.fnRecalcToMM(field.getNumberValue()));
//this.api.SetDrawImagePreviewMargins('page-margins-preview', this.properties);
}
}, this));
this.spinners.push(this.spnRight);
var $window = this.getChild();
$window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
this.spnGutter = new Common.UI.MetricSpinner({
el: $('#page-margins-spin-gutter'),
step: .1,
width: 86,
defaultUnit : "cm",
value: '1 cm',
maxValue: 55.88,
minValue: 0
});
this.spnGutter.on('change', _.bind(function (field, newValue, oldValue) {
if (this.api) {
this.properties = (this.properties) ? this.properties : new Asc.CDocumentSectionProps();
this.properties.put_Gutter(Common.Utils.Metric.fnRecalcToMM(field.getNumberValue()));
//this.api.SetDrawImagePreviewMargins('page-margins-preview', this.properties);
}
}, this));
this.spinners.push(this.spnGutter);
this.cmbGutterPosition = new Common.UI.ComboBox({
el : $('#page-margins-spin-gutter-position'),
menuStyle : 'min-width: 86px;',
style : 'width: 86px;',
editable : false,
cls : 'input-group-nr',
data : [
{ value: 0, displayValue: this.textLeft },
{ value: 1, displayValue: this.textTop }
]
});
this.cmbGutterPosition.on('selected', _.bind(function (combo, record) {
if (this.api) {
this.properties = (this.properties) ? this.properties : new Asc.CDocumentSectionProps();
this.properties.put_GutterAtTop(record.value);
//this.api.SetDrawImagePreviewMargins('page-margins-preview', this.properties);
}
}, this));
this.cmbOrientation = new Common.UI.ComboBox({
el : $('#page-margins-cmb-orientation'),
menuStyle : 'min-width: 180px;',
style : 'width: 180px;',
editable : false,
cls : 'input-group-nr',
data : [
{ value: 0, displayValue: this.textPortrait },
{ value: 1, displayValue: this.textLandscape }
]
});
this.cmbOrientation.on('selected', _.bind(function (combo, record) {
if (this.api) {
this.properties = (this.properties) ? this.properties : new Asc.CDocumentSectionProps();
this.properties.put_Orientation(record.value);
//this.api.SetDrawImagePreviewMargins('page-margins-preview', this.properties);
}
}, this));
this.cmbMultiplePages = new Common.UI.ComboBox({
el : $('#page-margins-cmb-multiple-pages'),
menuStyle : 'min-width: 180px;',
style : 'width: 180px;',
editable : false,
cls : 'input-group-nr',
data : [
{ value: 0, displayValue: this.textNormal },
{ value: 1, displayValue: this.textMirrorMargins }
]
});
this.cmbMultiplePages.on('selected', _.bind(function(combo, record) {
if (record.value === 0) {
this.window.find('#margin-left-label').html(this.textLeft);
this.window.find('#margin-right-label').html(this.textRight);
this.cmbGutterPosition.setDisabled(false);
} else {
this.window.find('#margin-left-label').html(this.textInside);
this.window.find('#margin-right-label').html(this.textOutside);
this.cmbGutterPosition.setValue(0);
this.cmbGutterPosition.setDisabled(true);
}
if (this.api) {
this.properties = (this.properties) ? this.properties : new Asc.CDocumentSectionProps();
this.properties.put_MirrorMargins(record.value);
//this.api.SetDrawImagePreviewMargins('page-margins-preview', this.properties);
}
}, this));
this.window = this.getChild();
this.window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
this.updateMetricUnit();
},
@ -181,6 +313,7 @@ define([
setSettings: function (props) {
if (props) {
this.properties = props;
this.maxMarginsH = Common.Utils.Metric.fnRecalcFromMM(props.get_H() - 2.6);
this.maxMarginsW = Common.Utils.Metric.fnRecalcFromMM(props.get_W() - 12.7);
this.spnTop.setMaxValue(this.maxMarginsH);
@ -192,6 +325,23 @@ define([
this.spnBottom.setValue(Common.Utils.Metric.fnRecalcFromMM(props.get_BottomMargin()), true);
this.spnLeft.setValue(Common.Utils.Metric.fnRecalcFromMM(props.get_LeftMargin()), true);
this.spnRight.setValue(Common.Utils.Metric.fnRecalcFromMM(props.get_RightMargin()), true);
this.cmbOrientation.setValue(props.get_Orientation());
this.spnGutter.setValue(Common.Utils.Metric.fnRecalcFromMM(props.get_Gutter()), true);
this.cmbGutterPosition.setValue(props.get_GutterAtTop() ? 1 : 0);
var mirrorMargins = props.get_MirrorMargins();
this.cmbMultiplePages.setValue(mirrorMargins ? 1 : 0);
if (mirrorMargins) {
this.window.find('#margin-left-label').html(this.textInside);
this.window.find('#margin-right-label').html(this.textOutside);
this.cmbGutterPosition.setValue(0);
}
this.cmbGutterPosition.setDisabled(mirrorMargins);
if (this.api) {
//this.api.SetDrawImagePreviewMargins('page-margins-preview', this.properties);
}
}
},
@ -201,6 +351,10 @@ define([
props.put_BottomMargin(Common.Utils.Metric.fnRecalcToMM(this.spnBottom.getNumberValue()));
props.put_LeftMargin(Common.Utils.Metric.fnRecalcToMM(this.spnLeft.getNumberValue()));
props.put_RightMargin(Common.Utils.Metric.fnRecalcToMM(this.spnRight.getNumberValue()));
props.put_Orientation(this.cmbOrientation.getValue());
props.put_Gutter(Common.Utils.Metric.fnRecalcToMM(this.spnGutter.getNumberValue()));
props.put_GutterAtTop(this.cmbGutterPosition.getValue() ? true : false);
props.put_MirrorMargins(this.cmbMultiplePages.getValue() ? true : false);
return props;
},
@ -221,6 +375,17 @@ define([
textRight: 'Right',
notcriticalErrorTitle: 'Warning',
txtMarginsW: 'Left and right margins are too high for a given page wight',
txtMarginsH: 'Top and bottom margins are too high for a given page height'
txtMarginsH: 'Top and bottom margins are too high for a given page height',
textMultiplePages: 'Multiple pages',
textGutter: 'Gutter',
textGutterPosition: 'Gutter position',
textOrientation: 'Orientation',
textPreview: 'Preview',
textPortrait: 'Portrait',
textLandscape: 'Landscape',
textMirrorMargins: 'Mirror margins',
textNormal: 'Normal',
textInside: 'Inside',
textOutside: 'Outside'
}, DE.Views.PageMarginsDialog || {}))
});

11
apps/documenteditor/main/locale/en.json
View file

@ -1772,6 +1772,17 @@
"DE.Views.PageMarginsDialog.textTop": "Top",
"DE.Views.PageMarginsDialog.txtMarginsH": "Top and bottom margins are too high for a given page height",
"DE.Views.PageMarginsDialog.txtMarginsW": "Left and right margins are too wide for a given page width",
"DE.Views.PageMarginsDialog.textMultiplePages": "Multiple pages",
"DE.Views.PageMarginsDialog.textGutter": "Gutter",
"DE.Views.PageMarginsDialog.textGutterPosition": "Gutter position",
"DE.Views.PageMarginsDialog.textOrientation": "Orientation",
"DE.Views.PageMarginsDialog.textPreview": "Preview",
"DE.Views.PageMarginsDialog.textPortrait": "Portrait",
"DE.Views.PageMarginsDialog.textLandscape": "Landscape",
"DE.Views.PageMarginsDialog.textMirrorMargins": "Mirror margins",
"DE.Views.PageMarginsDialog.textNormal": "Normal",
"DE.Views.PageMarginsDialog.textInside": "Inside",
"DE.Views.PageMarginsDialog.textOutside": "Outside",
"DE.Views.PageSizeDialog.textHeight": "Height",
"DE.Views.PageSizeDialog.textPreset": "Preset",
"DE.Views.PageSizeDialog.textTitle": "Page Size",