From c56fadc6dfca78173b16a6563c2a55129da7defe Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Thu, 10 Sep 2020 15:00:58 +0300
Subject: [PATCH] [DE] Shape and TextArt settings: add gradient angle

---
 .../main/app/template/ShapeSettings.template  | 36 +++++++++----
 .../app/template/TextArtSettings.template     | 36 +++++++++----
 .../main/app/view/ShapeSettings.js            | 54 ++++++++++++++++---
 .../main/app/view/TextArtSettings.js          | 49 +++++++++++++++--
 apps/documenteditor/main/locale/de.json       |  1 +
 apps/documenteditor/main/locale/en.json       |  6 ++-
 apps/documenteditor/main/locale/es.json       |  1 +
 7 files changed, 146 insertions(+), 37 deletions(-)

diff --git a/apps/documenteditor/main/app/template/ShapeSettings.template b/apps/documenteditor/main/app/template/ShapeSettings.template
index 99941da61..1c2ba2c8e 100644
--- a/apps/documenteditor/main/app/template/ShapeSettings.template
+++ b/apps/documenteditor/main/app/template/ShapeSettings.template
@@ -52,17 +52,31 @@
                 </div>
             </div>
             <div id="shape-panel-gradient-fill" class="settings-hidden padding-small" style="width: 100%;">
-                <div style="height:80px;">
-                    <div style="display: inline-block;">
-                        <label class="input-label" style=""><%= scope.textStyle %></label>
-                        <div id="shape-combo-grad-type" style="width: 90px;"></div>
-                    </div>
-                    <div style="display: inline-block;float: right;">
-                        <label class="input-label" style=""><%= scope.textDirection %></label>
-                        <div id="shape-button-direction" style=""></div>
-                    </div>
-                </div>
-                <label class="header" style="display:block;margin-bottom: 5px;"><%= scope.textGradient %></label>
+                <table cols="3" style="margin-bottom: 10px;">
+                    <tr valign="top">
+                        <td colspan="2">
+                            <div>
+                                <label class="input-label" style=""><%= scope.textStyle %></label>
+                                <div id="shape-combo-grad-type" style="width: 100%;"></div>
+                            </div>
+                        </td>
+                        <td rowspan="2" style="width: 100%;">
+                            <div style="float: right;">
+                                <label class="input-label"><%= scope.textDirection %></label>
+                                <div id="shape-button-direction"></div>
+                            </div>
+                        </td>
+                    </tr>
+                    <tr valign="bottom">
+                        <td>
+                            <label class="input-label" style="margin-right: 5px;margin-bottom: 3px;"><%= scope.textAngle %></label>
+                        </td>
+                        <td>
+                            <div id="shape-spin-gradient-angle" style="display: inline-block; width: 60px;"></div>
+                        </td>
+                    </tr>
+                </table>
+                <label class="input-label" style="display:block;margin-bottom: 5px;"><%= scope.textGradient %></label>
                 <div style="display: inline-block; margin-top: 3px;">
                     <div id="shape-slider-gradient" style="display: inline-block; vertical-align: middle;"></div>
                 </div>
diff --git a/apps/documenteditor/main/app/template/TextArtSettings.template b/apps/documenteditor/main/app/template/TextArtSettings.template
index e4e8d61fe..711f3e443 100644
--- a/apps/documenteditor/main/app/template/TextArtSettings.template
+++ b/apps/documenteditor/main/app/template/TextArtSettings.template
@@ -30,17 +30,31 @@
                 <div id="textart-back-color-btn" style=""></div>
             </div>
             <div id="textart-panel-gradient-fill" class="settings-hidden padding-small" style="width: 100%;">
