Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Merge pull request #502 from ONLYOFFICE/feature/shape-gradient

Browse source 
Feature/shape gradient
Bug 43708
This commit is contained in:
Julia Radzhabova 2020-09-10 22:34:22 +03:00 committed by GitHub
parent e65c82a8d1 2e638816d9
commit 35a8e81973
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 534 additions and 140 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
apps/documenteditor/main/app/template/ShapeSettings.template
View file

@ -52,17 +52,31 @@
</div> </div>
</div> </div>
<div id="shape-panel-gradient-fill" class="settings-hidden padding-small" style="width: 100%;"> <div id="shape-panel-gradient-fill" class="settings-hidden padding-small" style="width: 100%;">
<div style="height:80px;"> <table cols="3" style="margin-bottom: 10px;">
<div style="display: inline-block;"> <tr valign="top">
<label class="input-label" style=""><%= scope.textStyle %></label> <td colspan="2">
<div id="shape-combo-grad-type" style="width: 90px;"></div> <div>
</div> <label class="input-label" style=""><%= scope.textStyle %></label>
<div style="display: inline-block;float: right;"> <div id="shape-combo-grad-type" style="width: 100%;"></div>
<label class="input-label" style=""><%= scope.textDirection %></label> </div>
<div id="shape-button-direction" style=""></div> </td>
</div> <td rowspan="2" style="width: 100%;">
</div> <div style="float: right;">
<label class="header" style="display:block;margin-bottom: 5px;"><%= scope.textGradient %></label> <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 style="display: inline-block; margin-top: 3px;">
<div id="shape-slider-gradient" style="display: inline-block; vertical-align: middle;"></div> <div id="shape-slider-gradient" style="display: inline-block; vertical-align: middle;"></div>
</div> </div>

36
apps/documenteditor/main/app/template/TextArtSettings.template
View file

@ -30,17 +30,31 @@
<div id="textart-back-color-btn" style=""></div> <div id="textart-back-color-btn" style=""></div>
</div> </div>
<div id="textart-panel-gradient-fill" class="settings-hidden padding-small" style="width: 100%;"> <div id="textart-panel-gradient-fill" class="settings-hidden padding-small" style="width: 100%;">
<div style="height:80px;"> <table cols="3" style="margin-bottom: 10px;">
<div style="display: inline-block;"> <tr valign="top">
<label class="input-label" style=""><%= scope.textStyle %></label> <td colspan="2">
<div id="textart-combo-grad-type" style="width: 90px;"></div> <div>
</div> <label class="input-label" style=""><%= scope.textStyle %></label>
<div style="display: inline-block;float: right;"> <div id="textart-combo-grad-type" style="width: 100%;"></div>
<label class="input-label" style=""><%= scope.textDirection %></label> </div>
<div id="textart-button-direction" style=""></div> </td>
</div> <td rowspan="2" style="width: 100%;">
</div> <div style="float: right;">
<label class="header" style="display:block;margin-bottom: 5px;"><%= scope.textGradient %></label> <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 style="display: inline-block; margin-top: 3px;">
<div id="textart-slider-gradient" style="display: inline-block; vertical-align: middle;"></div> <div id="textart-slider-gradient" style="display: inline-block; vertical-align: middle;"></div>
</div> </div>

57
apps/documenteditor/main/app/view/ShapeSettings.js
View file

@ -410,6 +410,8 @@ define([
this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls')); this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls'));
else else
this.btnDirection.setIconCls(''); this.btnDirection.setIconCls('');
this.numGradientAngle.setValue(this.GradLinearDirectionType);
this.numGradientAngle.setDisabled(this._locked);
} else if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_PATH) { } else if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_PATH) {
this.mnuDirectionPicker.store.reset(this._viewDataRadial); this.mnuDirectionPicker.store.reset(this._viewDataRadial);
this.mnuDirectionPicker.cmpEl.width(60); this.mnuDirectionPicker.cmpEl.width(60);
@ -419,6 +421,8 @@ define([
this.btnDirection.setIconCls('item-gradient ' + this._viewDataRadial[this.GradRadialDirectionIdx].iconcls); this.btnDirection.setIconCls('item-gradient ' + this._viewDataRadial[this.GradRadialDirectionIdx].iconcls);
else else
this.btnDirection.setIconCls(''); this.btnDirection.setIconCls('');
this.numGradientAngle.setValue(0);
this.numGradientAngle.setDisabled(true);
} }
if (this.api && !this._noApply) { if (this.api && !this._noApply) {
@ -455,11 +459,12 @@ define([
} else { } else {
rawData = record; rawData = record;
} }
this.btnDirection.setIconCls('item-gradient ' + rawData.iconcls); this.btnDirection.setIconCls('item-gradient ' + rawData.iconcls);
(this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) ? this.GradLinearDirectionType = rawData.type : this.GradRadialDirectionIdx = 0; (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) ? this.GradLinearDirectionType = rawData.type : this.GradRadialDirectionIdx = 0;
if (this.api) { if (this.api) {
if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) { if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
this.numGradientAngle.setValue(rawData.type);
var props = new Asc.asc_CShapeProperty(); var props = new Asc.asc_CShapeProperty();
var fill = new Asc.asc_CShapeFill(); var fill = new Asc.asc_CShapeFill();
fill.put_type(Asc.c_oAscFill.FILL_TYPE_GRAD); fill.put_type(Asc.c_oAscFill.FILL_TYPE_GRAD);
@ -936,8 +941,10 @@ define([
this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls')); this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls'));
else else
this.btnDirection.setIconCls(''); this.btnDirection.setIconCls('');
this.numGradientAngle.setValue(value);
} }
} } else
this.numGradientAngle.setValue(0);
var me = this; var me = this;
var colors = fill.get_colors(), var colors = fill.get_colors(),
@ -1300,7 +1307,7 @@ define([
this.cmbGradType = new Common.UI.ComboBox({ this.cmbGradType = new Common.UI.ComboBox({
el: $('#shape-combo-grad-type'), el: $('#shape-combo-grad-type'),
cls: 'input-group-nr', cls: 'input-group-nr',
menuStyle: 'min-width: 90px;', menuStyle: 'min-width: 100%;',
editable: false, editable: false,
data: this._arrGradType data: this._arrGradType
}); });
@ -1410,9 +1417,9 @@ define([
minValue: 0, minValue: 0,
disabled: this._locked disabled: this._locked
}); });
this.lockedControls.push(this.spnGradPosition); this.fillControls.push(this.spnGradPosition);
this.spnGradPosition.on('change', _.bind(this.onPositionChange, this)); this.spnGradPosition.on('change', _.bind(this.onPositionChange, this));
this.spnGradPosition.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);}); this.spnGradPosition.on('inputleave', function(){ me.fireEvent('editcomplete', me);});
this.btnAddGradientStep = new Common.UI.Button({ this.btnAddGradientStep = new Common.UI.Button({
parentEl: $('#shape-gradient-add-step'), parentEl: $('#shape-gradient-add-step'),
@ -1422,7 +1429,7 @@ define([
hint: this.tipAddGradientPoint hint: this.tipAddGradientPoint
}); });
this.btnAddGradientStep.on('click', _.bind(this.onAddGradientStep, this)); this.btnAddGradientStep.on('click', _.bind(this.onAddGradientStep, this));
this.lockedControls.push(this.btnAddGradientStep); this.fillControls.push(this.btnAddGradientStep);
this.btnRemoveGradientStep = new Common.UI.Button({ this.btnRemoveGradientStep = new Common.UI.Button({
parentEl: $('#shape-gradient-remove-step'), parentEl: $('#shape-gradient-remove-step'),
@ -1432,7 +1439,22 @@ define([
hint: this.tipRemoveGradientPoint hint: this.tipRemoveGradientPoint
}); });
this.btnRemoveGradientStep.on('click', _.bind(this.onRemoveGradientStep, this)); 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(){ me.fireEvent('editcomplete', me);});
this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({ this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({
el: $('#shape-combo-border-size'), el: $('#shape-combo-border-size'),
@ -1821,6 +1843,7 @@ define([
}); });
this.lblTransparencyStart.toggleClass('disabled', disable); this.lblTransparencyStart.toggleClass('disabled', disable);
this.lblTransparencyEnd.toggleClass('disabled', disable); this.lblTransparencyEnd.toggleClass('disabled', disable);
this.numGradientAngle.setDisabled(disable || this.GradFillType !== Asc.c_oAscFillGradType.GRAD_LINEAR);
} }
}, },
@ -1921,6 +1944,21 @@ define([
this.sldrGradient.trigger('changecomplete', this.sldrGradient); 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', txtNoBorders : 'No Line',
strStroke : 'Stroke', strStroke : 'Stroke',
strColor : 'Color', strColor : 'Color',
@ -1959,7 +1997,7 @@ define([
textRadial: 'Radial', textRadial: 'Radial',
textDirection: 'Direction', textDirection: 'Direction',
textStyle: 'Style', textStyle: 'Style',
textGradient: 'Gradient', textGradient: 'Gradient Points',
textWrap: 'Wraping Style', textWrap: 'Wraping Style',
txtInline: 'Inline', txtInline: 'Inline',
txtSquare: 'Square', txtSquare: 'Square',
@ -1982,6 +2020,7 @@ define([
textSelectImage: 'Select Picture', textSelectImage: 'Select Picture',
textPosition: 'Position', textPosition: 'Position',
tipAddGradientPoint: 'Add gradient point', tipAddGradientPoint: 'Add gradient point',
tipRemoveGradientPoint: 'Remove gradient point' tipRemoveGradientPoint: 'Remove gradient point',
textAngle: 'Angle'
}, DE.Views.ShapeSettings || {})); }, DE.Views.ShapeSettings || {}));
}); });

