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

[SSE] Fill Cell: add gradient slider, angle; remove style, color 1, color 2

Browse source
This commit is contained in:
Julia Svinareva 2019-11-26 13:27:50 +03:00
parent b82812abd6
commit 0e6b4348e9
3 changed files with 220 additions and 169 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -29,30 +29,19 @@
<div id="cell-panel-gradient-fill" class="settings-hidden padding-small" style="width: 100%;">
<div style="height:80px;">
<div style="display: inline-block;">
<label class="input-label" style=""><%= scope.textStyle %></label>
<div id="cell-combo-grad-type" style="width: 90px;"></div>
<label class="input-label" style=""><%= scope.textAngle %></label>
<div id="cell-spin-gradient-angle" style="width: 90px;"></div>
</div>
<div style="display: inline-block;float: right;">
<label class="input-label" style=""><%= scope.textDirection %></label>
<div id="cell-button-direction" style=""></div>
</div>
</div>
<div style="height: 28px;">
<div style="display: inline-block;">
<label class="input-label" style="width: 90px; padding-top: 3px;"><%= scope.textBorderColor + " 1" %></label>
</div>
<div style="display: inline-block;float: right;">
<div id="cell-grad-btn-color-1" style=""></div>
</div>
</div>
<div style="height: 28px;">
<div style="display: inline-block;">
<label class="input-label" style="width: 90px; padding-top: 3px;"><%= scope.textBorderColor + " 2" %></label>
</div>
<div style="display: inline-block;float: right;">
<div id="cell-grad-btn-color-2" style=""></div>
</div>
<label class="header" style="display:block;margin-bottom: 5px;"><%= scope.textGradient %></label>
<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>
</td>
</tr>

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

