[SSE] Bug 43708 (Text art settings: add buttons (position, add thumb, remove thumb), change gradient slider style)
This commit is contained in:
JuliaSvinareva
parent
e8234bc9e4
commit
cefc64988b
|
|
@ -84,7 +84,22 @@
|
|||
<div style="display: inline-block; margin-top: 3px;">
|
||||
<div id="textart-slider-gradient" style="display: inline-block; vertical-align: middle;"></div>
|
||||
</div>
|
||||
<div id="textart-gradient-color-btn" style="display: inline-block;float: right;"></div>
|
||||
<div style="height: 40px;margin-top:6px;display:flex;justify-content:space-between;">
|
||||
<div style="display: flex;">
|
||||
<div style="">
|
||||
<label class="input-label" style=""><%= scope.strColor %></label>
|
||||
<div id="textart-gradient-color-btn"></div>
|
||||
</div>
|
||||
<div style="margin-left: 10px;">
|
||||
<label class="input-label" style=""><%= scope.textPosition %></label>
|
||||
<div id="textart-gradient-position"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;padding-top:15px;">
|
||||
<div id="textart-gradient-add-step"></div>
|
||||
<div id="textart-gradient-remove-step"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
|
|||
|
|
@ -844,6 +844,7 @@ define([
|
|||
me.GradColor.currentIdx = 0;
|
||||
}
|
||||
me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
|
||||
this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx]);
|
||||
this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD;
|
||||
this.FGColor = {Value: 1, Color: this.GradColor.colors[0]};
|
||||
this.BGColor = {Value: 1, Color: 'ffffff'};
|
||||
|
|
@ -1224,7 +1225,7 @@ define([
|
|||
|
||||
this.sldrGradient = new Common.UI.MultiSliderGradient({
|
||||
el: $('#textart-slider-gradient'),
|
||||
width: 125,
|
||||
width: 192,
|
||||
minValue: 0,
|
||||
maxValue: 100,
|
||||
values: [0, 100]
|
||||
|
|
@ -1236,6 +1237,8 @@ define([
|
|||
var color = me.GradColor.colors[me.GradColor.currentIdx];
|
||||
me.btnGradColor.setColor(color);
|
||||
me.colorsGrad.select(color,false);
|
||||
var pos = me.GradColor.values[me.GradColor.currentIdx];
|
||||
me.spnGradPosition.setValue(pos, true);
|
||||
});
|
||||
this.sldrGradient.on('thumbdblclick', function(cmp){
|
||||
me.btnGradColor.cmpEl.find('button').dropdown('toggle');
|
||||
|
|
@ -1264,6 +1267,41 @@ define([
|
|||
});
|
||||
this.lockedControls.push(this.sldrGradient);
|
||||
|
||||
this.spnGradPosition = new Common.UI.MetricSpinner({
|
||||
el: $('#textart-gradient-position'),
|
||||
step: 1,
|
||||
width: 60,
|
||||
defaultUnit : "%",
|
||||
value: '50 %',
|
||||
allowDecimal: false,
|
||||
maxValue: 100,
|
||||
minValue: 0,
|
||||
disabled: this._locked
|
||||
});
|
||||
this.lockedControls.push(this.spnGradPosition);
|
||||
this.spnGradPosition.on('change', _.bind(this.onPositionChange, this));
|
||||
this.spnGradPosition.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);});
|
||||
|
||||
this.btnAddGradientStep = new Common.UI.Button({
|
||||
parentEl: $('#textart-gradient-add-step'),
|
||||
cls: 'btn-toolbar',
|
||||
iconCls: 'toolbar__icon btn-add-breakpoint',
|
||||
disabled: this._locked,
|
||||
hint: this.tipAddGradientPoint,
|
||||
});
|
||||
this.btnAddGradientStep.on('click', _.bind(this.onAddGradientStep, this));
|
||||
this.lockedControls.push(this.btnAddGradientStep);
|
||||
|
||||
this.btnRemoveGradientStep = new Common.UI.Button({
|
||||
parentEl: $('#textart-gradient-remove-step'),
|
||||
cls: 'btn-toolbar',
|
||||
iconCls: 'toolbar__icon btn-remove-breakpoint',
|
||||
disabled: this._locked,
|
||||
hint: this.tipRemoveGradientPoint
|
||||
});
|
||||
this.btnRemoveGradientStep.on('click', _.bind(this.onRemoveGradientStep, this));
|
||||
this.lockedControls.push(this.btnRemoveGradientStep);
|
||||
|
||||
this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({
|
||||
el: $('#textart-combo-border-size'),
|
||||
style: "width: 93px;",
|
||||
|
|
@ -1586,6 +1624,50 @@ define([
|
|||
}
|
||||
},
|
||||
|
||||
onPositionChange: function(btn) {
|
||||
var pos = btn.getNumberValue();
|
||||
if (this.api) {
|
||||
this.GradColor.values[this.GradColor.currentIdx] = pos;
|
||||
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);
|
||||
var arr = [];
|
||||
this.GradColor.values.forEach(function(item){
|
||||
arr.push(item*1000);
|
||||
});
|
||||
fill.asc_getFill().asc_putPositions(arr);
|
||||
props.asc_putFill(fill);
|
||||
this.shapeprops.put_TextArtProperties(props);
|
||||
this.api.asc_setGraphicObjectProps(this.imgprops);
|
||||
}
|
||||
},
|
||||
|
||||
onAddGradientStep: function() {
|
||||
var curIndex = this.GradColor.currentIdx;
|
||||
var pos = (this.GradColor.values[curIndex] + this.GradColor.values[curIndex < this.GradColor.colors.length - 1 ? curIndex + 1 : curIndex - 1]) / 2;
|
||||
|
||||
this.GradColor.colors[this.GradColor.colors.length] = this.GradColor.colors[curIndex];
|
||||
this.GradColor.currentIdx = this.GradColor.colors.length - 1;
|
||||
this.sldrGradient.addNewThumb(undefined, undefined, pos, curIndex);
|
||||
|
||||
this.sldrGradient.trigger('change', this.sldrGradient);
|
||||
this.sldrGradient.trigger('changecomplete', this.sldrGradient);
|
||||
},
|
||||
|
||||
onRemoveGradientStep: function() {
|
||||
if (this.GradColor.values.length < 3) return;
|
||||
this.GradColor.values.splice(this.GradColor.currentIdx, 1);
|
||||
this.sldrGradient.removeThumb(this.GradColor.currentIdx);
|
||||
if (_.isUndefined(this.GradColor.currentIdx) || this.GradColor.currentIdx >= this.GradColor.colors.length) {
|
||||
this.GradColor.currentIdx = 0;
|
||||
}
|
||||
this.sldrGradient.setActiveThumb(this.GradColor.currentIdx);
|
||||
this.sldrGradient.trigger('change', this.sldrGradient);
|
||||
this.sldrGradient.trigger('changecomplete', this.sldrGradient);
|
||||
},
|
||||
|
||||
txtNoBorders : 'No Line',
|
||||
strStroke : 'Stroke',
|
||||
strColor : 'Color',
|
||||
|
|
@ -1626,6 +1708,9 @@ define([
|
|||
textBorderSizeErr: 'The entered value is incorrect.<br>Please enter a value between 0 pt and 1584 pt.',
|
||||
textTransform: 'Transform',
|
||||
textTemplate: 'Template',
|
||||
strType: 'Type'
|
||||
strType: 'Type',
|
||||
textPosition: 'Position',
|
||||
tipAddGradientPoint: 'Add gradient point',
|
||||
tipRemoveGradientPoint: 'Remove gradient point'
|
||||
}, SSE.Views.TextArtSettings || {}));
|
||||
});
|
||||
|
|
|
|||
|
|
@ -2531,6 +2531,9 @@
|
|||
"SSE.Views.TextArtSettings.txtNoBorders": "No Line",
|
||||
"SSE.Views.TextArtSettings.txtPapyrus": "Papyrus",
|
||||
"SSE.Views.TextArtSettings.txtWood": "Wood",
|
||||
"SSE.Views.TextArtSettings.textPosition": "Position",
|
||||
"SSE.Views.TextArtSettings.tipAddGradientPoint": "Add gradient point",
|
||||
"SSE.Views.TextArtSettings.tipRemoveGradientPoint": "Remove gradient point",
|
||||
"SSE.Views.Toolbar.capBtnAddComment": "Add Comment",
|
||||
"SSE.Views.Toolbar.capBtnComment": "Comment",
|
||||
"SSE.Views.Toolbar.capBtnInsHeader": "Header/Footer",
|
||||
|
|
|
|||
Loading…
Reference in a new issue