52
apps/documenteditor/main/app/view/TextArtSettings.js
View file

@ -275,6 +275,8 @@ define([
this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls')); this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls'));
else else
this.btnDirection.setIconCls(''); this.btnDirection.setIconCls('');
this.numGradientAngle.setValue(this.GradLinearDirectionType);
this.numGradientAngle.setDisabled(this._locked);
} else if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_PATH) { } else if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_PATH) {
this.mnuDirectionPicker.store.reset(this._viewDataRadial); this.mnuDirectionPicker.store.reset(this._viewDataRadial);
this.mnuDirectionPicker.cmpEl.width(60); this.mnuDirectionPicker.cmpEl.width(60);
@ -284,6 +286,8 @@ define([
this.btnDirection.setIconCls('item-gradient ' + this._viewDataRadial[this.GradRadialDirectionIdx].iconcls); this.btnDirection.setIconCls('item-gradient ' + this._viewDataRadial[this.GradRadialDirectionIdx].iconcls);
else else
this.btnDirection.setIconCls(''); this.btnDirection.setIconCls('');
this.numGradientAngle.setValue(0);
this.numGradientAngle.setDisabled(true);
} }
if (this.api && !this._noApply) { if (this.api && !this._noApply) {
@ -325,6 +329,8 @@ define([
(this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) ? this.GradLinearDirectionType = rawData.type : this.GradRadialDirectionIdx = 0; (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) ? this.GradLinearDirectionType = rawData.type : this.GradRadialDirectionIdx = 0;
if (this.api) { if (this.api) {
if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) { if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
this.numGradientAngle.setValue(rawData.type);
var props = new Asc.asc_TextArtProperties(); var props = new Asc.asc_TextArtProperties();
var fill = new Asc.asc_CShapeFill(); var fill = new Asc.asc_CShapeFill();
fill.put_type(Asc.c_oAscFill.FILL_TYPE_GRAD); fill.put_type(Asc.c_oAscFill.FILL_TYPE_GRAD);
@ -609,8 +615,10 @@ define([
this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls')); this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls'));
else else
this.btnDirection.setIconCls(''); this.btnDirection.setIconCls('');
this.numGradientAngle.setValue(value);
} }
} } else
this.numGradientAngle.setValue(0);
var me = this; var me = this;
var colors = fill.get_colors(), var colors = fill.get_colors(),
@ -866,7 +874,7 @@ define([
this.cmbGradType = new Common.UI.ComboBox({ this.cmbGradType = new Common.UI.ComboBox({
el: $('#textart-combo-grad-type'), el: $('#textart-combo-grad-type'),
cls: 'input-group-nr', cls: 'input-group-nr',
menuStyle: 'min-width: 90px;', menuStyle: 'min-width: 100%;',
editable: false, editable: false,
data: this._arrGradType data: this._arrGradType
}); });
@ -977,14 +985,14 @@ define([
}); });
this.lockedControls.push(this.spnGradPosition); this.lockedControls.push(this.spnGradPosition);
this.spnGradPosition.on('change', _.bind(this.onPositionChange, this)); this.spnGradPosition.on('change', _.bind(this.onPositionChange, this));
this.spnGradPosition.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);}); this.spnGradPosition.on('inputleave', function(){ me.fireEvent('editcomplete', me);});
this.btnAddGradientStep = new Common.UI.Button({ this.btnAddGradientStep = new Common.UI.Button({
parentEl: $('#textart-gradient-add-step'), parentEl: $('#textart-gradient-add-step'),
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-add-breakpoint', iconCls: 'toolbar__icon btn-add-breakpoint',
disabled: this._locked, disabled: this._locked,
hint: this.tipAddGradientPoint, hint: this.tipAddGradientPoint
}); });
this.btnAddGradientStep.on('click', _.bind(this.onAddGradientStep, this)); this.btnAddGradientStep.on('click', _.bind(this.onAddGradientStep, this));
this.lockedControls.push(this.btnAddGradientStep); this.lockedControls.push(this.btnAddGradientStep);
@ -999,6 +1007,21 @@ define([
this.btnRemoveGradientStep.on('click', _.bind(this.onRemoveGradientStep, this)); this.btnRemoveGradientStep.on('click', _.bind(this.onRemoveGradientStep, this));
this.lockedControls.push(this.btnRemoveGradientStep); 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(){ me.fireEvent('editcomplete', me);});
this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({ this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({
el: $('#textart-combo-border-size'), el: $('#textart-combo-border-size'),
style: "width: 93px;", style: "width: 93px;",
@ -1194,6 +1217,7 @@ define([
_.each(this.lockedControls, function(item) { _.each(this.lockedControls, function(item) {
item.setDisabled(disable); item.setDisabled(disable);
}); });
this.numGradientAngle.setDisabled(disable || this.GradFillType !== Asc.c_oAscFillGradType.GRAD_LINEAR);
} }
}, },
@ -1255,6 +1279,21 @@ define([
this.sldrGradient.trigger('changecomplete', this.sldrGradient); 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', txtNoBorders : 'No Line',
strStroke : 'Stroke', strStroke : 'Stroke',
strColor : 'Color', strColor : 'Color',
@ -1269,13 +1308,14 @@ define([
textRadial: 'Radial', textRadial: 'Radial',
textDirection: 'Direction', textDirection: 'Direction',
textStyle: 'Style', textStyle: 'Style',
textGradient: 'Gradient', textGradient: 'Gradient Points',
textBorderSizeErr: 'The entered value is incorrect.<br>Please enter a value between 0 pt and 1584 pt.', textBorderSizeErr: 'The entered value is incorrect.<br>Please enter a value between 0 pt and 1584 pt.',
textTransform: 'Transform', textTransform: 'Transform',
textTemplate: 'Template', textTemplate: 'Template',
strType: 'Type', strType: 'Type',
textPosition: 'Position', textPosition: 'Position',
tipAddGradientPoint: 'Add gradient point', tipAddGradientPoint: 'Add gradient point',
tipRemoveGradientPoint: 'Remove gradient point' tipRemoveGradientPoint: 'Remove gradient point',
textAngle: 'Angle'
}, DE.Views.TextArtSettings || {})); }, DE.Views.TextArtSettings || {}));
}); });

1
apps/documenteditor/main/locale/de.json
View file

@ -1963,6 +1963,7 @@
"DE.Views.ShapeSettings.txtTight": "Passend", "DE.Views.ShapeSettings.txtTight": "Passend",
"DE.Views.ShapeSettings.txtTopAndBottom": "Oben und unten", "DE.Views.ShapeSettings.txtTopAndBottom": "Oben und unten",
"DE.Views.ShapeSettings.txtWood": "Holz", "DE.Views.ShapeSettings.txtWood": "Holz",
"DE.Views.ShapeSettings.textAngle": "Winkel",
"DE.Views.SignatureSettings.notcriticalErrorTitle": "Warnung", "DE.Views.SignatureSettings.notcriticalErrorTitle": "Warnung",
"DE.Views.SignatureSettings.strDelete": "Signatur entfernen", "DE.Views.SignatureSettings.strDelete": "Signatur entfernen",
"DE.Views.SignatureSettings.strDetails": "Signaturdetails", "DE.Views.SignatureSettings.strDetails": "Signaturdetails",

6
apps/documenteditor/main/locale/en.json
View file

