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

Refactoring color button

Browse source
This commit is contained in:
Julia Radzhabova 2020-04-30 15:11:03 +03:00
parent d351ad052f
commit 7e49822439
16 changed files with 100 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
apps/common/main/lib/component/ColorButton.js
View file

@ -61,13 +61,20 @@ define([
var me = this;
options.menu = me.getMenu(options);
me.on('render:after', function(btn) {
me.getPicker();
me.getPicker(options.color);
});
}
Common.UI.Button.prototype.initialize.call(this, options);
},
render: function(parentEl) {
Common.UI.Button.prototype.render.call(this, parentEl);
if (this.options.color!==undefined)
this.setColor(this.options.color);
},
onColorSelect: function(picker, color) {
this.setColor(color);
this.trigger('color:select', this, color);
@ -81,11 +88,12 @@ define([
span.css({'background-color': (color=='transparent') ? color : ((typeof(color) == 'object') ? '#'+color.color : '#'+color)});
},
getPicker: function() {
getPicker: function(color) {
if (!this.colorPicker) {
this.colorPicker = new Common.UI.ThemeColorPalette({
el: this.cmpEl.find('#' + this.menu.id + '-color-menu'),
transparent: this.options.transparent
transparent: this.options.transparent,
value: color
});
this.colorPicker.on('select', _.bind(this.onColorSelect, this));
this.cmpEl.find('#' + this.menu.id + '-color-new').on('click', _.bind(this.addNewColor, this));
@ -113,7 +121,7 @@ define([
setMenu: function (m) {
m = m || this.getMenu();
Common.UI.Button.prototype.setMenu.call(this, m);
this.getPicker();
this.getPicker(this.options.color);
},
addNewColor: function() {

4
apps/documenteditor/main/app/view/ControlSettingsDialog.js
View file

@ -133,9 +133,9 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
template: _.template('<a tabindex="-1" type="menuitem"><span class="menu-item-icon" style="background-image: none; width: 12px; height: 12px; margin: 1px 7px 0 -7px; background-color: #dcdcdc;"></span><%= caption %></a>')
},
{caption: '--'}],
additionalAlign: this.menuAddAlign
additionalAlign: this.menuAddAlign,
color: '000000'
});
this.btnColor.setColor('000000');
this.btnColor.on('color:select', _.bind(this.onColorsSelect, this));
this.colors = this.btnColor.getPicker();
$('#control-settings-system-color').on('click', _.bind(this.onSystemColor, this));

4
apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js
View file

@ -161,12 +161,12 @@ define([
this.btnBorderColor = new Common.UI.ColorButton({
parentEl: $('#drop-advanced-button-bordercolor'),
additionalAlign: this.menuAddAlign
additionalAlign: this.menuAddAlign,
color: '000000'
});
this.btnBorderColor.on('color:select', _.bind(function(btn, color) {
this.tableStyler.setVirtualBorderColor((typeof(color) == 'object') ? color.color : color);
}, this));
this.btnBorderColor.setColor('000000');
this.colorsBorder = this.btnBorderColor.getPicker();
this.btnBackColor = new Common.UI.ColorButton({

4
apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js
View file

@ -359,11 +359,11 @@ define([ 'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
this.btnBorderColor = new Common.UI.ColorButton({
parentEl: $('#paragraphadv-border-color-btn'),
additionalAlign: this.menuAddAlign
additionalAlign: this.menuAddAlign,
color: '000000'
});
this.colorsBorder = this.btnBorderColor.getPicker();
this.btnBorderColor.on('color:select', _.bind(this.onColorsBorderSelect, this));
this.btnBorderColor.setColor('000000');
this.BordersImage = new Common.UI.TableStyler({
el: $('#id-deparagraphstyler'),

20
apps/documenteditor/main/app/view/ShapeSettings.js
View file

@ -1688,41 +1688,41 @@ define([
// create color buttons
this.btnBackColor = new Common.UI.ColorButton({
parentEl: $('#shape-back-color-btn'),
transparent: true
transparent: true,
color: 'transparent'
});
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({
parentEl: $('#shape-foreground-color-btn')
parentEl: $('#shape-foreground-color-btn'),
color: '000000'
});
this.btnFGColor.setColor('000000');
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({
parentEl: $('#shape-background-color-btn')
parentEl: $('#shape-background-color-btn'),
color: 'ffffff'
});
this.btnBGColor.setColor('ffffff');
this.fillControls.push(this.btnBGColor);
this.colorsBG = this.btnBGColor.getPicker();
this.btnBGColor.on('color:select', _.bind(this.onColorsBGSelect, this));
this.btnGradColor = new Common.UI.ColorButton({
parentEl: $('#shape-gradient-color-btn')
parentEl: $('#shape-gradient-color-btn'),
color: '000000'
});
this.btnGradColor.setColor('000000');
this.fillControls.push(this.btnGradColor);
this.colorsGrad = this.btnGradColor.getPicker();
this.btnGradColor.on('color:select', _.bind(this.onColorsGradientSelect, this));
this.btnBorderColor = new Common.UI.ColorButton({
parentEl: $('#shape-border-color-btn')
parentEl: $('#shape-border-color-btn'),
color: '000000'
});
this.btnBorderColor.setColor('000000');
this.lockedControls.push(this.btnBorderColor);
this.colorsBorder = this.btnBorderColor.getPicker();
this.btnBorderColor.on('color:select', _.bind(this.onColorsBorderSelect, this));

4
apps/documenteditor/main/app/view/TableSettings.js
View file

@ -639,9 +639,9 @@ define([
if (!this.btnBackColor) {
// create color buttons
this.btnBorderColor = new Common.UI.ColorButton({
parentEl: $('#table-border-color-btn')
parentEl: $('#table-border-color-btn'),
color: '000000'
});
this.btnBorderColor.setColor('000000');
this.lockedControls.push(this.btnBorderColor);
this.borderColor = this.btnBorderColor.getPicker();

4
apps/documenteditor/main/app/view/TableSettingsAdvanced.js
View file

@ -880,10 +880,10 @@ define([ 'text!documenteditor/main/app/template/TableSettingsAdvanced.templat
this.btnBorderColor = new Common.UI.ColorButton({
parentEl: $('#tableadv-border-color-btn'),
additionalAlign: this.menuAddAlign
additionalAlign: this.menuAddAlign,
color: '000000'
});
this.btnBorderColor.on('color:select', _.bind(me.onColorsBorderSelect, me));
this.btnBorderColor.setColor('000000');
this.colorsBorder = this.btnBorderColor.getPicker();
this.btnBackColor = new Common.UI.ColorButton({

12
apps/documenteditor/main/app/view/TextArtSettings.js
View file

@ -1093,26 +1093,26 @@ define([
if (this._initSettings) return;
if (!this.btnBackColor) {
this.btnBorderColor = new Common.UI.ColorButton({
parentEl: $('#textart-border-color-btn')
parentEl: $('#textart-border-color-btn'),
color: '000000'
});
this.btnBorderColor.setColor('000000');
this.lockedControls.push(this.btnBorderColor);
this.colorsBorder = this.btnBorderColor.getPicker();
this.btnBorderColor.on('color:select', _.bind(this.onColorsBorderSelect, this));
this.btnGradColor = new Common.UI.ColorButton({
parentEl: $('#textart-gradient-color-btn')
parentEl: $('#textart-gradient-color-btn'),
color: '000000'
});
this.btnGradColor.setColor('000000');
this.lockedControls.push(this.btnGradColor);
this.colorsGrad = this.btnGradColor.getPicker();
this.btnGradColor.on('color:select', _.bind(this.onColorsGradientSelect, this));
this.btnBackColor = new Common.UI.ColorButton({
parentEl: $('#textart-back-color-btn'),
transparent: true
transparent: true,
color: 'transparent'
});
this.btnBackColor.setColor('transparent');
this.lockedControls.push(this.btnBackColor);
this.colorsBack = this.btnBackColor.getPicker();
this.btnBackColor.on('color:select', _.bind(this.onColorsBackSelect, this));

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

@ -1542,41 +1542,41 @@ define([
if (!this.btnBackColor) {
this.btnBackColor = new Common.UI.ColorButton({
parentEl: $('#shape-back-color-btn'),
transparent: true
transparent: true,
color: 'transparent'
});
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({
parentEl: $('#shape-foreground-color-btn')
parentEl: $('#shape-foreground-color-btn'),
color: '000000'
});
this.btnFGColor.setColor('000000');
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({
parentEl: $('#shape-background-color-btn')
parentEl: $('#shape-background-color-btn'),
color: 'ffffff'
});
this.btnBGColor.setColor('ffffff');
this.fillControls.push(this.btnBGColor);
this.colorsBG = this.btnBGColor.getPicker();
this.btnBGColor.on('color:select', _.bind(this.onColorsBGSelect, this));
this.btnGradColor = new Common.UI.ColorButton({
parentEl: $('#shape-gradient-color-btn')
parentEl: $('#shape-gradient-color-btn'),
color: '000000'
});
this.btnGradColor.setColor('000000');
this.fillControls.push(this.btnGradColor);
this.colorsGrad = this.btnGradColor.getPicker();
this.btnGradColor.on('color:select', _.bind(this.onColorsGradientSelect, this));
this.btnBorderColor = new Common.UI.ColorButton({
parentEl: $('#shape-border-color-btn')
parentEl: $('#shape-border-color-btn'),
color: '000000'
});
this.btnBorderColor.setColor('000000');
this.lockedControls.push(this.btnBorderColor);
this.colorsBorder = this.btnBorderColor.getPicker();
this.btnBorderColor.on('color:select', _.bind(this.onColorsBorderSelect, this));

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

@ -137,9 +137,9 @@ define([
parentEl: $('#slide-back-color-btn'),
disabled: true,
transparent: true,
menu: true
menu: true,
color: 'ffffff'
});
this.btnBackColor.setColor('ffffff');
this.FillItems.push(this.btnBackColor);
this.FillColorContainer = $('#slide-panel-color-fill');
@ -1064,25 +1064,25 @@ define([
this.colorsBack = this.btnBackColor.getPicker();
this.btnFGColor = new Common.UI.ColorButton({
parentEl: $('#slide-foreground-color-btn')
parentEl: $('#slide-foreground-color-btn'),
color: '000000'
});
this.btnFGColor.setColor('000000');
this.FillItems.push(this.btnFGColor);
this.colorsFG = this.btnFGColor.getPicker();
this.btnFGColor.on('color:select', _.bind(this.onColorsFGSelect, this));
this.btnBGColor = new Common.UI.ColorButton({
parentEl: $('#slide-background-color-btn')
parentEl: $('#slide-background-color-btn'),
color: 'ffffff'
});
this.btnBGColor.setColor('ffffff');
this.FillItems.push(this.btnBGColor);
this.colorsBG = this.btnBGColor.getPicker();
this.btnBGColor.on('color:select', _.bind(this.onColorsBGSelect, this));
this.btnGradColor = new Common.UI.ColorButton({
parentEl: $('#slide-gradient-color-btn')
parentEl: $('#slide-gradient-color-btn'),
color: '000000'
});
this.btnGradColor.setColor('000000');
this.FillItems.push(this.btnGradColor);
this.colorsGrad = this.btnGradColor.getPicker();
this.btnGradColor.on('color:select', _.bind(this.onColorsGradientSelect, this));

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

@ -606,9 +606,9 @@ define([
if (this._initSettings) return;
if (!this.btnBackColor) {
this.btnBorderColor = new Common.UI.ColorButton({
parentEl: $('#table-border-color-btn')
parentEl: $('#table-border-color-btn'),
color: '000000'
});
this.btnBorderColor.setColor('000000');
this.lockedControls.push(this.btnBorderColor);
this.borderColor = this.btnBorderColor.getPicker();

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

@ -1504,41 +1504,41 @@ define([
if (!this.btnBackColor) {
this.btnBackColor = new Common.UI.ColorButton({
parentEl: $('#textart-back-color-btn'),
transparent: true
transparent: true,
color: 'transparent'
});
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({
parentEl: $('#textart-foreground-color-btn')
parentEl: $('#textart-foreground-color-btn'),
color: '000000'
});
this.btnFGColor.setColor('000000');
this.lockedControls.push(this.btnFGColor);
this.colorsFG = this.btnFGColor.getPicker();
this.btnFGColor.on('color:select', _.bind(this.onColorsFGSelect, this));
this.btnBGColor = new Common.UI.ColorButton({
parentEl: $('#textart-background-color-btn')
parentEl: $('#textart-background-color-btn'),
color: 'ffffff'
});
this.btnBGColor.setColor('ffffff');
this.lockedControls.push(this.btnBGColor);
this.colorsBG = this.btnBGColor.getPicker();
this.btnBGColor.on('color:select', _.bind(this.onColorsBGSelect, this));
this.btnGradColor = new Common.UI.ColorButton({
parentEl: $('#textart-gradient-color-btn')
parentEl: $('#textart-gradient-color-btn'),
color: '000000'
});
this.btnGradColor.setColor('000000');
this.lockedControls.push(this.btnGradColor);
this.colorsGrad = this.btnGradColor.getPicker();
this.btnGradColor.on('color:select', _.bind(this.onColorsGradientSelect, this));
this.btnBorderColor = new Common.UI.ColorButton({
parentEl: $('#textart-border-color-btn')
parentEl: $('#textart-border-color-btn'),
color: '000000'
});
this.btnBorderColor.setColor('000000');
this.lockedControls.push(this.btnBorderColor);
this.colorsBorder = this.btnBorderColor.getPicker();
this.btnBorderColor.on('color:select', _.bind(this.onColorsBorderSelect, this));

20
apps/spreadsheeteditor/main/app/view/CellSettings.js
View file

@ -401,18 +401,18 @@ define([
this.btnBorderColor = new Common.UI.ColorButton({
parentEl: $('#cell-border-color-btn'),
disabled: this._locked,
menu : true
menu : true,
color: '000000'
});
this.btnBorderColor.setColor('000000');
this.lockedControls.push(this.btnBorderColor);
this.btnBackColor = new Common.UI.ColorButton({
parentEl: $('#cell-back-color-btn'),
disabled: this._locked,
menu : true,
transparent : true
transparent : true,
color: 'transparent'
});
this.btnBackColor.setColor('transparent');
this.lockedControls.push(this.btnBackColor);
this.spnAngle = new Common.UI.MetricSpinner({
@ -753,25 +753,25 @@ define([
this.fillControls.push(this.btnBackColor);
this.btnGradColor = new Common.UI.ColorButton({
parentEl: $('#cell-gradient-color-btn')
parentEl: $('#cell-gradient-color-btn'),
color: '000000'
});
this.btnGradColor.setColor('000000');
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({
parentEl: $('#cell-foreground-color-btn')
parentEl: $('#cell-foreground-color-btn'),
color: '000000'
});
this.btnFGColor.setColor('000000');
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({
parentEl: $('#cell-background-color-btn')
parentEl: $('#cell-background-color-btn'),
color: 'ffffff'
});
this.btnBGColor.setColor('ffffff');
this.fillControls.push(this.btnBGColor);
this.colorsBG = this.btnBGColor.getPicker();
this.btnBGColor.on('color:select', _.bind(this.onColorsBGSelect, this));

4
apps/spreadsheeteditor/main/app/view/ChartSettings.js
View file

@ -524,9 +524,9 @@ define([
defValue = this.defColor;
this.btnSparkColor = new Common.UI.ColorButton({
parentEl: $('#spark-color-btn')
parentEl: $('#spark-color-btn'),
color: '000000'
});
this.btnSparkColor.setColor('000000');
this.lockedControls.push(this.btnSparkColor);
this.colorsSpark = this.btnSparkColor.getPicker();
this.btnSparkColor.on('color:select', _.bind(this.onColorsSparkSelect, this));

20
apps/spreadsheeteditor/main/app/view/ShapeSettings.js
View file

@ -1587,41 +1587,41 @@ define([
if (!this.btnBackColor) {
this.btnBackColor = new Common.UI.ColorButton({
parentEl: $('#shape-back-color-btn'),
transparent: true
transparent: true,
color: 'transparent'
});
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({
parentEl: $('#shape-border-color-btn')
parentEl: $('#shape-border-color-btn'),
color: '000000'
});
this.btnBorderColor.setColor('000000');
this.lockedControls.push(this.btnBorderColor);
this.colorsBorder = this.btnBorderColor.getPicker();
this.btnBorderColor.on('color:select', _.bind(this.onColorsBorderSelect, this));
this.btnFGColor = new Common.UI.ColorButton({
parentEl: $('#shape-foreground-color-btn')
parentEl: $('#shape-foreground-color-btn'),
color: '000000'
});
this.btnFGColor.setColor('000000');
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({
parentEl: $('#shape-background-color-btn')
parentEl: $('#shape-background-color-btn'),
color: 'ffffff'
});
this.btnBGColor.setColor('ffffff');
this.fillControls.push(this.btnBGColor);
this.colorsBG = this.btnBGColor.getPicker();
this.btnBGColor.on('color:select', _.bind(this.onColorsBGSelect, this));
this.btnGradColor = new Common.UI.ColorButton({
parentEl: $('#shape-gradient-color-btn')
parentEl: $('#shape-gradient-color-btn'),
color: '000000'
});
this.btnGradColor.setColor('000000');
this.fillControls.push(this.btnGradColor);
this.colorsGrad = this.btnGradColor.getPicker();
this.btnGradColor.on('color:select', _.bind(this.onColorsGradientSelect, this));

20
apps/spreadsheeteditor/main/app/view/TextArtSettings.js
View file

@ -1508,42 +1508,42 @@ define([
if (this._initSettings) return;
if (!this.btnBackColor) {
this.btnBorderColor = new Common.UI.ColorButton({
parentEl: $('#textart-border-color-btn')
parentEl: $('#textart-border-color-btn'),
color: '000000'
});
this.btnBorderColor.setColor('000000');
this.lockedControls.push(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'),
transparent: true
transparent: true,
color: 'transparent'
});
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({
parentEl: $('#textart-foreground-color-btn')
parentEl: $('#textart-foreground-color-btn'),
color: '000000'
});
this.btnFGColor.setColor('000000');
this.lockedControls.push(this.btnFGColor);
this.colorsFG = this.btnFGColor.getPicker();
this.btnFGColor.on('color:select', _.bind(this.onColorsFGSelect, this));
this.btnBGColor = new Common.UI.ColorButton({
parentEl: $('#textart-background-color-btn')
parentEl: $('#textart-background-color-btn'),
color: 'ffffff'
});
this.btnBGColor.setColor('ffffff');
this.lockedControls.push(this.btnBGColor);
this.colorsBG = this.btnBGColor.getPicker();
this.btnBGColor.on('color:select', _.bind(this.onColorsBGSelect, this));
this.btnGradColor = new Common.UI.ColorButton({
parentEl: $('#textart-gradient-color-btn')
parentEl: $('#textart-gradient-color-btn'),
color: '000000'
});
this.btnGradColor.setColor('000000');
this.lockedControls.push(this.btnGradColor);
this.colorsGrad = this.btnGradColor.getPicker();
this.btnGradColor.on('color:select', _.bind(this.onColorsGradientSelect, this));