[DE] Change watermark layout

This commit is contained in:
Julia Radzhabova 2019-04-05 15:03:01 +03:00
parent 5b3ede3a79
commit a982f24fba
2 changed files with 53 additions and 34 deletions

View file

@ -2,37 +2,10 @@
<tr><td class="padding-small">
<div id="watermark-radio-none"></div>
</td></tr>
<tr><td class="padding-small">
<div id="watermark-radio-image"></div>
</td></tr>
<tr><td class="padding-large">
<table id="watermark-tbl-image" cols="3" style="margin-left: 22px;">
<tr>
<td style="vertical-align: top;">
<button type="button" class="btn btn-text-default" id="watermark-from-file" style="width:90px;"><%= scope.textFromFile %></button>
</td>
<td style="vertical-align: top;">
<button type="button" class="btn btn-text-default" id="watermark-from-url" style="width:90px;margin-left: 15px;"><%= scope.textFromUrl %></button>
</td>
<td rowspan="2">
<div style="width: 80px; height: 70px; padding: 14px 20px; border: 1px solid #AFAFAF; border-radius: 2px; background: #ffffff;margin-left: 15px;">
<div id="watermark-texture-img" style="width: 50px;height: 50px;"></div>
</div>
</td>
</tr>
<tr>
<td style="vertical-align: bottom;">
<label class="input-label" style=""><%= scope.textScale %></label>
<div id="watermark-combo-scale" style="width: 90px;"></div>
</td>
<td></td>
</tr>
</table>
</td></tr>
<tr><td class="padding-small">
<div id="watermark-radio-text"></div>
</td></tr>
<tr><td class="padding-small">
<tr><td class="padding-large">
<table id="watermark-tbl-text" cols="1" style="margin-left: 22px;">
<tr>
<td class="padding-small">
@ -70,4 +43,31 @@
</tr>
</table>
</td></tr>
<tr><td class="padding-small">
<div id="watermark-radio-image"></div>
</td></tr>
<tr><td class="padding-small">
<table id="watermark-tbl-image" cols="3" style="margin-left: 22px;">
<tr>
<td style="vertical-align: top;">
<button type="button" class="btn btn-text-default" id="watermark-from-file" style="width:90px;"><%= scope.textFromFile %></button>
</td>
<td style="vertical-align: top;">
<button type="button" class="btn btn-text-default" id="watermark-from-url" style="width:90px;margin-left: 15px;"><%= scope.textFromUrl %></button>
</td>
<td rowspan="2">
<div style="width: 80px; height: 70px; padding: 14px 20px; border: 1px solid #AFAFAF; border-radius: 2px; background: #ffffff;margin-left: 15px;">
<div id="watermark-texture-img" style="width: 50px;height: 50px;"></div>
</div>
</td>
</tr>
<tr>
<td style="vertical-align: bottom;">
<label class="input-label" style=""><%= scope.textScale %></label>
<div id="watermark-combo-scale" style="width: 90px;"></div>
</td>
<td></td>
</tr>
</table>
</td></tr>
</table>

View file

@ -94,7 +94,11 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
labelText: this.textNone,
checked: true
});
// this.radioNone.on('change', _.bind(this.onRadioTypeChange, this));
this.radioNone.on('change', _.bind(function(field, newValue, eOpts) {
if (newValue) {
// disable text and image
}
}, this));
this.radioImage = new Common.UI.RadioBox({
el: $('#watermark-radio-image'),
@ -102,7 +106,11 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
labelText: this.textImageW,
checked: true
});
// this.radioImage.on('change', _.bind(this.onRadioTypeChange, this));
this.radioImage.on('change', _.bind(function(field, newValue, eOpts) {
if (newValue) {
// disable text
}
}, this));
this.radioText = new Common.UI.RadioBox({
el: $('#watermark-radio-text'),
@ -110,7 +118,11 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
labelText: this.textTextW,
checked: true
});
// this.radioText.on('change', _.bind(this.onRadioTypeChange, this));
this.radioText.on('change', _.bind(function(field, newValue, eOpts) {
if (newValue) {
// disable image
}
}, this));
// Image watermark
this.btnFromFile = new Common.UI.Button({
@ -280,7 +292,7 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
maxValue: 100,
minValue: 0
});
// this.numTransparency.on('change', _.bind(this.onNumTransparencyChange, this));
this.numTransparency.on('change', _.bind(this.onNumTransparencyChange, this));
this.sldrTransparency = new Common.UI.SingleSlider({
el: $('#watermark-slider-opacity'),
@ -289,8 +301,7 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
maxValue: 100,
value: 100
});
// this.sldrTransparency.on('change', _.bind(this.onTransparencyChange, this));
// this.sldrTransparency.on('changecomplete', _.bind(this.onTransparencyChangeComplete, this));
this.sldrTransparency.on('change', _.bind(this.onTransparencyChange, this));
this.lblTransparencyStart = $(this.el).find('#watermark-lbl-opacity-start');
this.lblTransparencyEnd = $(this.el).find('#watermark-lbl-opacity-end');
@ -341,6 +352,14 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
this.mnuTextColorPicker.currentColor = color;
},
onNumTransparencyChange: function(field, newValue, oldValue, eOpts){
this.sldrTransparency.setValue(field.getNumberValue(), true);
},
onTransparencyChange: function(field, newValue, oldValue){
this.numTransparency.setValue(newValue, true);
},
afterRender: function() {
this.cmbFonts.fillFonts(this.fontStore);
this.cmbFonts.selectRecord(this.fontStore.findWhere({name: 'Arial'}));