diff --git a/apps/spreadsheeteditor/main/app/view/CellSettings.js b/apps/spreadsheeteditor/main/app/view/CellSettings.js
index 4978cd450..26823849a 100644
--- a/apps/spreadsheeteditor/main/app/view/CellSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/CellSettings.js
@@ -67,20 +67,36 @@ define([
initialize: function () {
this._initSettings = true;
+ this._noApply = true;
this._state = {
- BackColor: undefined,
DisabledControls: true,
- CellAngle: undefined
+ DisabledFillPanels: false,
+ CellAngle: undefined,
+ GradFillType: Asc.c_oAscFillGradType.GRAD_LINEAR,
+ CellColor: null,
+ FillType: Asc.c_oAscFill.FILL_TYPE_SOLID,
+ FGColor: '000000',
+ BGColor: 'ffffff',
+ GradColor1: null,
+ GradColor2: null
};
this.lockedControls = [];
this._locked = true;
this.isEditCell = false;
this.BorderType = 1;
+ this.GradLinearDirectionType = 0;
+ this.GradRadialDirectionIdx = 0;
+ this.GradColors = [];
+
+ this.fillControls = [];
this.render();
this.createDelayedControls();
+ this.FillColorContainer = $('#cell-panel-color-fill');
+ this.FillPatternContainer = $('#cell-panel-pattern-fill');
+ this.FillGradientContainer = $('#cell-panel-gradient-fill');
},
onColorsBackSelect: function(picker, color) {
@@ -155,6 +171,138 @@ define([
},
createDelayedControls: function() {
+ var me = this;
+ this._arrFillSrc = [
+ {displayValue: this.textColor, value: Asc.c_oAscFill.FILL_TYPE_SOLID},
+ {displayValue: this.textGradientFill, value: Asc.c_oAscFill.FILL_TYPE_GRAD},
+ {displayValue: this.textPatternFill, value: Asc.c_oAscFill.FILL_TYPE_PATT},
+ {displayValue: this.textNoFill, value: Asc.c_oAscFill.FILL_TYPE_NOFILL}
+ ];
+
+ this.cmbFillSrc = new Common.UI.ComboBox({
+ el: $('#cell-combo-fill-src'),
+ cls: 'input-group-nr',
+ style: 'width: 100%;',
+ menuStyle: 'min-width: 100%;',
+ editable: false,
+ data: this._arrFillSrc
+ });
+ this.cmbFillSrc.setValue(this._arrFillSrc[0].value);
+ this.fillControls.push(this.cmbFillSrc);
+ this.cmbFillSrc.on('selected', _.bind(this.onFillSrcSelect, this));
+
+ this._arrGradType = [
+ {displayValue: this.textLinear, value: Asc.c_oAscFillGradType.GRAD_LINEAR},
+ {displayValue: this.textRadial, value: Asc.c_oAscFillGradType.GRAD_PATH}
+ ];
+
+ this.cmbGradType = new Common.UI.ComboBox({
+ el: $('#cell-combo-grad-type'),
+ cls: 'input-group-nr',
+ menuStyle: 'min-width: 90px;',
+ editable: false,
+ data: this._arrGradType
+ });
+ this.cmbGradType.setValue(this._arrGradType[0].value);
+ this.fillControls.push(this.cmbGradType);
+ this.cmbGradType.on('selected', _.bind(this.onGradTypeSelect, this));
+
+ this._viewDataLinear = [
+ { offsetx: 0, offsety: 0, type:45, subtype:-1, iconcls:'gradient-left-top' },
+ { offsetx: 50, offsety: 0, type:90, subtype:4, iconcls:'gradient-top'},
+ { offsetx: 100, offsety: 0, type:135, subtype:5, iconcls:'gradient-right-top'},
+ { offsetx: 0, offsety: 50, type:0, subtype:6, iconcls:'gradient-left', cls: 'item-gradient-separator', selected: true},
+ { offsetx: 100, offsety: 50, type:180, subtype:1, iconcls:'gradient-right'},
+ { offsetx: 0, offsety: 100, type:315, subtype:2, iconcls:'gradient-left-bottom'},
+ { offsetx: 50, offsety: 100, type:270, subtype:3, iconcls:'gradient-bottom'},
+ { 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',
+ menu : new Common.UI.Menu({
+ style: 'min-width: 60px;',
+ menuAlign: 'tr-br',
+ items: [
+ { template: _.template('') }
+ ]
+ })
+ });
+ this.btnDirection.on('render:after', function(btn) {
+ me.mnuDirectionPicker = new Common.UI.DataView({
+ el: $('#id-cell-menu-direction'),
+ parentMenu: btn.menu,
+ restoreHeight: 174,
+ store: new Common.UI.DataViewStore(me._viewDataLinear),
+ itemTemplate: _.template('')
+ });
+ });
+ this.btnDirection.render($('#cell-button-direction'));
+ this.fillControls.push(this.btnDirection);
+ this.mnuDirectionPicker.on('item:click', _.bind(this.onSelectGradient, this, this.btnDirection));
+
+ this.cmbPattern = new Common.UI.ComboDataView({
+ itemWidth: 28,
+ itemHeight: 28,
+ menuMaxHeight: 300,
+ enableKeyEvents: true,
+ cls: 'combo-pattern'
+ });
+ this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.itemTemplate = _.template([
+ '',
+ '  px -<%= offsety %>px;"/>',
+ ' '
+ ].join(''));
+ this.cmbPattern.render($('#cell-combo-pattern'));
+ this.cmbPattern.openButton.menu.cmpEl.css({
+ 'min-width': 178,
+ 'max-width': 178
+ });
+ this.cmbPattern.on('click', _.bind(this.onPatternSelect, this));
+ this.cmbPattern.openButton.menu.on('show:after', function () {
+ me.cmbPattern.menuPicker.scroller.update({alwaysVisibleY: true});
+ });
+ this.fillControls.push(this.cmbPattern);
+
+ var global_hatch_menu_map = [
+ -1,-1,-1,-1,-1,
+ -1,-1,-1,-1,8,
+ 9,10,11,-1,-1,
+ -1,21,-1,-1,-1,
+ -1,20,22,23,-1,
+ -1,27,28,29,30,
+ -1,-1,33,-1,35,
+ -1,-1,-1,-1,-1,
+ 41,-1,43,-1,-1,
+ 46,-1,-1,-1,-1
+ ];
+
+ this.patternViewData = [];
+ var idx = 0;
+ for (var i=0; i<13; i++) {
+ for (var j=0; j<4; j++) {
+ var num = i*4+j;
+ if (global_hatch_menu_map[num]>-1)
+ this.patternViewData[idx++] = {offsetx: j*28, offsety: i*28, type: global_hatch_menu_map[num]};
+ }
+ }
+
+ for ( var i=0; i 0) {
+ this.cmbPattern.fillComboView(this.cmbPattern.menuPicker.store.at(0),true);
+ this.PatternFillType = this.patternViewData[0].type;
+ }
+
var _arrBorderPosition = [
[Asc.c_oAscBorderOptions.Left, 'btn-borders-small btn-position-left', 'cell-button-border-left', this.tipLeft],
[Asc.c_oAscBorderOptions.InnerV,'btn-borders-small btn-position-inner-vert','cell-button-border-inner-vert', this.tipInnerVert],
@@ -246,6 +394,7 @@ define([
},
ChangeSettings: function(props) {
+ var me = this;
if (this._initSettings)
this.createDelayedElements();
@@ -253,46 +402,259 @@ define([
if (props )
{
- var color = props.asc_getFill().asc_getColor(),
- clr;
- if (color) {
- if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
- clr = {color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), effectValue: color.get_value() };
- } else {
- clr = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
- }
- } else {
- clr = 'transparent';
- }
-
- var type1 = typeof(clr);
- var type2 = typeof(this._state.BackColor);
- if ( (type1 !== type2) || (type1=='object' &&
- (clr.effectValue!==this._state.BackColor.effectValue || this._state.BackColor.color.indexOf(clr.color)<0)) ||
- (type1!='object' && this._state.BackColor!==undefined && this._state.BackColor.indexOf(clr)<0 )) {
-
- this.btnBackColor.setColor(clr);
- if (_.isObject(clr)) {
- var isselected = false;
- for (var i = 0; i < 10; i++) {
- if (Common.Utils.ThemeColor.ThemeValues[i] == clr.effectValue) {
- this.colorsBack.select(clr,true);
- isselected = true;
- break;
- }
- }
- if (!isselected) this.colorsBack.clearSelection();
- } else {
- this.colorsBack.select(clr, true);
- }
- this._state.BackColor = clr;
- }
+ this._noApply = true;
var value = props.asc_getAngle();
if ( Math.abs(this._state.CellAngle-value)>0.1 || (this._state.CellAngle===undefined)&&(this._state.CellAngle!==value)) {
this.spnAngle.setValue((value !== null) ? value : '', true);
this._state.CellAngle=value;
}
+ this.fill = props.asc_getFill2();
+ this.pattern = this.fill.asc_getPatternFill();
+ this.gradient = this.fill.asc_getGradientFill();
+ if (this.pattern === null && this.gradient === null) {
+ this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_NOFILL;
+ this.CellColor = {Value: 0, Color: 'transparent'};
+ this.FGColor = {Value: 1, Color: '000000'};
+ this.BGColor = {Value: 1, Color: 'ffffff'};
+ this.GradColors[0] = {Value: 1, Color: '000000', Position: 0};
+ this.GradColors[1] = {Value: 1, Color: 'ffffff', Position: 1};
+ } else if (this.pattern !== null) {
+ if(this.pattern.asc_getType() === -1) {
+ var color = this.pattern.asc_getFgColor();
+ if (color.getType() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
+ this.CellColor = {Value: 1, Color: {color: Common.Utils.ThemeColor.getHexColor(color.getR(), color.getG(), color.getB()), effectValue: color.get_value() }};
+ } else {
+ this.CellColor = {Value: 1, Color: Common.Utils.ThemeColor.getHexColor(color.getR(), color.getG(), color.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};
+ } else {
+ this.PatternFillType = this.pattern.asc_getType();
+ if (this._state.PatternFillType !== this.PatternFillType) {
+ this.cmbPattern.suspendEvents();
+ var rec = this.cmbPattern.menuPicker.store.findWhere({
+ type: this.PatternFillType
+ });
+ this.cmbPattern.menuPicker.selectRecord(rec);
+ this.cmbPattern.resumeEvents();
+ this._state.PatternFillType = this.PatternFillType;
+ }
+ var color = this.pattern.asc_getFgColor();
+ if (color) {
+ if (color.getType() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
+ this.FGColor = {Value: 1, Color: {color: Common.Utils.ThemeColor.getHexColor(color.getR(), color.getG(), color.getB()), effectValue: color.asc_getValue() }};
+ } else {
+ this.FGColor = {Value: 1, Color: Common.Utils.ThemeColor.getHexColor(color.getR(), color.getG(), color.getB())};
+ }
+ } else
+ this.FGColor = {Value: 1, Color: '000000'};
+
+ color = this.pattern.asc_getBgColor();
+ if (color) {
+ if (color.getType() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
+ this.BGColor = {Value: 1, Color: {color: Common.Utils.ThemeColor.getHexColor(color.getR(), color.getG(), color.getB()), effectValue: color.asc_getValue() }};
+ } else {
+ this.BGColor = {Value: 1, Color: Common.Utils.ThemeColor.getHexColor(color.getR(), color.getG(), color.getB())};
+ }
+ } else
+ this.BGColor = {Value: 1, Color: 'ffffff'};
+ this.CellColor = {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.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;
+ 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});
+ this.onGradTypeSelect(this.cmbGradType, rec.attributes);
+ } else {
+ this.cmbGradType.setValue('');
+ this.btnDirection.setIconCls('');
+ }
+ this._state.GradFillType = this.GradFillType;
+ }
+ if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
+ var value = this.gradient.asc_getDegree();
+ if (Math.abs(this.GradLinearDirectionType-value)>0.001) {
+ this.GradLinearDirectionType=value;
+ var record = this.mnuDirectionPicker.store.findWhere({type: value});
+ this.mnuDirectionPicker.selectRecord(record, true);
+ if (record)
+ this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls'));
+ else
+ this.btnDirection.setIconCls('');
+ }
+ }
+
+ var gradientStops;
+ this.GradColors.length = 0;
+ gradientStops = this.gradient.asc_getGradientStops();
+ gradientStops.forEach(function (color) {
+ var clr = color.asc_getColor(),
+ position = color.asc_getPosition(),
+ itemColor;
+ if (clr.getType() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
+ itemColor = {Value: 1, Color: {color: Common.Utils.ThemeColor.getHexColor(clr.getR(), clr.getG(), clr.getB()), effectValue: clr.asc_getValue() }, Position: position};
+ } else {
+ itemColor = {Value: 1, Color: Common.Utils.ThemeColor.getHexColor(clr.getR(), clr.getG(), clr.getB()), Position: position};
+ }
+ me.GradColors.push(itemColor);
+ });
+ this.GradColors = _.sortBy(this.GradColors, 'Position');
+
+ this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD;
+ this.FGColor = {Value: 1, Color: Common.Utils.ThemeColor.colorValue2EffectId(this.GradColors[0].Color)};
+ this.BGColor = {Value: 1, Color: 'ffffff'};
+ this.CellColor = {Value: 1, Color: Common.Utils.ThemeColor.colorValue2EffectId(this.GradColors[0].Color)};
+ }
+
+ if ( this._state.FillType !== this.OriginalFillType ) {
+ this.cmbFillSrc.setValue((this.OriginalFillType === null) ? '' : this.OriginalFillType);
+ this._state.FillType = this.OriginalFillType;
+ this.ShowHideElem(this.OriginalFillType);
+ }
+
+ // Color Back
+
+ var type1 = typeof(this.CellColor.Color),
+ type2 = typeof(this._state.CellColor);
+ if ( (type1 !== type2) || (type1=='object' &&
+ (this.CellColor.Color.effectValue!==this._state.CellColor.effectValue || this._state.CellColor.color.indexOf(this.CellColor.Color)<0)) ||
+ (type1!='object' && this._state.CellColor!==undefined && this._state.CellColor.indexOf(this.CellColor.Color)<0 )) {
+
+ this.btnBackColor.setColor(this.CellColor.Color);
+ if (_.isObject(this.CellColor.Color)) {
+ var isselected = false;
+ for (var i = 0; i < 10; i++) {
+ if (Common.Utils.ThemeColor.ThemeValues[i] == this.CellColor.Color.effectValue) {
+ this.colorsBack.select(this.CellColor.Color,true);
+ isselected = true;
+ break;
+ }
+ }
+ if (!isselected) this.colorsBack.clearSelection();
+ } else {
+ this.colorsBack.select(this.CellColor.Color, true);
+ }
+ this._state.CellColor = this.CellColor.Color;
+ }
+
+ // Pattern colors
+ type1 = typeof(this.FGColor.Color);
+ type2 = typeof(this._state.FGColor);
+
+ if ( (type1 !== type2) || (type1=='object' &&
+ (this.FGColor.Color.effectValue!==this._state.FGColorColor.effectValue || this._state.FGColor.color.indexOf(this.FGColor.Color.color)<0)) ||
+ (type1!='object' && this._state.FGColor.indexOf(this.FGColor.Color)<0 )) {
+
+ this.btnFGColor.setColor(this.FGColor.Color);
+ if ( typeof(this.FGColor.Color) == 'object' ) {
+ var isselected = false;
+ for (var i=0; i<10; i++) {
+ if ( Common.Utils.ThemeColor.ThemeValues[i] == this.FGColor.Color.effectValue ) {
+ this.colorsFG.select(this.FGColor.Color,true);
+ isselected = true;
+ break;
+ }
+ }
+ if (!isselected) this.colorsFG.clearSelection();
+ } else
+ this.colorsFG.select(this.FGColor.Color,true);
+
+ this._state.FGColor = this.FGColor.Color;
+ }
+
+ type1 = typeof(this.BGColor.Color);
+ type2 = typeof(this._state.BGColor);
+
+ if ( (type1 !== type2) || (type1=='object' &&
+ (this.BGColor.Color.effectValue!==this._state.BGColor.effectValue || this._state.BGColor.color.indexOf(this.BGColor.Color.color)<0)) ||
+ (type1!='object' && this._state.BGColor.indexOf(this.BGColor.Color)<0 )) {
+
+ this.btnBGColor.setColor(this.BGColor.Color);
+ if ( typeof(this.BGColor.Color) == 'object' ) {
+ var isselected = false;
+ for (var i=0; i<10; i++) {
+ if ( Common.Utils.ThemeColor.ThemeValues[i] == this.BGColor.Color.effectValue ) {
+ this.colorsBG.select(this.BGColor.Color,true);
+ isselected = true;
+ break;
+ }
+ }
+ if (!isselected) this.colorsBG.clearSelection();
+ } else
+ this.colorsBG.select(this.BGColor.Color,true);
+
+ this._state.BGColor = this.BGColor.Color;
+ }
+
+ // Gradient colors
+ var gradColor1 = this.GradColors[0];
+ if (!gradColor1) {
+ gradColor1 = {Value: 1, Color: '000000'};
+ }
+ type1 = typeof(gradColor1.Color);
+ type2 = typeof(this._state.GradColor1);
+
+ 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 )) {
+
+ this.btnGradColor1.setColor(gradColor1.Color);
+ if ( typeof(gradColor1.Color) == '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);
+ isselected = true;
+ break;
+ }
+ }
+ if (!isselected) this.colorsGrad1.clearSelection();
+ } else
+ this.colorsGrad1.select(gradColor1.Color,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._noApply = false;
}
},
@@ -323,10 +685,91 @@ define([
});
this.colorsBack.on('select', _.bind(this.onColorsBackSelect, this));
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({
+ style: "width:45px;",
+ menu : new Common.UI.Menu({
+ items: [
+ { 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'),
+ 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.btnFGColor = new Common.UI.ColorButton({
+ style: "width:45px;",
+ menu : new Common.UI.Menu({
+ items: [
+ { template: _.template('') },
+ { template: _.template('' + this.textNewColor + '') }
+ ]
+ })
+ });
+ this.btnFGColor.render( $('#cell-foreground-color-btn'));
+ this.btnFGColor.setColor('000000');
+ this.colorsFG = new Common.UI.ThemeColorPalette({
+ el: $('#cell-foreground-color-menu'),
+ value: '000000'
+ });
+ this.colorsFG.on('select', _.bind(this.onColorsFGSelect, this));
+ this.btnFGColor.menu.items[1].on('click', _.bind(this.addNewColor, this, this.colorsFG, this.btnFGColor));
+ this.fillControls.push(this.btnFGColor);
+
+ this.btnBGColor = new Common.UI.ColorButton({
+ style: "width:45px;",
+ menu : new Common.UI.Menu({
+ items: [
+ { template: _.template('') },
+ { template: _.template('' + this.textNewColor + '') }
+ ]
+ })
+ });
+ this.btnBGColor.render( $('#cell-background-color-btn'));
+ this.btnBGColor.setColor('ffffff');
+ this.colorsBG = new Common.UI.ThemeColorPalette({
+ el: $('#cell-background-color-menu'),
+ value: 'ffffff'
+ });
+ this.colorsBG.on('select', _.bind(this.onColorsBGSelect, this));
+ this.btnBGColor.menu.items[1].on('click', _.bind(this.addNewColor, this, this.colorsBG, this.btnBGColor));
+ this.fillControls.push(this.btnBGColor);
}
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.colorsFG.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
+ this.colorsBG.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
},
onApiEditCell: function(state) {
@@ -339,10 +782,20 @@ define([
this._locked = locked;
},
+ disableFillPanels: function(disable) {
+ if (this._state.DisabledFillPanels!==disable) {
+ this._state.DisabledFillPanels = disable;
+ _.each(this.fillControls, function(item) {
+ item.setDisabled(disable);
+ });
+ }
+ },
+
disableControls: function(disable) {
if (this._initSettings) return;
disable = disable || this.isEditCell;
-
+
+ this.disableFillPanels(disable);
if (this._state.DisabledControls!==disable) {
this._state.DisabledControls = disable;
_.each(this.lockedControls, function(item) {
@@ -351,6 +804,263 @@ define([
}
},
+ onFillSrcSelect: function(combo, record) {
+ var me = this;
+ this.ShowHideElem(record.value);
+ switch (record.value){
+ case Asc.c_oAscFill.FILL_TYPE_SOLID:
+ this._state.FillType = Asc.c_oAscFill.FILL_TYPE_SOLID;
+ if (!this._noApply) {
+ if (this.pattern == null)
+ this.pattern = new Asc.asc_CPatternFill();
+ this.pattern.asc_setType(-1);
+ this.pattern.asc_setFgColor(Common.Utils.ThemeColor.getRgbColor((this.CellColor.Color=='transparent') ? {color: '4f81bd', effectId: 24} : this.CellColor.Color));
+ this.fill.asc_setPatternFill(this.pattern);
+ this.api.asc_setCellFill(this.fill);
+ }
+ break;
+ case Asc.c_oAscFill.FILL_TYPE_GRAD:
+ this._state.FillType = Asc.c_oAscFill.FILL_TYPE_GRAD;
+ if (!this._noApply) {
+ 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(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
+ }
+ var arrGradStop = [];
+ this.GradColors.forEach(function (item) {
+ var gradientStop = new Asc.asc_CGradientStop();
+ gradientStop.asc_setColor(Common.Utils.ThemeColor.getRgbColor(item.Color));
+ gradientStop.asc_setPosition(item.Position);
+ arrGradStop.push(gradientStop);
+ });
+ this.gradient.asc_putGradientStops(arrGradStop);
+ }
+ this.fill.asc_setGradientFill(this.gradient);
+ this.api.asc_setCellFill(this.fill);
+ }
+ break;
+ case Asc.c_oAscFill.FILL_TYPE_PATT:
+ this._state.FillType = Asc.c_oAscFill.FILL_TYPE_PATT;
+ if (!this._noApply) {
+ var fHexColor = Common.Utils.ThemeColor.getRgbColor(this.FGColor.Color).get_color().get_hex();
+ var bHexColor = Common.Utils.ThemeColor.getRgbColor(this.BGColor.Color).get_color().get_hex();
+
+ if (bHexColor === 'ffffff' && fHexColor === 'ffffff') {
+ fHexColor = {color: '4f81bd', effectId: 24}; // color accent1
+ } else {
+ fHexColor = this.FGColor.Color;
+ }
+ if (this.pattern == null)
+ this.pattern = new Asc.asc_CPatternFill();
+ this.pattern.asc_setType(this.PatternFillType);
+ this.pattern.asc_setFgColor(Common.Utils.ThemeColor.getRgbColor(fHexColor));
+ this.pattern.asc_setBgColor(Common.Utils.ThemeColor.getRgbColor(this.BGColor.Color));
+ this.fill.asc_setPatternFill(this.pattern);
+ this.api.asc_setCellFill(this.fill);
+ }
+ break;
+ case Asc.c_oAscFill.FILL_TYPE_NOFILL:
+ this._state.FillType = Asc.c_oAscFill.FILL_TYPE_NOFILL;
+ if (!this._noApply) {
+ this.fill.asc_setPatternFill(null);
+ this.fill.asc_setGradientFill(null);
+ this.api.asc_setCellFill(this.fill);
+ }
+ break;
+ }
+ Common.NotificationCenter.trigger('edit:complete', this);
+ },
+
+ ShowHideElem: function(value) {
+ this.FillColorContainer.toggleClass('settings-hidden', value !== Asc.c_oAscFill.FILL_TYPE_SOLID);
+ this.FillPatternContainer.toggleClass('settings-hidden', value !== Asc.c_oAscFill.FILL_TYPE_PATT);
+ this.FillGradientContainer.toggleClass('settings-hidden', value !== Asc.c_oAscFill.FILL_TYPE_GRAD);
+ },
+
+ onGradTypeSelect: function(combo, record) {
+ this.GradFillType = record.value;
+
+ if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
+ this.mnuDirectionPicker.store.reset(this._viewDataLinear);
+ this.mnuDirectionPicker.cmpEl.width(175);
+ this.mnuDirectionPicker.restoreHeight = 174;
+ var record = this.mnuDirectionPicker.store.findWhere({type: this.GradLinearDirectionType});
+ this.mnuDirectionPicker.selectRecord(record, true);
+ if (record)
+ this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls'));
+ else
+ this.btnDirection.setIconCls('');
+ } else if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_PATH) {
+ this.mnuDirectionPicker.store.reset(this._viewDataRadial);
+ this.mnuDirectionPicker.cmpEl.width(60);
+ this.mnuDirectionPicker.restoreHeight = 58;
+ this.mnuDirectionPicker.selectByIndex(this.GradRadialDirectionIdx, true);
+ if (this.GradRadialDirectionIdx>=0)
+ this.btnDirection.setIconCls('item-gradient ' + this._viewDataRadial[this.GradRadialDirectionIdx].iconcls);
+ else
+ this.btnDirection.setIconCls('');
+ }
+
+ if (this.api && !this._noApply) {
+ if (this.gradient == null) {
+ this.gradient = new Asc.asc_CGradientFill();
+ if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
+ this.gradient.asc_setDegree(this.GradLinearDirectionType);
+ }
+ var arrGradStop = [];
+ this.GradColors.forEach(function (item) {
+ var gradientStop = new Asc.asc_CGradientStop();
+ gradientStop.asc_setColor(Common.Utils.ThemeColor.getRgbColor(item.Color));
+ gradientStop.asc_setPosition(item.Position);
+ arrGradStop.push(gradientStop);
+ });
+ this.gradient.asc_putGradientStops(arrGradStop);
+ }
+ if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
+ this.gradient.asc_setDegree(this.GradLinearDirectionType);
+ }
+ this.gradient.asc_setType(this.GradFillType);
+ this.fill.asc_setGradientFill(this.gradient);
+ this.api.asc_setCellFill(this.fill);
+ }
+
+ Common.NotificationCenter.trigger('edit:complete', this);
+ },
+
+ onSelectGradient: function(btn, picker, itemView, record) {
+ var me = this;
+ if (this._noApply) return;
+
+ var rawData = {},
+ isPickerSelect = _.isFunction(record.toJSON);
+
+ if (isPickerSelect){
+ if (record.get('selected')) {
+ rawData = record.toJSON();
+ } else {
+ // record deselected
+ return;
+ }
+ } else {
+ rawData = record;
+ }
+
+ this.btnDirection.setIconCls('item-gradient ' + rawData.iconcls);
+ (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) ? this.GradLinearDirectionType = rawData.type : this.GradRadialDirectionIdx = 0;
+
+ if (this.api) {
+ if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
+ if (this.gradient == null) {
+ this.gradient = new Asc.asc_CGradientFill();
+ this.gradient.asc_setType(this.GradFillType);
+ var arrGradStop = [];
+ this.GradColors.forEach(function (item) {
+ var gradientStop = new Asc.asc_CGradientStop();
+ gradientStop.asc_setColor(Common.Utils.ThemeColor.getRgbColor(item.Color));
+ gradientStop.asc_setPosition(item.Position);
+ arrGradStop.push(gradientStop);
+ });
+ this.gradient.asc_putGradientStops(arrGradStop);
+ }
+ this.gradient.asc_setDegree(rawData.type);
+ this.fill.asc_setGradientFill(this.gradient);
+ this.api.asc_setCellFill(this.fill);
+ }
+ }
+
+ Common.NotificationCenter.trigger('edit:complete', this);
+ },
+
+ 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;
+ }
+
+ if (this.api && !this._noApply) {
+ 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(this.GradLinearDirectionType);
+ }
+ }
+ var arrGradStop = [];
+ this.GradColors.forEach(function (item) {
+ var gradientStop = new Asc.asc_CGradientStop();
+ gradientStop.asc_setColor(Common.Utils.ThemeColor.getRgbColor(item.Color));
+ gradientStop.asc_setPosition(item.Position);
+ arrGradStop.push(gradientStop);
+ });
+ this.gradient.asc_putGradientStops(arrGradStop);
+
+ this.fill.asc_setGradientFill(this.gradient);
+ this.api.asc_setCellFill(this.fill);
+ }
+ Common.NotificationCenter.trigger('edit:complete', this);
+ },
+
+ onPatternSelect: function(combo, record) {
+ if (this.api && !this._noApply) {
+ this.PatternFillType = record.get('type');
+ if (this.pattern == null) {
+ this.pattern = new Asc.asc_CPatternFill();
+ this.pattern.asc_setFgColor(Common.Utils.ThemeColor.getRgbColor(this.FGColor.Color));
+ this.pattern.asc_setBgColor(Common.Utils.ThemeColor.getRgbColor(this.BGColor.Color));
+ }
+ this.pattern.asc_setType(this.PatternFillType);
+ this.fill.asc_setPatternFill(this.pattern);
+ this.api.asc_setCellFill(this.fill);
+ }
+ Common.NotificationCenter.trigger('edit:complete', this);
+ },
+
+ onColorsFGSelect: function(picker, color) {
+ this.btnFGColor.setColor(color);
+ this.FGColor = {Value: 1, Color: color};
+ if (this.api && !this._noApply) {
+ if (this.pattern == null) {
+ this.pattern = new Asc.asc_CPatternFill();
+ this.pattern.asc_setType(this.PatternFillType);
+ this.pattern.asc_setBgColor(Common.Utils.ThemeColor.getRgbColor(this.BGColor.Color));
+ }
+ this.pattern.asc_setFgColor(Common.Utils.ThemeColor.getRgbColor(this.FGColor.Color));
+ this.fill.asc_setPatternFill(this.pattern);
+ this.api.asc_setCellFill(this.fill);
+ }
+ Common.NotificationCenter.trigger('edit:complete', this);
+ },
+
+ onColorsBGSelect: function(picker, color) {
+ this.btnBGColor.setColor(color);
+ this.BGColor = {Value: 1, Color: color};
+ if (this.api && !this._noApply) {
+ if (this.pattern == null) {
+ this.pattern = new Asc.asc_CPatternFill();
+ this.pattern.asc_setFgColor(Common.Utils.ThemeColor.getRgbColor(this.FGColor.Color));
+ this.pattern.asc_setType(this.PatternFillType);
+ }
+ this.pattern.asc_setBgColor(Common.Utils.ThemeColor.getRgbColor(this.BGColor.Color));
+ this.fill.asc_setPatternFill(this.pattern);
+ this.api.asc_setCellFill(this.fill);
+ }
+ Common.NotificationCenter.trigger('edit:complete', this);
+ },
+
textBorders: 'Border\'s Style',
textBorderColor: 'Color',
textBackColor: 'Background color',
@@ -369,7 +1079,21 @@ define([
tipDiagU: 'Set Diagonal Up Border',
tipDiagD: 'Set Diagonal Down Border',
textOrientation: 'Text Orientation',
- textAngle: 'Angle'
+ textAngle: 'Angle',
+ textFill: 'Fill',
+ textNoFill: 'No Fill',
+ textGradientFill: 'Gradient Fill',
+ textPatternFill: 'Pattern',
+ textColor: 'Color Fill',
+ textStyle: 'Style',
+ textDirection: 'Direction',
+ textLinear: 'Linear',
+ textRadial: 'Radial',
+ textColor1: 'Color 1',
+ textColor2: 'Color 2',
+ textPattern: 'Pattern',
+ textForeground: 'Foreground color',
+ textBackground: 'Background color'
}, SSE.Views.CellSettings || {}));
});
\ No newline at end of file
|