[DE] Shape and TextArt settings: add gradient angle
This commit is contained in:
parent
e65c82a8d1
commit
c56fadc6df
|
@ -52,17 +52,31 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="shape-panel-gradient-fill" class="settings-hidden padding-small" style="width: 100%;">
|
||||
<div style="height:80px;">
|
||||
<div style="display: inline-block;">
|
||||
<label class="input-label" style=""><%= scope.textStyle %></label>
|
||||
<div id="shape-combo-grad-type" style="width: 90px;"></div>
|
||||
</div>
|
||||
<div style="display: inline-block;float: right;">
|
||||
<label class="input-label" style=""><%= scope.textDirection %></label>
|
||||
<div id="shape-button-direction" style=""></div>
|
||||
</div>
|
||||
</div>
|
||||
<label class="header" style="display:block;margin-bottom: 5px;"><%= scope.textGradient %></label>
|
||||
<table cols="3" style="margin-bottom: 10px;">
|
||||
<tr valign="top">
|
||||
<td colspan="2">
|
||||
<div>
|
||||
<label class="input-label" style=""><%= scope.textStyle %></label>
|
||||
<div id="shape-combo-grad-type" style="width: 100%;"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td rowspan="2" style="width: 100%;">
|
||||
<div style="float: right;">
|
||||
<label class="input-label"><%= scope.textDirection %></label>
|
||||
<div id="shape-button-direction"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr valign="bottom">
|
||||
<td>
|
||||
<label class="input-label" style="margin-right: 5px;margin-bottom: 3px;"><%= scope.textAngle %></label>
|
||||
</td>
|
||||
<td>
|
||||
<div id="shape-spin-gradient-angle" style="display: inline-block; width: 60px;"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<label class="input-label" style="display:block;margin-bottom: 5px;"><%= scope.textGradient %></label>
|
||||
<div style="display: inline-block; margin-top: 3px;">
|
||||
<div id="shape-slider-gradient" style="display: inline-block; vertical-align: middle;"></div>
|
||||
</div>
|
||||
|
|
|
@ -30,17 +30,31 @@
|
|||
<div id="textart-back-color-btn" style=""></div>
|
||||
</div>
|
||||
<div id="textart-panel-gradient-fill" class="settings-hidden padding-small" style="width: 100%;">
|
||||
<div style="height:80px;">
|
||||
<div style="display: inline-block;">
|
||||
<label class="input-label" style=""><%= scope.textStyle %></label>
|
||||
<div id="textart-combo-grad-type" style="width: 90px;"></div>
|
||||
</div>
|
||||
<div style="display: inline-block;float: right;">
|
||||
<label class="input-label" style=""><%= scope.textDirection %></label>
|
||||
<div id="textart-button-direction" style=""></div>
|
||||
</div>
|
||||
</div>
|
||||
<label class="header" style="display:block;margin-bottom: 5px;"><%= scope.textGradient %></label>
|
||||
<table cols="3" style="margin-bottom: 10px;">
|
||||
<tr valign="top">
|
||||
<td colspan="2">
|
||||
<div>
|
||||
<label class="input-label" style=""><%= scope.textStyle %></label>
|
||||
<div id="textart-combo-grad-type" style="width: 100%;"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td rowspan="2" style="width: 100%;">
|
||||
<div style="float: right;">
|
||||
<label class="input-label"><%= scope.textDirection %></label>
|
||||
<div id="textart-button-direction"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr valign="bottom">
|
||||
<td>
|
||||
<label class="input-label" style="margin-right: 5px;margin-bottom: 3px;"><%= scope.textAngle %></label>
|
||||
</td>
|
||||
<td>
|
||||
<div id="textart-spin-gradient-angle" style="display: inline-block; width: 60px;"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<label class="input-label" style="display:block;margin-bottom: 5px;"><%= scope.textGradient %></label>
|
||||
<div style="display: inline-block; margin-top: 3px;">
|
||||
<div id="textart-slider-gradient" style="display: inline-block; vertical-align: middle;"></div>
|
||||
</div>
|
||||
|
|
|
@ -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 || {}));
|
||||
});
|
||||
|
|
|
@ -275,6 +275,8 @@ define([
|
|||
this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls'));
|
||||
else
|
||||
this.btnDirection.setIconCls('');
|
||||
this.numGradientAngle.setValue(this.GradLinearDirectionType);
|
||||
this.numGradientAngle.setDisabled(this._locked);
|
||||
} else if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_PATH) {
|
||||
this.mnuDirectionPicker.store.reset(this._viewDataRadial);
|
||||
this.mnuDirectionPicker.cmpEl.width(60);
|
||||
|
@ -284,6 +286,8 @@ define([
|
|||
this.btnDirection.setIconCls('item-gradient ' + this._viewDataRadial[this.GradRadialDirectionIdx].iconcls);
|
||||
else
|
||||
this.btnDirection.setIconCls('');
|
||||
this.numGradientAngle.setValue(0);
|
||||
this.numGradientAngle.setDisabled(true);
|
||||
}
|
||||
|
||||
if (this.api && !this._noApply) {
|
||||
|
@ -325,6 +329,8 @@ define([
|
|||
(this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) ? this.GradLinearDirectionType = rawData.type : this.GradRadialDirectionIdx = 0;
|
||||
if (this.api) {
|
||||
if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
|
||||
this.numGradientAngle.setValue(rawData.type);
|
||||
|
||||
var props = new Asc.asc_TextArtProperties();
|
||||
var fill = new Asc.asc_CShapeFill();
|
||||
fill.put_type(Asc.c_oAscFill.FILL_TYPE_GRAD);
|
||||
|
@ -609,8 +615,10 @@ define([
|
|||
this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls'));
|
||||
else
|
||||
this.btnDirection.setIconCls('');
|
||||
this.numGradientAngle.setValue(value);
|
||||
}
|
||||
}
|
||||
} else
|
||||
this.numGradientAngle.setValue(0);
|
||||
|
||||
var me = this;
|
||||
var colors = fill.get_colors(),
|
||||
|
@ -866,7 +874,7 @@ define([
|
|||
this.cmbGradType = new Common.UI.ComboBox({
|
||||
el: $('#textart-combo-grad-type'),
|
||||
cls: 'input-group-nr',
|
||||
menuStyle: 'min-width: 90px;',
|
||||
menuStyle: 'min-width: 100%;',
|
||||
editable: false,
|
||||
data: this._arrGradType
|
||||
});
|
||||
|
@ -984,7 +992,7 @@ define([
|
|||
cls: 'btn-toolbar',
|
||||
iconCls: 'toolbar__icon btn-add-breakpoint',
|
||||
disabled: this._locked,
|
||||
hint: this.tipAddGradientPoint,
|
||||
hint: this.tipAddGradientPoint
|
||||
});
|
||||
this.btnAddGradientStep.on('click', _.bind(this.onAddGradientStep, this));
|
||||
this.lockedControls.push(this.btnAddGradientStep);
|
||||
|
@ -999,6 +1007,20 @@ define([
|
|||
this.btnRemoveGradientStep.on('click', _.bind(this.onRemoveGradientStep, this));
|
||||
this.lockedControls.push(this.btnRemoveGradientStep);
|
||||
|
||||
this.numGradientAngle = new Common.UI.MetricSpinner({
|
||||
el: $('#textart-spin-gradient-angle'),
|
||||
step: 1,
|
||||
width: 60,
|
||||
defaultUnit : "°",
|
||||
value: '0 °',
|
||||
allowDecimal: true,
|
||||
maxValue: 359.9,
|
||||
minValue: 0,
|
||||
disabled: this._locked
|
||||
});
|
||||
this.lockedControls.push(this.numGradientAngle);
|
||||
this.numGradientAngle.on('change', _.bind(this.onGradientAngleChange, this));
|
||||
|
||||
this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({
|
||||
el: $('#textart-combo-border-size'),
|
||||
style: "width: 93px;",
|
||||
|
@ -1194,6 +1216,7 @@ define([
|
|||
_.each(this.lockedControls, function(item) {
|
||||
item.setDisabled(disable);
|
||||
});
|
||||
this.numGradientAngle.setDisabled(disable || this.GradFillType !== Asc.c_oAscFillGradType.GRAD_LINEAR);
|
||||
}
|
||||
},
|
||||
|
||||
|
@ -1255,6 +1278,21 @@ define([
|
|||
this.sldrGradient.trigger('changecomplete', this.sldrGradient);
|
||||
},
|
||||
|
||||
onGradientAngleChange: function(field, newValue, oldValue, eOpts) {
|
||||
if (this.api) {
|
||||
var props = new Asc.asc_TextArtProperties();
|
||||
var fill = new Asc.asc_CShapeFill();
|
||||
fill.put_type(Asc.c_oAscFill.FILL_TYPE_GRAD);
|
||||
fill.put_fill( new Asc.asc_CFillGrad());
|
||||
fill.get_fill().put_grad_type(this.GradFillType);
|
||||
fill.get_fill().put_linear_angle(field.getNumberValue() * 60000);
|
||||
fill.get_fill().put_linear_scale(true);
|
||||
props.asc_putFill(fill);
|
||||
this.shapeprops.put_TextArtProperties(props);
|
||||
this.api.ImgApply(this.imgprops);
|
||||
}
|
||||
},
|
||||
|
||||
txtNoBorders : 'No Line',
|
||||
strStroke : 'Stroke',
|
||||
strColor : 'Color',
|
||||
|
@ -1269,13 +1307,14 @@ define([
|
|||
textRadial: 'Radial',
|
||||
textDirection: 'Direction',
|
||||
textStyle: 'Style',
|
||||
textGradient: 'Gradient',
|
||||
textGradient: 'Gradient Points',
|
||||
textBorderSizeErr: 'The entered value is incorrect.<br>Please enter a value between 0 pt and 1584 pt.',
|
||||
textTransform: 'Transform',
|
||||
textTemplate: 'Template',
|
||||
strType: 'Type',
|
||||
textPosition: 'Position',
|
||||
tipAddGradientPoint: 'Add gradient point',
|
||||
tipRemoveGradientPoint: 'Remove gradient point'
|
||||
tipRemoveGradientPoint: 'Remove gradient point',
|
||||
textAngle: 'Angle'
|
||||
}, DE.Views.TextArtSettings || {}));
|
||||
});
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -2016,7 +2016,7 @@
|
|||
"DE.Views.ShapeSettings.textFromFile": "From File",
|
||||
"DE.Views.ShapeSettings.textFromStorage": "From Storage",
|
||||
"DE.Views.ShapeSettings.textFromUrl": "From URL",
|
||||
"DE.Views.ShapeSettings.textGradient": "Gradient",
|
||||
"DE.Views.ShapeSettings.textGradient": "Gradient Points",
|
||||
"DE.Views.ShapeSettings.textGradientFill": "Gradient Fill",
|
||||
"DE.Views.ShapeSettings.textHint270": "Rotate 90° Counterclockwise",
|
||||
"DE.Views.ShapeSettings.textHint90": "Rotate 90° Clockwise",
|
||||
|
@ -2058,6 +2058,7 @@
|
|||
"DE.Views.ShapeSettings.textPosition": "Position",
|
||||
"DE.Views.ShapeSettings.tipAddGradientPoint": "Add gradient point",
|
||||
"DE.Views.ShapeSettings.tipRemoveGradientPoint": "Remove gradient point",
|
||||
"DE.Views.ShapeSettings.textAngle": "Angle",
|
||||
"DE.Views.SignatureSettings.notcriticalErrorTitle": "Warning",
|
||||
"DE.Views.SignatureSettings.strDelete": "Remove Signature",
|
||||
"DE.Views.SignatureSettings.strDetails": "Signature Details",
|
||||
|
@ -2248,7 +2249,7 @@
|
|||
"DE.Views.TextArtSettings.textBorderSizeErr": "The entered value is incorrect.<br>Please enter a value between 0 pt and 1584 pt.",
|
||||
"DE.Views.TextArtSettings.textColor": "Color Fill",
|
||||
"DE.Views.TextArtSettings.textDirection": "Direction",
|
||||
"DE.Views.TextArtSettings.textGradient": "Gradient",
|
||||
"DE.Views.TextArtSettings.textGradient": "Gradient Points",
|
||||
"DE.Views.TextArtSettings.textGradientFill": "Gradient Fill",
|
||||
"DE.Views.TextArtSettings.textLinear": "Linear",
|
||||
"DE.Views.TextArtSettings.textNoFill": "No Fill",
|
||||
|
@ -2261,6 +2262,7 @@
|
|||
"DE.Views.TextArtSettings.textPosition": "Position",
|
||||
"DE.Views.TextArtSettings.tipAddGradientPoint": "Add gradient point",
|
||||
"DE.Views.TextArtSettings.tipRemoveGradientPoint": "Remove gradient point",
|
||||
"DE.Views.TextArtSettings.textAngle": "Angle",
|
||||
"DE.Views.Toolbar.capBtnAddComment": "Add Comment",
|
||||
"DE.Views.Toolbar.capBtnBlankPage": "Blank Page",
|
||||
"DE.Views.Toolbar.capBtnColumns": "Columns",
|
||||
|
|
|
@ -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",
|
||||
|
|
Loading…
Reference in a new issue