@ -2016,7 +2016,7 @@
"DE.Views.ShapeSettings.textFromFile": "From File", "DE.Views.ShapeSettings.textFromFile": "From File",
"DE.Views.ShapeSettings.textFromStorage": "From Storage", "DE.Views.ShapeSettings.textFromStorage": "From Storage",
"DE.Views.ShapeSettings.textFromUrl": "From URL", "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.textGradientFill": "Gradient Fill",
"DE.Views.ShapeSettings.textHint270": "Rotate 90° Counterclockwise", "DE.Views.ShapeSettings.textHint270": "Rotate 90° Counterclockwise",
"DE.Views.ShapeSettings.textHint90": "Rotate 90° Clockwise", "DE.Views.ShapeSettings.textHint90": "Rotate 90° Clockwise",
@ -2058,6 +2058,7 @@
"DE.Views.ShapeSettings.textPosition": "Position", "DE.Views.ShapeSettings.textPosition": "Position",
"DE.Views.ShapeSettings.tipAddGradientPoint": "Add gradient point", "DE.Views.ShapeSettings.tipAddGradientPoint": "Add gradient point",
"DE.Views.ShapeSettings.tipRemoveGradientPoint": "Remove gradient point", "DE.Views.ShapeSettings.tipRemoveGradientPoint": "Remove gradient point",
"DE.Views.ShapeSettings.textAngle": "Angle",
"DE.Views.SignatureSettings.notcriticalErrorTitle": "Warning", "DE.Views.SignatureSettings.notcriticalErrorTitle": "Warning",
"DE.Views.SignatureSettings.strDelete": "Remove Signature", "DE.Views.SignatureSettings.strDelete": "Remove Signature",
"DE.Views.SignatureSettings.strDetails": "Signature Details", "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.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.textColor": "Color Fill",
"DE.Views.TextArtSettings.textDirection": "Direction", "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.textGradientFill": "Gradient Fill",
"DE.Views.TextArtSettings.textLinear": "Linear", "DE.Views.TextArtSettings.textLinear": "Linear",
"DE.Views.TextArtSettings.textNoFill": "No Fill", "DE.Views.TextArtSettings.textNoFill": "No Fill",
@ -2261,6 +2262,7 @@
"DE.Views.TextArtSettings.textPosition": "Position", "DE.Views.TextArtSettings.textPosition": "Position",
"DE.Views.TextArtSettings.tipAddGradientPoint": "Add gradient point", "DE.Views.TextArtSettings.tipAddGradientPoint": "Add gradient point",
"DE.Views.TextArtSettings.tipRemoveGradientPoint": "Remove gradient point", "DE.Views.TextArtSettings.tipRemoveGradientPoint": "Remove gradient point",
"DE.Views.TextArtSettings.textAngle": "Angle",
"DE.Views.Toolbar.capBtnAddComment": "Add Comment", "DE.Views.Toolbar.capBtnAddComment": "Add Comment",
"DE.Views.Toolbar.capBtnBlankPage": "Blank Page", "DE.Views.Toolbar.capBtnBlankPage": "Blank Page",
"DE.Views.Toolbar.capBtnColumns": "Columns", "DE.Views.Toolbar.capBtnColumns": "Columns",

1
apps/documenteditor/main/locale/es.json
View file

@ -1963,6 +1963,7 @@
"DE.Views.ShapeSettings.txtTight": "Estrecho", "DE.Views.ShapeSettings.txtTight": "Estrecho",
"DE.Views.ShapeSettings.txtTopAndBottom": "Superior e inferior", "DE.Views.ShapeSettings.txtTopAndBottom": "Superior e inferior",
"DE.Views.ShapeSettings.txtWood": "Madera", "DE.Views.ShapeSettings.txtWood": "Madera",
"DE.Views.ShapeSettings.textAngle": "Ángulo",
"DE.Views.SignatureSettings.notcriticalErrorTitle": "Aviso", "DE.Views.SignatureSettings.notcriticalErrorTitle": "Aviso",
"DE.Views.SignatureSettings.strDelete": "Elimine la firma", "DE.Views.SignatureSettings.strDelete": "Elimine la firma",
"DE.Views.SignatureSettings.strDetails": "Detalles de la firma", "DE.Views.SignatureSettings.strDetails": "Detalles de la firma",

2
apps/presentationeditor/main/app/controller/RightMenu.js
View file

