[SSE] Refactoring color button component
This commit is contained in:
Julia Radzhabova
parent
c8c0416f5d
commit
12a6aba11f
|
|
@ -99,9 +99,7 @@ define([
|
|||
this.FillGradientContainer = $('#cell-panel-gradient-fill');
|
||||
},
|
||||
|
||||
onColorsBackSelect: function(picker, color) {
|
||||
this.btnBackColor.setColor(color);
|
||||
|
||||
onColorsBackSelect: function(btn, color) {
|
||||
if (this.api) {
|
||||
this.api.asc_setCellBackgroundColor(color == 'transparent' ? null : Common.Utils.ThemeColor.getRgbColor(color));
|
||||
}
|
||||
|
|
@ -109,14 +107,6 @@ define([
|
|||
Common.NotificationCenter.trigger('edit:complete', this);
|
||||
},
|
||||
|
||||
addNewColor: function(picker, btn) {
|
||||
picker.addNewColor((typeof(btn.color) == 'object') ? btn.color.color : btn.color);
|
||||
},
|
||||
|
||||
onColorsBorderSelect: function(picker, color) {
|
||||
this.btnBorderColor.setColor(color);
|
||||
},
|
||||
|
||||
onBtnBordersClick: function(btn, eOpts){
|
||||
if (this.api) {
|
||||
var new_borders = [],
|
||||
|
|
@ -409,20 +399,21 @@ define([
|
|||
this.lockedControls.push(this.cmbBorderType);
|
||||
|
||||
this.btnBorderColor = new Common.UI.ColorButton({
|
||||
parentEl: $('#cell-border-color-btn'),
|
||||
style: "width:45px;",
|
||||
disabled: this._locked,
|
||||
menu : true
|
||||
});
|
||||
this.btnBorderColor.render( $('#cell-border-color-btn'));
|
||||
this.btnBorderColor.setColor('000000');
|
||||
this.lockedControls.push(this.btnBorderColor);
|
||||
|
||||
this.btnBackColor = new Common.UI.ColorButton({
|
||||
parentEl: $('#cell-back-color-btn'),
|
||||
style: "width:45px;",
|
||||
disabled: this._locked,
|
||||
menu : true
|
||||
menu : true,
|
||||
transparent : true
|
||||
});
|
||||
this.btnBackColor.render( $('#cell-back-color-btn'));
|
||||
this.btnBackColor.setColor('transparent');
|
||||
this.lockedControls.push(this.btnBackColor);
|
||||
|
||||
|
|
@ -755,88 +746,40 @@ define([
|
|||
UpdateThemeColors: function() {
|
||||
if (!this.borderColor) {
|
||||
// create color buttons
|
||||
this.btnBorderColor.setMenu( new Common.UI.Menu({
|
||||
items: [
|
||||
{ template: _.template('<div id="cell-border-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
|
||||
{ template: _.template('<a id="cell-border-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||
]
|
||||
}));
|
||||
this.borderColor = new Common.UI.ThemeColorPalette({
|
||||
el: $('#cell-border-color-menu')
|
||||
});
|
||||
this.borderColor.on('select', _.bind(this.onColorsBorderSelect, this));
|
||||
this.btnBorderColor.menu.items[1].on('click', _.bind(this.addNewColor, this, this.borderColor, this.btnBorderColor));
|
||||
this.btnBorderColor.setMenu();
|
||||
this.borderColor = this.btnBorderColor.getPicker();
|
||||
|
||||
this.btnBackColor.setMenu( new Common.UI.Menu({
|
||||
items: [
|
||||
{ template: _.template('<div id="cell-back-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
|
||||
{ template: _.template('<a id="cell-back-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||
]
|
||||
}));
|
||||
this.colorsBack = new Common.UI.ThemeColorPalette({
|
||||
el: $('#cell-back-color-menu'),
|
||||
transparent: true
|
||||
});
|
||||
this.colorsBack.on('select', _.bind(this.onColorsBackSelect, this));
|
||||
this.btnBackColor.menu.items[1].on('click', _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor));
|
||||
this.btnBackColor.setMenu();
|
||||
this.btnBackColor.on('color:select', _.bind(this.onColorsBackSelect, this));
|
||||
this.colorsBack = this.btnBackColor.getPicker();
|
||||
this.fillControls.push(this.btnBackColor);
|
||||
|
||||
this.btnGradColor = new Common.UI.ColorButton({
|
||||
style: "width:45px;",
|
||||
menu : new Common.UI.Menu({
|
||||
items: [
|
||||
{ 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>') }
|
||||
]
|
||||
})
|
||||
parentEl: $('#cell-gradient-color-btn'),
|
||||
style: "width:45px;"
|
||||
});
|
||||
this.btnGradColor.render( $('#cell-gradient-color-btn'));
|
||||
this.btnGradColor.setColor('000000');
|
||||
this.colorsGrad = new Common.UI.ThemeColorPalette({
|
||||
el: $('#cell-gradient-color'),
|
||||
value: '000000'
|
||||
});
|
||||
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.colorsGrad = this.btnGradColor.getPicker();
|
||||
this.btnGradColor.on('color:select', _.bind(this.onColorsGradientSelect, this));
|
||||
|
||||
this.btnFGColor = new Common.UI.ColorButton({
|
||||
style: "width:45px;",
|
||||
menu : new Common.UI.Menu({
|
||||
items: [
|
||||
{ template: _.template('<div id="cell-foreground-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
|
||||
{ template: _.template('<a id="cell-foreground-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||
]
|
||||
})
|
||||
parentEl: $('#cell-foreground-color-btn'),
|
||||
style: "width:45px;"
|
||||
});
|
||||
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.colorsFG = this.btnFGColor.getPicker();
|
||||
this.btnFGColor.on('color:select', _.bind(this.onColorsFGSelect, this));
|
||||
|
||||
this.btnBGColor = new Common.UI.ColorButton({
|
||||
style: "width:45px;",
|
||||
menu : new Common.UI.Menu({
|
||||
items: [
|
||||
{ template: _.template('<div id="cell-background-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
|
||||
{ template: _.template('<a id="cell-background-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||
]
|
||||
})
|
||||
parentEl: $('#cell-background-color-btn'),
|
||||
style: "width:45px;"
|
||||
});
|
||||
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.colorsBG = this.btnBGColor.getPicker();
|
||||
this.btnBGColor.on('color:select', _.bind(this.onColorsBGSelect, this));
|
||||
}
|
||||
this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
||||
this.borderColor.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
||||
|
|
@ -1058,9 +1001,8 @@ define([
|
|||
Common.NotificationCenter.trigger('edit:complete', this);
|
||||
},
|
||||
|
||||
onColorsGradientSelect: function(picker, color) {
|
||||
onColorsGradientSelect: function(btn, 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));
|
||||
|
||||
|
|
@ -1159,8 +1101,7 @@ define([
|
|||
Common.NotificationCenter.trigger('edit:complete', this);
|
||||
},
|
||||
|
||||
onColorsFGSelect: function(picker, color) {
|
||||
this.btnFGColor.setColor(color);
|
||||
onColorsFGSelect: function(btn, color) {
|
||||
this.FGColor = {Value: 1, Color: color};
|
||||
if (this.api && !this._noApply) {
|
||||
if (this.pattern == null) {
|
||||
|
|
@ -1175,8 +1116,7 @@ define([
|
|||
Common.NotificationCenter.trigger('edit:complete', this);
|
||||
},
|
||||
|
||||
onColorsBGSelect: function(picker, color) {
|
||||
this.btnBGColor.setColor(color);
|
||||
onColorsBGSelect: function(btn, color) {
|
||||
this.BGColor = {Value: 1, Color: color};
|
||||
if (this.api && !this._noApply) {
|
||||
if (this.pattern == null) {
|
||||
|
|
@ -1195,7 +1135,6 @@ define([
|
|||
textBorderColor: 'Color',
|
||||
textBackColor: 'Background color',
|
||||
textSelectBorders : 'Select borders that you want to change',
|
||||
textNewColor : 'Add New Custom Color',
|
||||
tipTop: 'Set Outer Top Border Only',
|
||||
tipLeft: 'Set Outer Left Border Only',
|
||||
tipBottom: 'Set Outer Bottom Border Only',
|
||||
|
|
|
|||
|
|
@ -524,113 +524,67 @@ define([
|
|||
defValue = this.defColor;
|
||||
|
||||
this.btnSparkColor = new Common.UI.ColorButton({
|
||||
style: "width:45px;",
|
||||
menu : new Common.UI.Menu({
|
||||
items: [
|
||||
{ template: _.template('<div id="spark-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
|
||||
{ template: _.template('<a id="spark-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||
]
|
||||
})
|
||||
parentEl: $('#spark-color-btn'),
|
||||
style: "width:45px;"
|
||||
});
|
||||
this.btnSparkColor.render( $('#spark-color-btn'));
|
||||
this.btnSparkColor.setColor('000000');
|
||||
this.lockedControls.push(this.btnSparkColor);
|
||||
this.colorsSpark = new Common.UI.ThemeColorPalette({
|
||||
el: $('#spark-color-menu'),
|
||||
value: '000000'
|
||||
});
|
||||
this.colorsSpark.on('select', _.bind(this.onColorsSparkSelect, this));
|
||||
this.btnSparkColor.menu.items[1].on('click', _.bind(this.addNewColor, this, this.colorsSpark, this.btnSparkColor));
|
||||
this.colorsSpark = this.btnSparkColor.getPicker();
|
||||
this.btnSparkColor.on('color:select', _.bind(this.onColorsSparkSelect, this));
|
||||
|
||||
this.btnHighColor = new Common.UI.ColorButton({
|
||||
style: "width:45px;",
|
||||
menu : new Common.UI.Menu({
|
||||
items: [
|
||||
{ template: _.template('<div id="spark-high-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
|
||||
{ template: _.template('<a id="spark-high-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||
]
|
||||
})
|
||||
}).render( $('#spark-high-color-btn'));
|
||||
parentEl: $('#spark-high-color-btn'),
|
||||
style: "width:45px;"
|
||||
});
|
||||
this.btnHighColor.setColor(this.defColor.color);
|
||||
this.lockedControls.push(this.btnHighColor);
|
||||
this.colorsHigh = new Common.UI.ThemeColorPalette({ el: $('#spark-high-color-menu') });
|
||||
this.colorsHigh.on('select', _.bind(this.onColorsPointSelect, this, 0, this.btnHighColor));
|
||||
this.btnHighColor.menu.items[1].on('click', _.bind(this.addNewColor, this, this.colorsHigh, this.btnHighColor));
|
||||
this.colorsHigh = this.btnHighColor.getPicker();
|
||||
this.btnHighColor.on('color:select', _.bind(this.onColorsPointSelect, this, 0));
|
||||
|
||||
this.btnLowColor = new Common.UI.ColorButton({
|
||||
style: "width:45px;",
|
||||
menu : new Common.UI.Menu({
|
||||
items: [
|
||||
{ template: _.template('<div id="spark-low-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
|
||||
{ template: _.template('<a id="spark-low-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||
]
|
||||
})
|
||||
}).render( $('#spark-low-color-btn'));
|
||||
parentEl: $('#spark-low-color-btn'),
|
||||
style: "width:45px;"
|
||||
});
|
||||
this.btnLowColor.setColor(this.defColor.color);
|
||||
this.lockedControls.push(this.btnLowColor);
|
||||
this.colorsLow = new Common.UI.ThemeColorPalette({ el: $('#spark-low-color-menu') });
|
||||
this.colorsLow.on('select', _.bind(this.onColorsPointSelect, this, 1, this.btnLowColor));
|
||||
this.btnLowColor.menu.items[1].on('click', _.bind(this.addNewColor, this, this.colorsLow, this.btnLowColor));
|
||||
this.colorsLow = this.btnLowColor.getPicker();
|
||||
this.btnLowColor.on('color:select', _.bind(this.onColorsPointSelect, this, 1));
|
||||
|
||||
this.btnNegativeColor = new Common.UI.ColorButton({
|
||||
style: "width:45px;",
|
||||
menu : new Common.UI.Menu({
|
||||
items: [
|
||||
{ template: _.template('<div id="spark-negative-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
|
||||
{ template: _.template('<a id="spark-negative-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||
]
|
||||
})
|
||||
}).render( $('#spark-negative-color-btn'));
|
||||
parentEl: $('#spark-negative-color-btn'),
|
||||
style: "width:45px;"
|
||||
});
|
||||
this.btnNegativeColor.setColor(this.defColor.color);
|
||||
this.lockedControls.push(this.btnNegativeColor);
|
||||
this.colorsNegative = new Common.UI.ThemeColorPalette({ el: $('#spark-negative-color-menu') });
|
||||
this.colorsNegative.on('select', _.bind(this.onColorsPointSelect, this, 2, this.btnNegativeColor));
|
||||
this.btnNegativeColor.menu.items[1].on('click', _.bind(this.addNewColor, this, this.colorsNegative, this.btnNegativeColor));
|
||||
this.colorsNegative = this.btnNegativeColor.getPicker();
|
||||
this.btnNegativeColor.on('color:select', _.bind(this.onColorsPointSelect, this, 2));
|
||||
|
||||
this.btnFirstColor = new Common.UI.ColorButton({
|
||||
style: "width:45px;",
|
||||
menu : new Common.UI.Menu({
|
||||
items: [
|
||||
{ template: _.template('<div id="spark-first-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
|
||||
{ template: _.template('<a id="spark-first-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||
]
|
||||
})
|
||||
}).render( $('#spark-first-color-btn'));
|
||||
parentEl: $('#spark-first-color-btn'),
|
||||
style: "width:45px;"
|
||||
});
|
||||
this.lockedControls.push(this.btnFirstColor);
|
||||
this.colorsFirst = new Common.UI.ThemeColorPalette({ el: $('#spark-first-color-menu') });
|
||||
this.colorsFirst.on('select', _.bind(this.onColorsPointSelect, this, 3, this.btnFirstColor));
|
||||
this.btnFirstColor.setColor(this.defColor.color);
|
||||
this.btnFirstColor.menu.items[1].on('click', _.bind(this.addNewColor, this, this.colorsFirst, this.btnFirstColor));
|
||||
this.colorsFirst = this.btnFirstColor.getPicker();
|
||||
this.btnFirstColor.on('color:select', _.bind(this.onColorsPointSelect, this, 3));
|
||||
|
||||
this.btnLastColor = new Common.UI.ColorButton({
|
||||
style: "width:45px;",
|
||||
menu : new Common.UI.Menu({
|
||||
items: [
|
||||
{ template: _.template('<div id="spark-last-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
|
||||
{ template: _.template('<a id="spark-last-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||
]
|
||||
})
|
||||
}).render( $('#spark-last-color-btn'));
|
||||
parentEl: $('#spark-last-color-btn'),
|
||||
style: "width:45px;"
|
||||
});
|
||||
this.btnLastColor.setColor(this.defColor.color);
|
||||
this.lockedControls.push(this.btnLastColor);
|
||||
this.colorsLast = new Common.UI.ThemeColorPalette({ el: $('#spark-last-color-menu') });
|
||||
this.colorsLast.on('select', _.bind(this.onColorsPointSelect, this, 4, this.btnLastColor));
|
||||
this.btnLastColor.menu.items[1].on('click', _.bind(this.addNewColor, this, this.colorsLast, this.btnLastColor));
|
||||
this.colorsLast = this.btnLastColor.getPicker();
|
||||
this.btnLastColor.on('color:select', _.bind(this.onColorsPointSelect, this, 4));
|
||||
|
||||
this.btnMarkersColor = new Common.UI.ColorButton({
|
||||
style: "width:45px;",
|
||||
menu : new Common.UI.Menu({
|
||||
items: [
|
||||
{ template: _.template('<div id="spark-markers-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
|
||||
{ template: _.template('<a id="spark-markers-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||
]
|
||||
})
|
||||
}).render( $('#spark-markers-color-btn'));
|
||||
parentEl: $('#spark-markers-color-btn'),
|
||||
style: "width:45px;"
|
||||
});
|
||||
this.btnMarkersColor.setColor(this.defColor.color);
|
||||
this.lockedControls.push(this.btnMarkersColor);
|
||||
this.colorsMarkers = new Common.UI.ThemeColorPalette({ el: $('#spark-markers-color-menu') });
|
||||
this.colorsMarkers.on('select', _.bind(this.onColorsPointSelect, this, 5, this.btnMarkersColor));
|
||||
this.btnMarkersColor.menu.items[1].on('click', _.bind(this.addNewColor, this, this.colorsMarkers, this.btnMarkersColor));
|
||||
this.colorsMarkers = this.btnMarkersColor.getPicker();
|
||||
this.btnMarkersColor.on('color:select', _.bind(this.onColorsPointSelect, this, 5));
|
||||
}
|
||||
this.colorsSpark.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
||||
this.colorsHigh.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors(), defValue);
|
||||
|
|
@ -1174,8 +1128,7 @@ define([
|
|||
this.applyBorderSize(record.value);
|
||||
},
|
||||
|
||||
onColorsSparkSelect: function(picker, color) {
|
||||
this.btnSparkColor.setColor(color);
|
||||
onColorsSparkSelect: function(btn, color) {
|
||||
if (this.api && !this._noApply && this._originalProps) {
|
||||
var props = new Asc.sparklineGroup();
|
||||
props.asc_setColorSeries(Common.Utils.ThemeColor.getRgbColor(color));
|
||||
|
|
@ -1184,10 +1137,6 @@ define([
|
|||
Common.NotificationCenter.trigger('edit:complete', this);
|
||||
},
|
||||
|
||||
addNewColor: function(picker, btn) {
|
||||
picker.addNewColor((typeof(btn.color) == 'object') ? btn.color.color : btn.color);
|
||||
},
|
||||
|
||||
onCheckPointChange: function(type, field, newValue, oldValue, eOpts) {
|
||||
if (this.api && !this._noApply && this._originalProps) {
|
||||
var props = new Asc.sparklineGroup();
|
||||
|
|
@ -1216,8 +1165,7 @@ define([
|
|||
Common.NotificationCenter.trigger('edit:complete', this);
|
||||
},
|
||||
|
||||
onColorsPointSelect: function(type, btn, picker, color) {
|
||||
btn.setColor(color);
|
||||
onColorsPointSelect: function(type, btn, color) {
|
||||
if (this.chPoints[type].getValue() !== 'checked')
|
||||
this.chPoints[type].setValue(true, true);
|
||||
if (this.api && !this._noApply && this._originalProps) {
|
||||
|
|
@ -1280,7 +1228,6 @@ define([
|
|||
strSparkColor: 'Color',
|
||||
strLineWeight: 'Line Weight',
|
||||
textMarkers: 'Markers',
|
||||
textNewColor: 'Add New Custom Color',
|
||||
textHighPoint: 'High Point',
|
||||
textLowPoint: 'Low Point',
|
||||
textNegativePoint: 'Negative Point',
|
||||
|
|
|
|||
|
|
@ -244,8 +244,7 @@ define([
|
|||
Common.NotificationCenter.trigger('edit:complete', this);
|
||||
},
|
||||
|
||||
onColorsBackSelect: function(picker, color) {
|
||||
this.btnBackColor.setColor(color);
|
||||
onColorsBackSelect: function(btn, color) {
|
||||
this.ShapeColor = {Value: 1, Color: color};
|
||||
|
||||
if (this.api && !this._noApply) {
|
||||
|
|
@ -268,10 +267,6 @@ define([
|
|||
Common.NotificationCenter.trigger('edit:complete', this);
|
||||
},
|
||||
|
||||
addNewColor: function(picker, btn) {
|
||||
picker.addNewColor((typeof(btn.color) == 'object') ? btn.color.color : btn.color);
|
||||
},
|
||||
|
||||
onPatternSelect: function(combo, record){
|
||||
if (this.api && !this._noApply) {
|
||||
this.PatternFillType = record.get('type');
|
||||
|
|
@ -291,8 +286,7 @@ define([
|
|||
Common.NotificationCenter.trigger('edit:complete', this);
|
||||
},
|
||||
|
||||
onColorsFGSelect: function(picker, color) {
|
||||
this.btnFGColor.setColor(color);
|
||||
onColorsFGSelect: function(btn, color) {
|
||||
this.FGColor = {Value: 1, Color: color};
|
||||
if (this.api && !this._noApply) {
|
||||
var props = new Asc.asc_CShapeProperty();
|
||||
|
|
@ -311,8 +305,7 @@ define([
|
|||
Common.NotificationCenter.trigger('edit:complete', this);
|
||||
},
|
||||
|
||||
onColorsBGSelect: function(picker, color) {
|
||||
this.btnBGColor.setColor(color);
|
||||
onColorsBGSelect: function(btn, color) {
|
||||
this.BGColor = {Value: 1, Color: color};
|
||||
if (this.api && !this._noApply) {
|
||||
var props = new Asc.asc_CShapeProperty();
|
||||
|
|
@ -475,8 +468,7 @@ define([
|
|||
Common.NotificationCenter.trigger('edit:complete', this);
|
||||
},
|
||||
|
||||
onColorsGradientSelect: function(picker, color) {
|
||||
this.btnGradColor.setColor(color);
|
||||
onColorsGradientSelect: function(btn, color) {
|
||||
this.GradColor.colors[this.GradColor.currentIdx] = color;
|
||||
this.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(color) == 'object') ? color.color : color));
|
||||
|
||||
|
|
@ -637,8 +629,7 @@ define([
|
|||
Common.NotificationCenter.trigger('edit:complete', this);
|
||||
},
|
||||
|
||||
onColorsBorderSelect: function(picker, color) {
|
||||
this.btnBorderColor.setColor(color);
|
||||
onColorsBorderSelect: function(btn, color) {
|
||||
this.BorderColor = {Value: 1, Color: color};
|
||||
if (this.api && this.BorderSize>0 && !this._noApply) {
|
||||
var props = new Asc.asc_CShapeProperty();
|
||||
|
|
@ -1595,100 +1586,50 @@ define([
|
|||
if (this._initSettings) return;
|
||||
if (!this.btnBackColor) {
|
||||
this.btnBackColor = new Common.UI.ColorButton({
|
||||
parentEl: $('#shape-back-color-btn'),
|
||||
style: "width:45px;",
|
||||
menu : new Common.UI.Menu({
|
||||
items: [
|
||||
{ template: _.template('<div id="shape-back-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
|
||||
{ template: _.template('<a id="shape-back-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||
]
|
||||
})
|
||||
});
|
||||
this.btnBackColor.render( $('#shape-back-color-btn'));
|
||||
this.btnBackColor.setColor('transparent');
|
||||
this.fillControls.push(this.btnBackColor);
|
||||
this.colorsBack = new Common.UI.ThemeColorPalette({
|
||||
el: $('#shape-back-color-menu'),
|
||||
value: 'transparent',
|
||||
transparent: true
|
||||
});
|
||||
this.colorsBack.on('select', _.bind(this.onColorsBackSelect, this));
|
||||
this.btnBackColor.menu.items[1].on('click', _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor));
|
||||
this.btnBackColor.setColor('transparent');
|
||||
this.fillControls.push(this.btnBackColor);
|
||||
this.colorsBack = this.btnBackColor.getPicker();
|
||||
this.btnBackColor.on('color:select', _.bind(this.onColorsBackSelect, this));
|
||||
|
||||
this.btnBorderColor = new Common.UI.ColorButton({
|
||||
style: "width:45px;",
|
||||
menu : new Common.UI.Menu({
|
||||
items: [
|
||||
{ template: _.template('<div id="shape-border-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
|
||||
{ template: _.template('<a id="shape-border-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||
]
|
||||
})
|
||||
parentEl: $('#shape-border-color-btn'),
|
||||
style: "width:45px;"
|
||||
});
|
||||
this.btnBorderColor.render( $('#shape-border-color-btn'));
|
||||
this.btnBorderColor.setColor('000000');
|
||||
this.lockedControls.push(this.btnBorderColor);
|
||||
this.colorsBorder = new Common.UI.ThemeColorPalette({
|
||||
el: $('#shape-border-color-menu'),
|
||||
value: '000000'
|
||||
});
|
||||
this.colorsBorder.on('select', _.bind(this.onColorsBorderSelect, this));
|
||||
this.btnBorderColor.menu.items[1].on('click', _.bind(this.addNewColor, this, this.colorsBorder, this.btnBorderColor));
|
||||
this.colorsBorder = this.btnBorderColor.getPicker();
|
||||
this.btnBorderColor.on('color:select', _.bind(this.onColorsBorderSelect, this));
|
||||
|
||||
this.btnFGColor = new Common.UI.ColorButton({
|
||||
style: "width:45px;",
|
||||
menu : new Common.UI.Menu({
|
||||
items: [
|
||||
{ template: _.template('<div id="shape-foreground-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
|
||||
{ template: _.template('<a id="shape-foreground-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||
]
|
||||
})
|
||||
parentEl: $('#shape-foreground-color-btn'),
|
||||
style: "width:45px;"
|
||||
});
|
||||
this.btnFGColor.render( $('#shape-foreground-color-btn'));
|
||||
this.btnFGColor.setColor('000000');
|
||||
this.fillControls.push(this.btnFGColor);
|
||||
this.colorsFG = new Common.UI.ThemeColorPalette({
|
||||
el: $('#shape-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.colorsFG = this.btnFGColor.getPicker();
|
||||
this.btnFGColor.on('color:select', _.bind(this.onColorsFGSelect, this));
|
||||
|
||||
this.btnBGColor = new Common.UI.ColorButton({
|
||||
style: "width:45px;",
|
||||
menu : new Common.UI.Menu({
|
||||
items: [
|
||||
{ template: _.template('<div id="shape-background-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
|
||||
{ template: _.template('<a id="shape-background-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||
]
|
||||
})
|
||||
parentEl: $('#shape-background-color-btn'),
|
||||
style: "width:45px;"
|
||||
});
|
||||
this.btnBGColor.render( $('#shape-background-color-btn'));
|
||||
this.btnBGColor.setColor('ffffff');
|
||||
this.fillControls.push(this.btnBGColor);
|
||||
this.colorsBG = new Common.UI.ThemeColorPalette({
|
||||
el: $('#shape-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.colorsBG = this.btnBGColor.getPicker();
|
||||
this.btnBGColor.on('color:select', _.bind(this.onColorsBGSelect, this));
|
||||
|
||||
this.btnGradColor = new Common.UI.ColorButton({
|
||||
style: "width:45px;",
|
||||
menu : new Common.UI.Menu({
|
||||
items: [
|
||||
{ template: _.template('<div id="shape-gradient-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
|
||||
{ template: _.template('<a id="shape-gradient-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||
]
|
||||
})
|
||||
parentEl: $('#shape-gradient-color-btn'),
|
||||
style: "width:45px;"
|
||||
});
|
||||
this.btnGradColor.render( $('#shape-gradient-color-btn'));
|
||||
this.btnGradColor.setColor('000000');
|
||||
this.fillControls.push(this.btnGradColor);
|
||||
this.colorsGrad = new Common.UI.ThemeColorPalette({
|
||||
el: $('#shape-gradient-color-menu'),
|
||||
value: '000000'
|
||||
});
|
||||
this.colorsGrad.on('select', _.bind(this.onColorsGradientSelect, this));
|
||||
this.btnGradColor.menu.items[1].on('click', _.bind(this.addNewColor, this, this.colorsGrad, this.btnGradColor));
|
||||
this.colorsGrad = this.btnGradColor.getPicker();
|
||||
this.btnGradColor.on('color:select', _.bind(this.onColorsGradientSelect, this));
|
||||
}
|
||||
|
||||
this.colorsBorder.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
||||
|
|
@ -1780,7 +1721,6 @@ define([
|
|||
txtBrownPaper : 'Brown Paper',
|
||||
txtPapyrus : 'Papyrus',
|
||||
txtWood : 'Wood',
|
||||
textNewColor : 'Add New Custom Color',
|
||||
textAdvanced : 'Show advanced settings',
|
||||
strTransparency : 'Opacity',
|
||||
textNoFill : 'No Fill',
|
||||
|
|
|
|||
|
|
@ -239,8 +239,7 @@ define([
|
|||
Common.NotificationCenter.trigger('edit:complete', this);
|
||||
},
|
||||
|
||||
onColorsBackSelect: function(picker, color) {
|
||||
this.btnBackColor.setColor(color);
|
||||
onColorsBackSelect: function(btn, color) {
|
||||
this.ShapeColor = {Value: 1, Color: color};
|
||||
|
||||
if (this.api && !this._noApply) {
|
||||
|
|
@ -263,10 +262,6 @@ define([
|
|||
Common.NotificationCenter.trigger('edit:complete', this);
|
||||
},
|
||||
|
||||
addNewColor: function(picker, btn) {
|
||||
picker.addNewColor((typeof(btn.color) == 'object') ? btn.color.color : btn.color);
|
||||
},
|
||||
|
||||
onPatternSelect: function(combo, record){
|
||||
if (this.api && !this._noApply) {
|
||||
this.PatternFillType = record.get('type');
|
||||
|
|
@ -286,8 +281,7 @@ define([
|
|||
Common.NotificationCenter.trigger('edit:complete', this);
|
||||
},
|
||||
|
||||
onColorsFGSelect: function(picker, color) {
|
||||
this.btnFGColor.setColor(color);
|
||||
onColorsFGSelect: function(btn, color) {
|
||||
this.FGColor = {Value: 1, Color: color};
|
||||
if (this.api && !this._noApply) {
|
||||
var props = new Asc.asc_TextArtProperties();
|
||||
|
|
@ -306,8 +300,7 @@ define([
|
|||
Common.NotificationCenter.trigger('edit:complete', this);
|
||||
},
|
||||
|
||||
onColorsBGSelect: function(picker, color) {
|
||||
this.btnBGColor.setColor(color);
|
||||
onColorsBGSelect: function(btn, color) {
|
||||
this.BGColor = {Value: 1, Color: color};
|
||||
if (this.api && !this._noApply) {
|
||||
var props = new Asc.asc_TextArtProperties();
|
||||
|
|
@ -470,8 +463,7 @@ define([
|
|||
Common.NotificationCenter.trigger('edit:complete', this);
|
||||
},
|
||||
|
||||
onColorsGradientSelect: function(picker, color) {
|
||||
this.btnGradColor.setColor(color);
|
||||
onColorsGradientSelect: function(btn, color) {
|
||||
this.GradColor.colors[this.GradColor.currentIdx] = color;
|
||||
this.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(color) == 'object') ? color.color : color));
|
||||
|
||||
|
|
@ -633,8 +625,7 @@ define([
|
|||
Common.NotificationCenter.trigger('edit:complete', this);
|
||||
},
|
||||
|
||||
onColorsBorderSelect: function(picker, color) {
|
||||
this.btnBorderColor.setColor(color);
|
||||
onColorsBorderSelect: function(btn, color) {
|
||||
this.BorderColor = {Value: 1, Color: color};
|
||||
if (this.api && this.BorderSize>0 && !this._noApply) {
|
||||
var props = new Asc.asc_TextArtProperties();
|
||||
|
|
@ -1517,100 +1508,50 @@ define([
|
|||
if (this._initSettings) return;
|
||||
if (!this.btnBackColor) {
|
||||
this.btnBorderColor = new Common.UI.ColorButton({
|
||||
style: "width:45px;",
|
||||
menu : new Common.UI.Menu({
|
||||
items: [
|
||||
{ template: _.template('<div id="textart-border-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
|
||||
{ template: _.template('<a id="textart-border-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||
]
|
||||
})
|
||||
parentEl: $('#textart-border-color-btn'),
|
||||
style: "width:45px;"
|
||||
});
|
||||
this.btnBorderColor.render( $('#textart-border-color-btn'));
|
||||
this.btnBorderColor.setColor('000000');
|
||||
this.lockedControls.push(this.btnBorderColor);
|
||||
this.colorsBorder = new Common.UI.ThemeColorPalette({
|
||||
el: $('#textart-border-color-menu'),
|
||||
value: '000000'
|
||||
});
|
||||
this.colorsBorder.on('select', _.bind(this.onColorsBorderSelect, this));
|
||||
this.btnBorderColor.menu.items[1].on('click', _.bind(this.addNewColor, this, this.colorsBorder, this.btnBorderColor));
|
||||
this.colorsBorder = this.btnBorderColor.getPicker();
|
||||
this.btnBorderColor.on('color:select', _.bind(this.onColorsBorderSelect, this));
|
||||
|
||||
this.btnBackColor = new Common.UI.ColorButton({
|
||||
parentEl: $('#textart-back-color-btn'),
|
||||
style: "width:45px;",
|
||||
menu : new Common.UI.Menu({
|
||||
items: [
|
||||
{ template: _.template('<div id="textart-back-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
|
||||
{ template: _.template('<a id="textart-back-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||
]
|
||||
})
|
||||
});
|
||||
this.btnBackColor.render( $('#textart-back-color-btn'));
|
||||
this.btnBackColor.setColor('transparent');
|
||||
this.lockedControls.push(this.btnBackColor);
|
||||
this.colorsBack = new Common.UI.ThemeColorPalette({
|
||||
el: $('#textart-back-color-menu'),
|
||||
value: 'transparent',
|
||||
transparent: true
|
||||
});
|
||||
this.colorsBack.on('select', _.bind(this.onColorsBackSelect, this));
|
||||
this.btnBackColor.menu.items[1].on('click', _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor));
|
||||
this.btnBackColor.setColor('transparent');
|
||||
this.lockedControls.push(this.btnBackColor);
|
||||
this.colorsBack = this.btnBackColor.getPicker();
|
||||
this.btnBackColor.on('color:select', _.bind(this.onColorsBackSelect, this));
|
||||
|
||||
this.btnFGColor = new Common.UI.ColorButton({
|
||||
style: "width:45px;",
|
||||
menu : new Common.UI.Menu({
|
||||
items: [
|
||||
{ template: _.template('<div id="textart-foreground-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
|
||||
{ template: _.template('<a id="textart-foreground-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||
]
|
||||
})
|
||||
parentEl: $('#textart-foreground-color-btn'),
|
||||
style: "width:45px;"
|
||||
});
|
||||
this.btnFGColor.render( $('#textart-foreground-color-btn'));
|
||||
this.btnFGColor.setColor('000000');
|
||||
this.lockedControls.push(this.btnFGColor);
|
||||
this.colorsFG = new Common.UI.ThemeColorPalette({
|
||||
el: $('#textart-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.colorsFG = this.btnFGColor.getPicker();
|
||||
this.btnFGColor.on('color:select', _.bind(this.onColorsFGSelect, this));
|
||||
|
||||
this.btnBGColor = new Common.UI.ColorButton({
|
||||
style: "width:45px;",
|
||||
menu : new Common.UI.Menu({
|
||||
items: [
|
||||
{ template: _.template('<div id="textart-background-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
|
||||
{ template: _.template('<a id="textart-background-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||
]
|
||||
})
|
||||
parentEl: $('#textart-background-color-btn'),
|
||||
style: "width:45px;"
|
||||
});
|
||||
this.btnBGColor.render( $('#textart-background-color-btn'));
|
||||
this.btnBGColor.setColor('ffffff');
|
||||
this.lockedControls.push(this.btnBGColor);
|
||||
this.colorsBG = new Common.UI.ThemeColorPalette({
|
||||
el: $('#textart-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.colorsBG = this.btnBGColor.getPicker();
|
||||
this.btnBGColor.on('color:select', _.bind(this.onColorsBGSelect, this));
|
||||
|
||||
this.btnGradColor = new Common.UI.ColorButton({
|
||||
style: "width:45px;",
|
||||
menu : new Common.UI.Menu({
|
||||
items: [
|
||||
{ template: _.template('<div id="textart-gradient-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
|
||||
{ template: _.template('<a id="textart-gradient-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||
]
|
||||
})
|
||||
parentEl: $('#textart-gradient-color-btn'),
|
||||
style: "width:45px;"
|
||||
});
|
||||
this.btnGradColor.render( $('#textart-gradient-color-btn'));
|
||||
this.btnGradColor.setColor('000000');
|
||||
this.lockedControls.push(this.btnGradColor);
|
||||
this.colorsGrad = new Common.UI.ThemeColorPalette({
|
||||
el: $('#textart-gradient-color-menu'),
|
||||
value: '000000'
|
||||
});
|
||||
this.colorsGrad.on('select', _.bind(this.onColorsGradientSelect, this));
|
||||
this.btnGradColor.menu.items[1].on('click', _.bind(this.addNewColor, this, this.colorsGrad, this.btnGradColor));
|
||||
this.colorsGrad = this.btnGradColor.getPicker();
|
||||
this.btnGradColor.on('color:select', _.bind(this.onColorsGradientSelect, this));
|
||||
}
|
||||
this.colorsBorder.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
||||
this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
||||
|
|
@ -1673,7 +1614,6 @@ define([
|
|||
txtBrownPaper : 'Brown Paper',
|
||||
txtPapyrus : 'Papyrus',
|
||||
txtWood : 'Wood',
|
||||
textNewColor : 'Add New Custom Color',
|
||||
strTransparency : 'Opacity',
|
||||
textNoFill : 'No Fill',
|
||||
textSelectTexture : 'Select',
|
||||
|
|
|
|||
Loading…
Reference in a new issue