@ -78,8 +78,7 @@ define([
FillType: Asc.c_oAscFill.FILL_TYPE_SOLID,
FGColor: '000000',
BGColor: 'ffffff',
GradColor1: '000000',
GradColor2: 'ffffff'
GradColor: '000000'
};
this.lockedControls = [];
this._locked = true;
@ -88,7 +87,7 @@ define([
this.GradFillType = Asc.c_oAscFillGradType.GRAD_LINEAR;
this.GradLinearDirectionType = 0;
this.GradRadialDirectionIdx = 0;
this.GradColors = [];
this.GradColor = { values: [0, 100], colors: ['000000', 'ffffff'], currentIdx: 0};
this.fillControls = [];
@ -192,7 +191,21 @@ define([
this.fillControls.push(this.cmbFillSrc);
this.cmbFillSrc.on('selected', _.bind(this.onFillSrcSelect, this));
this._arrGradType = [
this.numGradientAngle = new Common.UI.MetricSpinner({
el: $('#cell-spin-gradient-angle'),
step: 1,
width: 60,
defaultUnit : "°",
value: '0 °',
allowDecimal: true,
maxValue: 359.9,
minValue: 0,
disabled: this._locked
});
this.lockedControls.push(this.numGradientAngle);
this.numGradientAngle.on('change', _.bind(this.onGradientAngleChange, this));
/*this._arrGradType = [
{displayValue: this.textLinear, value: Asc.c_oAscFillGradType.GRAD_LINEAR},
{displayValue: this.textRadial, value: Asc.c_oAscFillGradType.GRAD_PATH}
];
@ -206,7 +219,7 @@ define([
});
this.cmbGradType.setValue(this._arrGradType[0].value);
this.fillControls.push(this.cmbGradType);
this.cmbGradType.on('selected', _.bind(this.onGradTypeSelect, this));
this.cmbGradType.on('selected', _.bind(this.onGradTypeSelect, this));*/
this._viewDataLinear = [
{ offsetx: 0, offsety: 0, type:45, subtype:-1, iconcls:'gradient-left-top' },
@ -219,10 +232,6 @@ define([
{ offsetx: 100, offsety: 100, type:225, subtype:7, iconcls:'gradient-right-bottom'}
];
this._viewDataRadial = [
{ offsetx: 100, offsety: 150, type:2, subtype:5, iconcls:'gradient-radial-center'}
];
this.btnDirection = new Common.UI.Button({
cls : 'btn-large-dataview',
iconCls : 'item-gradient gradient-left',
@ -247,6 +256,48 @@ define([
this.fillControls.push(this.btnDirection);
this.mnuDirectionPicker.on('item:click', _.bind(this.onSelectGradient, this, this.btnDirection));
this.sldrGradient = new Common.UI.MultiSliderGradient({
el: $('#cell-slider-gradient'),
width: 125,
minValue: 0,
maxValue: 100,
values: [0, 100]
});
this.sldrGradient.on('change', _.bind(this.onGradientChange, this));
this.sldrGradient.on('changecomplete', _.bind(this.onGradientChangeComplete, this));
this.sldrGradient.on('thumbclick', function(cmp, index){
me.GradColor.currentIdx = index;
var color = me.GradColor.colors[me.GradColor.currentIdx];
me.btnGradColor.setColor(color);
me.colorsGrad.select(color,false);
});
this.sldrGradient.on('thumbdblclick', function(cmp){
me.btnGradColor.cmpEl.find('button').dropdown('toggle');
});
this.sldrGradient.on('sortthumbs', function(cmp, recalc_indexes){
var colors = [],
currentIdx;
_.each (recalc_indexes, function(recalc_index, index) {
colors.push(me.GradColor.colors[recalc_index]);
if (me.GradColor.currentIdx == recalc_index)
currentIdx = index;
});
me.OriginalFillType = null;
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];
me.GradColor.currentIdx = index;
me.sldrGradient.addNewThumb(index, color);
});
this.sldrGradient.on('removethumb', function(cmp, index){
me.sldrGradient.removeThumb(index);
me.GradColor.values.splice(index, 1);
me.sldrGradient.changeGradientStyle();
});
this.fillControls.push(this.sldrGradient);
this.cmbPattern = new Common.UI.ComboDataView({
itemWidth: 28,
itemHeight: 28,
@ -418,8 +469,13 @@ define([
this.CellColor = {Value: 0, Color: 'transparent'};
this.FGColor = {Value: 1, Color: {color: '4f81bd', effectId: 24}};
this.BGColor = {Value: 1, Color: 'ffffff'};
this.GradColors[0] = {Value: 1, Color: {color: '4f81bd', effectId: 24}, Position: 0};
this.GradColors[1] = {Value: 1, Color: 'ffffff', Position: 1};
this.sldrGradient.setThumbs(2);
this.GradColor.colors.length = 0;
this.GradColor.values.length = 0;
this.GradColor.colors[0] = {color: '4f81bd', effectId: 24};
this.GradColor.colors[1] = 'ffffff';
this.GradColor.values = [0, 100];
this.GradColor.currentIdx = 0;
} else if (this.pattern !== null) {
if (this.pattern.asc_getType() === -1) {
var color = this.pattern.asc_getFgColor();
@ -437,18 +493,19 @@ define([
Color: Common.Utils.ThemeColor.getHexColor(color.asc_getR(), color.asc_getG(), color.asc_getB())
};
}
this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_SOLID;
this.FGColor = {
Value: 1,
Color: Common.Utils.ThemeColor.colorValue2EffectId(this.CellColor.Color)
};
this.BGColor = {Value: 1, Color: 'ffffff'};
this.GradColors[0] = {
Value: 1,
Color: Common.Utils.ThemeColor.colorValue2EffectId(this.CellColor.Color),
Position: 0
};
this.GradColors[1] = {Value: 1, Color: 'ffffff', Position: 1};
this.sldrGradient.setThumbs(2);
this.GradColor.colors.length = 0;
this.GradColor.values.length = 0;
this.GradColor.values = [0, 100];
this.GradColor.colors[0] = Common.Utils.ThemeColor.colorValue2EffectId(this.CellColor.Color);
this.GradColor.colors[1] = 'ffffff';
this.GradColor.currentIdx = 0;
this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_SOLID;
} else {
this.PatternFillType = this.pattern.asc_getType();
if (this._state.PatternFillType !== this.PatternFillType) {
@ -501,19 +558,20 @@ define([
Value: 1,
Color: Common.Utils.ThemeColor.colorValue2EffectId(this.FGColor.Color)
};
this.GradColors[0] = {
Value: 1,
Color: Common.Utils.ThemeColor.colorValue2EffectId(this.FGColor.Color),
Position: 0
};
this.GradColors[1] = {Value: 1, Color: 'ffffff', Position: 1};
this.sldrGradient.setThumbs(2);
this.GradColor.colors.length = 0;
this.GradColor.values.length = 0;
this.GradColor.values = [0, 100];
this.GradColor.colors[0] = Common.Utils.ThemeColor.colorValue2EffectId(this.FGColor.Color);
this.GradColor.colors[1] = 'ffffff';
this.GradColor.currentIdx = 0;
this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_PATT;
}
} else if (this.gradient !== null) {
var gradFillType = this.gradient.asc_getType();
if (this._state.GradFillType !== gradFillType || this.GradFillType !== gradFillType) {
this.GradFillType = gradFillType;
rec = undefined;
/*rec = undefined;
if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR || this.GradFillType == Asc.c_oAscFillGradType.GRAD_PATH) {
this.cmbGradType.setValue(this.GradFillType);
rec = this.cmbGradType.store.findWhere({value: this.GradFillType});
@ -521,7 +579,7 @@ define([
} else {
this.cmbGradType.setValue('');
this.btnDirection.setIconCls('');
}
}*/
this._state.GradFillType = this.GradFillType;
}
if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
@ -534,45 +592,45 @@ define([
this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls'));
else
this.btnDirection.setIconCls('');
this.numGradientAngle.setValue(value);
}
}
var me = this;
var gradientStops;
this.GradColors.length = 0;
gradientStops = this.gradient.asc_getGradientStops();
var length = gradientStops.length;
this.sldrGradient.setThumbs(length);
this.GradColor.colors.length = 0;
this.GradColor.values.length = 0;
gradientStops.forEach(function (color) {
var clr = color.asc_getColor(),
position = color.asc_getPosition(),
itemColor;
if (clr.asc_getType() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
itemColor = {
Value: 1,
Color: {
color: Common.Utils.ThemeColor.getHexColor(clr.asc_getR(), clr.asc_getG(), clr.asc_getB()),
effectValue: clr.asc_getValue()
},
Position: position
};
} else {
itemColor = {
Value: 1,
Color: Common.Utils.ThemeColor.getHexColor(clr.asc_getR(), clr.asc_getG(), clr.asc_getB()),
Position: position
};
}
me.GradColors.push(itemColor);
position = color.asc_getPosition();
me.GradColor.colors.push( clr.asc_getType() == Asc.c_oAscColor.COLOR_TYPE_SCHEME ?
{color: Common.Utils.ThemeColor.getHexColor(clr.asc_getR(), clr.asc_getG(), clr.asc_getB()), effectValue: clr.asc_getValue()} :
Common.Utils.ThemeColor.getHexColor(clr.asc_getR(), clr.asc_getG(), clr.asc_getB()));
me.GradColor.values.push(position*100);
});
this.GradColors = _.sortBy(this.GradColors, 'Position');
for (var index=0; index<length; index++) {
me.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(me.GradColor.colors[index]) == 'object') ? me.GradColor.colors[index].color : me.GradColor.colors[index]), index);
me.sldrGradient.setValue(index, me.GradColor.values[index]);
}
if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= me.GradColor.colors.length) {
me.GradColor.currentIdx = 0;
}
me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD;
this.FGColor = {
Value: 1,
Color: Common.Utils.ThemeColor.colorValue2EffectId(this.GradColors[0].Color)
Color: Common.Utils.ThemeColor.colorValue2EffectId(this.GradColor.colors[0])
};
this.BGColor = {Value: 1, Color: 'ffffff'};
this.CellColor = {
Value: 1,
Color: Common.Utils.ThemeColor.colorValue2EffectId(this.GradColors[0].Color)
Color: Common.Utils.ThemeColor.colorValue2EffectId(this.GradColor.colors[0])
};
}
@ -657,60 +715,29 @@ define([
}
// Gradient colors
var gradColor1 = this.GradColors[0];
if (!gradColor1) {
gradColor1 = {Value: 1, Color: {color: '4f81bd', effectId: 24}};
}
type1 = typeof (gradColor1.Color);
type2 = typeof (this._state.GradColor1);
var gradColor = this.GradColor.colors[this.GradColor.currentIdx];
type1 = typeof (gradColor);
type2 = typeof (this._state.GradColor);
if ((type1 !== type2) || (type1 == 'object' &&
(gradColor1.Color.effectValue !== this._state.GradColor1.effectValue || this._state.GradColor1.color.indexOf(gradColor1.Color.color) < 0)) ||
(type1 != 'object' && this._state.GradColor1.indexOf(gradColor1.Color) < 0)) {
(gradColor.effectValue !== this._state.GradColor.effectValue || this._state.GradColor.color.indexOf(gradColor.color) < 0)) ||
(type1 != 'object' && this._state.GradColor.indexOf(gradColor) < 0)) {
this.btnGradColor1.setColor(gradColor1.Color);
if (typeof (gradColor1.Color) == 'object') {
this.btnGradColor.setColor(gradColor);
if (typeof (gradColor) == 'object') {
var isselected = false;
for (var i = 0; i < 10; i++) {
if (Common.Utils.ThemeColor.ThemeValues[i] == gradColor1.Color.effectValue) {
this.colorsGrad1.select(gradColor1.Color, true);
if (Common.Utils.ThemeColor.ThemeValues[i] == gradColor.effectValue) {
this.colorsGrad.select(gradColor, true);
isselected = true;
break;
}
}
if (!isselected) this.colorsGrad1.clearSelection();
if (!isselected) this.colorsGrad.clearSelection();
} else
this.colorsGrad1.select(gradColor1.Color, true);
this.colorsGrad.select(gradColor, true);
this._state.GradColor1 = gradColor1.Color;
}
var gradColor2 = this.GradColors[1];
if (!gradColor2) {
gradColor2 = {Value: 1, Color: 'ffffff'};
}
type1 = typeof (gradColor2.Color);
type2 = typeof (this._state.GradColor2);
if ((type1 !== type2) || (type1 == 'object' &&
(gradColor2.Color.effectValue !== this._state.GradColor2.effectValue || this._state.GradColor2.color.indexOf(gradColor2.Color.color) < 0)) ||
(type1 != 'object' && this._state.GradColor2.indexOf(gradColor2.Color) < 0)) {
this.btnGradColor2.setColor(gradColor2.Color);
if (typeof (gradColor2.Color) == 'object') {
var isselected = false;
for (var i = 0; i < 10; i++) {
if (Common.Utils.ThemeColor.ThemeValues[i] == gradColor2.Color.effectValue) {
this.colorsGrad2.select(gradColor2.Color, true);
isselected = true;
break;
}
}
if (!isselected) this.colorsGrad2.clearSelection();
} else
this.colorsGrad2.select(gradColor2.Color, true);
this._state.GradColor2 = gradColor2.Color;
this._state.GradColor = gradColor;
}
this._noApply = false;
@ -747,43 +774,24 @@ define([
this.btnBackColor.menu.items[1].on('click', _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor));
this.fillControls.push(this.btnBackColor);
this.btnGradColor1 = new Common.UI.ColorButton({
this.btnGradColor = new Common.UI.ColorButton({
style: "width:45px;",
menu : new Common.UI.Menu({
items: [
{ template: _.template('<div id="cell-gradient-color1-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
{ template: _.template('<a id="cell-gradient-color1-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
{ template: _.template('<div id="cell-gradient-color" style="width: 169px; height: 220px; margin: 10px;"></div>') },
{ template: _.template('<a id="cell-gradient-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
]
})
});
this.btnGradColor1.render( $('#cell-grad-btn-color-1'));
this.btnGradColor1.setColor('000000');
this.colorsGrad1 = new Common.UI.ThemeColorPalette({
el: $('#cell-gradient-color1-menu'),
this.btnGradColor.render( $('#cell-gradient-color-btn'));
this.btnGradColor.setColor('000000');
this.colorsGrad = new Common.UI.ThemeColorPalette({
el: $('#cell-gradient-color'),
value: '000000'
});
this.colorsGrad1.on('select', _.bind(this.onColorsGradientSelect, this));
this.btnGradColor1.menu.items[1].on('click', _.bind(this.addNewColor, this, this.colorsGrad1, this.btnGradColor1));
this.fillControls.push(this.btnGradColor1);
this.btnGradColor2 = new Common.UI.ColorButton({
style: "width:45px;",
menu : new Common.UI.Menu({
items: [
{ template: _.template('<div id="cell-gradient-color2-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
{ template: _.template('<a id="cell-gradient-color2-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
]
})
});
this.btnGradColor2.render( $('#cell-grad-btn-color-2'));
this.btnGradColor2.setColor('ffffff');
this.colorsGrad2 = new Common.UI.ThemeColorPalette({
el: $('#cell-gradient-color2-menu'),
value: 'ffffff'
});
this.colorsGrad2.on('select', _.bind(this.onColorsGradientSelect, this));
this.btnGradColor2.menu.items[1].on('click', _.bind(this.addNewColor, this, this.colorsGrad2, this.btnGradColor2));
this.fillControls.push(this.btnGradColor2);
this.colorsGrad.on('select', _.bind(this.onColorsGradientSelect, this));
this.btnGradColor.menu.items[1].on('click', _.bind(this.addNewColor, this, this.colorsGrad, this.btnGradColor));
this.fillControls.push(this.btnGradColor);
this.btnFGColor = new Common.UI.ColorButton({
style: "width:45px;",
@ -826,8 +834,7 @@ define([
this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
this.borderColor.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
this.btnBorderColor.setColor(this.borderColor.getColor());
this.colorsGrad1.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
this.colorsGrad2.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
this.colorsGrad.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
this.colorsFG.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
this.colorsBG.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
},
@ -889,21 +896,24 @@ define([
this.gradient.asc_setDegree(this.GradLinearDirectionType);
}
if (this.OriginalFillType !== Asc.c_oAscFill.FILL_TYPE_GRAD) {
var HexColor0 = Common.Utils.ThemeColor.getRgbColor(this.GradColors[0].Color).get_color().get_hex(),
HexColor1 = Common.Utils.ThemeColor.getRgbColor(this.GradColors[1].Color).get_color().get_hex();
if (HexColor0 === 'ffffff' && HexColor1 === 'ffffff') {
this.GradColors[0].Color = {color: '4f81bd', effectId: 24}; // color accent1
this.GradColor.currentIdx = 0;
if (this.GradColor.colors.length === 2) {
var HexColor0 = Common.Utils.ThemeColor.getRgbColor(this.GradColor.colors[0]).get_color().get_hex(),
HexColor1 = Common.Utils.ThemeColor.getRgbColor(this.GradColor.colors[1]).get_color().get_hex();
if (HexColor0 === 'ffffff' && HexColor1 === 'ffffff') {
this.GradColors.colors[0] = {color: '4f81bd', effectId: 24}; // color accent1
}
}
var arrGradStop = [];
this.GradColors.forEach(function (item) {
this.GradColor.colors.forEach(function (item, index) {
var gradientStop = new Asc.asc_CGradientStop();
gradientStop.asc_setColor(Common.Utils.ThemeColor.getRgbColor(item.Color));
gradientStop.asc_setPosition(item.Position);
gradientStop.asc_setColor(Common.Utils.ThemeColor.getRgbColor(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);
}
@ -946,7 +956,7 @@ define([
this.FillGradientContainer.toggleClass('settings-hidden', value !== Asc.c_oAscFill.FILL_TYPE_GRAD);
},
onGradTypeSelect: function(combo, record) {
/*onGradTypeSelect: function(combo, record) {
this.GradFillType = record.value;
if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
@ -994,7 +1004,7 @@ define([
}
Common.NotificationCenter.trigger('edit:complete', this);
},
},*/
onSelectGradient: function(btn, picker, itemView, record) {
var me = this;
@ -1015,7 +1025,8 @@ define([
}
this.btnDirection.setIconCls('item-gradient ' + rawData.iconcls);
(this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) ? this.GradLinearDirectionType = rawData.type : this.GradRadialDirectionIdx = 0;
this.GradLinearDirectionType = rawData.type;
this.numGradientAngle.setValue(rawData.type);
if (this.api) {
if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
@ -1023,10 +1034,10 @@ define([
this.gradient = new Asc.asc_CGradientFill();
this.gradient.asc_setType(this.GradFillType);
var arrGradStop = [];
this.GradColors.forEach(function (item) {
this.GradColor.values.forEach(function (item, index) {
var gradientStop = new Asc.asc_CGradientStop();
gradientStop.asc_setColor(Common.Utils.ThemeColor.getRgbColor(item.Color));
gradientStop.asc_setPosition(item.Position);
gradientStop.asc_setColor(Common.Utils.ThemeColor.getRgbColor(me.GradColor.colors[index]));
gradientStop.asc_setPosition(me.GradColor.values[index]/100);
arrGradStop.push(gradientStop);
});
this.gradient.asc_putGradientStops(arrGradStop);
@ -1041,15 +1052,10 @@ define([
},
onColorsGradientSelect: function(picker, color) {
var me = this,
pickerId = picker.el.id;
if (pickerId === "cell-gradient-color1-menu") {
this.btnGradColor1.setColor(color);
this.GradColors[0].Color = color;
} else if (pickerId === "cell-gradient-color2-menu") {
this.btnGradColor2.setColor(color);
this.GradColors[1].Color = color;
}
var me = this;
this.btnGradColor.setColor(color);
this.GradColor.colors[this.GradColor.currentIdx] = color;
this.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(color) == 'object') ? color.color : color));
if (this.api && !this._noApply) {
if (this.gradient == null) {
@ -1060,10 +1066,10 @@ define([
}
}
var arrGradStop = [];
this.GradColors.forEach(function (item) {
this.GradColor.values.forEach(function (item, index) {
var gradientStop = new Asc.asc_CGradientStop();
gradientStop.asc_setColor(Common.Utils.ThemeColor.getRgbColor(item.Color));
gradientStop.asc_setPosition(item.Position);
gradientStop.asc_setColor(Common.Utils.ThemeColor.getRgbColor(me.GradColor.colors[index]));
gradientStop.asc_setPosition(me.GradColor.values[index]/100);
arrGradStop.push(gradientStop);
});
this.gradient.asc_putGradientStops(arrGradStop);
@ -1074,6 +1080,63 @@ define([
Common.NotificationCenter.trigger('edit:complete', this);
},
onGradientAngleChange: function(field, newValue, oldValue, eOpts) {
if (this.api) {
if (this.gradient == null) {
this.gradient = new Asc.asc_CGradientFill();
this.gradient.asc_setType(this.GradFillType);
}
if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
this.gradient.asc_setDegree(field.getNumberValue());
}
this.fill.asc_setGradientFill(this.gradient);
this.api.asc_setCellFill(this.fill);
}
},
onGradientChange: function(slider, newValue, oldValue) {
this.GradColor.values = slider.getValues();
this._sliderChanged = true;
if (this.api && !this._noApply) {
if (this._sendUndoPoint) {
this.api.setStartPointHistory();
this._sendUndoPoint = false;
this.updateslider = setInterval(_.bind(this._gradientApplyFunc, this), 100);
}
}
},
onGradientChangeComplete: function(slider, newValue, oldValue) {
clearInterval(this.updateslider);
this._sliderChanged = true;
if (!this._sendUndoPoint) { // start point was added
this.api.setEndPointHistory();
this._gradientApplyFunc();
}
this._sendUndoPoint = true;
},
_gradientApplyFunc: function() {
if (this._sliderChanged) {
var me = this;
if (this.gradient == null)
this.gradient = new Asc.asc_CGradientFill();
var arrGradStop = [];
this.GradColor.colors.forEach(function (item, index) {
var gradientStop = new Asc.asc_CGradientStop();
gradientStop.asc_setColor(Common.Utils.ThemeColor.getRgbColor(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);
this._sliderChanged = false;
}
},
onPatternSelect: function(combo, record) {
if (this.api && !this._noApply) {
this.PatternFillType = record.get('type');
@ -1145,13 +1208,13 @@ define([
textGradientFill: 'Gradient Fill',
textPatternFill: 'Pattern',
textColor: 'Color Fill',
textStyle: 'Style',
textDirection: 'Direction',
textLinear: 'Linear',
textRadial: 'Radial',
textPattern: 'Pattern',
textForeground: 'Foreground color',
textBackground: 'Background color'
textBackground: 'Background color',
textGradient: 'Gradient'
}, SSE.Views.CellSettings || {}));
});

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

@ -1190,7 +1190,6 @@
"SSE.Views.CellSettings.textPatternFill": "Pattern",
"SSE.Views.CellSettings.textRadial": "Radial",
"SSE.Views.CellSettings.textSelectBorders": "Select borders you want to change applying style chosen above",
"SSE.Views.CellSettings.textStyle": "Style",
"SSE.Views.CellSettings.tipAll": "Set outer border and all inner lines",
"SSE.Views.CellSettings.tipBottom": "Set outer bottom border only",
"SSE.Views.CellSettings.tipDiagD": "Set Diagonal Down Border",