From c56fadc6dfca78173b16a6563c2a55129da7defe Mon Sep 17 00:00:00 2001 From: Julia Radzhabova 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 @@
-
-
- -
-
-
- -
-
-
- + + + + + + + + + +
+
+ +
+
+ 		+
+ +
+
+
+ + +
+
+
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 @@
-
-
- -
-
-
- -
-
-
- + + + + + + + + + +
+
+ +
+
+ 		+
+ +
+
+
+ + +
+
+
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.
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.
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",