[PE] Bug 43708 (Text art settings, Shape settings, Slide settings: add buttons (position, add thumb, remove thumb))

This commit is contained in:
JuliaSvinareva 2020-07-09 21:51:19 +03:00
parent 2c6a2c0993
commit 0d39db4b41
7 changed files with 320 additions and 10 deletions

View file

@ -66,7 +66,22 @@
<div style="display: inline-block; margin-top: 3px;">
<div id="shape-slider-gradient" style="display: inline-block; vertical-align: middle;"></div>
</div>
<div id="shape-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="shape-gradient-color-btn"></div>
</div>
<div style="margin-left: 10px;">
<label class="input-label" style=""><%= scope.textPosition %></label>
<div id="shape-gradient-position"></div>
</div>
</div>
<div style="display:flex;padding-top:15px;">
<div id="shape-gradient-add-step"></div>
<div id="shape-gradient-remove-step"></div>
</div>
</div>
</div>
</td>
</tr>

View file

@ -66,7 +66,22 @@
<div style="display: inline-block; margin-top: 3px;">
<div id="slide-slider-gradient" style="display: inline-block; vertical-align: middle;"></div>
</div>
<div id="slide-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="slide-gradient-color-btn"></div>
</div>
<div style="margin-left: 10px;">
<label class="input-label" style=""><%= scope.textPosition %></label>
<div id="slide-gradient-position"></div>
</div>
</div>
<div style="display:flex;padding-top:15px;">
<div id="slide-gradient-add-step"></div>
<div id="slide-gradient-remove-step"></div>
</div>
</div>
</div>
</td>
</tr>

View file

@ -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>

View file

