From a345d02840ab5f052c75c1fbeaf0b969cb45aad6 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Thu, 30 Aug 2018 16:53:46 +0300 Subject: [PATCH] [PE] Add rotation to image and shape settings in the right panel --- .../main/app/template/ImageSettings.template | 26 ++++++++ .../main/app/template/ShapeSettings.template | 32 +++++++++ .../main/app/view/ImageSettings.js | 66 ++++++++++++++++++- .../main/app/view/ShapeSettings.js | 66 ++++++++++++++++++- apps/presentationeditor/main/locale/en.json | 14 ++++ .../main/resources/less/toolbar.less | 5 ++ 6 files changed, 207 insertions(+), 2 deletions(-) diff --git a/apps/presentationeditor/main/app/template/ImageSettings.template b/apps/presentationeditor/main/app/template/ImageSettings.template index 709adceca..d1c9ef2fa 100644 --- a/apps/presentationeditor/main/app/template/ImageSettings.template +++ b/apps/presentationeditor/main/app/template/ImageSettings.template @@ -22,6 +22,32 @@
+ + + + + + + + +
+
+
+
+ + + +
+
+
+
+ + + + +
+ + diff --git a/apps/presentationeditor/main/app/template/ShapeSettings.template b/apps/presentationeditor/main/app/template/ShapeSettings.template index f86e7770a..f97d33753 100644 --- a/apps/presentationeditor/main/app/template/ShapeSettings.template +++ b/apps/presentationeditor/main/app/template/ShapeSettings.template @@ -116,6 +116,38 @@ + + +
+ + + + + + + + + + + + + + +
+ +
+
+
+
+ 		+ +
+
+
+
+
+ +
diff --git a/apps/presentationeditor/main/app/view/ImageSettings.js b/apps/presentationeditor/main/app/view/ImageSettings.js index 189eb1188..4a13258f1 100644 --- a/apps/presentationeditor/main/app/view/ImageSettings.js +++ b/apps/presentationeditor/main/app/view/ImageSettings.js @@ -139,6 +139,46 @@ define([ this.fireEvent('editcomplete', this); }, this)); + this.btnRotate270 = new Common.UI.Button({ + cls: 'btn-toolbar', + iconCls: 'rotate-270', + value: 0, + hint: this.textHint270 + }); + this.btnRotate270.render( $('#image-button-270', this.$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', this.$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', this.$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', this.$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)); @@ -268,6 +308,23 @@ define([ } }, + 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); + }, + setLocked: function (locked) { this._locked = locked; }, @@ -293,7 +350,14 @@ define([ textFromFile: 'From File', textAdvanced: 'Show advanced settings', textEditObject: 'Edit Object', - textEdit: 'Edit' + textEdit: 'Edit', + textRotation: 'Rotation', + textRotate90: 'Rotate 90°', + textFlip: 'Flip', + textHint270: 'Rotate Left 90°', + textHint90: 'Rotate Right 90°', + textHintFlipV: 'Flip Vertical', + textHintFlipH: 'Flip Horizontal' }, PE.Views.ImageSettings || {})); }); \ No newline at end of file diff --git a/apps/presentationeditor/main/app/view/ShapeSettings.js b/apps/presentationeditor/main/app/view/ShapeSettings.js index ca5de8ee2..18079723b 100644 --- a/apps/presentationeditor/main/app/view/ShapeSettings.js +++ b/apps/presentationeditor/main/app/view/ShapeSettings.js @@ -1290,6 +1290,46 @@ define([ this.btnChangeShape.render( $('#shape-btn-change')) ; this.lockedControls.push(this.btnChangeShape); + 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); + this.linkAdvanced = $('#shape-advanced-link'); $(this.el).on('click', '#shape-advanced-link', _.bind(this.openAdvancedSettings, this)); }, @@ -1544,6 +1584,23 @@ define([ this.colorsGrad.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); }, + onBtnRotateClick: function(btn) { + var properties = new Asc.asc_CShapeProperty(); + properties.asc_putRot((btn.options.value==1 ? 90 : 270) * 3.14159265358979 / 180); + this.api.ShapeApply(properties); + this.fireEvent('editcomplete', this); + }, + + onBtnFlipClick: function(btn) { + var properties = new Asc.asc_CShapeProperty(); + if (btn.options.value==1) + properties.asc_putFlipH(true); + else + properties.asc_putFlipV(true); + this.api.ShapeApply(properties); + this.fireEvent('editcomplete', this); + }, + _pt2mm: function(value) { return (value * 25.4 / 72.0); }, @@ -1643,6 +1700,13 @@ define([ textStyle: 'Style', textGradient: 'Gradient', textBorderSizeErr: 'The entered value is incorrect.
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' }, PE.Views.ShapeSettings || {})); }); diff --git a/apps/presentationeditor/main/locale/en.json b/apps/presentationeditor/main/locale/en.json index e9a07a9e7..f60fba5e6 100644 --- a/apps/presentationeditor/main/locale/en.json +++ b/apps/presentationeditor/main/locale/en.json @@ -1037,6 +1037,13 @@ "PE.Views.ImageSettings.textOriginalSize": "Default Size", "PE.Views.ImageSettings.textSize": "Size", "PE.Views.ImageSettings.textWidth": "Width", + "PE.Views.ImageSettings.textRotation": "Rotation", + "PE.Views.ImageSettings.textRotate90": "Rotate 90°", + "PE.Views.ImageSettings.textFlip": "Flip", + "PE.Views.ImageSettings.textHint270": "Rotate Left 90°", + "PE.Views.ImageSettings.textHint90": "Rotate Right 90°", + "PE.Views.ImageSettings.textHintFlipV": "Flip Vertical", + "PE.Views.ImageSettings.textHintFlipH": "Flip Horizontal", "PE.Views.ImageSettingsAdvanced.cancelButtonText": "Cancel", "PE.Views.ImageSettingsAdvanced.okButtonText": "OK", "PE.Views.ImageSettingsAdvanced.textAlt": "Alternative Text", @@ -1148,6 +1155,13 @@ "PE.Views.ShapeSettings.txtNoBorders": "No Line", "PE.Views.ShapeSettings.txtPapyrus": "Papyrus", "PE.Views.ShapeSettings.txtWood": "Wood", + "PE.Views.ShapeSettings.textRotation": "Rotation", + "PE.Views.ShapeSettings.textRotate90": "Rotate 90°", + "PE.Views.ShapeSettings.textFlip": "Flip", + "PE.Views.ShapeSettings.textHint270": "Rotate Left 90°", + "PE.Views.ShapeSettings.textHint90": "Rotate Right 90°", + "PE.Views.ShapeSettings.textHintFlipV": "Flip Vertical", + "PE.Views.ShapeSettings.textHintFlipH": "Flip Horizontal", "PE.Views.ShapeSettingsAdvanced.cancelButtonText": "Cancel", "PE.Views.ShapeSettingsAdvanced.okButtonText": "OK", "PE.Views.ShapeSettingsAdvanced.strColumns": "Columns", diff --git a/apps/presentationeditor/main/resources/less/toolbar.less b/apps/presentationeditor/main/resources/less/toolbar.less index 8840f802f..fc165252d 100644 --- a/apps/presentationeditor/main/resources/less/toolbar.less +++ b/apps/presentationeditor/main/resources/less/toolbar.less @@ -289,6 +289,11 @@ .toolbar-btn-icon(btn-save-coauth, 69, @toolbar-icon-size); //.toolbar-btn-icon(btn-insertequation, 74, @toolbar-icon-size); +//.toolbar-btn-icon(rotate-90, 79, @toolbar-icon-size); +//.toolbar-btn-icon(rotate-270, 80, @toolbar-icon-size); +//.toolbar-btn-icon(flip-hor, 81, @toolbar-icon-size); +//.toolbar-btn-icon(flip-vert, 82, @toolbar-icon-size); + // add slide //.btn-toolbar .btn-addslide {background-position: 0 -120px;} //.btn-toolbar.active > .btn-addslide,