-                <div style="height:80px;">
-                    <div style="display: inline-block;">
-                        <label class="input-label" style=""><%= scope.textStyle %></label>
-                        <div id="textart-combo-grad-type" style="width: 90px;"></div>
-                    </div>
-                    <div style="display: inline-block;float: right;">
-                        <label class="input-label" style=""><%= scope.textDirection %></label>
-                        <div id="textart-button-direction" style=""></div>
-                    </div>
-                </div>
-                <label class="header" style="display:block;margin-bottom: 5px;"><%= scope.textGradient %></label>
+                <table cols="3" style="margin-bottom: 10px;">
+                    <tr valign="top">
+                        <td colspan="2">
+                            <div>
+                                <label class="input-label" style=""><%= scope.textStyle %></label>
+                                <div id="textart-combo-grad-type" style="width: 100%;"></div>
+                            </div>
+                        </td>
+                        <td rowspan="2" style="width: 100%;">
+                            <div style="float: right;">
+                                <label class="input-label"><%= scope.textDirection %></label>
+                                <div id="textart-button-direction"></div>
+                            </div>
+                        </td>
+                    </tr>
+                    <tr valign="bottom">
+                        <td>
+                            <label class="input-label" style="margin-right: 5px;margin-bottom: 3px;"><%= scope.textAngle %></label>
+                        </td>
+                        <td>
+                            <div id="textart-spin-gradient-angle" style="display: inline-block; width: 60px;"></div>
+                        </td>
+                    </tr>
+                </table>
+                <label class="input-label" style="display:block;margin-bottom: 5px;"><%= scope.textGradient %></label>
                 <div style="display: inline-block; margin-top: 3px;">
                     <div id="textart-slider-gradient" style="display: inline-block; vertical-align: middle;"></div>
                 </div>