@ -177,7 +177,7 @@ define([
if (i == Common.Utils.documentSettingsType.Slide) { if (i == Common.Utils.documentSettingsType.Slide) {
if (pnl.locked!==undefined) if (pnl.locked!==undefined)
this.rightmenu.slideSettings.SetSlideDisabled(this._state.no_slides || pnl.lockedBackground || pnl.locked, this.rightmenu.slideSettings.setLocked(this._state.no_slides || pnl.lockedBackground || pnl.locked,
this._state.no_slides || pnl.lockedEffects || pnl.locked, this._state.no_slides || pnl.lockedEffects || pnl.locked,
this._state.no_slides || pnl.lockedTiming || pnl.locked, this._state.no_slides || pnl.lockedTiming || pnl.locked,
this._state.no_slides || pnl.lockedHeader || pnl.locked); this._state.no_slides || pnl.lockedHeader || pnl.locked);

36
apps/presentationeditor/main/app/template/ShapeSettings.template
View file

@ -52,17 +52,31 @@
</div> </div>
</div> </div>
<div id="shape-panel-gradient-fill" class="settings-hidden padding-small" style="width: 100%;"> <div id="shape-panel-gradient-fill" class="settings-hidden padding-small" style="width: 100%;">
<div style="height:80px;"> <table cols="3" style="margin-bottom: 10px;">
<div style="display: inline-block;"> <tr valign="top">
<label class="input-label" style=""><%= scope.textStyle %></label> <td colspan="2">
<div id="shape-combo-grad-type" style="width: 90px;"></div> <div>
</div> <label class="input-label" style=""><%= scope.textStyle %></label>
<div style="display: inline-block;float: right;"> <div id="shape-combo-grad-type" style="width: 100%;"></div>
<label class="input-label" style=""><%= scope.textDirection %></label> </div>
<div id="shape-button-direction" style=""></div> </td>
</div> <td rowspan="2" style="width: 100%;">
</div> <div style="float: right;">
<label class="header" style="display:block;margin-bottom: 5px;"><%= scope.textGradient %></label> <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 style="display: inline-block; margin-top: 3px;">
<div id="shape-slider-gradient" style="display: inline-block; vertical-align: middle;"></div> <div id="shape-slider-gradient" style="display: inline-block; vertical-align: middle;"></div>
</div> </div>

36
apps/presentationeditor/main/app/template/SlideSettings.template
View file

@ -52,17 +52,31 @@
</div> </div>
</div> </div>
<div id="slide-panel-gradient-fill" class="settings-hidden padding-small" style="width: 100%;"> <div id="slide-panel-gradient-fill" class="settings-hidden padding-small" style="width: 100%;">
<div style="height:80px;"> <table cols="3" style="margin-bottom: 10px;">
<div style="display: inline-block;"> <tr valign="top">
<label class="input-label" style=""><%= scope.textStyle %></label> <td colspan="2">
<div id="slide-combo-grad-type" style="width: 90px;"></div> <div>
</div> <label class="input-label" style=""><%= scope.textStyle %></label>
<div style="display: inline-block;float: right;"> <div id="slide-combo-grad-type" style="width: 100%;"></div>
<label class="input-label" style=""><%= scope.textDirection %></label> </div>
<div id="slide-button-direction" style=""></div> </td>
</div> <td rowspan="2" style="width: 100%;">
</div> <div style="float: right;">
<label class="header" style="display:block;margin-bottom: 5px;"><%= scope.textGradient %></label> <label class="input-label"><%= scope.textDirection %></label>
<div id="slide-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="slide-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 style="display: inline-block; margin-top: 3px;">
<div id="slide-slider-gradient" style="display: inline-block; vertical-align: middle;"></div> <div id="slide-slider-gradient" style="display: inline-block; vertical-align: middle;"></div>
</div> </div>

36
apps/presentationeditor/main/app/template/TextArtSettings.template
View file

@ -70,17 +70,31 @@
</div> </div>
</div> </div>
<div id="textart-panel-gradient-fill" class="settings-hidden padding-small" style="width: 100%;"> <div id="textart-panel-gradient-fill" class="settings-hidden padding-small" style="width: 100%;">
<div style="height:80px;"> <table cols="3" style="margin-bottom: 10px;">
<div style="display: inline-block;"> <tr valign="top">
<label class="input-label" style=""><%= scope.textStyle %></label> <td colspan="2">
<div id="textart-combo-grad-type" style="width: 90px;"></div> <div>
</div> <label class="input-label" style=""><%= scope.textStyle %></label>
<div style="display: inline-block;float: right;"> <div id="textart-combo-grad-type" style="width: 100%;"></div>
<label class="input-label" style=""><%= scope.textDirection %></label> </div>
<div id="textart-button-direction" style=""></div> </td>
</div> <td rowspan="2" style="width: 100%;">
</div> <div style="float: right;">
<label class="header" style="display:block;margin-bottom: 5px;"><%= scope.textGradient %></label> <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 style="display: inline-block; margin-top: 3px;">
<div id="textart-slider-gradient" style="display: inline-block; vertical-align: middle;"></div> <div id="textart-slider-gradient" style="display: inline-block; vertical-align: middle;"></div>
</div> </div>

55
apps/presentationeditor/main/app/view/ShapeSettings.js
View file

@ -394,6 +394,8 @@ define([
this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls')); this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls'));
else else
this.btnDirection.setIconCls(''); this.btnDirection.setIconCls('');
this.numGradientAngle.setValue(this.GradLinearDirectionType);
this.numGradientAngle.setDisabled(this._locked);
} else if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_PATH) { } else if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_PATH) {
this.mnuDirectionPicker.store.reset(this._viewDataRadial); this.mnuDirectionPicker.store.reset(this._viewDataRadial);
this.mnuDirectionPicker.cmpEl.width(60); this.mnuDirectionPicker.cmpEl.width(60);
@ -403,6 +405,8 @@ define([
this.btnDirection.setIconCls('item-gradient ' + this._viewDataRadial[this.GradRadialDirectionIdx].iconcls); this.btnDirection.setIconCls('item-gradient ' + this._viewDataRadial[this.GradRadialDirectionIdx].iconcls);
else else
this.btnDirection.setIconCls(''); this.btnDirection.setIconCls('');
this.numGradientAngle.setValue(0);
this.numGradientAngle.setDisabled(true);
} }
if (this.api && !this._noApply) { if (this.api && !this._noApply) {
@ -443,6 +447,8 @@ define([
(this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) ? this.GradLinearDirectionType = rawData.type : this.GradRadialDirectionIdx = 0; (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) ? this.GradLinearDirectionType = rawData.type : this.GradRadialDirectionIdx = 0;
if (this.api) { if (this.api) {
if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) { if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
this.numGradientAngle.setValue(rawData.type);
var props = new Asc.asc_CShapeProperty(); var props = new Asc.asc_CShapeProperty();
var fill = new Asc.asc_CShapeFill(); var fill = new Asc.asc_CShapeFill();
fill.put_type(Asc.c_oAscFill.FILL_TYPE_GRAD); fill.put_type(Asc.c_oAscFill.FILL_TYPE_GRAD);
@ -849,8 +855,10 @@ define([
this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls')); this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls'));
else else
this.btnDirection.setIconCls(''); this.btnDirection.setIconCls('');
this.numGradientAngle.setValue(value);
} }
} } else
this.numGradientAngle.setValue(0);
var me = this; var me = this;
var colors = fill.get_colors(), var colors = fill.get_colors(),
@ -1322,19 +1330,19 @@ define([
minValue: 0, minValue: 0,
disabled: this._locked disabled: this._locked
}); });
this.lockedControls.push(this.spnGradPosition); this.fillControls.push(this.spnGradPosition);
this.spnGradPosition.on('change', _.bind(this.onPositionChange, this)); this.spnGradPosition.on('change', _.bind(this.onPositionChange, this));
this.spnGradPosition.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);}); this.spnGradPosition.on('inputleave', function(){ me.fireEvent('editcomplete', me);});
this.btnAddGradientStep = new Common.UI.Button({ this.btnAddGradientStep = new Common.UI.Button({
parentEl: $('#shape-gradient-add-step'), parentEl: $('#shape-gradient-add-step'),
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-add-breakpoint', iconCls: 'toolbar__icon btn-add-breakpoint',
disabled: this._locked, disabled: this._locked,
hint: this.tipAddGradientPoint, hint: this.tipAddGradientPoint
}); });
this.btnAddGradientStep.on('click', _.bind(this.onAddGradientStep, this)); this.btnAddGradientStep.on('click', _.bind(this.onAddGradientStep, this));
this.lockedControls.push(this.btnAddGradientStep); this.fillControls.push(this.btnAddGradientStep);
this.btnRemoveGradientStep = new Common.UI.Button({ this.btnRemoveGradientStep = new Common.UI.Button({
parentEl: $('#shape-gradient-remove-step'), parentEl: $('#shape-gradient-remove-step'),
@ -1344,7 +1352,22 @@ define([
hint: this.tipRemoveGradientPoint hint: this.tipRemoveGradientPoint
}); });
this.btnRemoveGradientStep.on('click', _.bind(this.onRemoveGradientStep, this)); 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(){ me.fireEvent('editcomplete', me);});
this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({ this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({
el: $('#shape-combo-border-size'), el: $('#shape-combo-border-size'),
@ -1693,6 +1716,7 @@ define([
}); });
this.lblTransparencyStart.toggleClass('disabled', disable); this.lblTransparencyStart.toggleClass('disabled', disable);
this.lblTransparencyEnd.toggleClass('disabled', disable); this.lblTransparencyEnd.toggleClass('disabled', disable);
this.numGradientAngle.setDisabled(disable || this.GradFillType !== Asc.c_oAscFillGradType.GRAD_LINEAR);
} }
}, },
@ -1792,6 +1816,20 @@ define([
this.sldrGradient.trigger('changecomplete', this.sldrGradient); 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.api.ShapeApply(props);
}
},
txtNoBorders : 'No Line', txtNoBorders : 'No Line',
strStroke : 'Stroke', strStroke : 'Stroke',
strColor : 'Color', strColor : 'Color',
@ -1830,7 +1868,7 @@ define([
textRadial: 'Radial', textRadial: 'Radial',
textDirection: 'Direction', textDirection: 'Direction',
textStyle: 'Style', textStyle: 'Style',
textGradient: 'Gradient', textGradient: 'Gradient Points',
textBorderSizeErr: 'The entered value is incorrect.<br>Please enter a value between 0 pt and 1584 pt.', textBorderSizeErr: 'The entered value is incorrect.<br>Please enter a value between 0 pt and 1584 pt.',
strType: 'Type', strType: 'Type',
textRotation: 'Rotation', textRotation: 'Rotation',
@ -1845,6 +1883,7 @@ define([
textSelectImage: 'Select Picture', textSelectImage: 'Select Picture',
textPosition: 'Position', textPosition: 'Position',
tipAddGradientPoint: 'Add gradient point', tipAddGradientPoint: 'Add gradient point',
tipRemoveGradientPoint: 'Remove gradient point' tipRemoveGradientPoint: 'Remove gradient point',
textAngle: 'Angle'
}, PE.Views.ShapeSettings || {})); }, PE.Views.ShapeSettings || {}));
}); });

81
apps/presentationeditor/main/app/view/SlideSettings.js
View file

