[PE] Refactoring color button component
This commit is contained in:
Julia Radzhabova
parent
44e25e39ea
commit
c8c0416f5d
|
|
@ -119,24 +119,12 @@ define([
|
|||
});
|
||||
|
||||
this.btnColor = new Common.UI.ColorButton({
|
||||
parentEl: $window.find('#id-dlg-list-color'),
|
||||
style: "width:53px;",
|
||||
menu : new Common.UI.Menu({
|
||||
additionalAlign: this.menuAddAlign,
|
||||
items: [
|
||||
{ template: _.template('<div id="id-dlg-list-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
|
||||
{ template: _.template('<a id="id-dlg-list-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||
]
|
||||
})
|
||||
additionalAlign: this.menuAddAlign
|
||||
});
|
||||
this.btnColor.on('render:after', function(btn) {
|
||||
me.colors = new Common.UI.ThemeColorPalette({
|
||||
el: $('#id-dlg-list-color-menu'),
|
||||
transparent: false
|
||||
});
|
||||
me.colors.on('select', _.bind(me.onColorsSelect, me));
|
||||
});
|
||||
this.btnColor.render($window.find('#id-dlg-list-color'));
|
||||
$('#id-dlg-list-color-new').on('click', _.bind(this.addNewColor, this, this.colors));
|
||||
this.btnColor.on('color:select', _.bind(this.onColorsSelect, this));
|
||||
this.colors = this.btnColor.getPicker();
|
||||
|
||||
this.spnStart = new Common.UI.MetricSpinner({
|
||||
el : $window.find('#id-dlg-list-start'),
|
||||
|
|
@ -172,12 +160,7 @@ define([
|
|||
this.colors.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
||||
},
|
||||
|
||||
addNewColor: function(picker, btn) {
|
||||
picker.addNewColor((typeof(btn.color) == 'object') ? btn.color.color : btn.color);
|
||||
},
|
||||
|
||||
onColorsSelect: function(picker, color) {
|
||||
this.btnColor.setColor(color);
|
||||
onColorsSelect: function(btn, color) {
|
||||
if (this._changedProps) {
|
||||
this._changedProps.asc_putBulletColor(Common.Utils.ThemeColor.getRgbColor(color));
|
||||
}
|
||||
|
|
@ -271,7 +254,6 @@ define([
|
|||
txtSize: 'Size',
|
||||
txtColor: 'Color',
|
||||
txtOfText: '% of text',
|
||||
textNewColor: 'Add New Custom Color',
|
||||
txtStart: 'Start at',
|
||||
txtBullet: 'Bullet',
|
||||
tipChange: 'Change bullet'
|
||||
|
|
|
|||
|
|
@ -239,8 +239,7 @@ define([
|
|||
this.fireEvent('editcomplete', this);
|
||||
},
|
||||
|
||||
onColorsBackSelect: function(picker, color) {
|
||||
this.btnBackColor.setColor(color);
|
||||
onColorsBackSelect: function(btn, color) {
|
||||
this.ShapeColor = {Value: 1, Color: color};
|
||||
|
||||
if (this.api && !this._noApply) {
|
||||
|
|
@ -262,10 +261,6 @@ define([
|
|||
this.fireEvent('editcomplete', 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');
|
||||
|
|
@ -284,8 +279,7 @@ define([
|
|||
this.fireEvent('editcomplete', 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();
|
||||
|
|
@ -303,8 +297,7 @@ define([
|
|||
this.fireEvent('editcomplete', 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();
|
||||
|
|
@ -461,8 +454,7 @@ define([
|
|||
this.fireEvent('editcomplete', 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));
|
||||
|
||||
|
|
@ -619,8 +611,7 @@ define([
|
|||
this.fireEvent('editcomplete', 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();
|
||||
|
|
@ -1550,100 +1541,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.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.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.colorsBorder.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
||||
|
|
@ -1752,7 +1693,6 @@ define([
|
|||
txtBrownPaper : 'Brown Paper',
|
||||
txtPapyrus : 'Papyrus',
|
||||
txtWood : 'Wood',
|
||||
textNewColor : 'Add New Custom Color',
|
||||
textAdvanced : 'Show advanced settings',
|
||||
strTransparency : 'Opacity',
|
||||
textNoFill : 'No Fill',
|
||||
|
|
|
|||
|
|
@ -134,16 +134,12 @@ define([
|
|||
this.cmbFillSrc.on('selected', _.bind(this.onFillSrcSelect, this));
|
||||
|
||||
this.btnBackColor = new Common.UI.ColorButton({
|
||||
parentEl: $('#slide-back-color-btn'),
|
||||
style: "width:45px;",
|
||||
disabled: true,
|
||||
menu : new Common.UI.Menu({
|
||||
items: [
|
||||
{ template: _.template('<div id="slide-back-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
|
||||
{ template: _.template('<a id="slide-back-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||
]
|
||||
})
|
||||
transparent: true,
|
||||
menu: true
|
||||
});
|
||||
this.btnBackColor.render( $('#slide-back-color-btn'));
|
||||
this.btnBackColor.setColor('ffffff');
|
||||
this.FillItems.push(this.btnBackColor);
|
||||
|
||||
|
|
@ -389,8 +385,7 @@ define([
|
|||
this.fireEvent('editcomplete', this);
|
||||
},
|
||||
|
||||
onColorsBackSelect: function(picker, color) {
|
||||
this.btnBackColor.setColor(color);
|
||||
onColorsBackSelect: function(btn, color) {
|
||||
this.SlideColor = {Value: 1, Color: color};
|
||||
|
||||
if (this.api && !this._noApply) {
|
||||
|
|
@ -412,10 +407,6 @@ define([
|
|||
this.fireEvent('editcomplete', 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');
|
||||
|
|
@ -434,8 +425,7 @@ define([
|
|||
this.fireEvent('editcomplete', 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.CAscSlideProps();
|
||||
|
|
@ -453,8 +443,7 @@ define([
|
|||
this.fireEvent('editcomplete', 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.CAscSlideProps();
|
||||
|
|
@ -567,8 +556,7 @@ define([
|
|||
this.fireEvent('editcomplete', 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));
|
||||
|
||||
|
|
@ -1072,70 +1060,36 @@ define([
|
|||
UpdateThemeColors: function() {
|
||||
if (this._initSettings) return;
|
||||
if (!this.colorsBack) {
|
||||
this.colorsBack = new Common.UI.ThemeColorPalette({
|
||||
el: $('#slide-back-color-menu'),
|
||||
value: 'ffffff',
|
||||
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.btnFGColor = new Common.UI.ColorButton({
|
||||
style: "width:45px;",
|
||||
menu : new Common.UI.Menu({
|
||||
items: [
|
||||
{ template: _.template('<div id="slide-foreground-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
|
||||
{ template: _.template('<a id="slide-foreground-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||
]
|
||||
})
|
||||
parentEl: $('#slide-foreground-color-btn'),
|
||||
style: "width:45px;"
|
||||
});
|
||||
this.btnFGColor.render( $('#slide-foreground-color-btn'));
|
||||
this.btnFGColor.setColor('000000');
|
||||
this.FillItems.push(this.btnFGColor);
|
||||
this.colorsFG = new Common.UI.ThemeColorPalette({
|
||||
el: $('#slide-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="slide-background-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
|
||||
{ template: _.template('<a id="slide-background-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||
]
|
||||
})
|
||||
parentEl: $('#slide-background-color-btn'),
|
||||
style: "width:45px;"
|
||||
});
|
||||
this.btnBGColor.render( $('#slide-background-color-btn'));
|
||||
this.btnBGColor.setColor('ffffff');
|
||||
this.FillItems.push(this.btnBGColor);
|
||||
this.colorsBG = new Common.UI.ThemeColorPalette({
|
||||
el: $('#slide-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="slide-gradient-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
|
||||
{ template: _.template('<a id="slide-gradient-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||
]
|
||||
})
|
||||
parentEl: $('#slide-gradient-color-btn'),
|
||||
style: "width:45px;"
|
||||
});
|
||||
this.btnGradColor.render( $('#slide-gradient-color-btn'));
|
||||
this.btnGradColor.setColor('000000');
|
||||
this.FillItems.push(this.btnGradColor);
|
||||
this.colorsGrad = new Common.UI.ThemeColorPalette({
|
||||
el: $('#slide-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.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
||||
|
|
@ -1533,7 +1487,6 @@ define([
|
|||
txtBrownPaper : 'Brown Paper',
|
||||
txtPapyrus : 'Papyrus',
|
||||
txtWood : 'Wood',
|
||||
textNewColor : 'Add New Custom Color',
|
||||
textAdvanced : 'Show advanced settings',
|
||||
textNoFill : 'No Fill',
|
||||
textSelectTexture : 'Select',
|
||||
|
|
|
|||
|
|
@ -137,8 +137,7 @@ define([
|
|||
this.fireEvent('editcomplete', this);
|
||||
},
|
||||
|
||||
onColorsBackSelect: function(picker, color) {
|
||||
this.btnBackColor.setColor(color);
|
||||
onColorsBackSelect: function(btn, color) {
|
||||
this.CellColor = {Value: 1, Color: color};
|
||||
|
||||
if (this.api) {
|
||||
|
|
@ -159,14 +158,6 @@ define([
|
|||
this.fireEvent('editcomplete', 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){
|
||||
this._UpdateBordersStyle(btn.options.strId, true);
|
||||
if (this.api) {
|
||||
|
|
@ -615,40 +606,21 @@ 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="table-border-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
|
||||
{ template: _.template('<a id="table-border-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||
]
|
||||
})
|
||||
parentEl: $('#table-border-color-btn'),
|
||||
style: "width:45px;"
|
||||
});
|
||||
this.btnBorderColor.render( $('#table-border-color-btn'));
|
||||
this.btnBorderColor.setColor('000000');
|
||||
this.lockedControls.push(this.btnBorderColor);
|
||||
this.borderColor = new Common.UI.ThemeColorPalette({
|
||||
el: $('#table-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.borderColor = this.btnBorderColor.getPicker();
|
||||
|
||||
this.btnBackColor = new Common.UI.ColorButton({
|
||||
parentEl: $('#table-back-color-btn'),
|
||||
style: "width:45px;",
|
||||
menu : new Common.UI.Menu({
|
||||
items: [
|
||||
{ template: _.template('<div id="table-back-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
|
||||
{ template: _.template('<a id="table-back-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||
]
|
||||
})
|
||||
});
|
||||
this.btnBackColor.render( $('#table-back-color-btn'));
|
||||
this.lockedControls.push(this.btnBackColor);
|
||||
this.colorsBack = new Common.UI.ThemeColorPalette({
|
||||
el: $('#table-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.lockedControls.push(this.btnBackColor);
|
||||
this.colorsBack = this.btnBackColor.getPicker();
|
||||
this.btnBackColor.on('color:select', _.bind(this.onColorsBackSelect, this));
|
||||
}
|
||||
this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
||||
this.borderColor.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
||||
|
|
@ -783,7 +755,6 @@ define([
|
|||
textSelectBorders : 'Select borders that you want to change',
|
||||
textAdvanced : 'Show advanced settings',
|
||||
txtNoBorders : 'No borders',
|
||||
textNewColor : 'Add New Custom Color',
|
||||
textTemplate : 'Select From Template',
|
||||
textRows : 'Rows',
|
||||
textColumns : 'Columns',
|
||||
|
|
|
|||
|
|
@ -238,8 +238,7 @@ define([
|
|||
this.fireEvent('editcomplete', this);
|
||||
},
|
||||
|
||||
onColorsBackSelect: function(picker, color) {
|
||||
this.btnBackColor.setColor(color);
|
||||
onColorsBackSelect: function(btn, color) {
|
||||
this.ShapeColor = {Value: 1, Color: color};
|
||||
|
||||
if (this.api && !this._noApply) {
|
||||
|
|
@ -262,10 +261,6 @@ define([
|
|||
this.fireEvent('editcomplete', 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');
|
||||
|
|
@ -285,8 +280,7 @@ define([
|
|||
this.fireEvent('editcomplete', 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();
|
||||
|
|
@ -305,8 +299,7 @@ define([
|
|||
this.fireEvent('editcomplete', 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();
|
||||
|
|
@ -469,8 +462,7 @@ define([
|
|||
this.fireEvent('editcomplete', 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));
|
||||
|
||||
|
|
@ -632,8 +624,7 @@ define([
|
|||
this.fireEvent('editcomplete', 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();
|
||||
|
|
@ -1512,100 +1503,50 @@ define([
|
|||
if (this._initSettings) return;
|
||||
if (!this.btnBackColor) {
|
||||
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.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.colorsBorder.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
||||
|
|
@ -1669,7 +1610,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