diff --git a/apps/documenteditor/main/app/view/ShapeSettings.js b/apps/documenteditor/main/app/view/ShapeSettings.js
index c2e588eab..64baa113c 100644
--- a/apps/documenteditor/main/app/view/ShapeSettings.js
+++ b/apps/documenteditor/main/app/view/ShapeSettings.js
@@ -410,6 +410,8 @@ define([
                     this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls'));
                 else
                     this.btnDirection.setIconCls('');
+                this.numGradientAngle.setValue(this.GradLinearDirectionType);
+                this.numGradientAngle.setDisabled(this._locked);
             } else if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_PATH) {
                 this.mnuDirectionPicker.store.reset(this._viewDataRadial);
                 this.mnuDirectionPicker.cmpEl.width(60);
@@ -419,6 +421,8 @@ define([
                     this.btnDirection.setIconCls('item-gradient ' + this._viewDataRadial[this.GradRadialDirectionIdx].iconcls);
                 else
                     this.btnDirection.setIconCls('');
+                this.numGradientAngle.setValue(0);
+                this.numGradientAngle.setDisabled(true);
             }
 
             if (this.api && !this._noApply) {
@@ -455,11 +459,12 @@ define([
             } else {
                 rawData = record;
             }
-
             this.btnDirection.setIconCls('item-gradient ' + rawData.iconcls);
             (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) ? this.GradLinearDirectionType = rawData.type : this.GradRadialDirectionIdx = 0;
             if (this.api) {
                 if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
+                    this.numGradientAngle.setValue(rawData.type);
+
                     var props = new Asc.asc_CShapeProperty();
                     var fill = new Asc.asc_CShapeFill();
                     fill.put_type(Asc.c_oAscFill.FILL_TYPE_GRAD);
@@ -936,8 +941,10 @@ define([
                                 this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls'));
                             else
                                 this.btnDirection.setIconCls('');
+                            this.numGradientAngle.setValue(value);
                         }
-                    }
+                    } else
+                        this.numGradientAngle.setValue(0);
 
                     var me = this;
                     var colors = fill.get_colors(),
@@ -1300,7 +1307,7 @@ define([
             this.cmbGradType = new Common.UI.ComboBox({
                 el: $('#shape-combo-grad-type'),
                 cls: 'input-group-nr',
-                menuStyle: 'min-width: 90px;',
+                menuStyle: 'min-width: 100%;',
                 editable: false,
                 data: this._arrGradType
             });
@@ -1410,7 +1417,7 @@ define([
                 minValue: 0,
                 disabled: this._locked
             });
-            this.lockedControls.push(this.spnGradPosition);
+            this.fillControls.push(this.spnGradPosition);
             this.spnGradPosition.on('change', _.bind(this.onPositionChange, this));
             this.spnGradPosition.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);});
 
@@ -1422,7 +1429,7 @@ define([
                 hint: this.tipAddGradientPoint
             });
             this.btnAddGradientStep.on('click', _.bind(this.onAddGradientStep, this));
-            this.lockedControls.push(this.btnAddGradientStep);
+            this.fillControls.push(this.btnAddGradientStep);
 
             this.btnRemoveGradientStep = new Common.UI.Button({
                 parentEl: $('#shape-gradient-remove-step'),
@@ -1432,7 +1439,21 @@ define([
                 hint: this.tipRemoveGradientPoint
             });
             this.btnRemoveGradientStep.on('click', _.bind(this.onRemoveGradientStep, this));
-            this.lockedControls.push(this.btnRemoveGradientStep);
+            this.fillControls.push(this.btnRemoveGradientStep);
+
+            this.numGradientAngle = new Common.UI.MetricSpinner({
+                el: $('#shape-spin-gradient-angle'),
+                step: 1,
+                width: 60,
+                defaultUnit : "°",
+                value: '0 °',
+                allowDecimal: true,
+                maxValue: 359.9,
+                minValue: 0,
+                disabled: this._locked
+            });
+            this.fillControls.push(this.numGradientAngle);
+            this.numGradientAngle.on('change', _.bind(this.onGradientAngleChange, this));
 
             this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({
                 el: $('#shape-combo-border-size'),
@@ -1821,6 +1842,7 @@ define([
                 });
                 this.lblTransparencyStart.toggleClass('disabled', disable);
                 this.lblTransparencyEnd.toggleClass('disabled', disable);
+                this.numGradientAngle.setDisabled(disable || this.GradFillType !== Asc.c_oAscFillGradType.GRAD_LINEAR);
             }
         },
 
@@ -1921,6 +1943,21 @@ define([
             this.sldrGradient.trigger('changecomplete', this.sldrGradient);
         },
 
+        onGradientAngleChange: function(field, newValue, oldValue, eOpts) {
+            if (this.api) {
+                var props = new Asc.asc_CShapeProperty();
+                var fill = new Asc.asc_CShapeFill();
+                fill.put_type(Asc.c_oAscFill.FILL_TYPE_GRAD);
+                fill.put_fill( new Asc.asc_CFillGrad());
+                fill.get_fill().put_grad_type(this.GradFillType);
+                fill.get_fill().put_linear_angle(field.getNumberValue() * 60000);
+                fill.get_fill().put_linear_scale(true);
+                props.put_fill(fill);
+                this.imgprops.put_ShapeProperties(props);
+                this.api.ImgApply(this.imgprops);
+            }
+        },
+
         txtNoBorders            : 'No Line',
         strStroke               : 'Stroke',
         strColor                : 'Color',
@@ -1959,7 +1996,7 @@ define([
         textRadial: 'Radial',
         textDirection: 'Direction',
         textStyle: 'Style',
-        textGradient: 'Gradient',
+        textGradient: 'Gradient Points',
         textWrap:  'Wraping Style',
         txtInline: 'Inline',
         txtSquare: 'Square',
@@ -1982,6 +2019,7 @@ define([
         textSelectImage: 'Select Picture',
         textPosition: 'Position',
         tipAddGradientPoint: 'Add gradient point',
-        tipRemoveGradientPoint: 'Remove gradient point'
+        tipRemoveGradientPoint: 'Remove gradient point',
+        textAngle: 'Angle'
     }, DE.Views.ShapeSettings || {}));
 });
diff --git a/apps/documenteditor/main/app/view/TextArtSettings.js b/apps/documenteditor/main/app/view/TextArtSettings.js
index c982851df..a0518c692 100644
--- a/apps/documenteditor/main/app/view/TextArtSettings.js
+++ b/apps/documenteditor/main/app/view/TextArtSettings.js
@@ -275,6 +275,8 @@ define([
                     this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls'));
                 else
                     this.btnDirection.setIconCls('');
+                this.numGradientAngle.setValue(this.GradLinearDirectionType);
+                this.numGradientAngle.setDisabled(this._locked);
             } else if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_PATH) {
                 this.mnuDirectionPicker.store.reset(this._viewDataRadial);
                 this.mnuDirectionPicker.cmpEl.width(60);
@@ -284,6 +286,8 @@ define([
                     this.btnDirection.setIconCls('item-gradient ' + this._viewDataRadial[this.GradRadialDirectionIdx].iconcls);
                 else
                     this.btnDirection.setIconCls('');
+                this.numGradientAngle.setValue(0);
+                this.numGradientAngle.setDisabled(true);
             }
 
             if (this.api && !this._noApply) {
@@ -325,6 +329,8 @@ define([
             (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) ? this.GradLinearDirectionType = rawData.type : this.GradRadialDirectionIdx = 0;
             if (this.api) {
                 if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
+                    this.numGradientAngle.setValue(rawData.type);
+
                     var props = new Asc.asc_TextArtProperties();
                     var fill = new Asc.asc_CShapeFill();
                     fill.put_type(Asc.c_oAscFill.FILL_TYPE_GRAD);
@@ -609,8 +615,10 @@ define([
                                 this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls'));
                             else
                                 this.btnDirection.setIconCls('');
+                            this.numGradientAngle.setValue(value);
                         }
-                    }
+                    } else
+                        this.numGradientAngle.setValue(0);
 
                     var me = this;
                     var colors = fill.get_colors(),
@@ -866,7 +874,7 @@ define([
             this.cmbGradType = new Common.UI.ComboBox({
                 el: $('#textart-combo-grad-type'),
                 cls: 'input-group-nr',
-                menuStyle: 'min-width: 90px;',
+                menuStyle: 'min-width: 100%;',
                 editable: false,
                 data: this._arrGradType
             });
@@ -984,7 +992,7 @@ define([
                 cls: 'btn-toolbar',
                 iconCls: 'toolbar__icon btn-add-breakpoint',
                 disabled: this._locked,
-                hint: this.tipAddGradientPoint,
+                hint: this.tipAddGradientPoint
             });
             this.btnAddGradientStep.on('click', _.bind(this.onAddGradientStep, this));
             this.lockedControls.push(this.btnAddGradientStep);
@@ -999,6 +1007,20 @@ define([
             this.btnRemoveGradientStep.on('click', _.bind(this.onRemoveGradientStep, this));
             this.lockedControls.push(this.btnRemoveGradientStep);
 
+            this.numGradientAngle = new Common.UI.MetricSpinner({
+                el: $('#textart-spin-gradient-angle'),
+                step: 1,
+                width: 60,
+                defaultUnit : "°",
+                value: '0 °',
+                allowDecimal: true,
+                maxValue: 359.9,
+                minValue: 0,
+                disabled: this._locked
+            });
+            this.lockedControls.push(this.numGradientAngle);
+            this.numGradientAngle.on('change', _.bind(this.onGradientAngleChange, this));
+
             this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({
                 el: $('#textart-combo-border-size'),
                 style: "width: 93px;",
@@ -1194,6 +1216,7 @@ define([
                 _.each(this.lockedControls, function(item) {
                     item.setDisabled(disable);
                 });
+                this.numGradientAngle.setDisabled(disable || this.GradFillType !== Asc.c_oAscFillGradType.GRAD_LINEAR);
             }
         },
 
@@ -1255,6 +1278,21 @@ define([
             this.sldrGradient.trigger('changecomplete', this.sldrGradient);
         },
 
+        onGradientAngleChange: function(field, newValue, oldValue, eOpts) {
+            if (this.api) {
+                var props = new Asc.asc_TextArtProperties();
+                var fill = new Asc.asc_CShapeFill();
+                fill.put_type(Asc.c_oAscFill.FILL_TYPE_GRAD);
+                fill.put_fill( new Asc.asc_CFillGrad());
+                fill.get_fill().put_grad_type(this.GradFillType);
+                fill.get_fill().put_linear_angle(field.getNumberValue() * 60000);
+                fill.get_fill().put_linear_scale(true);
+                props.asc_putFill(fill);
+                this.shapeprops.put_TextArtProperties(props);
+                this.api.ImgApply(this.imgprops);
+            }
+        },
+
         txtNoBorders            : 'No Line',
         strStroke               : 'Stroke',
         strColor                : 'Color',
@@ -1269,13 +1307,14 @@ define([
         textRadial: 'Radial',
         textDirection: 'Direction',
         textStyle: 'Style',
-        textGradient: 'Gradient',
+        textGradient: 'Gradient Points',
         textBorderSizeErr: 'The entered value is incorrect.<br>Please enter a value between 0 pt and 1584 pt.',
         textTransform: 'Transform',
         textTemplate: 'Template',
         strType: 'Type',
         textPosition: 'Position',
         tipAddGradientPoint: 'Add gradient point',
-        tipRemoveGradientPoint: 'Remove gradient point'
+        tipRemoveGradientPoint: 'Remove gradient point',
+        textAngle: 'Angle'
     }, DE.Views.TextArtSettings || {}));
 });
diff --git a/apps/documenteditor/main/locale/de.json b/apps/documenteditor/main/locale/de.json
index f16fd7b4e..ef81c04e4 100644
--- a/apps/documenteditor/main/locale/de.json
+++ b/apps/documenteditor/main/locale/de.json
@@ -1963,6 +1963,7 @@
   "DE.Views.ShapeSettings.txtTight": "Passend",
   "DE.Views.ShapeSettings.txtTopAndBottom": "Oben und unten",
   "DE.Views.ShapeSettings.txtWood": "Holz",
+  "DE.Views.ShapeSettings.textAngle": "Winkel",
   "DE.Views.SignatureSettings.notcriticalErrorTitle": "Warnung",
   "DE.Views.SignatureSettings.strDelete": "Signatur entfernen",
   "DE.Views.SignatureSettings.strDetails": "Signaturdetails",
diff --git a/apps/documenteditor/main/locale/en.json b/apps/documenteditor/main/locale/en.json
index 18ef3838c..a38e2bded 100644
--- a/apps/documenteditor/main/locale/en.json
+++ b/apps/documenteditor/main/locale/en.json
@@ -2016,7 +2016,7 @@
   "DE.Views.ShapeSettings.textFromFile": "From File",
   "DE.Views.ShapeSettings.textFromStorage": "From Storage",
   "DE.Views.ShapeSettings.textFromUrl": "From URL",
-  "DE.Views.ShapeSettings.textGradient": "Gradient",
+  "DE.Views.ShapeSettings.textGradient": "Gradient Points",
   "DE.Views.ShapeSettings.textGradientFill": "Gradient Fill",
   "DE.Views.ShapeSettings.textHint270": "Rotate 90° Counterclockwise",
   "DE.Views.ShapeSettings.textHint90": "Rotate 90° Clockwise",
@@ -2058,6 +2058,7 @@
   "DE.Views.ShapeSettings.textPosition": "Position",
   "DE.Views.ShapeSettings.tipAddGradientPoint": "Add gradient point",
   "DE.Views.ShapeSettings.tipRemoveGradientPoint": "Remove gradient point",
+  "DE.Views.ShapeSettings.textAngle": "Angle",
   "DE.Views.SignatureSettings.notcriticalErrorTitle": "Warning",
   "DE.Views.SignatureSettings.strDelete": "Remove Signature",
   "DE.Views.SignatureSettings.strDetails": "Signature Details",
@@ -2248,7 +2249,7 @@
   "DE.Views.TextArtSettings.textBorderSizeErr": "The entered value is incorrect.<br>Please enter a value between 0 pt and 1584 pt.",
   "DE.Views.TextArtSettings.textColor": "Color Fill",
   "DE.Views.TextArtSettings.textDirection": "Direction",
-  "DE.Views.TextArtSettings.textGradient": "Gradient",
+  "DE.Views.TextArtSettings.textGradient": "Gradient Points",
   "DE.Views.TextArtSettings.textGradientFill": "Gradient Fill",
   "DE.Views.TextArtSettings.textLinear": "Linear",
   "DE.Views.TextArtSettings.textNoFill": "No Fill",
@@ -2261,6 +2262,7 @@
   "DE.Views.TextArtSettings.textPosition": "Position",
   "DE.Views.TextArtSettings.tipAddGradientPoint": "Add gradient point",
   "DE.Views.TextArtSettings.tipRemoveGradientPoint": "Remove gradient point",
+  "DE.Views.TextArtSettings.textAngle": "Angle",
   "DE.Views.Toolbar.capBtnAddComment": "Add Comment",
   "DE.Views.Toolbar.capBtnBlankPage": "Blank Page",
   "DE.Views.Toolbar.capBtnColumns": "Columns",
diff --git a/apps/documenteditor/main/locale/es.json b/apps/documenteditor/main/locale/es.json
index 180f79178..c9cbb5d14 100644
--- a/apps/documenteditor/main/locale/es.json
+++ b/apps/documenteditor/main/locale/es.json
@@ -1963,6 +1963,7 @@
   "DE.Views.ShapeSettings.txtTight": "Estrecho",
   "DE.Views.ShapeSettings.txtTopAndBottom": "Superior e inferior",
   "DE.Views.ShapeSettings.txtWood": "Madera",
+  "DE.Views.ShapeSettings.textAngle": "Ángulo",
   "DE.Views.SignatureSettings.notcriticalErrorTitle": "Aviso",
   "DE.Views.SignatureSettings.strDelete": "Elimine la firma",
   "DE.Views.SignatureSettings.strDetails": "Detalles de la firma",