@ -77,12 +77,13 @@ define([
this.FillItems = []; this.FillItems = [];
this._stateDisabled = { this._locked = {
background: true, background: false,
effects: true, effects: false,
timing: true, timing: false,
header: true header: false
}; };
this._stateDisabled = {};
this._state = { this._state = {
FillType:undefined, FillType:undefined,
@ -495,6 +496,8 @@ define([
this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls')); this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls'));
else else
this.btnDirection.setIconCls(''); this.btnDirection.setIconCls('');
this.numGradientAngle.setValue(this.GradLinearDirectionType);
this.numGradientAngle.setDisabled(this._locked.background);
} else if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_PATH) { } else if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_PATH) {
this.mnuDirectionPicker.store.reset(this._viewDataRadial); this.mnuDirectionPicker.store.reset(this._viewDataRadial);
this.mnuDirectionPicker.cmpEl.width(60); this.mnuDirectionPicker.cmpEl.width(60);
@ -504,6 +507,8 @@ define([
this.btnDirection.setIconCls('item-gradient ' + this._viewDataRadial[this.GradRadialDirectionIdx].iconcls); this.btnDirection.setIconCls('item-gradient ' + this._viewDataRadial[this.GradRadialDirectionIdx].iconcls);
else else
this.btnDirection.setIconCls(''); this.btnDirection.setIconCls('');
this.numGradientAngle.setValue(0);
this.numGradientAngle.setDisabled(true);
} }
if (this.api && !this._noApply) { if (this.api && !this._noApply) {
@ -544,6 +549,8 @@ define([
(this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) ? this.GradLinearDirectionType = rawData.type : this.GradRadialDirectionIdx = 0; (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) ? this.GradLinearDirectionType = rawData.type : this.GradRadialDirectionIdx = 0;
if (this.api) { if (this.api) {
if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) { if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
this.numGradientAngle.setValue(rawData.type);
var props = new Asc.CAscSlideProps(); var props = new Asc.CAscSlideProps();
var fill = new Asc.asc_CShapeFill(); var fill = new Asc.asc_CShapeFill();
fill.put_type(Asc.c_oAscFill.FILL_TYPE_GRAD); fill.put_type(Asc.c_oAscFill.FILL_TYPE_GRAD);
@ -865,18 +872,18 @@ define([
allowDecimal: false, allowDecimal: false,
maxValue: 100, maxValue: 100,
minValue: 0, minValue: 0,
disabled: this._locked disabled: this._locked.background
}); });
this.FillItems.push(this.spnGradPosition); this.FillItems.push(this.spnGradPosition);
this.spnGradPosition.on('change', _.bind(this.onPositionChange, this)); this.spnGradPosition.on('change', _.bind(this.onPositionChange, this));
this.spnGradPosition.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);}); this.spnGradPosition.on('inputleave', function(){ me.fireEvent('editcomplete', me);});
this.btnAddGradientStep = new Common.UI.Button({ this.btnAddGradientStep = new Common.UI.Button({
parentEl: $('#slide-gradient-add-step'), parentEl: $('#slide-gradient-add-step'),
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-add-breakpoint', iconCls: 'toolbar__icon btn-add-breakpoint',
disabled: this._locked, disabled: this._locked.background,
hint: this.tipAddGradientPoint, hint: this.tipAddGradientPoint
}); });
this.btnAddGradientStep.on('click', _.bind(this.onAddGradientStep, this)); this.btnAddGradientStep.on('click', _.bind(this.onAddGradientStep, this));
this.FillItems.push(this.btnAddGradientStep); this.FillItems.push(this.btnAddGradientStep);
@ -885,12 +892,26 @@ define([
parentEl: $('#slide-gradient-remove-step'), parentEl: $('#slide-gradient-remove-step'),
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-remove-breakpoint', iconCls: 'toolbar__icon btn-remove-breakpoint',
disabled: this._locked, disabled: this._locked.background,
hint: this.tipRemoveGradientPoint hint: this.tipRemoveGradientPoint
}); });
this.btnRemoveGradientStep.on('click', _.bind(this.onRemoveGradientStep, this)); this.btnRemoveGradientStep.on('click', _.bind(this.onRemoveGradientStep, this));
this.FillItems.push(this.btnRemoveGradientStep); this.FillItems.push(this.btnRemoveGradientStep);
this.numGradientAngle = new Common.UI.MetricSpinner({
el: $('#slide-spin-gradient-angle'),
step: 1,
width: 60,
defaultUnit : "°",
value: '0 °',
allowDecimal: true,
maxValue: 359.9,
minValue: 0,
disabled: this._locked.background
});
this.FillItems.push(this.numGradientAngle);
this.numGradientAngle.on('change', _.bind(this.onGradientAngleChange, this));
this.numGradientAngle.on('inputleave', function(){ me.fireEvent('editcomplete', me);});
}, },
createDelayedElements: function() { createDelayedElements: function() {
@ -1039,9 +1060,9 @@ define([
this.EffectType = undefined; this.EffectType = undefined;
} }
this.cmbEffectType.setDisabled(arr.length<1 || this._stateDisabled.effects); this.cmbEffectType.setDisabled(arr.length<1 || this._locked.effects);
this.numDuration.setDisabled(arr.length<1 || this._stateDisabled.effects); this.numDuration.setDisabled(arr.length<1 || this._locked.effects);
this.btnPreview.setDisabled(arr.length<1 || this._stateDisabled.effects); this.btnPreview.setDisabled(arr.length<1 || this._locked.effects);
}, },
onEffectNameSelect: function(combo, record) { onEffectNameSelect: function(combo, record) {
@ -1175,6 +1196,7 @@ define([
ChangeSettings: function(props) { ChangeSettings: function(props) {
if (this._initSettings) if (this._initSettings)
this.createDelayedElements(); this.createDelayedElements();
this.SetSlideDisabled(this._locked.background, this._locked.effects, this._locked.timing, this._locked.header);
if (props) if (props)
{ {
@ -1281,8 +1303,10 @@ define([
this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls')); this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls'));
else else
this.btnDirection.setIconCls(''); this.btnDirection.setIconCls('');
this.numGradientAngle.setValue(value);
} }
} } else
this.numGradientAngle.setValue(0);
var me = this; var me = this;
var colors = fill.get_colors(), var colors = fill.get_colors(),
@ -1503,7 +1527,16 @@ define([
} }
}, },
setLocked: function (background, effects, timing, header) {
this._locked = {
background: background, effects: effects, timing: timing, header: header
};
},
SetSlideDisabled: function(background, effects, timing, header) { SetSlideDisabled: function(background, effects, timing, header) {
this._locked = {
background: background, effects: effects, timing: timing, header: header
};
if (this._initSettings) return; if (this._initSettings) return;
if (background !== this._stateDisabled.background) { if (background !== this._stateDisabled.background) {
@ -1511,6 +1544,7 @@ define([
for (var i=0; i<this.FillItems.length; i++) { for (var i=0; i<this.FillItems.length; i++) {
this.FillItems[i].setDisabled(background); this.FillItems[i].setDisabled(background);
} }
this.numGradientAngle.setDisabled(background || this.GradFillType !== Asc.c_oAscFillGradType.GRAD_LINEAR);
this._stateDisabled.background = background; this._stateDisabled.background = background;
} }
if (effects !== this._stateDisabled.effects) { if (effects !== this._stateDisabled.effects) {
@ -1592,6 +1626,20 @@ define([
this.sldrGradient.trigger('changecomplete', this.sldrGradient); this.sldrGradient.trigger('changecomplete', this.sldrGradient);
}, },
onGradientAngleChange: function(field, newValue, oldValue, eOpts) {
if (this.api) {
var props = new Asc.CAscSlideProps();
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_background(fill);
this.api.SetSlideProps(props);
}
},
strColor : 'Color', strColor : 'Color',
strFill : 'Background', strFill : 'Background',
textColor : 'Color Fill', textColor : 'Color Fill',
@ -1660,7 +1708,7 @@ define([
textRadial: 'Radial', textRadial: 'Radial',
textDirection: 'Direction', textDirection: 'Direction',
textStyle: 'Style', textStyle: 'Style',
textGradient: 'Gradient', textGradient: 'Gradient Points',
textSec: 's', textSec: 's',
strSlideNum: 'Show Slide Number', strSlideNum: 'Show Slide Number',
strDateTime: 'Show Date and Time', strDateTime: 'Show Date and Time',
@ -1668,6 +1716,7 @@ define([
textSelectImage: 'Select Picture', textSelectImage: 'Select Picture',
textPosition: 'Position', textPosition: 'Position',
tipAddGradientPoint: 'Add gradient point', tipAddGradientPoint: 'Add gradient point',
tipRemoveGradientPoint: 'Remove gradient point' tipRemoveGradientPoint: 'Remove gradient point',
textAngle: 'Angle'
}, PE.Views.SlideSettings || {})); }, PE.Views.SlideSettings || {}));
}); });

50
apps/presentationeditor/main/app/view/TextArtSettings.js
View file

@ -395,6 +395,8 @@ define([
this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls')); this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls'));
else else
this.btnDirection.setIconCls(''); this.btnDirection.setIconCls('');
this.numGradientAngle.setValue(this.GradLinearDirectionType);
this.numGradientAngle.setDisabled(this._locked);
} else if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_PATH) { } else if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_PATH) {
this.mnuDirectionPicker.store.reset(this._viewDataRadial); this.mnuDirectionPicker.store.reset(this._viewDataRadial);
this.mnuDirectionPicker.cmpEl.width(60); this.mnuDirectionPicker.cmpEl.width(60);
@ -404,6 +406,8 @@ define([
this.btnDirection.setIconCls('item-gradient ' + this._viewDataRadial[this.GradRadialDirectionIdx].iconcls); this.btnDirection.setIconCls('item-gradient ' + this._viewDataRadial[this.GradRadialDirectionIdx].iconcls);
else else
this.btnDirection.setIconCls(''); this.btnDirection.setIconCls('');
this.numGradientAngle.setValue(0);
this.numGradientAngle.setDisabled(true);
} }
if (this.api && !this._noApply) { if (this.api && !this._noApply) {
@ -445,6 +449,8 @@ define([
(this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) ? this.GradLinearDirectionType = rawData.type : this.GradRadialDirectionIdx = 0; (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) ? this.GradLinearDirectionType = rawData.type : this.GradRadialDirectionIdx = 0;
if (this.api) { if (this.api) {
if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) { if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
this.numGradientAngle.setValue(rawData.type);
var props = new Asc.asc_TextArtProperties(); var props = new Asc.asc_TextArtProperties();
var fill = new Asc.asc_CShapeFill(); var fill = new Asc.asc_CShapeFill();
fill.put_type(Asc.c_oAscFill.FILL_TYPE_GRAD); fill.put_type(Asc.c_oAscFill.FILL_TYPE_GRAD);
@ -803,8 +809,10 @@ define([
this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls')); this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls'));
else else
this.btnDirection.setIconCls(''); this.btnDirection.setIconCls('');
this.numGradientAngle.setValue(value);
} }
} } else
this.numGradientAngle.setValue(0);
var me = this; var me = this;
var colors = fill.get_colors(), var colors = fill.get_colors(),
@ -1284,14 +1292,14 @@ define([
}); });
this.lockedControls.push(this.spnGradPosition); this.lockedControls.push(this.spnGradPosition);
this.spnGradPosition.on('change', _.bind(this.onPositionChange, this)); this.spnGradPosition.on('change', _.bind(this.onPositionChange, this));
this.spnGradPosition.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);}); this.spnGradPosition.on('inputleave', function(){ me.fireEvent('editcomplete', me);});
this.btnAddGradientStep = new Common.UI.Button({ this.btnAddGradientStep = new Common.UI.Button({
parentEl: $('#textart-gradient-add-step'), parentEl: $('#textart-gradient-add-step'),
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-add-breakpoint', iconCls: 'toolbar__icon btn-add-breakpoint',
disabled: this._locked, disabled: this._locked,
hint: this.tipAddGradientPoint, hint: this.tipAddGradientPoint
}); });
this.btnAddGradientStep.on('click', _.bind(this.onAddGradientStep, this)); this.btnAddGradientStep.on('click', _.bind(this.onAddGradientStep, this));
this.lockedControls.push(this.btnAddGradientStep); this.lockedControls.push(this.btnAddGradientStep);
@ -1306,6 +1314,21 @@ define([
this.btnRemoveGradientStep.on('click', _.bind(this.onRemoveGradientStep, this)); this.btnRemoveGradientStep.on('click', _.bind(this.onRemoveGradientStep, this));
this.lockedControls.push(this.btnRemoveGradientStep); 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(){ me.fireEvent('editcomplete', me);});
this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({ this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({
el: $('#textart-combo-border-size'), el: $('#textart-combo-border-size'),
style: "width: 93px;", style: "width: 93px;",
@ -1625,6 +1648,7 @@ define([
_.each(this.lockedControls, function(item) { _.each(this.lockedControls, function(item) {
item.setDisabled(disable); item.setDisabled(disable);
}); });
this.numGradientAngle.setDisabled(disable || this.GradFillType !== Asc.c_oAscFillGradType.GRAD_LINEAR);
} }
}, },
@ -1686,6 +1710,21 @@ define([
this.sldrGradient.trigger('changecomplete', this.sldrGradient); 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.ShapeApply(this.shapeprops);
}
},
txtNoBorders : 'No Line', txtNoBorders : 'No Line',
strStroke : 'Stroke', strStroke : 'Stroke',
strColor : 'Color', strColor : 'Color',
@ -1722,13 +1761,14 @@ define([
textRadial: 'Radial', textRadial: 'Radial',
textDirection: 'Direction', textDirection: 'Direction',
textStyle: 'Style', textStyle: 'Style',
textGradient: 'Gradient', textGradient: 'Gradient Points',
textBorderSizeErr: 'The entered value is incorrect.<br>Please enter a value between 0 pt and 1584 pt.', textBorderSizeErr: 'The entered value is incorrect.<br>Please enter a value between 0 pt and 1584 pt.',
textTransform: 'Transform', textTransform: 'Transform',
textTemplate: 'Template', textTemplate: 'Template',
strType: 'Type', strType: 'Type',
textPosition: 'Position', textPosition: 'Position',
tipAddGradientPoint: 'Add gradient point', tipAddGradientPoint: 'Add gradient point',
tipRemoveGradientPoint: 'Remove gradient point' tipRemoveGradientPoint: 'Remove gradient point',
textAngle: 'Angle'
}, PE.Views.TextArtSettings || {})); }, PE.Views.TextArtSettings || {}));
}); });

