diff --git a/apps/spreadsheeteditor/main/app/template/ShapeSettings.template b/apps/spreadsheeteditor/main/app/template/ShapeSettings.template index 1bca1a8a5..30cbd4f8b 100644 --- a/apps/spreadsheeteditor/main/app/template/ShapeSettings.template +++ b/apps/spreadsheeteditor/main/app/template/ShapeSettings.template @@ -52,17 +52,31 @@
-
-
- -
-
-
- -
-
-
- + + + + + + + + + +
+
+ +
+
+
+
+ +
+
+
+ + +
+
+
diff --git a/apps/spreadsheeteditor/main/app/template/TextArtSettings.template b/apps/spreadsheeteditor/main/app/template/TextArtSettings.template index a89a18a89..d480b1716 100644 --- a/apps/spreadsheeteditor/main/app/template/TextArtSettings.template +++ b/apps/spreadsheeteditor/main/app/template/TextArtSettings.template @@ -70,17 +70,31 @@
-
-
- -
-
-
- -
-
-
- + + + + + + + + + +
+
+ +
+
+
+
+ +
+
+
+ + +
+
+
diff --git a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js index d382468e5..2de990a01 100644 --- a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js +++ b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js @@ -406,6 +406,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); @@ -415,6 +417,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) { @@ -456,6 +460,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_CShapeProperty(); var fill = new Asc.asc_CShapeFill(); fill.asc_putType(Asc.c_oAscFill.FILL_TYPE_GRAD); @@ -873,8 +879,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.asc_getColors(), @@ -1348,7 +1356,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);}); @@ -1357,10 +1365,10 @@ 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); + this.fillControls.push(this.btnAddGradientStep); this.btnRemoveGradientStep = new Common.UI.Button({ parentEl: $('#shape-gradient-remove-step'), @@ -1370,7 +1378,22 @@ 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.numGradientAngle.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);}); this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({ el: $('#shape-combo-border-size'), @@ -1723,6 +1746,7 @@ define([ }); this.lblTransparencyStart.toggleClass('disabled', disable); this.lblTransparencyEnd.toggleClass('disabled', disable); + this.numGradientAngle.setDisabled(disable || this.GradFillType !== Asc.c_oAscFillGradType.GRAD_LINEAR); } }, @@ -1823,6 +1847,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.asc_putType(Asc.c_oAscFill.FILL_TYPE_GRAD); + fill.asc_putFill( new Asc.asc_CFillGrad()); + fill.asc_getFill().asc_putGradType(this.GradFillType); + fill.asc_getFill().asc_putLinearAngle(field.getNumberValue() * 60000); + fill.asc_getFill().asc_putLinearScale(true); + props.asc_putFill(fill); + this.imgprops.asc_putShapeProperties(props); + this.api.asc_setGraphicObjectProps(this.imgprops); + } + }, + txtNoBorders : 'No Line', strStroke : 'Stroke', strColor : 'Color', @@ -1861,7 +1900,7 @@ 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.', strType: 'Type', textRotation: 'Rotation', @@ -1876,6 +1915,7 @@ define([ textSelectImage: 'Select Picture', textPosition: 'Position', tipAddGradientPoint: 'Add gradient point', - tipRemoveGradientPoint: 'Remove gradient point' + tipRemoveGradientPoint: 'Remove gradient point', + textAngle: 'Angle' }, SSE.Views.ShapeSettings || {})); }); diff --git a/apps/spreadsheeteditor/main/app/view/TextArtSettings.js b/apps/spreadsheeteditor/main/app/view/TextArtSettings.js index 4413045a5..fba8ae1e9 100644 --- a/apps/spreadsheeteditor/main/app/view/TextArtSettings.js +++ b/apps/spreadsheeteditor/main/app/view/TextArtSettings.js @@ -396,6 +396,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); @@ -405,6 +407,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) { @@ -446,6 +450,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.asc_putType(Asc.c_oAscFill.FILL_TYPE_GRAD); @@ -807,8 +813,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.asc_getColors(), @@ -1295,7 +1303,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); @@ -1310,6 +1318,21 @@ 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.numGradientAngle.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);}); + this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({ el: $('#textart-combo-border-size'), style: "width: 93px;", @@ -1629,6 +1652,7 @@ define([ _.each(this.lockedControls, function(item) { item.setDisabled(disable); }); + this.numGradientAngle.setDisabled(disable || this.GradFillType !== Asc.c_oAscFillGradType.GRAD_LINEAR); } }, @@ -1689,6 +1713,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.asc_putType(Asc.c_oAscFill.FILL_TYPE_GRAD); + fill.asc_putFill( new Asc.asc_CFillGrad()); + fill.asc_getFill().asc_putGradType(this.GradFillType); + fill.asc_getFill().asc_putLinearAngle(field.getNumberValue() * 60000); + fill.asc_getFill().asc_putLinearScale(true); + props.asc_putFill(fill); + this.shapeprops.put_TextArtProperties(props); + this.api.asc_setGraphicObjectProps(this.imgprops); + } + }, + txtNoBorders : 'No Line', strStroke : 'Stroke', strColor : 'Color', @@ -1725,13 +1764,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' }, SSE.Views.TextArtSettings || {})); }); diff --git a/apps/spreadsheeteditor/main/locale/en.json b/apps/spreadsheeteditor/main/locale/en.json index 4b746e016..40e254a5c 100644 --- a/apps/spreadsheeteditor/main/locale/en.json +++ b/apps/spreadsheeteditor/main/locale/en.json @@ -2283,7 +2283,7 @@ "SSE.Views.ShapeSettings.textFromFile": "From File", "SSE.Views.ShapeSettings.textFromStorage": "From Storage", "SSE.Views.ShapeSettings.textFromUrl": "From URL", - "SSE.Views.ShapeSettings.textGradient": "Gradient", + "SSE.Views.ShapeSettings.textGradient": "Gradient Points", "SSE.Views.ShapeSettings.textGradientFill": "Gradient Fill", "SSE.Views.ShapeSettings.textHint270": "Rotate 90° Counterclockwise", "SSE.Views.ShapeSettings.textHint90": "Rotate 90° Clockwise", @@ -2318,6 +2318,7 @@ "SSE.Views.ShapeSettings.textPosition": "Position", "SSE.Views.ShapeSettings.tipAddGradientPoint": "Add gradient point", "SSE.Views.ShapeSettings.tipRemoveGradientPoint": "Remove gradient point", + "SSE.Views.ShapeSettings.textAngle": "Angle", "SSE.Views.ShapeSettingsAdvanced.strColumns": "Columns", "SSE.Views.ShapeSettingsAdvanced.strMargins": "Text Padding", "SSE.Views.ShapeSettingsAdvanced.textAbsolute": "Don't move or size with cells", @@ -2626,7 +2627,7 @@ "SSE.Views.TextArtSettings.textEmptyPattern": "No Pattern", "SSE.Views.TextArtSettings.textFromFile": "From File", "SSE.Views.TextArtSettings.textFromUrl": "From URL", - "SSE.Views.TextArtSettings.textGradient": "Gradient", + "SSE.Views.TextArtSettings.textGradient": "Gradient Points", "SSE.Views.TextArtSettings.textGradientFill": "Gradient Fill", "SSE.Views.TextArtSettings.textImageTexture": "Picture or Texture", "SSE.Views.TextArtSettings.textLinear": "Linear", @@ -2655,6 +2656,7 @@ "SSE.Views.TextArtSettings.textPosition": "Position", "SSE.Views.TextArtSettings.tipAddGradientPoint": "Add gradient point", "SSE.Views.TextArtSettings.tipRemoveGradientPoint": "Remove gradient point", + "SSE.Views.TextArtSettings.textAngle": "Angle", "SSE.Views.Toolbar.capBtnAddComment": "Add Comment", "SSE.Views.Toolbar.capBtnComment": "Comment", "SSE.Views.Toolbar.capBtnInsHeader": "Header/Footer",