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

Merge pull request #430 from ONLYOFFICE/feature/gradient-fill

Browse source 
Feature/gradient fill
This commit is contained in:
JuliaSvinareva 2020-07-22 13:00:02 +03:00 committed by GitHub
parent e79fa7f093 b89a1c784c
commit c58f0945c7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
52 changed files with 1139 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
apps/common/main/lib/component/MultiSliderGradient.js
View file

@ -56,8 +56,8 @@ define([
colorValues: ['#000000', '#ffffff'],
currentThumb: 0,
thumbTemplate: '<div class="thumb img-commonctrl" style="">' +
'<div class="thumb-top"></div>' +
'<div class="thumb-bottom"></div>' +
'<div class="thumb-top"><div class="thumb-top-inner"></div></div>' +
'<div class="thumb-bottom"><div class="thumb-bottom-inner"></div></div>' +
'</div>'
},
@ -146,6 +146,43 @@ define([
return recalc_indexes;
},
findLeftThumb: function(pos) {
var me = this,
leftThumb = 100,
index = 0,
len = this.thumbs.length,
dist;
for (var i=0; i<len; i++) {
dist = pos - me.thumbs[i].position;
if (dist > 0 && dist <= leftThumb) {
var above = me.thumbs[i + 1];
var below = me.thumbs[i - 1];
if (below !== undefined && pos < below.position) {
continue;
}
if (above !== undefined && pos > above.position) {
continue;
}
index = i;
leftThumb = dist;
}
}
return index;
},
calculationNewColor: function(color1, color2, ratio) {
var w1 = ratio ? ratio/100 : 0.5;
var w2 = 1 - w1;
var rgbColor1 = Common.Utils.ThemeColor.getRgbColor(color1),
rgbColor2 = Common.Utils.ThemeColor.getRgbColor(color2);
var rgb = [Math.round(rgbColor1.get_r() * w2 + rgbColor2.get_r() * w1),
Math.round(rgbColor1.get_g() * w2 + rgbColor2.get_g() * w1),
Math.round(rgbColor1.get_b() * w2 + rgbColor2.get_b() * w1)];
return Common.Utils.ThemeColor.getHexColor(rgb[0], rgb[1], rgb[2]);
},
addThumb: function() {
Common.UI.MultiSlider.prototype.addThumb.call(this);
@ -159,13 +196,29 @@ define([
me.changeSliderStyle();
},
addNewThumb: function(index, color) {
var me = this;
addNewThumb: function(index, pos, curIndex) {
var me = this,
indexLeftThumb = this.findLeftThumb(pos),
index = index,
color;
if (!_.isUndefined(curIndex)) {
this.addThumb();
index = this.thumbs.length - 1;
color = this.calculationNewColor(this.thumbs[indexLeftThumb].colorValue, this.thumbs[indexLeftThumb === index - 1 ? indexLeftThumb : indexLeftThumb + 1].colorValue);
this.setThumbPosition(index, pos);
var value = pos/this.delta + this.minValue;
this.thumbs[index].value = value;
} else {
var ratio = (pos - this.thumbs[indexLeftThumb].value) * 100 / (this.thumbs[indexLeftThumb + 1].value - this.thumbs[indexLeftThumb].value);
color = ratio < 0 ? this.thumbs[indexLeftThumb].colorValue : this.calculationNewColor(this.thumbs[indexLeftThumb].colorValue, this.thumbs[indexLeftThumb === index - 1 ? indexLeftThumb : indexLeftThumb + 1].colorValue, ratio);
}
me.thumbs[index].thumbcolor = me.thumbs[index].thumb.find('> div');
(index>0) && this.setColorValue(color, index);
(index>0) && this.setColorValue('#' + color, index);
me.sortThumbs();
me.changeSliderStyle();
me.changeGradientStyle();
return color;
},
removeThumb: function(index) {

2
apps/common/main/lib/component/Slider.js
View file

@ -432,7 +432,7 @@ define([
var index = me.thumbs.length - 1;
me.setThumbPosition(index, pos);
me.thumbs[index].value = value;
me.trigger('addthumb', me, index, nearIndex, thumbColor);
me.trigger('addthumb', me, index, pos);
me.trigger('change', me);
me.trigger('changecomplete', me);

31
apps/common/main/resources/less/multislider-gradient.less
View file

@ -22,6 +22,11 @@
border-left: solid 1px @gray-darker;
border-radius: 0 3px;
box-sizing: content-box;
.thumb-top-inner {
border-top: solid 1px #fff;
border-left: solid 1px #fff;
height: 100%;
}
}
.thumb-bottom {
@ -29,16 +34,34 @@
top: 6px;
left: 1px;
width: 10px;
height: 8px;
height: 9px;
background-color: #ffffff;
border: solid 1px @gray-darker;
border-top: none;
border-radius: 2px;
box-sizing: content-box;
.thumb-bottom-inner {
border: solid 1px #fff;
border-top: none;
height: 100%;
}
}
&.active .thumb-bottom {
border-bottom-width: 2px;
&.active {
.thumb-top {
border-top: solid 1px #000;
border-left: solid 1px #000;
}
.thumb-bottom {
border: solid 1px #000;
border-top: none;
}
}
&:hover {
.thumb-bottom {
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.32);
}
}
&.remove {
@ -58,6 +81,8 @@
background-position: 0 0;
outline: 1px solid rgba(162, 162, 162, 1);
border: 1px solid #FFFFFF;
cursor: copy;
}
}

17
apps/documenteditor/main/app/template/ShapeSettings.template
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>

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

@ -44,7 +44,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>

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

@ -513,6 +513,7 @@ define([
onGradientChange: function(slider, newValue, oldValue){
this.GradColor.values = slider.getValues();
this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx], true);
this._sliderChanged = true;
if (this.api && !this._noApply) {
if (this._sendUndoPoint) {
@ -973,6 +974,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'};
@ -1348,7 +1350,7 @@ define([
this.sldrGradient = new Common.UI.MultiSliderGradient({
el: $('#shape-slider-gradient'),
width: 125,
width: 192,
minValue: 0,
maxValue: 100,
values: [0, 100]
@ -1360,6 +1362,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');
@ -1376,18 +1380,60 @@ define([
me.GradColor.colors = colors;
me.GradColor.currentIdx = currentIdx;
});
this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){
me.GradColor.colors[index] = me.GradColor.colors[nearIndex];
this.sldrGradient.on('addthumb', function(cmp, index, pos){
me.GradColor.colors[index] = me.GradColor.colors[me.GradColor.currentIdx];
me.GradColor.currentIdx = index;
me.sldrGradient.addNewThumb(index, color);
var color = me.sldrGradient.addNewThumb(index, pos);
me.GradColor.colors[me.GradColor.currentIdx] = color;
});
this.sldrGradient.on('removethumb', function(cmp, index){
me.sldrGradient.removeThumb(index);
me.GradColor.values.splice(index, 1);
me.sldrGradient.changeGradientStyle();
if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= me.GradColor.colors.length) {
var newIndex = index > 0 ? index - 1 : index;
newIndex = (newIndex === 0 && me.GradColor.values.length > 2) ? me.GradColor.values.length - 2 : newIndex;
me.GradColor.currentIdx = newIndex;
}
me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
});
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;",
@ -1817,6 +1863,64 @@ define([
}
},
onPositionChange: function(btn) {
var pos = btn.getNumberValue(),
minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
maxValue = (this.GradColor.currentIdx+1<this.GradColor.values.length) ? this.GradColor.values[this.GradColor.currentIdx+1] : 100,
needSort = pos < minValue || pos > maxValue;
if (this.api) {
this.GradColor.values[this.GradColor.currentIdx] = pos;
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);
var arr = [];
this.GradColor.values.forEach(function(item){
arr.push(item*1000);
});
fill.asc_getFill().asc_putPositions(arr);
props.asc_putFill(fill);
this.imgprops.put_ShapeProperties(props);
this.api.ImgApply(this.imgprops);
if (needSort) {
this.sldrGradient.sortThumbs();
this.sldrGradient.trigger('change', this.sldrGradient);
this.sldrGradient.trigger('changecomplete', this.sldrGradient);
}
}
},
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;
var color = this.sldrGradient.addNewThumb(undefined, pos, curIndex);
this.GradColor.colors[this.GradColor.currentIdx] = color;
this.sldrGradient.trigger('change', this.sldrGradient);
this.sldrGradient.trigger('changecomplete', this.sldrGradient);
},
onRemoveGradientStep: function() {
if (this.GradColor.values.length < 3) return;
var index = this.GradColor.currentIdx;
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) {
var newIndex = index > 0 ? index - 1 : index;
newIndex = (newIndex === 0 && this.GradColor.values.length > 2) ? this.GradColor.values.length - 2 : newIndex;
this.GradColor.currentIdx = newIndex;
}
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',
@ -1875,6 +1979,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'
}, DE.Views.ShapeSettings || {}));
});

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

@ -378,6 +378,7 @@ define([
onGradientChange: function(slider, newValue, oldValue){
this.GradColor.values = slider.getValues();
this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx], true);
this._sliderChanged = true;
if (this.api && !this._noApply) {
if (this._sendUndoPoint) {
@ -646,6 +647,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.ShapeColor = {Value: 1, Color: this.GradColor.colors[0]};
}
@ -913,7 +915,7 @@ define([
this.sldrGradient = new Common.UI.MultiSliderGradient({
el: $('#textart-slider-gradient'),
width: 125,
width: 192,
minValue: 0,
maxValue: 100,
values: [0, 100]
@ -925,6 +927,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');
@ -941,18 +945,60 @@ define([
me.GradColor.colors = colors;
me.GradColor.currentIdx = currentIdx;
});
this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){
me.GradColor.colors[index] = me.GradColor.colors[nearIndex];
this.sldrGradient.on('addthumb', function(cmp, index, pos){
me.GradColor.colors[index] = me.GradColor.colors[me.GradColor.currentIdx];
me.GradColor.currentIdx = index;
me.sldrGradient.addNewThumb(index, color);
var color = me.sldrGradient.addNewThumb(index, pos);
me.GradColor.colors[me.GradColor.currentIdx] = color;
});
this.sldrGradient.on('removethumb', function(cmp, index){
me.sldrGradient.removeThumb(index);
me.GradColor.values.splice(index, 1);
me.sldrGradient.changeGradientStyle();
if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= me.GradColor.colors.length) {
var newIndex = index > 0 ? index - 1 : index;
newIndex = (newIndex === 0 && me.GradColor.values.length > 2) ? me.GradColor.values.length - 2 : newIndex;
me.GradColor.currentIdx = newIndex;
}
me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
});
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;",
@ -1151,6 +1197,64 @@ define([
}
},
onPositionChange: function(btn) {
var pos = btn.getNumberValue(),
minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
maxValue = (this.GradColor.currentIdx+1<this.GradColor.values.length) ? this.GradColor.values[this.GradColor.currentIdx+1] : 100,
needSort = pos < minValue || pos > maxValue;
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.ImgApply(this.imgprops);
if (needSort) {
this.sldrGradient.sortThumbs();
this.sldrGradient.trigger('change', this.sldrGradient);
this.sldrGradient.trigger('changecomplete', this.sldrGradient);
}
}
},
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;
var color = this.sldrGradient.addNewThumb(undefined, pos, curIndex);
this.GradColor.colors[this.GradColor.currentIdx] = color;
this.sldrGradient.trigger('change', this.sldrGradient);
this.sldrGradient.trigger('changecomplete', this.sldrGradient);
},
onRemoveGradientStep: function() {
if (this.GradColor.values.length < 3) return;
var index = this.GradColor.currentIdx;
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) {
var newIndex = index > 0 ? index - 1 : index;
newIndex = (newIndex === 0 && this.GradColor.values.length > 2) ? this.GradColor.values.length - 2 : newIndex;
this.GradColor.currentIdx = newIndex;
}
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',
@ -1169,6 +1273,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'
}, DE.Views.TextArtSettings || {}));
});

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

@ -2024,6 +2024,9 @@
"DE.Views.ShapeSettings.txtWood": "Wood",
"DE.Views.ShapeSettings.textFromStorage": "From Storage",
"DE.Views.ShapeSettings.textSelectImage": "Select Picture",
"DE.Views.ShapeSettings.textPosition": "Position",
"DE.Views.ShapeSettings.tipAddGradientPoint": "Add gradient point",
"DE.Views.ShapeSettings.tipRemoveGradientPoint": "Remove gradient point",
"DE.Views.SignatureSettings.notcriticalErrorTitle": "Warning",
"DE.Views.SignatureSettings.strDelete": "Remove Signature",
"DE.Views.SignatureSettings.strDetails": "Signature Details",
@ -2224,6 +2227,9 @@
"DE.Views.TextArtSettings.textTemplate": "Template",
"DE.Views.TextArtSettings.textTransform": "Transform",
"DE.Views.TextArtSettings.txtNoBorders": "No Line",
"DE.Views.TextArtSettings.textPosition": "Position",
"DE.Views.TextArtSettings.tipAddGradientPoint": "Add gradient point",
"DE.Views.TextArtSettings.tipRemoveGradientPoint": "Remove gradient point",
"DE.Views.Toolbar.capBtnAddComment": "Add Comment",
"DE.Views.Toolbar.capBtnBlankPage": "Blank Page",
"DE.Views.Toolbar.capBtnColumns": "Columns",

BIN
apps/documenteditor/main/resources/img/toolbar/1.25x/btn-add-breakpoint.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 494 B

BIN
apps/documenteditor/main/resources/img/toolbar/1.25x/btn-remove-breakpoint.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 529 B

BIN
apps/documenteditor/main/resources/img/toolbar/1.5x/btn-add-breakpoint.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 506 B

BIN
apps/documenteditor/main/resources/img/toolbar/1.5x/btn-remove-breakpoint.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 552 B

BIN
apps/documenteditor/main/resources/img/toolbar/1.75x/btn-add-breakpoint.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 650 B

BIN
apps/documenteditor/main/resources/img/toolbar/1.75x/btn-remove-breakpoint.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 700 B

BIN
apps/documenteditor/main/resources/img/toolbar/1x/btn-add-breakpoint.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 438 B

BIN
apps/documenteditor/main/resources/img/toolbar/1x/btn-remove-breakpoint.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 493 B

BIN
apps/documenteditor/main/resources/img/toolbar/2x/btn-add-breakpoint.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 782 B

BIN
apps/documenteditor/main/resources/img/toolbar/2x/btn-remove-breakpoint.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 955 B

17
apps/presentationeditor/main/app/template/ShapeSettings.template
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>

17
apps/presentationeditor/main/app/template/SlideSettings.template
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>

17
apps/presentationeditor/main/app/template/TextArtSettings.template
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>

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

@ -494,6 +494,7 @@ define([
onGradientChange: function(slider, newValue, oldValue){
this.GradColor.values = slider.getValues();
this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx], true);
this._sliderChanged = true;
if (this.api && !this._noApply) {
if (this._sendUndoPoint) {
@ -885,7 +886,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 +1262,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 +1274,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');
@ -1288,18 +1292,60 @@ define([
me.GradColor.colors = colors;
me.GradColor.currentIdx = currentIdx;
});
this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){
me.GradColor.colors[index] = me.GradColor.colors[nearIndex];
this.sldrGradient.on('addthumb', function(cmp, index, pos){
me.GradColor.colors[index] = me.GradColor.colors[me.GradColor.currentIdx];
me.GradColor.currentIdx = index;
me.sldrGradient.addNewThumb(index, color);
var color = me.sldrGradient.addNewThumb(index, pos);
me.GradColor.colors[me.GradColor.currentIdx] = color;
});
this.sldrGradient.on('removethumb', function(cmp, index){
me.sldrGradient.removeThumb(index);
me.GradColor.values.splice(index, 1);
me.sldrGradient.changeGradientStyle();
if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= me.GradColor.colors.length) {
var newIndex = index > 0 ? index - 1 : index;
newIndex = (newIndex === 0 && me.GradColor.values.length > 2) ? me.GradColor.values.length - 2 : newIndex;
me.GradColor.currentIdx = newIndex;
}
me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
});
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 +1735,63 @@ define([
}
},
onPositionChange: function(btn) {
var pos = btn.getNumberValue(),
minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
maxValue = (this.GradColor.currentIdx+1<this.GradColor.values.length) ? this.GradColor.values[this.GradColor.currentIdx+1] : 100,
needSort = pos < minValue || pos > maxValue;
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);
if (needSort) {
this.sldrGradient.sortThumbs();
this.sldrGradient.trigger('change', this.sldrGradient);
this.sldrGradient.trigger('changecomplete', this.sldrGradient);
}
}
},
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;
var color = this.sldrGradient.addNewThumb(undefined, pos, curIndex);
this.GradColor.colors[this.GradColor.currentIdx] = color;
this.sldrGradient.trigger('change', this.sldrGradient);
this.sldrGradient.trigger('changecomplete', this.sldrGradient);
},
onRemoveGradientStep: function() {
if (this.GradColor.values.length < 3) return;
var index = this.GradColor.currentIdx;
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) {
var newIndex = index > 0 ? index - 1 : index;
newIndex = (newIndex === 0 && this.GradColor.values.length > 2) ? this.GradColor.values.length - 2 : newIndex;
this.GradColor.currentIdx = newIndex;
}
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 +1842,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 || {}));
});

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