9
apps/presentationeditor/main/locale/en.json
View file

@ -1451,7 +1451,7 @@
"PE.Views.ShapeSettings.textFromFile": "From File", "PE.Views.ShapeSettings.textFromFile": "From File",
"PE.Views.ShapeSettings.textFromStorage": "From Storage", "PE.Views.ShapeSettings.textFromStorage": "From Storage",
"PE.Views.ShapeSettings.textFromUrl": "From URL", "PE.Views.ShapeSettings.textFromUrl": "From URL",
"PE.Views.ShapeSettings.textGradient": "Gradient", "PE.Views.ShapeSettings.textGradient": "Gradient Points",
"PE.Views.ShapeSettings.textGradientFill": "Gradient Fill", "PE.Views.ShapeSettings.textGradientFill": "Gradient Fill",
"PE.Views.ShapeSettings.textHint270": "Rotate 90° Counterclockwise", "PE.Views.ShapeSettings.textHint270": "Rotate 90° Counterclockwise",
"PE.Views.ShapeSettings.textHint90": "Rotate 90° Clockwise", "PE.Views.ShapeSettings.textHint90": "Rotate 90° Clockwise",
@ -1485,6 +1485,7 @@
"PE.Views.ShapeSettings.textPosition": "Position", "PE.Views.ShapeSettings.textPosition": "Position",
"PE.Views.ShapeSettings.tipAddGradientPoint": "Add gradient point", "PE.Views.ShapeSettings.tipAddGradientPoint": "Add gradient point",
"PE.Views.ShapeSettings.tipRemoveGradientPoint": "Remove gradient point", "PE.Views.ShapeSettings.tipRemoveGradientPoint": "Remove gradient point",
"PE.Views.ShapeSettings.textAngle": "Angle",
"PE.Views.ShapeSettingsAdvanced.strColumns": "Columns", "PE.Views.ShapeSettingsAdvanced.strColumns": "Columns",
"PE.Views.ShapeSettingsAdvanced.strMargins": "Text Padding", "PE.Views.ShapeSettingsAdvanced.strMargins": "Text Padding",
"PE.Views.ShapeSettingsAdvanced.textAlt": "Alternative Text", "PE.Views.ShapeSettingsAdvanced.textAlt": "Alternative Text",
@ -1566,7 +1567,7 @@
"PE.Views.SlideSettings.textFromFile": "From File", "PE.Views.SlideSettings.textFromFile": "From File",
"PE.Views.SlideSettings.textFromStorage": "From Storage", "PE.Views.SlideSettings.textFromStorage": "From Storage",
"PE.Views.SlideSettings.textFromUrl": "From URL", "PE.Views.SlideSettings.textFromUrl": "From URL",
"PE.Views.SlideSettings.textGradient": "Gradient", "PE.Views.SlideSettings.textGradient": "Gradient Points",
"PE.Views.SlideSettings.textGradientFill": "Gradient Fill", "PE.Views.SlideSettings.textGradientFill": "Gradient Fill",
"PE.Views.SlideSettings.textHorizontalIn": "Horizontal In", "PE.Views.SlideSettings.textHorizontalIn": "Horizontal In",
"PE.Views.SlideSettings.textHorizontalOut": "Horizontal Out", "PE.Views.SlideSettings.textHorizontalOut": "Horizontal Out",
@ -1616,6 +1617,7 @@
"PE.Views.SlideSettings.textPosition": "Position", "PE.Views.SlideSettings.textPosition": "Position",
"PE.Views.SlideSettings.tipAddGradientPoint": "Add gradient point", "PE.Views.SlideSettings.tipAddGradientPoint": "Add gradient point",
"PE.Views.SlideSettings.tipRemoveGradientPoint": "Remove gradient point", "PE.Views.SlideSettings.tipRemoveGradientPoint": "Remove gradient point",
"PE.Views.SlideSettings.textAngle": "Angle",
"PE.Views.SlideshowSettings.textLoop": "Loop continuously until 'Esc' is pressed", "PE.Views.SlideshowSettings.textLoop": "Loop continuously until 'Esc' is pressed",
"PE.Views.SlideshowSettings.textTitle": "Show Settings", "PE.Views.SlideshowSettings.textTitle": "Show Settings",
"PE.Views.SlideSizeSettings.strLandscape": "Landscape", "PE.Views.SlideSizeSettings.strLandscape": "Landscape",
@ -1733,7 +1735,7 @@
"PE.Views.TextArtSettings.textEmptyPattern": "No Pattern", "PE.Views.TextArtSettings.textEmptyPattern": "No Pattern",
"PE.Views.TextArtSettings.textFromFile": "From File", "PE.Views.TextArtSettings.textFromFile": "From File",
"PE.Views.TextArtSettings.textFromUrl": "From URL", "PE.Views.TextArtSettings.textFromUrl": "From URL",
"PE.Views.TextArtSettings.textGradient": "Gradient", "PE.Views.TextArtSettings.textGradient": "Gradient Points",
"PE.Views.TextArtSettings.textGradientFill": "Gradient Fill", "PE.Views.TextArtSettings.textGradientFill": "Gradient Fill",
"PE.Views.TextArtSettings.textImageTexture": "Picture or Texture", "PE.Views.TextArtSettings.textImageTexture": "Picture or Texture",
"PE.Views.TextArtSettings.textLinear": "Linear", "PE.Views.TextArtSettings.textLinear": "Linear",
@ -1762,6 +1764,7 @@
"PE.Views.TextArtSettings.textPosition": "Position", "PE.Views.TextArtSettings.textPosition": "Position",
"PE.Views.TextArtSettings.tipAddGradientPoint": "Add gradient point", "PE.Views.TextArtSettings.tipAddGradientPoint": "Add gradient point",
"PE.Views.TextArtSettings.tipRemoveGradientPoint": "Remove gradient point", "PE.Views.TextArtSettings.tipRemoveGradientPoint": "Remove gradient point",
"PE.Views.TextArtSettings.textAngle": "Angle",
"PE.Views.Toolbar.capAddSlide": "Add Slide", "PE.Views.Toolbar.capAddSlide": "Add Slide",
"PE.Views.Toolbar.capBtnAddComment": "Add Comment", "PE.Views.Toolbar.capBtnAddComment": "Add Comment",
"PE.Views.Toolbar.capBtnComment": "Comment", "PE.Views.Toolbar.capBtnComment": "Comment",