@ -885,7 +885,8 @@ define([
if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= this.GradColor.colors.length) {
me.GradColor.currentIdx = 0;
}
me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
this.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'};
@ -1260,7 +1261,7 @@ define([
this.sldrGradient = new Common.UI.MultiSliderGradient({
el: $('#shape-slider-gradient'),
width: 125,
width: 192,
minValue: 0,
maxValue: 100,
values: [0, 100]
@ -1272,6 +1273,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');
@ -1300,6 +1303,41 @@ define([
});
this.fillControls.push(this.sldrGradient);
this.spnGradPosition = new Common.UI.MetricSpinner({
el: $('#shape-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: $('#shape-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: $('#shape-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: $('#shape-combo-border-size'),
style: "width: 93px;",
@ -1689,6 +1727,50 @@ define([
}
},
onPositionChange: function(btn) {
var pos = btn.getNumberValue();
if (this.api) {
this.GradColor.values[this.GradColor.currentIdx] = pos;
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);
var arr = [];
this.GradColor.values.forEach(function(item){
arr.push(item*1000);
});
fill.get_fill().put_positions(arr);
props.put_fill(fill);
this.api.ShapeApply(props);
}
},
onAddGradientStep: function() {
if (this.GradColor.colors.length > 9) return;
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',
@ -1739,6 +1821,9 @@ define([
textHintFlipH: 'Flip Horizontally',
strShadow: 'Show shadow',
textFromStorage: 'From Storage',
textSelectImage: 'Select Picture'
textSelectImage: 'Select Picture',
textPosition: 'Position',
tipAddGradientPoint: 'Add gradient point',
tipRemoveGradientPoint: 'Remove gradient point'
}, PE.Views.ShapeSettings || {}));
});

View file

@ -806,7 +806,7 @@ define([
this.sldrGradient = new Common.UI.MultiSliderGradient({
el: $('#slide-slider-gradient'),
width: 125,
width: 192,
minValue: 0,
maxValue: 100,
values: [0, 100]
@ -818,6 +818,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');
@ -846,6 +848,41 @@ define([
});
this.FillItems.push(this.sldrGradient);
this.spnGradPosition = new Common.UI.MetricSpinner({
el: $('#slide-gradient-position'),
step: 1,
width: 60,
defaultUnit : "%",
value: '50 %',
allowDecimal: false,
maxValue: 100,
minValue: 0,
disabled: this._locked
});
this.FillItems.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: $('#slide-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.FillItems.push(this.btnAddGradientStep);
this.btnRemoveGradientStep = new Common.UI.Button({
parentEl: $('#slide-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.FillItems.push(this.btnRemoveGradientStep);
},
createDelayedElements: function() {
@ -1274,6 +1311,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'};
@ -1489,6 +1527,50 @@ define([
}
},
onPositionChange: function(btn) {
var pos = btn.getNumberValue();
if (this.api) {
this.GradColor.values[this.GradColor.currentIdx] = pos;
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);
var arr = [];
this.GradColor.values.forEach(function(item){
arr.push(item*1000);
});
fill.get_fill().put_positions(arr);
props.put_background(fill);
this.api.SetSlideProps(props);
}
},
onAddGradientStep: function() {
if (this.GradColor.colors.length > 9) return;
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);
},
strColor : 'Color',
strFill : 'Background',
textColor : 'Color Fill',
@ -1562,6 +1644,9 @@ define([
strSlideNum: 'Show Slide Number',
strDateTime: 'Show Date and Time',
textFromStorage: 'From Storage',
textSelectImage: 'Select Picture'
textSelectImage: 'Select Picture',
textPosition: 'Position',
tipAddGradientPoint: 'Add gradient point',
tipRemoveGradientPoint: 'Remove gradient point'
}, PE.Views.SlideSettings || {}));
});

View file

@ -840,6 +840,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'};
@ -1220,7 +1221,7 @@ define([
this.sldrGradient = new Common.UI.MultiSliderGradient({
el: $('#textart-slider-gradient'),
width: 125,
width: 192,
minValue: 0,
maxValue: 100,
values: [0, 100]
@ -1232,6 +1233,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');
@ -1260,6 +1263,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;",
@ -1582,6 +1620,51 @@ 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.put_type(Asc.c_oAscFill.FILL_TYPE_GRAD);
fill.put_fill( new Asc.asc_CFillGrad());
fill.get_fill().put_grad_type(this.GradFillType);
var arr = [];
this.GradColor.values.forEach(function(item){
arr.push(item*1000);
});
fill.get_fill().put_positions(arr);
props.asc_putFill(fill);
this.shapeprops.put_TextArtProperties(props);
this.api.ShapeApply(this.shapeprops);
}
},
onAddGradientStep: function() {
if (this.GradColor.colors.length > 9) return;
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',
@ -1622,6 +1705,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'
}, PE.Views.TextArtSettings || {}));
});

View file

@ -1467,6 +1467,9 @@
"PE.Views.ShapeSettings.txtWood": "Wood",
"PE.Views.ShapeSettings.textFromStorage": "From Storage",
"PE.Views.ShapeSettings.textSelectImage": "Select Picture",
"PE.Views.ShapeSettings.textPosition": "Position",
"PE.Views.ShapeSettings.tipAddGradientPoint": "Add gradient point",
"PE.Views.ShapeSettings.tipRemoveGradientPoint": "Remove gradient point",
"PE.Views.ShapeSettingsAdvanced.strColumns": "Columns",
"PE.Views.ShapeSettingsAdvanced.strMargins": "Text Padding",
"PE.Views.ShapeSettingsAdvanced.textAlt": "Alternative Text",
@ -1595,6 +1598,9 @@
"PE.Views.SlideSettings.txtWood": "Wood",
"PE.Views.SlideSettings.textFromStorage": "From Storage",
"PE.Views.SlideSettings.textSelectImage": "Select Picture",
"PE.Views.SlideSettings.textPosition": "Position",
"PE.Views.SlideSettings.tipAddGradientPoint": "Add gradient point",
"PE.Views.SlideSettings.tipRemoveGradientPoint": "Remove gradient point",
"PE.Views.SlideshowSettings.textLoop": "Loop continuously until 'Esc' is pressed",
"PE.Views.SlideshowSettings.textTitle": "Show Settings",
"PE.Views.SlideSizeSettings.strLandscape": "Landscape",
@ -1738,6 +1744,9 @@
"PE.Views.TextArtSettings.txtNoBorders": "No Line",
"PE.Views.TextArtSettings.txtPapyrus": "Papyrus",
"PE.Views.TextArtSettings.txtWood": "Wood",
"PE.Views.TextArtSettings.textPosition": "Position",
"PE.Views.TextArtSettings.tipAddGradientPoint": "Add gradient point",
"PE.Views.TextArtSettings.tipRemoveGradientPoint": "Remove gradient point",
"PE.Views.Toolbar.capAddSlide": "Add Slide",
"PE.Views.Toolbar.capBtnAddComment": "Add Comment",
"PE.Views.Toolbar.capBtnComment": "Comment",