@ -595,6 +595,7 @@ define([
onGradientChange: function(slider, newValue, oldValue){
this.GradColor.values = slider.getValues();
this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx], true);
this._sliderChanged = true;
if (this.api && !this._noApply) {
if (this._sendUndoPoint) {
@ -806,7 +807,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 +819,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');
@ -834,18 +837,60 @@ define([
me.GradColor.colors = colors;
me.GradColor.currentIdx = currentIdx;
});
this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){
me.GradColor.colors[index] = me.GradColor.colors[nearIndex];
this.sldrGradient.on('addthumb', function(cmp, index, pos){
me.GradColor.colors[index] = me.GradColor.colors[me.GradColor.currentIdx];
me.GradColor.currentIdx = index;
me.sldrGradient.addNewThumb(index, color);
var color = me.sldrGradient.addNewThumb(index, pos);
me.GradColor.colors[me.GradColor.currentIdx] = color;
});
this.sldrGradient.on('removethumb', function(cmp, index){
me.sldrGradient.removeThumb(index);
me.GradColor.values.splice(index, 1);
me.sldrGradient.changeGradientStyle();
if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= me.GradColor.colors.length) {
var newIndex = index > 0 ? index - 1 : index;
newIndex = (newIndex === 0 && me.GradColor.values.length > 2) ? me.GradColor.values.length - 2 : newIndex;
me.GradColor.currentIdx = newIndex;
}
me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
});
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 +1319,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 +1535,63 @@ define([
}
},
onPositionChange: function(btn) {
var pos = btn.getNumberValue(),
minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
maxValue = (this.GradColor.currentIdx+1<this.GradColor.values.length) ? this.GradColor.values[this.GradColor.currentIdx+1] : 100,
needSort = pos < minValue || pos > maxValue;
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);
if (needSort) {
this.sldrGradient.sortThumbs();
this.sldrGradient.trigger('change', this.sldrGradient);
this.sldrGradient.trigger('changecomplete', this.sldrGradient);
}
}
},
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;
var color = this.sldrGradient.addNewThumb(undefined, pos, curIndex);
this.GradColor.colors[this.GradColor.currentIdx] = color;
this.sldrGradient.trigger('change', this.sldrGradient);
this.sldrGradient.trigger('changecomplete', this.sldrGradient);
},
onRemoveGradientStep: function() {
if (this.GradColor.values.length < 3) return;
var index = this.GradColor.currentIdx;
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) {
var newIndex = index > 0 ? index - 1 : index;
newIndex = (newIndex === 0 && this.GradColor.values.length > 2) ? this.GradColor.values.length - 2 : newIndex;
this.GradColor.currentIdx = newIndex;
}
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 +1665,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 || {}));
});

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