36
apps/spreadsheeteditor/main/app/template/ShapeSettings.template
View file

@ -52,17 +52,31 @@
</div> </div>
</div> </div>
<div id="shape-panel-gradient-fill" class="settings-hidden padding-small" style="width: 100%;"> <div id="shape-panel-gradient-fill" class="settings-hidden padding-small" style="width: 100%;">
<div style="height:80px;"> <table cols="3" style="margin-bottom: 10px;">
<div style="display: inline-block;"> <tr valign="top">
<label class="input-label" style=""><%= scope.textStyle %></label> <td colspan="2">
<div id="shape-combo-grad-type" style="width: 90px;"></div> <div>
</div> <label class="input-label" style=""><%= scope.textStyle %></label>
<div style="display: inline-block;float: right;"> <div id="shape-combo-grad-type" style="width: 100%;"></div>
<label class="input-label" style=""><%= scope.textDirection %></label> </div>
<div id="shape-button-direction" style=""></div> </td>
</div> <td rowspan="2" style="width: 100%;">
</div> <div style="float: right;">
<label class="header" style="display:block;margin-bottom: 5px;"><%= scope.textGradient %></label> <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 style="display: inline-block; margin-top: 3px;">
<div id="shape-slider-gradient" style="display: inline-block; vertical-align: middle;"></div> <div id="shape-slider-gradient" style="display: inline-block; vertical-align: middle;"></div>
</div> </div>

36
apps/spreadsheeteditor/main/app/template/TextArtSettings.template
View file

@ -70,17 +70,31 @@
</div> </div>
</div> </div>
<div id="textart-panel-gradient-fill" class="settings-hidden padding-small" style="width: 100%;"> <div id="textart-panel-gradient-fill" class="settings-hidden padding-small" style="width: 100%;">
<div style="height:80px;"> <table cols="3" style="margin-bottom: 10px;">
<div style="display: inline-block;"> <tr valign="top">
<label class="input-label" style=""><%= scope.textStyle %></label> <td colspan="2">
<div id="textart-combo-grad-type" style="width: 90px;"></div> <div>
</div> <label class="input-label" style=""><%= scope.textStyle %></label>
<div style="display: inline-block;float: right;"> <div id="textart-combo-grad-type" style="width: 100%;"></div>
<label class="input-label" style=""><%= scope.textDirection %></label> </div>
<div id="textart-button-direction" style=""></div> </td>
</div> <td rowspan="2" style="width: 100%;">
</div> <div style="float: right;">
<label class="header" style="display:block;margin-bottom: 5px;"><%= scope.textGradient %></label> <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 style="display: inline-block; margin-top: 3px;">
<div id="textart-slider-gradient" style="display: inline-block; vertical-align: middle;"></div> <div id="textart-slider-gradient" style="display: inline-block; vertical-align: middle;"></div>
</div> </div>

54
apps/spreadsheeteditor/main/app/view/ShapeSettings.js
View file

@ -406,6 +406,8 @@ define([
this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls')); this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls'));
else else
this.btnDirection.setIconCls(''); this.btnDirection.setIconCls('');
this.numGradientAngle.setValue(this.GradLinearDirectionType);
this.numGradientAngle.setDisabled(this._locked);
} else if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_PATH) { } else if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_PATH) {
this.mnuDirectionPicker.store.reset(this._viewDataRadial); this.mnuDirectionPicker.store.reset(this._viewDataRadial);
this.mnuDirectionPicker.cmpEl.width(60); this.mnuDirectionPicker.cmpEl.width(60);
@ -415,6 +417,8 @@ define([
this.btnDirection.setIconCls('item-gradient ' + this._viewDataRadial[this.GradRadialDirectionIdx].iconcls); this.btnDirection.setIconCls('item-gradient ' + this._viewDataRadial[this.GradRadialDirectionIdx].iconcls);
else else
this.btnDirection.setIconCls(''); this.btnDirection.setIconCls('');
this.numGradientAngle.setValue(0);
this.numGradientAngle.setDisabled(true);
} }
if (this.api && !this._noApply) { if (this.api && !this._noApply) {
@ -456,6 +460,8 @@ define([
(this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) ? this.GradLinearDirectionType = rawData.type : this.GradRadialDirectionIdx = 0; (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) ? this.GradLinearDirectionType = rawData.type : this.GradRadialDirectionIdx = 0;
if (this.api) { if (this.api) {
if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) { if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
this.numGradientAngle.setValue(rawData.type);
var props = new Asc.asc_CShapeProperty(); var props = new Asc.asc_CShapeProperty();
var fill = new Asc.asc_CShapeFill(); var fill = new Asc.asc_CShapeFill();
fill.asc_putType(Asc.c_oAscFill.FILL_TYPE_GRAD); fill.asc_putType(Asc.c_oAscFill.FILL_TYPE_GRAD);
@ -873,8 +879,10 @@ define([
this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls')); this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls'));
else else
this.btnDirection.setIconCls(''); this.btnDirection.setIconCls('');
this.numGradientAngle.setValue(value);
} }
} } else
this.numGradientAngle.setValue(0);
var me = this; var me = this;
var colors = fill.asc_getColors(), var colors = fill.asc_getColors(),
@ -1348,7 +1356,7 @@ define([
minValue: 0, minValue: 0,
disabled: this._locked disabled: this._locked
}); });
this.lockedControls.push(this.spnGradPosition); this.fillControls.push(this.spnGradPosition);
this.spnGradPosition.on('change', _.bind(this.onPositionChange, this)); this.spnGradPosition.on('change', _.bind(this.onPositionChange, this));
this.spnGradPosition.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);}); this.spnGradPosition.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);});
@ -1357,10 +1365,10 @@ define([
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-add-breakpoint', iconCls: 'toolbar__icon btn-add-breakpoint',
disabled: this._locked, disabled: this._locked,
hint: this.tipAddGradientPoint, hint: this.tipAddGradientPoint
}); });
this.btnAddGradientStep.on('click', _.bind(this.onAddGradientStep, this)); this.btnAddGradientStep.on('click', _.bind(this.onAddGradientStep, this));
this.lockedControls.push(this.btnAddGradientStep); this.fillControls.push(this.btnAddGradientStep);
this.btnRemoveGradientStep = new Common.UI.Button({ this.btnRemoveGradientStep = new Common.UI.Button({
parentEl: $('#shape-gradient-remove-step'), parentEl: $('#shape-gradient-remove-step'),
@ -1370,7 +1378,22 @@ define([
hint: this.tipRemoveGradientPoint hint: this.tipRemoveGradientPoint
}); });
this.btnRemoveGradientStep.on('click', _.bind(this.onRemoveGradientStep, this)); 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({ this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({
el: $('#shape-combo-border-size'), el: $('#shape-combo-border-size'),
@ -1723,6 +1746,7 @@ define([
}); });
this.lblTransparencyStart.toggleClass('disabled', disable); this.lblTransparencyStart.toggleClass('disabled', disable);
this.lblTransparencyEnd.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); 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', txtNoBorders : 'No Line',
strStroke : 'Stroke', strStroke : 'Stroke',
strColor : 'Color', strColor : 'Color',
@ -1861,7 +1900,7 @@ define([
textRadial: 'Radial', textRadial: 'Radial',
textDirection: 'Direction', textDirection: 'Direction',
textStyle: 'Style', textStyle: 'Style',
textGradient: 'Gradient', textGradient: 'Gradient Points',
textBorderSizeErr: 'The entered value is incorrect.<br>Please enter a value between 0 pt and 1584 pt.', textBorderSizeErr: 'The entered value is incorrect.<br>Please enter a value between 0 pt and 1584 pt.',
strType: 'Type', strType: 'Type',
textRotation: 'Rotation', textRotation: 'Rotation',
@ -1876,6 +1915,7 @@ define([
textSelectImage: 'Select Picture', textSelectImage: 'Select Picture',
textPosition: 'Position', textPosition: 'Position',
tipAddGradientPoint: 'Add gradient point', tipAddGradientPoint: 'Add gradient point',
tipRemoveGradientPoint: 'Remove gradient point' tipRemoveGradientPoint: 'Remove gradient point',
textAngle: 'Angle'
}, SSE.Views.ShapeSettings || {})); }, SSE.Views.ShapeSettings || {}));
}); });

