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

[PE] Refactoring color button component

Browse source
This commit is contained in:
Julia Radzhabova 2020-04-29 20:32:18 +03:00
parent 44e25e39ea
commit c8c0416f5d
5 changed files with 87 additions and 301 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
apps/common/main/lib/view/ListSettingsDialog.js
View file

@ -119,24 +119,12 @@ define([
}); });
this.btnColor = new Common.UI.ColorButton({ this.btnColor = new Common.UI.ColorButton({
parentEl: $window.find('#id-dlg-list-color'),
style: "width:53px;", style: "width:53px;",
menu : new Common.UI.Menu({ additionalAlign: this.menuAddAlign
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>') }
]
})
}); });
this.btnColor.on('render:after', function(btn) { this.btnColor.on('color:select', _.bind(this.onColorsSelect, this));
me.colors = new Common.UI.ThemeColorPalette({ this.colors = this.btnColor.getPicker();
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.spnStart = new Common.UI.MetricSpinner({ this.spnStart = new Common.UI.MetricSpinner({
el : $window.find('#id-dlg-list-start'), el : $window.find('#id-dlg-list-start'),
@ -172,12 +160,7 @@ define([
this.colors.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); this.colors.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
}, },
addNewColor: function(picker, btn) { onColorsSelect: function(btn, color) {
picker.addNewColor((typeof(btn.color) == 'object') ? btn.color.color : btn.color);
},
onColorsSelect: function(picker, color) {
this.btnColor.setColor(color);
if (this._changedProps) { if (this._changedProps) {
this._changedProps.asc_putBulletColor(Common.Utils.ThemeColor.getRgbColor(color)); this._changedProps.asc_putBulletColor(Common.Utils.ThemeColor.getRgbColor(color));
} }
@ -271,7 +254,6 @@ define([
txtSize: 'Size', txtSize: 'Size',
txtColor: 'Color', txtColor: 'Color',
txtOfText: '% of text', txtOfText: '% of text',
textNewColor: 'Add New Custom Color',
txtStart: 'Start at', txtStart: 'Start at',
txtBullet: 'Bullet', txtBullet: 'Bullet',
tipChange: 'Change bullet' tipChange: 'Change bullet'

112
apps/presentationeditor/main/app/view/ShapeSettings.js
View file

@ -239,8 +239,7 @@ define([
this.fireEvent('editcomplete', this); this.fireEvent('editcomplete', this);
}, },
onColorsBackSelect: function(picker, color) { onColorsBackSelect: function(btn, color) {
this.btnBackColor.setColor(color);
this.ShapeColor = {Value: 1, Color: color}; this.ShapeColor = {Value: 1, Color: color};
if (this.api && !this._noApply) { if (this.api && !this._noApply) {
@ -262,10 +261,6 @@ define([
this.fireEvent('editcomplete', this); this.fireEvent('editcomplete', this);
}, },
addNewColor: function(picker, btn) {
picker.addNewColor((typeof(btn.color) == 'object') ? btn.color.color : btn.color);
},
onPatternSelect: function(combo, record){ onPatternSelect: function(combo, record){
if (this.api && !this._noApply) { if (this.api && !this._noApply) {
this.PatternFillType = record.get('type'); this.PatternFillType = record.get('type');
@ -284,8 +279,7 @@ define([
this.fireEvent('editcomplete', this); this.fireEvent('editcomplete', this);
}, },
onColorsFGSelect: function(picker, color) { onColorsFGSelect: function(btn, color) {
this.btnFGColor.setColor(color);
this.FGColor = {Value: 1, Color: color}; this.FGColor = {Value: 1, Color: color};
if (this.api && !this._noApply) { if (this.api && !this._noApply) {
var props = new Asc.asc_CShapeProperty(); var props = new Asc.asc_CShapeProperty();
@ -303,8 +297,7 @@ define([
this.fireEvent('editcomplete', this); this.fireEvent('editcomplete', this);
}, },
onColorsBGSelect: function(picker, color) { onColorsBGSelect: function(btn, color) {
this.btnBGColor.setColor(color);
this.BGColor = {Value: 1, Color: color}; this.BGColor = {Value: 1, Color: color};
if (this.api && !this._noApply) { if (this.api && !this._noApply) {
var props = new Asc.asc_CShapeProperty(); var props = new Asc.asc_CShapeProperty();
@ -461,8 +454,7 @@ define([
this.fireEvent('editcomplete', this); this.fireEvent('editcomplete', this);
}, },
onColorsGradientSelect: function(picker, color) { onColorsGradientSelect: function(btn, color) {
this.btnGradColor.setColor(color);
this.GradColor.colors[this.GradColor.currentIdx] = color; this.GradColor.colors[this.GradColor.currentIdx] = color;
this.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(color) == 'object') ? color.color : color)); this.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(color) == 'object') ? color.color : color));
@ -619,8 +611,7 @@ define([
this.fireEvent('editcomplete', this); this.fireEvent('editcomplete', this);
}, },
onColorsBorderSelect: function(picker, color) { onColorsBorderSelect: function(btn, color) {
this.btnBorderColor.setColor(color);
this.BorderColor = {Value: 1, Color: color}; this.BorderColor = {Value: 1, Color: color};
if (this.api && this.BorderSize>0 && !this._noApply) { if (this.api && this.BorderSize>0 && !this._noApply) {
var props = new Asc.asc_CShapeProperty(); var props = new Asc.asc_CShapeProperty();
@ -1550,100 +1541,50 @@ define([
if (this._initSettings) return; if (this._initSettings) return;
if (!this.btnBackColor) { if (!this.btnBackColor) {
this.btnBackColor = new Common.UI.ColorButton({ this.btnBackColor = new Common.UI.ColorButton({
parentEl: $('#shape-back-color-btn'),
style: "width:45px;", 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 transparent: true
}); });
this.colorsBack.on('select', _.bind(this.onColorsBackSelect, this)); this.btnBackColor.setColor('transparent');
this.btnBackColor.menu.items[1].on('click', _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor)); 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({ this.btnFGColor = new Common.UI.ColorButton({
style: "width:45px;", parentEl: $('#shape-foreground-color-btn'),
menu : new Common.UI.Menu({ style: "width:45px;"
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>') }
]
})
}); });
this.btnFGColor.render( $('#shape-foreground-color-btn'));
this.btnFGColor.setColor('000000'); this.btnFGColor.setColor('000000');
this.fillControls.push(this.btnFGColor); this.fillControls.push(this.btnFGColor);
this.colorsFG = new Common.UI.ThemeColorPalette({ this.colorsFG = this.btnFGColor.getPicker();
el: $('#shape-foreground-color-menu'), this.btnFGColor.on('color:select', _.bind(this.onColorsFGSelect, this));
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.btnBGColor = new Common.UI.ColorButton({ this.btnBGColor = new Common.UI.ColorButton({
style: "width:45px;", parentEl: $('#shape-background-color-btn'),
menu : new Common.UI.Menu({ style: "width:45px;"
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>') }
]
})
}); });
this.btnBGColor.render( $('#shape-background-color-btn'));
this.btnBGColor.setColor('ffffff'); this.btnBGColor.setColor('ffffff');
this.fillControls.push(this.btnBGColor); this.fillControls.push(this.btnBGColor);
this.colorsBG = new Common.UI.ThemeColorPalette({ this.colorsBG = this.btnBGColor.getPicker();
el: $('#shape-background-color-menu'), this.btnBGColor.on('color:select', _.bind(this.onColorsBGSelect, this));
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.btnGradColor = new Common.UI.ColorButton({ this.btnGradColor = new Common.UI.ColorButton({
style: "width:45px;", parentEl: $('#shape-gradient-color-btn'),
menu : new Common.UI.Menu({ style: "width:45px;"
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>') }
]
})
}); });
this.btnGradColor.render( $('#shape-gradient-color-btn'));
this.btnGradColor.setColor('000000'); this.btnGradColor.setColor('000000');
this.fillControls.push(this.btnGradColor); this.fillControls.push(this.btnGradColor);
this.colorsGrad = new Common.UI.ThemeColorPalette({ this.colorsGrad = this.btnGradColor.getPicker();
el: $('#shape-gradient-color-menu'), this.btnGradColor.on('color:select', _.bind(this.onColorsGradientSelect, this));
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.btnBorderColor = new Common.UI.ColorButton({ this.btnBorderColor = new Common.UI.ColorButton({
style: "width:45px;", parentEl: $('#shape-border-color-btn'),
menu : new Common.UI.Menu({ style: "width:45px;"
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>') }
]
})
}); });
this.btnBorderColor.render( $('#shape-border-color-btn'));
this.btnBorderColor.setColor('000000'); this.btnBorderColor.setColor('000000');
this.lockedControls.push(this.btnBorderColor); this.lockedControls.push(this.btnBorderColor);
this.colorsBorder = new Common.UI.ThemeColorPalette({ this.colorsBorder = this.btnBorderColor.getPicker();
el: $('#shape-border-color-menu'), this.btnBorderColor.on('color:select', _.bind(this.onColorsBorderSelect, this));
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.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); this.colorsBorder.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
@ -1752,7 +1693,6 @@ define([
txtBrownPaper : 'Brown Paper', txtBrownPaper : 'Brown Paper',
txtPapyrus : 'Papyrus', txtPapyrus : 'Papyrus',
txtWood : 'Wood', txtWood : 'Wood',
textNewColor : 'Add New Custom Color',
textAdvanced : 'Show advanced settings', textAdvanced : 'Show advanced settings',
strTransparency : 'Opacity', strTransparency : 'Opacity',
textNoFill : 'No Fill', textNoFill : 'No Fill',

91
apps/presentationeditor/main/app/view/SlideSettings.js
View file

@ -134,16 +134,12 @@ define([
this.cmbFillSrc.on('selected', _.bind(this.onFillSrcSelect, this)); this.cmbFillSrc.on('selected', _.bind(this.onFillSrcSelect, this));
this.btnBackColor = new Common.UI.ColorButton({ this.btnBackColor = new Common.UI.ColorButton({
parentEl: $('#slide-back-color-btn'),
style: "width:45px;", style: "width:45px;",
disabled: true, disabled: true,
menu : new Common.UI.Menu({ transparent: true,
items: [ menu: true
{ 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>') }
]
})
}); });
this.btnBackColor.render( $('#slide-back-color-btn'));
this.btnBackColor.setColor('ffffff'); this.btnBackColor.setColor('ffffff');
this.FillItems.push(this.btnBackColor); this.FillItems.push(this.btnBackColor);
@ -389,8 +385,7 @@ define([
this.fireEvent('editcomplete', this); this.fireEvent('editcomplete', this);
}, },
onColorsBackSelect: function(picker, color) { onColorsBackSelect: function(btn, color) {
this.btnBackColor.setColor(color);
this.SlideColor = {Value: 1, Color: color}; this.SlideColor = {Value: 1, Color: color};
if (this.api && !this._noApply) { if (this.api && !this._noApply) {
@ -412,10 +407,6 @@ define([
this.fireEvent('editcomplete', this); this.fireEvent('editcomplete', this);
}, },
addNewColor: function(picker, btn) {
picker.addNewColor((typeof(btn.color) == 'object') ? btn.color.color : btn.color);
},
onPatternSelect: function(combo, record){ onPatternSelect: function(combo, record){
if (this.api && !this._noApply) { if (this.api && !this._noApply) {
this.PatternFillType = record.get('type'); this.PatternFillType = record.get('type');
@ -434,8 +425,7 @@ define([
this.fireEvent('editcomplete', this); this.fireEvent('editcomplete', this);
}, },
onColorsFGSelect: function(picker, color) { onColorsFGSelect: function(btn, color) {
this.btnFGColor.setColor(color);
this.FGColor = {Value: 1, Color: color}; this.FGColor = {Value: 1, Color: color};
if (this.api && !this._noApply) { if (this.api && !this._noApply) {
var props = new Asc.CAscSlideProps(); var props = new Asc.CAscSlideProps();
@ -453,8 +443,7 @@ define([
this.fireEvent('editcomplete', this); this.fireEvent('editcomplete', this);
}, },
onColorsBGSelect: function(picker, color) { onColorsBGSelect: function(btn, color) {
this.btnBGColor.setColor(color);
this.BGColor = {Value: 1, Color: color}; this.BGColor = {Value: 1, Color: color};
if (this.api && !this._noApply) { if (this.api && !this._noApply) {
var props = new Asc.CAscSlideProps(); var props = new Asc.CAscSlideProps();
@ -567,8 +556,7 @@ define([
this.fireEvent('editcomplete', this); this.fireEvent('editcomplete', this);
}, },
onColorsGradientSelect: function(picker, color) { onColorsGradientSelect: function(btn, color) {
this.btnGradColor.setColor(color);
this.GradColor.colors[this.GradColor.currentIdx] = color; this.GradColor.colors[this.GradColor.currentIdx] = color;
this.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(color) == 'object') ? color.color : color)); this.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(color) == 'object') ? color.color : color));
@ -1072,70 +1060,36 @@ define([
UpdateThemeColors: function() { UpdateThemeColors: function() {
if (this._initSettings) return; if (this._initSettings) return;
if (!this.colorsBack) { if (!this.colorsBack) {
this.colorsBack = new Common.UI.ThemeColorPalette({ this.btnBackColor.setMenu();
el: $('#slide-back-color-menu'), this.btnBackColor.on('color:select', _.bind(this.onColorsBackSelect, this));
value: 'ffffff', this.colorsBack = this.btnBackColor.getPicker();
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.btnFGColor = new Common.UI.ColorButton({ this.btnFGColor = new Common.UI.ColorButton({
style: "width:45px;", parentEl: $('#slide-foreground-color-btn'),
menu : new Common.UI.Menu({ style: "width:45px;"
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>') }
]
})
}); });
this.btnFGColor.render( $('#slide-foreground-color-btn'));
this.btnFGColor.setColor('000000'); this.btnFGColor.setColor('000000');
this.FillItems.push(this.btnFGColor); this.FillItems.push(this.btnFGColor);
this.colorsFG = new Common.UI.ThemeColorPalette({ this.colorsFG = this.btnFGColor.getPicker();
el: $('#slide-foreground-color-menu'), this.btnFGColor.on('color:select', _.bind(this.onColorsFGSelect, this));
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.btnBGColor = new Common.UI.ColorButton({ this.btnBGColor = new Common.UI.ColorButton({
style: "width:45px;", parentEl: $('#slide-background-color-btn'),
menu : new Common.UI.Menu({ style: "width:45px;"
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>') }
]
})
}); });
this.btnBGColor.render( $('#slide-background-color-btn'));
this.btnBGColor.setColor('ffffff'); this.btnBGColor.setColor('ffffff');
this.FillItems.push(this.btnBGColor); this.FillItems.push(this.btnBGColor);
this.colorsBG = new Common.UI.ThemeColorPalette({ this.colorsBG = this.btnBGColor.getPicker();
el: $('#slide-background-color-menu'), this.btnBGColor.on('color:select', _.bind(this.onColorsBGSelect, this));
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.btnGradColor = new Common.UI.ColorButton({ this.btnGradColor = new Common.UI.ColorButton({
style: "width:45px;", parentEl: $('#slide-gradient-color-btn'),
menu : new Common.UI.Menu({ style: "width:45px;"
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>') }
]
})
}); });
this.btnGradColor.render( $('#slide-gradient-color-btn'));
this.btnGradColor.setColor('000000'); this.btnGradColor.setColor('000000');
this.FillItems.push(this.btnGradColor); this.FillItems.push(this.btnGradColor);
this.colorsGrad = new Common.UI.ThemeColorPalette({ this.colorsGrad = this.btnGradColor.getPicker();
el: $('#slide-gradient-color-menu'), this.btnGradColor.on('color:select', _.bind(this.onColorsGradientSelect, this));
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.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
@ -1533,7 +1487,6 @@ define([
txtBrownPaper : 'Brown Paper', txtBrownPaper : 'Brown Paper',
txtPapyrus : 'Papyrus', txtPapyrus : 'Papyrus',
txtWood : 'Wood', txtWood : 'Wood',
textNewColor : 'Add New Custom Color',
textAdvanced : 'Show advanced settings', textAdvanced : 'Show advanced settings',
textNoFill : 'No Fill', textNoFill : 'No Fill',
textSelectTexture : 'Select', textSelectTexture : 'Select',

45
apps/presentationeditor/main/app/view/TableSettings.js
View file

@ -137,8 +137,7 @@ define([
this.fireEvent('editcomplete', this); this.fireEvent('editcomplete', this);
}, },
onColorsBackSelect: function(picker, color) { onColorsBackSelect: function(btn, color) {
this.btnBackColor.setColor(color);
this.CellColor = {Value: 1, Color: color}; this.CellColor = {Value: 1, Color: color};
if (this.api) { if (this.api) {
@ -159,14 +158,6 @@ define([
this.fireEvent('editcomplete', this); 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){ onBtnBordersClick: function(btn, eOpts){
this._UpdateBordersStyle(btn.options.strId, true); this._UpdateBordersStyle(btn.options.strId, true);
if (this.api) { if (this.api) {
@ -615,40 +606,21 @@ define([
if (this._initSettings) return; if (this._initSettings) return;
if (!this.btnBackColor) { if (!this.btnBackColor) {
this.btnBorderColor = new Common.UI.ColorButton({ this.btnBorderColor = new Common.UI.ColorButton({
style: "width:45px;", parentEl: $('#table-border-color-btn'),
menu : new Common.UI.Menu({ style: "width:45px;"
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>') }
]
})
}); });
this.btnBorderColor.render( $('#table-border-color-btn'));
this.btnBorderColor.setColor('000000'); this.btnBorderColor.setColor('000000');
this.lockedControls.push(this.btnBorderColor); this.lockedControls.push(this.btnBorderColor);
this.borderColor = new Common.UI.ThemeColorPalette({ this.borderColor = this.btnBorderColor.getPicker();
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.btnBackColor = new Common.UI.ColorButton({ this.btnBackColor = new Common.UI.ColorButton({
parentEl: $('#table-back-color-btn'),
style: "width:45px;", 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 transparent: true
}); });
this.colorsBack.on('select', _.bind(this.onColorsBackSelect, this)); this.lockedControls.push(this.btnBackColor);
this.btnBackColor.menu.items[1].on('click', _.bind(this.addNewColor, this, this.colorsBack, 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.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
this.borderColor.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', textSelectBorders : 'Select borders that you want to change',
textAdvanced : 'Show advanced settings', textAdvanced : 'Show advanced settings',
txtNoBorders : 'No borders', txtNoBorders : 'No borders',
textNewColor : 'Add New Custom Color',
textTemplate : 'Select From Template', textTemplate : 'Select From Template',
textRows : 'Rows', textRows : 'Rows',
textColumns : 'Columns', textColumns : 'Columns',

112
apps/presentationeditor/main/app/view/TextArtSettings.js
View file

@ -238,8 +238,7 @@ define([
this.fireEvent('editcomplete', this); this.fireEvent('editcomplete', this);
}, },
onColorsBackSelect: function(picker, color) { onColorsBackSelect: function(btn, color) {
this.btnBackColor.setColor(color);
this.ShapeColor = {Value: 1, Color: color}; this.ShapeColor = {Value: 1, Color: color};
if (this.api && !this._noApply) { if (this.api && !this._noApply) {
@ -262,10 +261,6 @@ define([
this.fireEvent('editcomplete', this); this.fireEvent('editcomplete', this);
}, },
addNewColor: function(picker, btn) {
picker.addNewColor((typeof(btn.color) == 'object') ? btn.color.color : btn.color);
},
onPatternSelect: function(combo, record){ onPatternSelect: function(combo, record){
if (this.api && !this._noApply) { if (this.api && !this._noApply) {
this.PatternFillType = record.get('type'); this.PatternFillType = record.get('type');
@ -285,8 +280,7 @@ define([
this.fireEvent('editcomplete', this); this.fireEvent('editcomplete', this);
}, },
onColorsFGSelect: function(picker, color) { onColorsFGSelect: function(btn, color) {
this.btnFGColor.setColor(color);
this.FGColor = {Value: 1, Color: color}; this.FGColor = {Value: 1, Color: color};
if (this.api && !this._noApply) { if (this.api && !this._noApply) {
var props = new Asc.asc_TextArtProperties(); var props = new Asc.asc_TextArtProperties();
@ -305,8 +299,7 @@ define([
this.fireEvent('editcomplete', this); this.fireEvent('editcomplete', this);
}, },
onColorsBGSelect: function(picker, color) { onColorsBGSelect: function(btn, color) {
this.btnBGColor.setColor(color);
this.BGColor = {Value: 1, Color: color}; this.BGColor = {Value: 1, Color: color};
if (this.api && !this._noApply) { if (this.api && !this._noApply) {
var props = new Asc.asc_TextArtProperties(); var props = new Asc.asc_TextArtProperties();
@ -469,8 +462,7 @@ define([
this.fireEvent('editcomplete', this); this.fireEvent('editcomplete', this);
}, },
onColorsGradientSelect: function(picker, color) { onColorsGradientSelect: function(btn, color) {
this.btnGradColor.setColor(color);
this.GradColor.colors[this.GradColor.currentIdx] = color; this.GradColor.colors[this.GradColor.currentIdx] = color;
this.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(color) == 'object') ? color.color : color)); this.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(color) == 'object') ? color.color : color));
@ -632,8 +624,7 @@ define([
this.fireEvent('editcomplete', this); this.fireEvent('editcomplete', this);
}, },
onColorsBorderSelect: function(picker, color) { onColorsBorderSelect: function(btn, color) {
this.btnBorderColor.setColor(color);
this.BorderColor = {Value: 1, Color: color}; this.BorderColor = {Value: 1, Color: color};
if (this.api && this.BorderSize>0 && !this._noApply) { if (this.api && this.BorderSize>0 && !this._noApply) {
var props = new Asc.asc_TextArtProperties(); var props = new Asc.asc_TextArtProperties();
@ -1512,100 +1503,50 @@ define([
if (this._initSettings) return; if (this._initSettings) return;
if (!this.btnBackColor) { if (!this.btnBackColor) {
this.btnBackColor = new Common.UI.ColorButton({ this.btnBackColor = new Common.UI.ColorButton({
parentEl: $('#textart-back-color-btn'),
style: "width:45px;", 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 transparent: true
}); });
this.colorsBack.on('select', _.bind(this.onColorsBackSelect, this)); this.btnBackColor.setColor('transparent');
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.btnFGColor = new Common.UI.ColorButton({ this.btnFGColor = new Common.UI.ColorButton({
style: "width:45px;", parentEl: $('#textart-foreground-color-btn'),
menu : new Common.UI.Menu({ style: "width:45px;"
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>') }
]
})
}); });
this.btnFGColor.render( $('#textart-foreground-color-btn'));
this.btnFGColor.setColor('000000'); this.btnFGColor.setColor('000000');
this.lockedControls.push(this.btnFGColor); this.lockedControls.push(this.btnFGColor);
this.colorsFG = new Common.UI.ThemeColorPalette({ this.colorsFG = this.btnFGColor.getPicker();
el: $('#textart-foreground-color-menu'), this.btnFGColor.on('color:select', _.bind(this.onColorsFGSelect, this));
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.btnBGColor = new Common.UI.ColorButton({ this.btnBGColor = new Common.UI.ColorButton({
style: "width:45px;", parentEl: $('#textart-background-color-btn'),
menu : new Common.UI.Menu({ style: "width:45px;"
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>') }
]
})
}); });
this.btnBGColor.render( $('#textart-background-color-btn'));
this.btnBGColor.setColor('ffffff'); this.btnBGColor.setColor('ffffff');
this.lockedControls.push(this.btnBGColor); this.lockedControls.push(this.btnBGColor);
this.colorsBG = new Common.UI.ThemeColorPalette({ this.colorsBG = this.btnBGColor.getPicker();
el: $('#textart-background-color-menu'), this.btnBGColor.on('color:select', _.bind(this.onColorsBGSelect, this));
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.btnGradColor = new Common.UI.ColorButton({ this.btnGradColor = new Common.UI.ColorButton({
style: "width:45px;", parentEl: $('#textart-gradient-color-btn'),
menu : new Common.UI.Menu({ style: "width:45px;"
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>') }
]
})
}); });
this.btnGradColor.render( $('#textart-gradient-color-btn'));
this.btnGradColor.setColor('000000'); this.btnGradColor.setColor('000000');
this.lockedControls.push(this.btnGradColor); this.lockedControls.push(this.btnGradColor);
this.colorsGrad = new Common.UI.ThemeColorPalette({ this.colorsGrad = this.btnGradColor.getPicker();
el: $('#textart-gradient-color-menu'), this.btnGradColor.on('color:select', _.bind(this.onColorsGradientSelect, this));
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.btnBorderColor = new Common.UI.ColorButton({ this.btnBorderColor = new Common.UI.ColorButton({
style: "width:45px;", parentEl: $('#textart-border-color-btn'),
menu : new Common.UI.Menu({ style: "width:45px;"
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>') }
]
})
}); });
this.btnBorderColor.render( $('#textart-border-color-btn'));
this.btnBorderColor.setColor('000000'); this.btnBorderColor.setColor('000000');
this.lockedControls.push(this.btnBorderColor); this.lockedControls.push(this.btnBorderColor);
this.colorsBorder = new Common.UI.ThemeColorPalette({ this.colorsBorder = this.btnBorderColor.getPicker();
el: $('#textart-border-color-menu'), this.btnBorderColor.on('color:select', _.bind(this.onColorsBorderSelect, this));
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.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); this.colorsBorder.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
@ -1669,7 +1610,6 @@ define([
txtBrownPaper : 'Brown Paper', txtBrownPaper : 'Brown Paper',
txtPapyrus : 'Papyrus', txtPapyrus : 'Papyrus',
txtWood : 'Wood', txtWood : 'Wood',
textNewColor : 'Add New Custom Color',
strTransparency : 'Opacity', strTransparency : 'Opacity',
textNoFill : 'No Fill', textNoFill : 'No Fill',
textSelectTexture : 'Select', textSelectTexture : 'Select',