@ -498,6 +498,7 @@ define([
onGradientChange: function(slider, newValue, oldValue){
this.GradColor.values = slider.getValues();
this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx], true);
this._sliderChanged = true;
if (this.api && !this._noApply) {
if (this._sendUndoPoint) {
@ -840,6 +841,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 +1222,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 +1234,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');
@ -1248,18 +1252,60 @@ define([
me.GradColor.colors = colors;
me.GradColor.currentIdx = currentIdx;
});
this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){
me.GradColor.colors[index] = me.GradColor.colors[nearIndex];
this.sldrGradient.on('addthumb', function(cmp, index, pos){
me.GradColor.colors[index] = me.GradColor.colors[me.GradColor.currentIdx];
me.GradColor.currentIdx = index;
me.sldrGradient.addNewThumb(index, color);
var color = me.sldrGradient.addNewThumb(index, pos);
me.GradColor.colors[me.GradColor.currentIdx] = color;
});
this.sldrGradient.on('removethumb', function(cmp, index){
me.sldrGradient.removeThumb(index);
me.GradColor.values.splice(index, 1);
me.sldrGradient.changeGradientStyle();
if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= me.GradColor.colors.length) {
var newIndex = index > 0 ? index - 1 : index;
newIndex = (newIndex === 0 && me.GradColor.values.length > 2) ? me.GradColor.values.length - 2 : newIndex;
me.GradColor.currentIdx = newIndex;
}
me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
});
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 +1628,64 @@ define([
}
},
onPositionChange: function(btn) {
var pos = btn.getNumberValue(),
minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
maxValue = (this.GradColor.currentIdx+1<this.GradColor.values.length) ? this.GradColor.values[this.GradColor.currentIdx+1] : 100,
needSort = pos < minValue || pos > maxValue;
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);
if (needSort) {
this.sldrGradient.sortThumbs();
this.sldrGradient.trigger('change', this.sldrGradient);
this.sldrGradient.trigger('changecomplete', this.sldrGradient);
}
}
},
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;
var color = this.sldrGradient.addNewThumb(undefined, pos, curIndex);
this.GradColor.colors[this.GradColor.currentIdx] = color;
this.sldrGradient.trigger('change', this.sldrGradient);
this.sldrGradient.trigger('changecomplete', this.sldrGradient);
},
onRemoveGradientStep: function() {
if (this.GradColor.values.length < 3) return;
var index = this.GradColor.currentIdx;
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) {
var newIndex = index > 0 ? index - 1 : index;
newIndex = (newIndex === 0 && this.GradColor.values.length > 2) ? this.GradColor.values.length - 2 : newIndex;
this.GradColor.currentIdx = newIndex;
}
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 +1726,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 || {}));
});

