diff --git a/apps/spreadsheeteditor/main/app/template/CellSettings.template b/apps/spreadsheeteditor/main/app/template/CellSettings.template index bcafb045b..be422118a 100644 --- a/apps/spreadsheeteditor/main/app/template/CellSettings.template +++ b/apps/spreadsheeteditor/main/app/template/CellSettings.template @@ -29,30 +29,19 @@
- -
+ +
-
-
- -
-
-
-
-
-
-
- -
-
-
-
+ +
+
+
diff --git a/apps/spreadsheeteditor/main/app/view/CellSettings.js b/apps/spreadsheeteditor/main/app/view/CellSettings.js index bc7e5bf88..5aa0ddbfb 100644 --- a/apps/spreadsheeteditor/main/app/view/CellSettings.js +++ b/apps/spreadsheeteditor/main/app/view/CellSettings.js @@ -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= 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('
') }, - { template: _.template('' + this.textNewColor + '') } + { template: _.template('
') }, + { template: _.template('' + this.textNewColor + '') } ] }) }); - 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('
') }, - { template: _.template('' + this.textNewColor + '') } - ] - }) - }); - 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 || {})); }); \ No newline at end of file diff --git a/apps/spreadsheeteditor/main/locale/en.json b/apps/spreadsheeteditor/main/locale/en.json index ff5e1a54f..500720fff 100644 --- a/apps/spreadsheeteditor/main/locale/en.json +++ b/apps/spreadsheeteditor/main/locale/en.json @@ -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",