[SSE] Refactoring color button component

apps/spreadsheeteditor/main/app/view/CellSettings.js

@@ -99,9 +99,7 @@ define([
             this.FillGradientContainer = $('#cell-panel-gradient-fill');
         },
 
-        onColorsBackSelect: function(picker, color) {
+        onColorsBackSelect: function(btn, color) {
-            this.btnBackColor.setColor(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({
+                 this.btnBorderColor.setMenu();
-                     items: [
+                 this.borderColor = this.btnBorderColor.getPicker();
-                         { 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.btnBackColor.setMenu( new Common.UI.Menu({
+                 this.btnBackColor.setMenu();
-                     items: [
+                 this.btnBackColor.on('color:select', _.bind(this.onColorsBackSelect, this));
-                         { template: _.template('<div id="cell-back-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
+                 this.colorsBack = this.btnBackColor.getPicker();
-                         { 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.fillControls.push(this.btnBackColor);
 
                  this.btnGradColor = new Common.UI.ColorButton({
-                     style: "width:45px;",
+                     parentEl: $('#cell-gradient-color-btn'),
-                     menu        : new Common.UI.Menu({
+                     style: "width:45px;"
-                         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>') }
-                         ]
-                     })
                  });
-                 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;",
+                     parentEl: $('#cell-foreground-color-btn'),
-                     menu        : new Common.UI.Menu({
+                     style: "width:45px;"
-                         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>') }
-                         ]
-                     })
                  });
-                 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;",
+                     parentEl: $('#cell-background-color-btn'),
-                     menu        : new Common.UI.Menu({
+                     style: "width:45px;"
-                         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>') }
-                         ]
-                     })
                  });
-                 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) {
+        onColorsFGSelect: function(btn, color) {
-            this.btnFGColor.setColor(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) {
+        onColorsBGSelect: function(btn, color) {
-            this.btnBGColor.setColor(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',

apps/spreadsheeteditor/main/app/view/ChartSettings.js

@@ -524,113 +524,67 @@ define([
                 defValue = this.defColor;
 
                 this.btnSparkColor = new Common.UI.ColorButton({
-                    style: "width:45px;",
+                    parentEl: $('#spark-color-btn'),
-                    menu        : new Common.UI.Menu({
+                    style: "width:45px;"
-                        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>') }
-                        ]
-                    })
                 });
-                this.btnSparkColor.render( $('#spark-color-btn'));
                 this.btnSparkColor.setColor('000000');
                 this.lockedControls.push(this.btnSparkColor);
-                this.colorsSpark = new Common.UI.ThemeColorPalette({
+                this.colorsSpark = this.btnSparkColor.getPicker();
-                    el: $('#spark-color-menu'),
+                this.btnSparkColor.on('color:select', _.bind(this.onColorsSparkSelect, this));
-                    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.btnHighColor = new Common.UI.ColorButton({
-                    style: "width:45px;",
+                    parentEl: $('#spark-high-color-btn'),
-                    menu        : new Common.UI.Menu({
+                    style: "width:45px;"
-                        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'));
                 this.btnHighColor.setColor(this.defColor.color);
                 this.lockedControls.push(this.btnHighColor);
-                this.colorsHigh = new Common.UI.ThemeColorPalette({ el: $('#spark-high-color-menu') });
+                this.colorsHigh = this.btnHighColor.getPicker();
-                this.colorsHigh.on('select', _.bind(this.onColorsPointSelect, this, 0, this.btnHighColor));
+                this.btnHighColor.on('color:select', _.bind(this.onColorsPointSelect, this, 0));
-                this.btnHighColor.menu.items[1].on('click',  _.bind(this.addNewColor, this, this.colorsHigh, this.btnHighColor));
 
                 this.btnLowColor = new Common.UI.ColorButton({
-                    style: "width:45px;",
+                    parentEl: $('#spark-low-color-btn'),
-                    menu        : new Common.UI.Menu({
+                    style: "width:45px;"
-                        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'));
                 this.btnLowColor.setColor(this.defColor.color);
                 this.lockedControls.push(this.btnLowColor);
-                this.colorsLow = new Common.UI.ThemeColorPalette({ el: $('#spark-low-color-menu') });
+                this.colorsLow = this.btnLowColor.getPicker();
-                this.colorsLow.on('select', _.bind(this.onColorsPointSelect, this, 1, this.btnLowColor));
+                this.btnLowColor.on('color:select', _.bind(this.onColorsPointSelect, this, 1));
-                this.btnLowColor.menu.items[1].on('click',  _.bind(this.addNewColor, this, this.colorsLow, this.btnLowColor));
 
                 this.btnNegativeColor = new Common.UI.ColorButton({
-                    style: "width:45px;",
+                    parentEl: $('#spark-negative-color-btn'),
-                    menu        : new Common.UI.Menu({
+                    style: "width:45px;"
-                        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'));
                 this.btnNegativeColor.setColor(this.defColor.color);
                 this.lockedControls.push(this.btnNegativeColor);
-                this.colorsNegative = new Common.UI.ThemeColorPalette({ el: $('#spark-negative-color-menu') });
+                this.colorsNegative = this.btnNegativeColor.getPicker();
-                this.colorsNegative.on('select', _.bind(this.onColorsPointSelect, this, 2, this.btnNegativeColor));
+                this.btnNegativeColor.on('color:select', _.bind(this.onColorsPointSelect, this, 2));
-                this.btnNegativeColor.menu.items[1].on('click',  _.bind(this.addNewColor, this, this.colorsNegative, this.btnNegativeColor));
 
                 this.btnFirstColor = new Common.UI.ColorButton({
-                    style: "width:45px;",
+                    parentEl: $('#spark-first-color-btn'),
-                    menu        : new Common.UI.Menu({
+                    style: "width:45px;"
-                        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'));
                 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;",
+                    parentEl: $('#spark-last-color-btn'),
-                    menu        : new Common.UI.Menu({
+                    style: "width:45px;"
-                        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'));
                 this.btnLastColor.setColor(this.defColor.color);
                 this.lockedControls.push(this.btnLastColor);
-                this.colorsLast = new Common.UI.ThemeColorPalette({ el: $('#spark-last-color-menu') });
+                this.colorsLast = this.btnLastColor.getPicker();
-                this.colorsLast.on('select', _.bind(this.onColorsPointSelect, this, 4, this.btnLastColor));
+                this.btnLastColor.on('color:select', _.bind(this.onColorsPointSelect, this, 4));
-                this.btnLastColor.menu.items[1].on('click',  _.bind(this.addNewColor, this, this.colorsLast, this.btnLastColor));
 
                 this.btnMarkersColor = new Common.UI.ColorButton({
-                    style: "width:45px;",
+                    parentEl: $('#spark-markers-color-btn'),
-                    menu        : new Common.UI.Menu({
+                    style: "width:45px;"
-                        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'));
                 this.btnMarkersColor.setColor(this.defColor.color);
                 this.lockedControls.push(this.btnMarkersColor);
-                this.colorsMarkers = new Common.UI.ThemeColorPalette({ el: $('#spark-markers-color-menu') });
+                this.colorsMarkers = this.btnMarkersColor.getPicker();
-                this.colorsMarkers.on('select', _.bind(this.onColorsPointSelect, this, 5, this.btnMarkersColor));
+                this.btnMarkersColor.on('color:select', _.bind(this.onColorsPointSelect, this, 5));
-                this.btnMarkersColor.menu.items[1].on('click',  _.bind(this.addNewColor, this, this.colorsMarkers, this.btnMarkersColor));
             }
             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) {
+        onColorsSparkSelect: function(btn, color) {
-            this.btnSparkColor.setColor(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) {
+        onColorsPointSelect: function(type, btn, color) {
-            btn.setColor(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',

apps/spreadsheeteditor/main/app/view/ShapeSettings.js

@@ -244,8 +244,7 @@ define([
             Common.NotificationCenter.trigger('edit:complete', this);
         },
 
-        onColorsBackSelect: function(picker, color) {
+        onColorsBackSelect: function(btn, color) {
-            this.btnBackColor.setColor(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) {
+        onColorsFGSelect: function(btn, color) {
-            this.btnFGColor.setColor(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) {
+        onColorsBGSelect: function(btn, color) {
-            this.btnBGColor.setColor(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) {
+        onColorsGradientSelect: function(btn, color) {
-            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));
 
@@ -637,8 +629,7 @@ define([
             Common.NotificationCenter.trigger('edit:complete', this);
         },
 
-        onColorsBorderSelect: function(picker, color) {
+        onColorsBorderSelect: function(btn, color) {
-            this.btnBorderColor.setColor(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.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.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.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.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.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({
-                    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.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({
-                    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.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.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',

apps/spreadsheeteditor/main/app/view/TextArtSettings.js

@@ -239,8 +239,7 @@ define([
             Common.NotificationCenter.trigger('edit:complete', this);
         },
 
-        onColorsBackSelect: function(picker, color) {
+        onColorsBackSelect: function(btn, color) {
-            this.btnBackColor.setColor(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) {
+        onColorsFGSelect: function(btn, color) {
-            this.btnFGColor.setColor(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) {
+        onColorsBGSelect: function(btn, color) {
-            this.btnBGColor.setColor(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) {
+        onColorsGradientSelect: function(btn, color) {
-            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));
 
@@ -633,8 +625,7 @@ define([
             Common.NotificationCenter.trigger('edit:complete', this);
         },
 
-        onColorsBorderSelect: function(picker, color) {
+        onColorsBorderSelect: function(btn, color) {
-            this.btnBorderColor.setColor(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;",
+                    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.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.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.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({
-                    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.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({
-                    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.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({
-                    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.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.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',