9
apps/presentationeditor/main/locale/en.json
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",

BIN
apps/presentationeditor/main/resources/img/toolbar/1.25x/btn-add-breakpoint.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 494 B

BIN
apps/presentationeditor/main/resources/img/toolbar/1.25x/btn-remove-breakpoint.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 529 B

BIN
apps/presentationeditor/main/resources/img/toolbar/1.5x/btn-add-breakpoint.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 506 B

BIN
apps/presentationeditor/main/resources/img/toolbar/1.5x/btn-remove-breakpoint.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 552 B

BIN
apps/presentationeditor/main/resources/img/toolbar/1.75x/btn-add-breakpoint.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 650 B

BIN
apps/presentationeditor/main/resources/img/toolbar/1.75x/btn-remove-breakpoint.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 700 B

BIN
apps/presentationeditor/main/resources/img/toolbar/1x/btn-add-breakpoint.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 438 B

BIN
apps/presentationeditor/main/resources/img/toolbar/1x/btn-remove-breakpoint.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 493 B

BIN
apps/presentationeditor/main/resources/img/toolbar/2x/btn-add-breakpoint.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 782 B

BIN
apps/presentationeditor/main/resources/img/toolbar/2x/btn-remove-breakpoint.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 955 B

17
apps/spreadsheeteditor/main/app/template/CellSettings.template
View file

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

