[DE] Add rotation to image and shape settings in the right panel
This commit is contained in:
Julia Radzhabova
parent
0bf55a17fd
commit
18332d6059
|
|
@ -27,6 +27,32 @@
|
|||
<div class="separator horizontal"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan=2 class="padding-small">
|
||||
<label class="header"><%= scope.textRotation %></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="padding-small" width="50%">
|
||||
<label class="input-label"><%= scope.textRotate90 %></label>
|
||||
<div>
|
||||
<div id="image-button-270" style="display: inline-block;margin-right: 4px;"></div>
|
||||
<div id="image-button-90" style="display: inline-block;"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="padding-small" width="50%">
|
||||
<label class="input-label"><%= scope.textFlip %></label>
|
||||
<div>
|
||||
<div id="image-button-fliph" style="display: inline-block;margin-right: 4px;"></div>
|
||||
<div id="image-button-flipv" style="display: inline-block;"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="padding-small" colspan=2>
|
||||
<div class="separator horizontal"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan=2 class="padding-small">
|
||||
<label class="header"><%= scope.textWrap %></label>
|
||||
|
|
|
|||
|
|
@ -121,6 +121,38 @@
|
|||
<div class="separator horizontal"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="shape-only">
|
||||
<td class="padding-small">
|
||||
<label class="header"><%= scope.textRotation %></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="shape-only">
|
||||
<td>
|
||||
<table cols="2" style="width: 100%;">
|
||||
<tr>
|
||||
<td class="padding-small" width="50%">
|
||||
<label class="input-label"><%= scope.textRotate90 %></label>
|
||||
<div>
|
||||
<div id="shape-button-270" style="display: inline-block;margin-right: 4px;"></div>
|
||||
<div id="shape-button-90" style="display: inline-block;"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="padding-small" width="50%">
|
||||
<label class="input-label"><%= scope.textFlip %></label>
|
||||
<div>
|
||||
<div id="shape-button-fliph" style="display: inline-block;margin-right: 4px;"></div>
|
||||
<div id="shape-button-flipv" style="display: inline-block;"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="shape-only">
|
||||
<td class="padding-small">
|
||||
<div class="separator horizontal"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="shape-only">
|
||||
<td class="padding-small">
|
||||
<label class="header"><%= scope.textWrap %></label>
|
||||
|
|
|
|||
|
|
@ -186,6 +186,46 @@ define([
|
|||
}, this));
|
||||
this.btnFitMargins.on('click', _.bind(this.setFitMargins, this));
|
||||
|
||||
this.btnRotate270 = new Common.UI.Button({
|
||||
cls: 'btn-toolbar',
|
||||
iconCls: 'rotate-270',
|
||||
value: 0,
|
||||
hint: this.textHint270
|
||||
});
|
||||
this.btnRotate270.render( $('#image-button-270', me.$el));
|
||||
this.btnRotate270.on('click', _.bind(this.onBtnRotateClick, this));
|
||||
this.lockedControls.push(this.btnRotate270);
|
||||
|
||||
this.btnRotate90 = new Common.UI.Button({
|
||||
cls: 'btn-toolbar',
|
||||
iconCls: 'rotate-90',
|
||||
value: 1,
|
||||
hint: this.textHint90
|
||||
});
|
||||
this.btnRotate90.render( $('#image-button-90', me.$el));
|
||||
this.btnRotate90.on('click', _.bind(this.onBtnRotateClick, this));
|
||||
this.lockedControls.push(this.btnRotate90);
|
||||
|
||||
this.btnFlipV = new Common.UI.Button({
|
||||
cls: 'btn-toolbar',
|
||||
iconCls: 'flip-vert',
|
||||
value: 0,
|
||||
hint: this.textHintFlipV
|
||||
});
|
||||
this.btnFlipV.render( $('#image-button-flipv', me.$el));
|
||||
this.btnFlipV.on('click', _.bind(this.onBtnFlipClick, this));
|
||||
this.lockedControls.push(this.btnFlipV);
|
||||
|
||||
this.btnFlipH = new Common.UI.Button({
|
||||
cls: 'btn-toolbar',
|
||||
iconCls: 'flip-hor',
|
||||
value: 1,
|
||||
hint: this.textHintFlipH
|
||||
});
|
||||
this.btnFlipH.render( $('#image-button-fliph', me.$el));
|
||||
this.btnFlipH.on('click', _.bind(this.onBtnFlipClick, this));
|
||||
this.lockedControls.push(this.btnFlipH);
|
||||
|
||||
this.linkAdvanced = $('#image-advanced-link');
|
||||
this.lblReplace = $('#image-lbl-replace');
|
||||
$(this.el).on('click', '#image-advanced-link', _.bind(this.openAdvancedSettings, this));
|
||||
|
|
@ -384,6 +424,23 @@ define([
|
|||
})).show();
|
||||
},
|
||||
|
||||
onBtnRotateClick: function(btn) {
|
||||
var properties = new Asc.asc_CImgProperty();
|
||||
properties.asc_putRot((btn.options.value==1 ? 90 : 270) * 3.14159265358979 / 180);
|
||||
this.api.ImgApply(properties);
|
||||
this.fireEvent('editcomplete', this);
|
||||
},
|
||||
|
||||
onBtnFlipClick: function(btn) {
|
||||
var properties = new Asc.asc_CImgProperty();
|
||||
if (btn.options.value==1)
|
||||
properties.asc_putFlipH(true);
|
||||
else
|
||||
properties.asc_putFlipV(true);
|
||||
this.api.ImgApply(properties);
|
||||
this.fireEvent('editcomplete', this);
|
||||
},
|
||||
|
||||
openAdvancedSettings: function(e) {
|
||||
if (this.linkAdvanced.hasClass('disabled')) return;
|
||||
|
||||
|
|
@ -458,7 +515,14 @@ define([
|
|||
txtInFront: 'In front',
|
||||
textEditObject: 'Edit Object',
|
||||
textEdit: 'Edit',
|
||||
textFitMargins: 'Fit to Margin'
|
||||
textFitMargins: 'Fit to Margin',
|
||||
textRotation: 'Rotation',
|
||||
textRotate90: 'Rotate 90°',
|
||||
textFlip: 'Flip',
|
||||
textHint270: 'Rotate Left 90°',
|
||||
textHint90: 'Rotate Right 90°',
|
||||
textHintFlipV: 'Flip Vertical',
|
||||
textHintFlipH: 'Flip Horizontal'
|
||||
|
||||
}, DE.Views.ImageSettings || {}));
|
||||
});
|
||||
|
|
@ -1366,6 +1366,46 @@ define([
|
|||
this.cmbBorderType.setValue(this.BorderType);
|
||||
this.lockedControls.push(this.cmbBorderType);
|
||||
|
||||
this.btnRotate270 = new Common.UI.Button({
|
||||
cls: 'btn-toolbar',
|
||||
iconCls: 'rotate-270',
|
||||
value: 0,
|
||||
hint: this.textHint270
|
||||
});
|
||||
this.btnRotate270.render( $('#shape-button-270', me.$el));
|
||||
this.btnRotate270.on('click', _.bind(this.onBtnRotateClick, this));
|
||||
this.lockedControls.push(this.btnRotate270);
|
||||
|
||||
this.btnRotate90 = new Common.UI.Button({
|
||||
cls: 'btn-toolbar',
|
||||
iconCls: 'rotate-90',
|
||||
value: 1,
|
||||
hint: this.textHint90
|
||||
});
|
||||
this.btnRotate90.render( $('#shape-button-90', me.$el));
|
||||
this.btnRotate90.on('click', _.bind(this.onBtnRotateClick, this));
|
||||
this.lockedControls.push(this.btnRotate90);
|
||||
|
||||
this.btnFlipV = new Common.UI.Button({
|
||||
cls: 'btn-toolbar',
|
||||
iconCls: 'flip-vert',
|
||||
value: 0,
|
||||
hint: this.textHintFlipV
|
||||
});
|
||||
this.btnFlipV.render( $('#shape-button-flipv', me.$el));
|
||||
this.btnFlipV.on('click', _.bind(this.onBtnFlipClick, this));
|
||||
this.lockedControls.push(this.btnFlipV);
|
||||
|
||||
this.btnFlipH = new Common.UI.Button({
|
||||
cls: 'btn-toolbar',
|
||||
iconCls: 'flip-hor',
|
||||
value: 1,
|
||||
hint: this.textHintFlipH
|
||||
});
|
||||
this.btnFlipH.render( $('#shape-button-fliph', me.$el));
|
||||
this.btnFlipH.on('click', _.bind(this.onBtnFlipClick, this));
|
||||
this.lockedControls.push(this.btnFlipH);
|
||||
|
||||
var viewData = [
|
||||
{ offsetx: 0, data: Asc.c_oAscWrapStyle2.Inline, tip: this.txtInline, selected: true },
|
||||
{ offsetx: 50, data: Asc.c_oAscWrapStyle2.Square, tip: this.txtSquare },
|
||||
|
|
@ -1523,6 +1563,23 @@ define([
|
|||
this.fireEvent('editcomplete', this);
|
||||
},
|
||||
|
||||
onBtnRotateClick: function(btn) {
|
||||
var properties = new Asc.asc_CImgProperty();
|
||||
properties.asc_putRot((btn.options.value==1 ? 90 : 270) * 3.14159265358979 / 180);
|
||||
this.api.ImgApply(properties);
|
||||
this.fireEvent('editcomplete', this);
|
||||
},
|
||||
|
||||
onBtnFlipClick: function(btn) {
|
||||
var properties = new Asc.asc_CImgProperty();
|
||||
if (btn.options.value==1)
|
||||
properties.asc_putFlipH(true);
|
||||
else
|
||||
properties.asc_putFlipV(true);
|
||||
this.api.ImgApply(properties);
|
||||
this.fireEvent('editcomplete', this);
|
||||
},
|
||||
|
||||
fillAutoShapes: function() {
|
||||
var me = this,
|
||||
shapesStore = this.application.getCollection('ShapeGroups');
|
||||
|
|
@ -1779,6 +1836,13 @@ define([
|
|||
txtBehind: 'Behind',
|
||||
txtInFront: 'In front',
|
||||
textBorderSizeErr: 'The entered value is incorrect.<br>Please enter a value between 0 pt and 1584 pt.',
|
||||
strType: 'Type'
|
||||
strType: 'Type',
|
||||
textRotation: 'Rotation',
|
||||
textRotate90: 'Rotate 90°',
|
||||
textFlip: 'Flip',
|
||||
textHint270: 'Rotate Left 90°',
|
||||
textHint90: 'Rotate Right 90°',
|
||||
textHintFlipV: 'Flip Vertical',
|
||||
textHintFlipH: 'Flip Horizontal'
|
||||
}, DE.Views.ShapeSettings || {}));
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1231,6 +1231,13 @@
|
|||
"DE.Views.ImageSettings.txtThrough": "Through",
|
||||
"DE.Views.ImageSettings.txtTight": "Tight",
|
||||
"DE.Views.ImageSettings.txtTopAndBottom": "Top and bottom",
|
||||
"DE.Views.ImageSettings.textRotation": "Rotation",
|
||||
"DE.Views.ImageSettings.textRotate90": "Rotate 90°",
|
||||
"DE.Views.ImageSettings.textFlip": "Flip",
|
||||
"DE.Views.ImageSettings.textHint270": "Rotate Left 90°",
|
||||
"DE.Views.ImageSettings.textHint90": "Rotate Right 90°",
|
||||
"DE.Views.ImageSettings.textHintFlipV": "Flip Vertical",
|
||||
"DE.Views.ImageSettings.textHintFlipH": "Flip Horizontal",
|
||||
"DE.Views.ImageSettingsAdvanced.cancelButtonText": "Cancel",
|
||||
"DE.Views.ImageSettingsAdvanced.okButtonText": "OK",
|
||||
"DE.Views.ImageSettingsAdvanced.strMargins": "Text Padding",
|
||||
|
|
@ -1429,7 +1436,6 @@
|
|||
"DE.Views.PageSizeDialog.cancelButtonText": "Cancel",
|
||||
"DE.Views.PageSizeDialog.okButtonText": "Ok",
|
||||
"DE.Views.PageSizeDialog.textHeight": "Height",
|
||||
"DE.Views.PageSizeDialog.textPreset": "Preset",
|
||||
"DE.Views.PageSizeDialog.textTitle": "Page Size",
|
||||
"DE.Views.PageSizeDialog.textWidth": "Width",
|
||||
"DE.Views.PageSizeDialog.textPreset": "Preset",
|
||||
|
|
@ -1562,6 +1568,13 @@
|
|||
"DE.Views.ShapeSettings.txtTight": "Tight",
|
||||
"DE.Views.ShapeSettings.txtTopAndBottom": "Top and bottom",
|
||||
"DE.Views.ShapeSettings.txtWood": "Wood",
|
||||
"DE.Views.ShapeSettings.textRotation": "Rotation",
|
||||
"DE.Views.ShapeSettings.textRotate90": "Rotate 90°",
|
||||
"DE.Views.ShapeSettings.textFlip": "Flip",
|
||||
"DE.Views.ShapeSettings.textHint270": "Rotate Left 90°",
|
||||
"DE.Views.ShapeSettings.textHint90": "Rotate Right 90°",
|
||||
"DE.Views.ShapeSettings.textHintFlipV": "Flip Vertical",
|
||||
"DE.Views.ShapeSettings.textHintFlipH": "Flip Horizontal",
|
||||
"DE.Views.SignatureSettings.notcriticalErrorTitle": "Warning",
|
||||
"DE.Views.SignatureSettings.strDelete": "Remove Signature",
|
||||
"DE.Views.SignatureSettings.strDetails": "Signature Details",
|
||||
|
|
|
|||
|
|
@ -341,6 +341,11 @@
|
|||
//.button-normal-icon(btn-dropcap, 50, @toolbar-icon-size);
|
||||
.button-normal-icon(btn-ic-doclang, 67, @toolbar-icon-size);
|
||||
|
||||
.button-normal-icon(rotate-270, 67, @toolbar-icon-size);
|
||||
.button-normal-icon(rotate-90, 67, @toolbar-icon-size);
|
||||
.button-normal-icon(flip-vert, 67, @toolbar-icon-size);
|
||||
.button-normal-icon(flip-hor, 67, @toolbar-icon-size);
|
||||
|
||||
@menu-icon-size: 22px;
|
||||
.menu-icon-normal(mnu-wrap-inline, 0, @menu-icon-size);
|
||||
.menu-icon-normal(mnu-wrap-square, 1, @menu-icon-size);
|
||||
|
|
|
|||
Loading…
Reference in a new issue