48
apps/spreadsheeteditor/main/app/view/TextArtSettings.js
View file

@ -396,6 +396,8 @@ define([
this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls')); this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls'));
else else
this.btnDirection.setIconCls(''); this.btnDirection.setIconCls('');
this.numGradientAngle.setValue(this.GradLinearDirectionType);
this.numGradientAngle.setDisabled(this._locked);
} else if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_PATH) { } else if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_PATH) {
this.mnuDirectionPicker.store.reset(this._viewDataRadial); this.mnuDirectionPicker.store.reset(this._viewDataRadial);
this.mnuDirectionPicker.cmpEl.width(60); this.mnuDirectionPicker.cmpEl.width(60);
@ -405,6 +407,8 @@ define([
this.btnDirection.setIconCls('item-gradient ' + this._viewDataRadial[this.GradRadialDirectionIdx].iconcls); this.btnDirection.setIconCls('item-gradient ' + this._viewDataRadial[this.GradRadialDirectionIdx].iconcls);
else else
this.btnDirection.setIconCls(''); this.btnDirection.setIconCls('');
this.numGradientAngle.setValue(0);
this.numGradientAngle.setDisabled(true);
} }
if (this.api && !this._noApply) { if (this.api && !this._noApply) {
@ -446,6 +450,8 @@ define([
(this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) ? this.GradLinearDirectionType = rawData.type : this.GradRadialDirectionIdx = 0; (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) ? this.GradLinearDirectionType = rawData.type : this.GradRadialDirectionIdx = 0;
if (this.api) { if (this.api) {
if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) { if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
this.numGradientAngle.setValue(rawData.type);
var props = new Asc.asc_TextArtProperties(); var props = new Asc.asc_TextArtProperties();
var fill = new Asc.asc_CShapeFill(); var fill = new Asc.asc_CShapeFill();
fill.asc_putType(Asc.c_oAscFill.FILL_TYPE_GRAD); fill.asc_putType(Asc.c_oAscFill.FILL_TYPE_GRAD);
@ -807,8 +813,10 @@ define([
this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls')); this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls'));
else else
this.btnDirection.setIconCls(''); this.btnDirection.setIconCls('');
this.numGradientAngle.setValue(value);
} }
} } else
this.numGradientAngle.setValue(0);
var me = this; var me = this;
var colors = fill.asc_getColors(), var colors = fill.asc_getColors(),
@ -1295,7 +1303,7 @@ define([
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-add-breakpoint', iconCls: 'toolbar__icon btn-add-breakpoint',
disabled: this._locked, disabled: this._locked,
hint: this.tipAddGradientPoint, hint: this.tipAddGradientPoint
}); });
this.btnAddGradientStep.on('click', _.bind(this.onAddGradientStep, this)); this.btnAddGradientStep.on('click', _.bind(this.onAddGradientStep, this));
this.lockedControls.push(this.btnAddGradientStep); this.lockedControls.push(this.btnAddGradientStep);
@ -1310,6 +1318,21 @@ define([
this.btnRemoveGradientStep.on('click', _.bind(this.onRemoveGradientStep, this)); this.btnRemoveGradientStep.on('click', _.bind(this.onRemoveGradientStep, this));
this.lockedControls.push(this.btnRemoveGradientStep); 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({ this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({
el: $('#textart-combo-border-size'), el: $('#textart-combo-border-size'),
style: "width: 93px;", style: "width: 93px;",
@ -1629,6 +1652,7 @@ define([
_.each(this.lockedControls, function(item) { _.each(this.lockedControls, function(item) {
item.setDisabled(disable); 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); 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', txtNoBorders : 'No Line',
strStroke : 'Stroke', strStroke : 'Stroke',
strColor : 'Color', strColor : 'Color',
@ -1725,13 +1764,14 @@ define([
textRadial: 'Radial', textRadial: 'Radial',
textDirection: 'Direction', textDirection: 'Direction',
textStyle: 'Style', textStyle: 'Style',
textGradient: 'Gradient', textGradient: 'Gradient Points',
textBorderSizeErr: 'The entered value is incorrect.<br>Please enter a value between 0 pt and 1584 pt.', textBorderSizeErr: 'The entered value is incorrect.<br>Please enter a value between 0 pt and 1584 pt.',
textTransform: 'Transform', textTransform: 'Transform',
textTemplate: 'Template', textTemplate: 'Template',
strType: 'Type', strType: 'Type',
textPosition: 'Position', textPosition: 'Position',
tipAddGradientPoint: 'Add gradient point', tipAddGradientPoint: 'Add gradient point',
tipRemoveGradientPoint: 'Remove gradient point' tipRemoveGradientPoint: 'Remove gradient point',
textAngle: 'Angle'
}, SSE.Views.TextArtSettings || {})); }, SSE.Views.TextArtSettings || {}));
}); });

6
apps/spreadsheeteditor/main/locale/en.json
View file

@ -2283,7 +2283,7 @@
"SSE.Views.ShapeSettings.textFromFile": "From File", "SSE.Views.ShapeSettings.textFromFile": "From File",
"SSE.Views.ShapeSettings.textFromStorage": "From Storage", "SSE.Views.ShapeSettings.textFromStorage": "From Storage",
"SSE.Views.ShapeSettings.textFromUrl": "From URL", "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.textGradientFill": "Gradient Fill",
"SSE.Views.ShapeSettings.textHint270": "Rotate 90° Counterclockwise", "SSE.Views.ShapeSettings.textHint270": "Rotate 90° Counterclockwise",
"SSE.Views.ShapeSettings.textHint90": "Rotate 90° Clockwise", "SSE.Views.ShapeSettings.textHint90": "Rotate 90° Clockwise",
@ -2318,6 +2318,7 @@
"SSE.Views.ShapeSettings.textPosition": "Position", "SSE.Views.ShapeSettings.textPosition": "Position",
"SSE.Views.ShapeSettings.tipAddGradientPoint": "Add gradient point", "SSE.Views.ShapeSettings.tipAddGradientPoint": "Add gradient point",
"SSE.Views.ShapeSettings.tipRemoveGradientPoint": "Remove gradient point", "SSE.Views.ShapeSettings.tipRemoveGradientPoint": "Remove gradient point",
"SSE.Views.ShapeSettings.textAngle": "Angle",
"SSE.Views.ShapeSettingsAdvanced.strColumns": "Columns", "SSE.Views.ShapeSettingsAdvanced.strColumns": "Columns",
"SSE.Views.ShapeSettingsAdvanced.strMargins": "Text Padding", "SSE.Views.ShapeSettingsAdvanced.strMargins": "Text Padding",
"SSE.Views.ShapeSettingsAdvanced.textAbsolute": "Don't move or size with cells", "SSE.Views.ShapeSettingsAdvanced.textAbsolute": "Don't move or size with cells",
@ -2626,7 +2627,7 @@
"SSE.Views.TextArtSettings.textEmptyPattern": "No Pattern", "SSE.Views.TextArtSettings.textEmptyPattern": "No Pattern",
"SSE.Views.TextArtSettings.textFromFile": "From File", "SSE.Views.TextArtSettings.textFromFile": "From File",
"SSE.Views.TextArtSettings.textFromUrl": "From URL", "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.textGradientFill": "Gradient Fill",
"SSE.Views.TextArtSettings.textImageTexture": "Picture or Texture", "SSE.Views.TextArtSettings.textImageTexture": "Picture or Texture",
"SSE.Views.TextArtSettings.textLinear": "Linear", "SSE.Views.TextArtSettings.textLinear": "Linear",
@ -2655,6 +2656,7 @@
"SSE.Views.TextArtSettings.textPosition": "Position", "SSE.Views.TextArtSettings.textPosition": "Position",
"SSE.Views.TextArtSettings.tipAddGradientPoint": "Add gradient point", "SSE.Views.TextArtSettings.tipAddGradientPoint": "Add gradient point",
"SSE.Views.TextArtSettings.tipRemoveGradientPoint": "Remove gradient point", "SSE.Views.TextArtSettings.tipRemoveGradientPoint": "Remove gradient point",
"SSE.Views.TextArtSettings.textAngle": "Angle",
"SSE.Views.Toolbar.capBtnAddComment": "Add Comment", "SSE.Views.Toolbar.capBtnAddComment": "Add Comment",
"SSE.Views.Toolbar.capBtnComment": "Comment", "SSE.Views.Toolbar.capBtnComment": "Comment",
"SSE.Views.Toolbar.capBtnInsHeader": "Header/Footer", "SSE.Views.Toolbar.capBtnInsHeader": "Header/Footer",