17
apps/spreadsheeteditor/main/app/template/ShapeSettings.template
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>

17
apps/spreadsheeteditor/main/app/template/TextArtSettings.template
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>

120
apps/spreadsheeteditor/main/app/view/CellSettings.js
View file

@ -249,7 +249,7 @@ define([
this.sldrGradient = new Common.UI.MultiSliderGradient({
el: $('#cell-slider-gradient'),
width: 125,
width: 192,
minValue: 0,
maxValue: 100,
values: [0, 100]
@ -261,6 +261,7 @@ define([
var color = me.GradColor.colors[me.GradColor.currentIdx];
me.btnGradColor.setColor(color);
me.colorsGrad.select(color,false);
me.spnGradPosition.setValue(me.GradColor.values[me.GradColor.currentIdx]);
});
this.sldrGradient.on('thumbdblclick', function(cmp){
me.btnGradColor.cmpEl.find('button').dropdown('toggle');
@ -277,15 +278,22 @@ define([
me.GradColor.colors = colors;
me.GradColor.currentIdx = currentIdx;
});
this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){
me.GradColor.colors[index] = me.GradColor.colors[nearIndex];
this.sldrGradient.on('addthumb', function(cmp, index, pos){
me.GradColor.colors[index] = me.GradColor.colors[me.GradColor.currentIdx];
me.GradColor.currentIdx = index;
me.sldrGradient.addNewThumb(index, color);
var color = me.sldrGradient.addNewThumb(index, pos);
me.GradColor.colors[me.GradColor.currentIdx] = color;
});
this.sldrGradient.on('removethumb', function(cmp, index){
me.sldrGradient.removeThumb(index);
me.GradColor.values.splice(index, 1);
me.sldrGradient.changeGradientStyle();
if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= me.GradColor.colors.length) {
var newIndex = index > 0 ? index - 1 : index;
newIndex = (newIndex === 0 && me.GradColor.values.length > 2) ? me.GradColor.values.length - 2 : newIndex;
me.GradColor.currentIdx = newIndex;
}
me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
});
this.fillControls.push(this.sldrGradient);
@ -430,6 +438,41 @@ define([
this.spnAngle.on('change', _.bind(this.onAngleChange, this));
this.spnAngle.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);});
this.spnGradPosition = new Common.UI.MetricSpinner({
el: $('#cell-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: $('#cell-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: $('#cell-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.chWrap = new Common.UI.CheckBox({
el: $('#cell-checkbox-wrap'),
labelText: this.strWrap,
@ -650,6 +693,9 @@ define([
}
me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
// Step position
this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx]);
this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD;
this.FGColor = {
Value: 1,
@ -1072,6 +1118,7 @@ define([
onGradientChange: function(slider, newValue, oldValue) {
this.GradColor.values = slider.getValues();
this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx], true);
this._sliderChanged = true;
if (this.api && !this._noApply) {
if (this._sendUndoPoint) {
@ -1171,6 +1218,65 @@ define([
Common.NotificationCenter.trigger('edit:complete', this);
},
onPositionChange: function(btn) {
var me = this,
pos = btn.getNumberValue(),
minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
maxValue = (this.GradColor.currentIdx+1<this.GradColor.values.length) ? this.GradColor.values[this.GradColor.currentIdx+1] : 100,
needSort = pos < minValue || pos > maxValue;
if (this.api) {
this.GradColor.values[this.GradColor.currentIdx] = pos;
if (this.gradient == null) {
this.gradient = new Asc.asc_CGradientFill();
this.gradient.asc_setType(this.GradFillType);
}
var arrGradStop = [];
this.GradColor.values.forEach(function (item, index) {
var gradientStop = new Asc.asc_CGradientStop();
gradientStop.asc_setColor(Common.Utils.ThemeColor.getRgbColor(Common.Utils.ThemeColor.colorValue2EffectId(me.GradColor.colors[index])));
gradientStop.asc_setPosition(me.GradColor.values[index]/100);
arrGradStop.push(gradientStop);
});
this.gradient.asc_putGradientStops(arrGradStop);
this.fill.asc_setGradientFill(this.gradient);
this.api.asc_setCellFill(this.fill);
if (needSort) {
this.sldrGradient.sortThumbs();
this.sldrGradient.trigger('change', this.sldrGradient);
this.sldrGradient.trigger('changecomplete', this.sldrGradient);
}
}
},
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;
var color = this.sldrGradient.addNewThumb(undefined, pos, curIndex);
this.GradColor.colors[this.GradColor.currentIdx] = color;
this.sldrGradient.trigger('change', this.sldrGradient);
this.sldrGradient.trigger('changecomplete', this.sldrGradient);
},
onRemoveGradientStep: function() {
if (this.GradColor.values.length < 3) return;
var index = this.GradColor.currentIdx;
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) {
var newIndex = index > 0 ? index - 1 : index;
newIndex = (newIndex === 0 && this.GradColor.values.length > 2) ? this.GradColor.values.length - 2 : newIndex;
this.GradColor.currentIdx = newIndex;
}
this.sldrGradient.setActiveThumb(this.GradColor.currentIdx);
},
textBorders: 'Border\'s Style',
textBorderColor: 'Color',
textBackColor: 'Background color',
@ -1203,7 +1309,11 @@ define([
textGradient: 'Gradient',
textControl: 'Text Control',
strWrap: 'Wrap text',
strShrink: 'Shrink to fit'
strShrink: 'Shrink to fit',
textGradientColor: 'Color',
textPosition: 'Position',
tipAddGradientPoint: 'Add gradient point',
tipRemoveGradientPoint: 'Remove gradient point'
}, SSE.Views.CellSettings || {}));
});

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

@ -509,6 +509,7 @@ define([
onGradientChange: function(slider, newValue, oldValue){
this.GradColor.values = slider.getValues();
this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx], true);
this._sliderChanged = true;
if (this.api && !this._noApply) {
if (this._sendUndoPoint) {
@ -910,6 +911,9 @@ 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'};
@ -1284,7 +1288,7 @@ define([
this.sldrGradient = new Common.UI.MultiSliderGradient({
el: $('#shape-slider-gradient'),
width: 125,
width: 192,
minValue: 0,
maxValue: 100,
values: [0, 100]
@ -1296,6 +1300,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');
@ -1312,18 +1318,60 @@ define([
me.GradColor.colors = colors;
me.GradColor.currentIdx = currentIdx;
});
this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){
me.GradColor.colors[index] = me.GradColor.colors[nearIndex];
this.sldrGradient.on('addthumb', function(cmp, index, pos){
me.GradColor.colors[index] = me.GradColor.colors[me.GradColor.currentIdx];
me.GradColor.currentIdx = index;
me.sldrGradient.addNewThumb(index, color);
var color = me.sldrGradient.addNewThumb(index, pos);
me.GradColor.colors[me.GradColor.currentIdx] = color;
});
this.sldrGradient.on('removethumb', function(cmp, index){
me.sldrGradient.removeThumb(index);
me.GradColor.values.splice(index, 1);
me.sldrGradient.changeGradientStyle();
if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= me.GradColor.colors.length) {
var newIndex = index > 0 ? index - 1 : index;
newIndex = (newIndex === 0 && me.GradColor.values.length > 2) ? me.GradColor.values.length - 2 : newIndex;
me.GradColor.currentIdx = newIndex;
}
me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
});
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;",
@ -1717,6 +1765,64 @@ define([
}
},
onPositionChange: function(btn) {
var pos = btn.getNumberValue(),
minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
maxValue = (this.GradColor.currentIdx+1<this.GradColor.values.length) ? this.GradColor.values[this.GradColor.currentIdx+1] : 100,
needSort = pos < minValue || pos > maxValue;
if (this.api) {
this.GradColor.values[this.GradColor.currentIdx] = pos;
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);
var arr = [];
this.GradColor.values.forEach(function(item){
arr.push(item*1000);
});
fill.asc_getFill().asc_putPositions(arr);
props.asc_putFill(fill);
this.imgprops.asc_putShapeProperties(props);
this.api.asc_setGraphicObjectProps(this.imgprops);
if (needSort) {
this.sldrGradient.sortThumbs();
this.sldrGradient.trigger('change', this.sldrGradient);
this.sldrGradient.trigger('changecomplete', this.sldrGradient);
}
}
},
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;
var color = this.sldrGradient.addNewThumb(undefined, pos, curIndex);
this.GradColor.colors[this.GradColor.currentIdx] = color;
this.sldrGradient.trigger('change', this.sldrGradient);
this.sldrGradient.trigger('changecomplete', this.sldrGradient);
},
onRemoveGradientStep: function() {
if (this.GradColor.values.length < 3) return;
var index = this.GradColor.currentIdx;
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) {
var newIndex = index > 0 ? index - 1 : index;
newIndex = (newIndex === 0 && this.GradColor.values.length > 2) ? this.GradColor.values.length - 2 : newIndex;
this.GradColor.currentIdx = newIndex;
}
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',
@ -1767,6 +1873,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'
}, SSE.Views.ShapeSettings || {}));
});

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

@ -499,6 +499,7 @@ define([
onGradientChange: function(slider, newValue, oldValue){
this.GradColor.values = slider.getValues();
this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx], true);
this._sliderChanged = true;
if (this.api && !this._noApply) {
if (this._sendUndoPoint) {
@ -844,6 +845,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 +1226,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 +1238,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');
@ -1252,18 +1256,60 @@ define([
me.GradColor.colors = colors;
me.GradColor.currentIdx = currentIdx;
});
this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){
me.GradColor.colors[index] = me.GradColor.colors[nearIndex];
this.sldrGradient.on('addthumb', function(cmp, index, pos){
me.GradColor.colors[index] = me.GradColor.colors[me.GradColor.currentIdx];
me.GradColor.currentIdx = index;
me.sldrGradient.addNewThumb(index, color);
var color = me.sldrGradient.addNewThumb(index, pos);
me.GradColor.colors[me.GradColor.currentIdx] = color;
});
this.sldrGradient.on('removethumb', function(cmp, index){
me.sldrGradient.removeThumb(index);
me.GradColor.values.splice(index, 1);
me.sldrGradient.changeGradientStyle();
if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= me.GradColor.colors.length) {
var newIndex = index > 0 ? index - 1 : index;
newIndex = (newIndex === 0 && me.GradColor.values.length > 2) ? me.GradColor.values.length - 2 : newIndex;
me.GradColor.currentIdx = newIndex;
}
me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
});
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 +1632,63 @@ define([
}
},
onPositionChange: function(btn) {
var pos = btn.getNumberValue(),
minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
maxValue = (this.GradColor.currentIdx+1<this.GradColor.values.length) ? this.GradColor.values[this.GradColor.currentIdx+1] : 100,
needSort = pos < minValue || pos > maxValue;
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);
if (needSort) {
this.sldrGradient.sortThumbs();
this.sldrGradient.trigger('change', this.sldrGradient);
this.sldrGradient.trigger('changecomplete', this.sldrGradient);
}
}
},
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;
var color = this.sldrGradient.addNewThumb(undefined, pos, curIndex);
this.GradColor.colors[this.GradColor.currentIdx] = color;
this.sldrGradient.trigger('change', this.sldrGradient);
this.sldrGradient.trigger('changecomplete', this.sldrGradient);
},
onRemoveGradientStep: function() {
if (this.GradColor.values.length < 3) return;
var index = this.GradColor.currentIdx;
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) {
var newIndex = index > 0 ? index - 1 : index;
newIndex = (newIndex === 0 && this.GradColor.values.length > 2) ? this.GradColor.values.length - 2 : newIndex;
this.GradColor.currentIdx = newIndex;
}
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 +1729,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 || {}));
});

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

@ -1281,6 +1281,10 @@
"SSE.Views.CellSettings.textControl": "Text Control",
"SSE.Views.CellSettings.strWrap": "Wrap text",
"SSE.Views.CellSettings.strShrink": "Shrink to fit",
"SSE.Views.CellSettings.textGradientColor": "Color",
"SSE.Views.CellSettings.textPosition": "Position",
"SSE.Views.CellSettings.tipAddGradientPoint": "Add gradient point",
"SSE.Views.CellSettings.tipRemoveGradientPoint": "Remove gradient point",
"SSE.Views.ChartDataDialog.textTitle": "Chart Data",
"SSE.Views.ChartDataDialog.textInvalidRange": "Invalid cells range",
"SSE.Views.ChartDataDialog.textSelectData": "Select data",
@ -2281,6 +2285,9 @@
"SSE.Views.ShapeSettings.txtWood": "Wood",
"SSE.Views.ShapeSettings.textFromStorage": "From Storage",
"SSE.Views.ShapeSettings.textSelectImage": "Select Picture",
"SSE.Views.ShapeSettings.textPosition": "Position",
"SSE.Views.ShapeSettings.tipAddGradientPoint": "Add gradient point",
"SSE.Views.ShapeSettings.tipRemoveGradientPoint": "Remove gradient point",
"SSE.Views.ShapeSettingsAdvanced.strColumns": "Columns",
"SSE.Views.ShapeSettingsAdvanced.strMargins": "Text Padding",
"SSE.Views.ShapeSettingsAdvanced.textAbsolute": "Don't move or size with cells",
@ -2615,6 +2622,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",

BIN
apps/spreadsheeteditor/main/resources/img/toolbar/1.25x/btn-add-breakpoint.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 494 B

BIN
apps/spreadsheeteditor/main/resources/img/toolbar/1.25x/btn-remove-breakpoint.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 529 B

BIN
apps/spreadsheeteditor/main/resources/img/toolbar/1.5x/btn-add-breakpoint.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 506 B

BIN
apps/spreadsheeteditor/main/resources/img/toolbar/1.5x/btn-remove-breakpoint.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 552 B

BIN
apps/spreadsheeteditor/main/resources/img/toolbar/1.75x/btn-add-breakpoint.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 650 B

BIN
apps/spreadsheeteditor/main/resources/img/toolbar/1.75x/btn-remove-breakpoint.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 700 B

BIN
apps/spreadsheeteditor/main/resources/img/toolbar/1x/btn-add-breakpoint.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 438 B

BIN
apps/spreadsheeteditor/main/resources/img/toolbar/1x/btn-remove-breakpoint.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 493 B

BIN
apps/spreadsheeteditor/main/resources/img/toolbar/2x/btn-add-breakpoint.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 782 B

BIN
apps/spreadsheeteditor/main/resources/img/toolbar/2x/btn-remove-breakpoint.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 955 B