From 103c2693fe0f39f99bd2f1ced98891ebc9beaf5d Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Tue, 28 Apr 2020 18:10:49 +0300
Subject: [PATCH 1/8] [Common] Change ColorButton component

---
 apps/common/main/lib/component/ColorButton.js | 16 +++-------
 apps/common/main/resources/less/buttons.less  | 29 +++++++++++++++----
 2 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/apps/common/main/lib/component/ColorButton.js b/apps/common/main/lib/component/ColorButton.js
index da3e9cb64..da2cd4624 100644
--- a/apps/common/main/lib/component/ColorButton.js
+++ b/apps/common/main/lib/component/ColorButton.js
@@ -49,25 +49,17 @@ define([
             '<div class="btn-group" id="<%= id %>">',
                 '<button type="button" class="btn btn-color dropdown-toggle <%= cls %>" data-toggle="dropdown" style="<%= style %>">',
                     '<span>&nbsp;</span>',
+                    '<span class="inner-box-caret"><i class="caret img-commonctrl"></i></span>',
                 '</button>',
             '</div>'
         ].join('')),
 
         setColor: function(color) {
-            var border_color, clr,
-                span = $(this.cmpEl).find('button span');
+            var span = $(this.cmpEl).find('button span:nth-child(1)');
             this.color = color;
 
-            if ( color== 'transparent' ) {
-                border_color = '#BEBEBE';
-                clr = color;
-                span.addClass('color-transparent');
-            } else {
-                border_color = 'transparent';
-                clr = (typeof(color) == 'object') ? '#'+color.color : '#'+color;
-                span.removeClass('color-transparent');
-            }
-            span.css({'background-color': clr, 'border-color': border_color});
+            span.toggleClass('color-transparent', color=='transparent');
+            span.css({'background-color': (color=='transparent') ? color : ((typeof(color) == 'object') ? '#'+color.color : '#'+color)});
         }
     });
 });
\ No newline at end of file
diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less
index 213acbb00..8c9101fec 100644
--- a/apps/common/main/resources/less/buttons.less
+++ b/apps/common/main/resources/less/buttons.less
@@ -544,16 +544,25 @@
 }
 
 .btn-color {
-    padding: 2px;
+    height: 22px;
+    padding: 1px 11px 1px 1px;
     border:1px solid @input-border;
     .border-radius(@border-radius-small);
 
-    span {
-        display:block;
-        border:1px solid @input-border;
+    span:nth-child(1) {
+        float: left;
+        width: 100%;
+        height: 100%;
+        border: 1px solid rgba(0, 0, 0, 0.2);
         background-color: transparent;
     }
 
+    .inner-box-caret {
+        position: absolute;
+        right: 0;
+        top: 2px;
+    }
+
     &,
     &:hover,
     .over,
@@ -570,11 +579,19 @@
 
     .color-transparent {
         &:before {
-            height: 40px;
-            transform: translate(20px, -12px) rotate(69deg);
+            border-right: 1px solid red;
+            height: 34px;
+            transform: translate(16px, -9px) rotate(62deg);
             left: 0;
         }
     }
+
+    &:active:not(.disabled),
+    &.active:not(.disabled) {
+        .caret {
+            background-position: @arrow-small-offset-x @arrow-small-offset-y;
+        }
+    }
 }
 
 .btn-options {

From 44e25e39eaa335e49dad2427d51f8e266b9dc190 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Wed, 29 Apr 2020 17:37:59 +0300
Subject: [PATCH 2/8] [DE] Refactoring color button component

---
 apps/common/main/lib/component/ColorButton.js |  69 ++++++++++-
 .../main/app/view/ControlSettingsDialog.js    |  40 ++-----
 .../main/app/view/DropcapSettingsAdvanced.js  |  85 ++++---------
 .../main/app/view/ListSettingsDialog.js       |  54 +++------
 .../main/app/view/ParagraphSettings.js        |  28 ++---
 .../app/view/ParagraphSettingsAdvanced.js     |  53 ++------
 .../main/app/view/ShapeSettings.js            | 113 +++++-------------
 .../main/app/view/TableSettings.js            |  45 ++-----
 .../main/app/view/TableSettingsAdvanced.js    |  78 +++---------
 .../main/app/view/TextArtSettings.js          |  70 +++--------
 apps/documenteditor/main/locale/en.json       |   1 +
 apps/documenteditor/main/locale/ru.json       |   1 +
 12 files changed, 208 insertions(+), 429 deletions(-)

diff --git a/apps/common/main/lib/component/ColorButton.js b/apps/common/main/lib/component/ColorButton.js
index da2cd4624..44d71408c 100644
--- a/apps/common/main/lib/component/ColorButton.js
+++ b/apps/common/main/lib/component/ColorButton.js
@@ -34,11 +34,12 @@ if (Common === undefined)
     var Common = {};
 
 define([
-    'common/main/lib/component/Button'
+    'common/main/lib/component/Button',
+    'common/main/lib/component/ThemeColorPalette'
 ], function () {
     'use strict';
 
-    Common.UI.ColorButton = Common.UI.Button.extend({
+    Common.UI.ColorButton = Common.UI.Button.extend(_.extend({
         options : {
             hint: false,
             enableToggle: false,
@@ -54,12 +55,72 @@ define([
             '</div>'
         ].join('')),
 
+        initialize : function(options) {
+            if (!options.menu && options.menu !== false) {// menu==null or undefined
+                // set default menu
+                var me = this;
+                options.menu = me.getMenu(options);
+                me.on('render:after', function(btn) {
+                    me.getPicker();
+                });
+            }
+
+            Common.UI.Button.prototype.initialize.call(this, options);
+        },
+
+        onColorSelect: function(picker, color) {
+            this.setColor(color);
+            this.trigger('color:select', this, color);
+        },
+
         setColor: function(color) {
             var span = $(this.cmpEl).find('button span:nth-child(1)');
             this.color = color;
 
             span.toggleClass('color-transparent', color=='transparent');
             span.css({'background-color': (color=='transparent') ? color : ((typeof(color) == 'object') ? '#'+color.color : '#'+color)});
-        }
-    });
+        },
+
+        getPicker: function() {
+            if (!this.colorPicker) {
+                this.colorPicker = new Common.UI.ThemeColorPalette({
+                    el: this.cmpEl.find('#' + this.menu.id + '-color-menu'),
+                    transparent: this.options.transparent
+                });
+                this.colorPicker.on('select', _.bind(this.onColorSelect, this));
+                this.cmpEl.find('#' + this.menu.id + '-color-new').on('click', _.bind(this.addNewColor, this));
+            }
+            return this.colorPicker;
+        },
+
+        getMenu: function(options) {
+            if (typeof this.menu !== 'object') {
+                options = options || this.options;
+                var id = Common.UI.getId(),
+                    menu = new Common.UI.Menu({
+                    id: id,
+                    additionalAlign: options.additionalAlign,
+                    items: (options.additionalItems ? options.additionalItems : []).concat([
+                        { template: _.template('<div id="' + id + '-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
+                        { template: _.template('<a id="' + id + '-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
+                    ])
+                });
+                return menu;
+            }
+            return this.menu;
+        },
+
+        setMenu: function (m) {
+            m = m || this.getMenu();
+            Common.UI.Button.prototype.setMenu.call(this, m);
+            this.getPicker();
+        },
+
+        addNewColor: function() {
+            this.colorPicker && this.colorPicker.addNewColor((typeof(this.color) == 'object') ? this.color.color : this.color);
+        },
+
+        textNewColor: 'Add New Custom Color'
+
+    }, Common.UI.ColorButton || {}));
 });
\ No newline at end of file
diff --git a/apps/documenteditor/main/app/view/ControlSettingsDialog.js b/apps/documenteditor/main/app/view/ControlSettingsDialog.js
index 295763422..d736fc090 100644
--- a/apps/documenteditor/main/app/view/ControlSettingsDialog.js
+++ b/apps/documenteditor/main/app/view/ControlSettingsDialog.js
@@ -126,31 +126,19 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
             this.cmbShow.setValue(Asc.c_oAscSdtAppearance.Frame);
 
             this.btnColor = new Common.UI.ColorButton({
+                parentEl: $('#control-settings-color-btn'),
                 style: "width:45px;",
-                menu        : new Common.UI.Menu({
-                    additionalAlign: this.menuAddAlign,
-                    items: [
-                        {
-                            id: 'control-settings-system-color',
-                            caption: this.textSystemColor,
-                            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: '--'},
-                        { template: _.template('<div id="control-settings-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
-                        { template: _.template('<a id="control-settings-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
-                    ]
-                })
+                additionalItems: [{
+                        id: 'control-settings-system-color',
+                        caption: this.textSystemColor,
+                        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
             });
-
-            this.btnColor.on('render:after', function(btn) {
-                me.colors = new Common.UI.ThemeColorPalette({
-                    el: $('#control-settings-color-menu')
-                });
-                me.colors.on('select', _.bind(me.onColorsSelect, me));
-            });
-            this.btnColor.render( $('#control-settings-color-btn'));
             this.btnColor.setColor('000000');
-            this.btnColor.menu.items[3].on('click',  _.bind(this.addNewColor, this, this.colors, this.btnColor));
+            this.btnColor.on('color:select', _.bind(this.onColorsSelect, this));
+            this.colors = this.btnColor.getPicker();
             $('#control-settings-system-color').on('click', _.bind(this.onSystemColor, this));
 
             this.btnApplyAll = new Common.UI.Button({
@@ -264,8 +252,7 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
             this.afterRender();
         },
 
-        onColorsSelect: function(picker, color) {
-            this.btnColor.setColor(color);
+        onColorsSelect: function(btn, color) {
             var clr_item = this.btnColor.menu.$el.find('#control-settings-system-color > a');
             clr_item.hasClass('selected') && clr_item.removeClass('selected');
             this.isSystemColor = false;
@@ -275,10 +262,6 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
             this.colors.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
         },
 
-        addNewColor: function(picker, btn) {
-            picker.addNewColor((typeof(btn.color) == 'object') ? btn.color.color : btn.color);
-        },
-
         onSystemColor: function(e) {
             var color = Common.Utils.ThemeColor.getHexColor(220, 220, 220);
             this.btnColor.setColor(color);
@@ -634,7 +617,6 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
         textColor: 'Color',
         textBox: 'Bounding box',
         textNone: 'None',
-        textNewColor: 'Add New Custom Color',
         textApplyAll: 'Apply to All',
         textAppearance: 'Appearance',
         textSystemColor: 'System',
diff --git a/apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js b/apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js
index a7a38058a..d491afb40 100644
--- a/apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js
+++ b/apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js
@@ -160,73 +160,41 @@ define([
             this.BorderSize = {ptValue: rec.get('value'), pxValue: rec.get('pxValue')};
 
             this.btnBorderColor = new Common.UI.ColorButton({
+                parentEl: $('#drop-advanced-button-bordercolor'),
                 style: "width:45px;",
-                menu        : new Common.UI.Menu({
-                    additionalAlign: this.menuAddAlign,
-                    items: [
-                        { template: _.template('<div id="drop-advanced-border-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
-                        { template: _.template('<a id="drop-advanced-border-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
-                    ]
-                })
+                additionalAlign: this.menuAddAlign
             });
-
-            this.btnBorderColor.on('render:after', function(btn) {
-                me.colorsBorder = new Common.UI.ThemeColorPalette({
-                    el: $('#drop-advanced-border-color-menu')
-                })
-                .on('select', _.bind(function(picker, color) {
-                    me.btnBorderColor.setColor(color);
-                    me.tableStyler.setVirtualBorderColor((typeof(color) == 'object') ? color.color : color);
-                }, me));
-            });
-            this.btnBorderColor.render( $('#drop-advanced-button-bordercolor'));
+            this.btnBorderColor.on('color:select', _.bind(function(btn, color) {
+                this.tableStyler.setVirtualBorderColor((typeof(color) == 'object') ? color.color : color);
+            }, this));
             this.btnBorderColor.setColor('000000');
-            this.btnBorderColor.menu.cmpEl.on('click', '#drop-advanced-border-color-new', _.bind(function() {
-                me.colorsBorder.addNewColor((typeof(me.btnBorderColor.color) == 'object') ? me.btnBorderColor.color.color : me.btnBorderColor.color);
-            }, me));
+            this.colorsBorder = this.btnBorderColor.getPicker();
 
             this.btnBackColor = new Common.UI.ColorButton({
+                parentEl: $('#drop-advanced-button-color'),
                 style: "width:45px;",
-                menu        : new Common.UI.Menu({
-                    additionalAlign: this.menuAddAlign,
-                    items: [
-                        { template: _.template('<div id="drop-advanced-back-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
-                        { template: _.template('<a id="drop-advanced-back-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
-                    ]
-                })
+                additionalAlign: this.menuAddAlign,
+                transparent: true
             });
+            this.btnBackColor.on('color:select', _.bind(function(btn, color) {
+                var clr, border;
+                me.paragraphShade = color;
 
-            this.btnBackColor.on('render:after', function(btn) {
-                me.colorsBack = new Common.UI.ThemeColorPalette({
-                    el: $('#drop-advanced-back-color-menu'),
-                    transparent: true
-                })
-                .on('select', _.bind(function(picker, color) {
-                    var clr, border;
-
-                    me.btnBackColor.setColor(color);
-
-                    me.paragraphShade = color;
-
-                    if (me._changedProps) {
-                        if (me._changedProps.get_Shade()===undefined || me._changedProps.get_Shade()===null) {
-                            me._changedProps.put_Shade(new Asc.asc_CParagraphShd());
-                        }
-                        if (color=='transparent') {
-                            me._changedProps.get_Shade().put_Value(Asc.c_oAscShdNil);
-                        } else {
-                            me._changedProps.get_Shade().put_Value(Asc.c_oAscShdClear);
-                            me._changedProps.get_Shade().put_Color(Common.Utils.ThemeColor.getRgbColor(color));
-                        }
+                if (me._changedProps) {
+                    if (me._changedProps.get_Shade()===undefined || me._changedProps.get_Shade()===null) {
+                        me._changedProps.put_Shade(new Asc.asc_CParagraphShd());
                     }
-                    var colorstr = (typeof(color) == 'object') ? color.color : color;
-                    me.tableStyler.setCellsColor(colorstr);
-                }, me));
-            });
-            this.btnBackColor.render( $('#drop-advanced-button-color'));
-            this.btnBackColor.menu.cmpEl.on('click', '#drop-advanced-back-color-new', _.bind(function() {
-                me.colorsBack.addNewColor();
-            }, me));
+                    if (color=='transparent') {
+                        me._changedProps.get_Shade().put_Value(Asc.c_oAscShdNil);
+                    } else {
+                        me._changedProps.get_Shade().put_Value(Asc.c_oAscShdClear);
+                        me._changedProps.get_Shade().put_Color(Common.Utils.ThemeColor.getRgbColor(color));
+                    }
+                }
+                var colorstr = (typeof(color) == 'object') ? color.color : color;
+                me.tableStyler.setCellsColor(colorstr);
+            }, this));
+            this.colorsBack = this.btnBackColor.getPicker();
 
             this.spnMarginTop = new Common.UI.MetricSpinner({
                 el          : $('#drop-advanced-input-top'),
@@ -1163,7 +1131,6 @@ define([
         textBackColor:          'Background Color',
         textBorderDesc:         'Click on diagramm or use buttons to select borders',
         txtNoBorders:           'No borders',
-        textNewColor:           'Add New Custom Color',
         textPosition: 'Position',
         textAlign: 'Alignment',
         textTop:            'Top',
diff --git a/apps/documenteditor/main/app/view/ListSettingsDialog.js b/apps/documenteditor/main/app/view/ListSettingsDialog.js
index 5ec2260a6..31a9abb4a 100644
--- a/apps/documenteditor/main/app/view/ListSettingsDialog.js
+++ b/apps/documenteditor/main/app/view/ListSettingsDialog.js
@@ -155,39 +155,27 @@ define([
             $window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
 
             this.btnColor = new Common.UI.ColorButton({
+                parentEl: $window.find('#id-dlg-bullet-color'),
                 style: 'width:45px;',
-                menu        : new Common.UI.Menu({
-                    additionalAlign: this.menuAddAlign,
-                    items: [
-                        {
-                            id: 'id-dlg-bullet-text-color',
-                            caption: this.txtLikeText,
-                            checkable: true,
-                            toggleGroup: 'list-settings-color'
-                        },
-                        {
-                            id: 'id-dlg-bullet-auto-color',
-                            caption: this.textAuto,
-                            checkable: true,
-                            toggleGroup: 'list-settings-color'
-                        },
-                        {caption: '--'},
-                        { template: _.template('<div id="id-dlg-bullet-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
-                        { template: _.template('<a id="id-dlg-bullet-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
-                    ]
-                })
+                additionalItems: [{
+                        id: 'id-dlg-bullet-text-color',
+                        caption: this.txtLikeText,
+                        checkable: true,
+                        toggleGroup: 'list-settings-color'
+                    },
+                    {
+                        id: 'id-dlg-bullet-auto-color',
+                        caption: this.textAuto,
+                        checkable: true,
+                        toggleGroup: 'list-settings-color'
+                    },
+                    {caption: '--'}],
+                additionalAlign: this.menuAddAlign
             });
-            this.btnColor.on('render:after', function(btn) {
-                me.colors = new Common.UI.ThemeColorPalette({
-                    el: $window.find('#id-dlg-bullet-color-menu'),
-                    transparent: false
-                });
-                me.colors.on('select', _.bind(me.onColorsSelect, me));
-            });
-            this.btnColor.render($window.find('#id-dlg-bullet-color'));
-            $window.find('#id-dlg-bullet-color-new').on('click', _.bind(this.addNewColor, this, this.colors));
+            this.btnColor.on('color:select', _.bind(this.onColorsSelect, this));
             this.btnColor.menu.items[0].on('toggle', _.bind(this.onLikeTextColor, this));
             this.btnColor.menu.items[1].on('toggle', _.bind(this.onAutoColor, this));
+            this.colors = this.btnColor.getPicker();
 
             this.btnEdit = new Common.UI.Button({
                 el: $window.find('#id-dlg-bullet-font')
@@ -363,10 +351,6 @@ define([
             this.colors.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
         },
 
-        addNewColor: function(picker, btn) {
-            picker.addNewColor((typeof(btn.color) == 'object') ? btn.color.color : btn.color);
-        },
-
         onAutoColor: function(item, state) {
             if (!!state) {
                 var color = Common.Utils.ThemeColor.getHexColor(0, 0, 0);
@@ -399,8 +383,7 @@ define([
             }
         },
 
-        onColorsSelect: function(picker, color) {
-            this.btnColor.setColor(color);
+        onColorsSelect: function(btn, color) {
             if (this._changedProps) {
                 if (!this._changedProps.get_TextPr()) this._changedProps.put_TextPr(new AscCommonWord.CTextPr());
                 this._changedProps.get_TextPr().put_Color(Common.Utils.ThemeColor.getRgbColor(color));
@@ -564,7 +547,6 @@ define([
         txtTitle: 'List Settings',
         txtSize: 'Size',
         txtColor: 'Color',
-        textNewColor: 'Add New Custom Color',
         txtBullet: 'Bullet',
         txtFont: 'Font and Symbol',
         txtAlign: 'Alignment',
diff --git a/apps/documenteditor/main/app/view/ParagraphSettings.js b/apps/documenteditor/main/app/view/ParagraphSettings.js
index c683aa42f..a091d4dce 100644
--- a/apps/documenteditor/main/app/view/ParagraphSettings.js
+++ b/apps/documenteditor/main/app/view/ParagraphSettings.js
@@ -162,11 +162,12 @@ define([
             this.lockedControls.push(this.chAddInterval);
 
             this.btnColor = new Common.UI.ColorButton({
+                parentEl: $markup.findById('#paragraph-color-btn'),
                 style: "width:45px;",
                 disabled: this._locked,
+                transparent: true,
                 menu        : true
             });
-            this.btnColor.render($markup.findById('#paragraph-color-btn'));
             this.lockedControls.push(this.btnColor);
 
             this.numLineHeight.on('change', this.onNumLineHeightChange.bind(this));
@@ -178,6 +179,7 @@ define([
             this.chAddInterval.on('change', this.onAddIntervalChange.bind(this));
             this.cmbLineRule.on('selected', this.onLineRuleSelect.bind(this));
             this.cmbLineRule.on('hide:after', this.onHideMenus.bind(this));
+            this.btnColor.on('color:select', this.onColorPickerSelect.bind(this));
 
             this.linkAdvanced = $markup.findById('#paragraph-advanced-link');
             this.linkAdvanced.toggleClass('disabled', this._locked);
@@ -264,8 +266,7 @@ define([
             }
         },
 
-        onColorPickerSelect: function(picker, color) {
-            this.btnColor.setColor(color);
+        onColorPickerSelect: function(btn, color) {
             this.BackColor = color;
             this._state.BackColor = this.BackColor;
 
@@ -441,24 +442,10 @@ define([
             }
         },
 
-        addNewColor: function() {
-            this.mnuColorPicker.addNewColor((typeof(this.btnColor.color) == 'object') ? this.btnColor.color.color : this.btnColor.color);
-        },
-
         UpdateThemeColors: function() {
             if (!this.mnuColorPicker) {
-                this.btnColor.setMenu( new Common.UI.Menu({
-                    items: [
-                        { template: _.template('<div id="paragraph-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
-                        { template: _.template('<a id="paragraph-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
-                    ]
-                }));
-                this.mnuColorPicker = new Common.UI.ThemeColorPalette({
-                    el: $('#paragraph-color-menu'),
-                    transparent: true
-                });
-                this.mnuColorPicker.on('select', _.bind(this.onColorPickerSelect, this));
-                this.btnColor.menu.items[1].on('click',  _.bind(this.addNewColor, this));
+                this.btnColor.setMenu();
+                this.mnuColorPicker = this.btnColor.getPicker();
             }
             this.mnuColorPicker.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
         },
@@ -499,7 +486,6 @@ define([
         textAdvanced:           'Show advanced settings',
         textAt:                 'At',
         txtAutoText:            'Auto',
-        textBackColor:          'Background color',
-        textNewColor:           'Add New Custom Color'
+        textBackColor:          'Background color'
     }, DE.Views.ParagraphSettings || {}));
 });
\ No newline at end of file
diff --git a/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js b/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js
index f53a0ec94..8aa549ca7 100644
--- a/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js
+++ b/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js
@@ -358,25 +358,13 @@ define([    'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
             this.cmbBorderSize.on('selected', _.bind(this.onBorderSizeSelect, this));
 
             this.btnBorderColor = new Common.UI.ColorButton({
+                parentEl: $('#paragraphadv-border-color-btn'),
                 style: "width:45px;",
-                menu        : new Common.UI.Menu({
-                    additionalAlign: this.menuAddAlign,
-                    items: [
-                        { template: _.template('<div id="paragraphadv-border-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
-                        { template: _.template('<a id="paragraphadv-border-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
-                    ]
-                })
+                additionalAlign: this.menuAddAlign
             });
-
-            this.btnBorderColor.on('render:after', function(btn) {
-                me.colorsBorder = new Common.UI.ThemeColorPalette({
-                    el: $('#paragraphadv-border-color-menu')
-                });
-                me.colorsBorder.on('select', _.bind(me.onColorsBorderSelect, me));
-            });
-            this.btnBorderColor.render( $('#paragraphadv-border-color-btn'));
+            this.colorsBorder = this.btnBorderColor.getPicker();
+            this.btnBorderColor.on('color:select', _.bind(this.onColorsBorderSelect, this));
             this.btnBorderColor.setColor('000000');
-            $('#paragraphadv-border-color-new').on('click', _.bind(this.addNewColor, this, this.colorsBorder, this.btnBorderColor));
 
             this.BordersImage = new Common.UI.TableStyler({
                 el: $('#id-deparagraphstyler'),
@@ -413,25 +401,13 @@ define([    'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
             }, this);
 
             this.btnBackColor = new Common.UI.ColorButton({
+                parentEl: $('#paragraphadv-back-color-btn'),
                 style: "width:45px;",
-                menu        : new Common.UI.Menu({
-                    additionalAlign: this.menuAddAlign,
-                    items: [
-                        { template: _.template('<div id="paragraphadv-back-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
-                        { template: _.template('<a id="paragraphadv-back-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
-                    ]
-                })
+                transparent: true,
+                additionalAlign: this.menuAddAlign
             });
-
-            this.btnBackColor.on('render:after', function(btn) {
-                me.colorsBack = new Common.UI.ThemeColorPalette({
-                    el: $('#paragraphadv-back-color-menu'),
-                    transparent: true
-                });
-                me.colorsBack.on('select', _.bind(me.onColorsBackSelect, me));
-            });
-            this.btnBackColor.render( $('#paragraphadv-back-color-btn'));
-            $('#paragraphadv-back-color-new').on('click', _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor));
+            this.colorsBack = this.btnBackColor.getPicker();
+            this.btnBackColor.on('color:select', _.bind(this.onColorsBackSelect, this));
 
             // Font
 
@@ -1094,17 +1070,11 @@ define([    'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
             this.BordersImage.setVirtualBorderSize( this.BorderSize.pxValue );
         },
 
-        addNewColor: function(picker, btn) {
-            picker.addNewColor((typeof(btn.color) == 'object') ? btn.color.color : btn.color);
-        },
-
-        onColorsBorderSelect: function(picker, color) {
-            this.btnBorderColor.setColor(color);
+        onColorsBorderSelect: function(btn, color) {
             this.BordersImage.setVirtualBorderColor((typeof(color) == 'object') ? color.color : color);
         },
 
-        onColorsBackSelect: function(picker, color) {
-            this.btnBackColor.setColor(color);
+        onColorsBackSelect: function(btn, color) {
             this.paragraphShade = color;
 
             if (this._changedProps) {
@@ -1447,7 +1417,6 @@ define([    'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
         textBackColor:          'Background Color',
         textBorderDesc:         'Click on diagramm or use buttons to select borders',
         txtNoBorders:           'No borders',
-        textNewColor:           'Add New Custom Color',
         textEffects: 'Effects',
         textCharacterSpacing: 'Character Spacing',
         textSpacing: 'Spacing',
diff --git a/apps/documenteditor/main/app/view/ShapeSettings.js b/apps/documenteditor/main/app/view/ShapeSettings.js
index bc5488a8f..2a69356d5 100644
--- a/apps/documenteditor/main/app/view/ShapeSettings.js
+++ b/apps/documenteditor/main/app/view/ShapeSettings.js
@@ -248,8 +248,7 @@ define([
             this.fireEvent('editcomplete', this);
         },
 
-        onColorsBackSelect: function(picker, color) {
-            this.btnBackColor.setColor(color);
+        onColorsBackSelect: function(btn, color) {
             this.ShapeColor = {Value: 1, Color: color};
 
             if (this.api && !this._noApply) {
@@ -272,10 +271,6 @@ define([
             this.fireEvent('editcomplete', this);
         },
 
-        addNewColor: function(picker, btn) {
-            picker.addNewColor((typeof(btn.color) == 'object') ? btn.color.color : btn.color);
-        },
-
         onPatternSelect: function(combo, record){
             if (this.api && !this._noApply) {
                 this.PatternFillType = record.get('type');
@@ -295,8 +290,7 @@ define([
             this.fireEvent('editcomplete', this);
         },
 
-        onColorsFGSelect: function(picker, color) {
-            this.btnFGColor.setColor(color);
+        onColorsFGSelect: function(btn, color) {
             this.FGColor = {Value: 1, Color: color};
             if (this.api && !this._noApply) {
                 var props = new Asc.asc_CShapeProperty();
@@ -315,8 +309,7 @@ define([
             this.fireEvent('editcomplete', this);
         },
 
-        onColorsBGSelect: function(picker, color) {
-            this.btnBGColor.setColor(color);
+        onColorsBGSelect: function(btn, color) {
             this.BGColor = {Value: 1, Color: color};
             if (this.api && !this._noApply) {
                 var props = new Asc.asc_CShapeProperty();
@@ -479,8 +472,7 @@ define([
             this.fireEvent('editcomplete', this);
         },
 
-        onColorsGradientSelect: function(picker, color) {
-            this.btnGradColor.setColor(color);
+        onColorsGradientSelect: function(btn, color) {
             this.GradColor.colors[this.GradColor.currentIdx] = color;
             this.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(color) == 'object') ? color.color : color));
 
@@ -641,8 +633,7 @@ define([
             this.fireEvent('editcomplete', this);
         },
 
-        onColorsBorderSelect: function(picker, color) {
-            this.btnBorderColor.setColor(color);
+        onColorsBorderSelect: function(btn, color) {
             this.BorderColor = {Value: 1, Color: color};
             if (this.api && this.BorderSize>0 && !this._noApply) {
                 var props = new Asc.asc_CShapeProperty();
@@ -1696,99 +1687,50 @@ define([
             if (!this.btnBackColor) {
                 // create color buttons
                 this.btnBackColor = new Common.UI.ColorButton({
+                    parentEl: $('#shape-back-color-btn'),
                     style: "width:45px;",
-                    menu        : new Common.UI.Menu({
-                        items: [
-                            { template: _.template('<div id="shape-back-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
-                            { template: _.template('<a id="shape-back-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
-                        ]
-                    })
-                });
-                this.btnBackColor.render( $('#shape-back-color-btn'));
-                this.btnBackColor.setColor('transparent');
-                this.fillControls.push(this.btnBackColor);
-                this.colorsBack = new Common.UI.ThemeColorPalette({
-                    el: $('#shape-back-color-menu'),
-                    value: 'transparent',
                     transparent: true
                 });
-                this.colorsBack.on('select', _.bind(this.onColorsBackSelect, this));
-                this.btnBackColor.menu.items[1].on('click',  _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor));
+                this.btnBackColor.setColor('transparent');
+                this.fillControls.push(this.btnBackColor);
+                this.colorsBack = this.btnBackColor.getPicker();
+                this.btnBackColor.on('color:select', _.bind(this.onColorsBackSelect, this));
+
                 this.btnFGColor = new Common.UI.ColorButton({
-                    style: "width:45px;",
-                    menu        : new Common.UI.Menu({
-                        items: [
-                            { template: _.template('<div id="shape-foreground-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
-                            { template: _.template('<a id="shape-foreground-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
-                        ]
-                    })
+                    parentEl: $('#shape-foreground-color-btn'),
+                    style: "width:45px;"
                 });
-                this.btnFGColor.render( $('#shape-foreground-color-btn'));
                 this.btnFGColor.setColor('000000');
                 this.fillControls.push(this.btnFGColor);
-                this.colorsFG = new Common.UI.ThemeColorPalette({
-                    el: $('#shape-foreground-color-menu'),
-                    value: '000000'
-                });
-                this.colorsFG.on('select', _.bind(this.onColorsFGSelect, this));
-                this.btnFGColor.menu.items[1].on('click',  _.bind(this.addNewColor, this, this.colorsFG, this.btnFGColor));
+                this.colorsFG = this.btnFGColor.getPicker();
+                this.btnFGColor.on('color:select', _.bind(this.onColorsFGSelect, this));
 
                 this.btnBGColor = new Common.UI.ColorButton({
-                    style: "width:45px;",
-                    menu        : new Common.UI.Menu({
-                        items: [
-                            { template: _.template('<div id="shape-background-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
-                            { template: _.template('<a id="shape-background-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
-                        ]
-                    })
+                    parentEl: $('#shape-background-color-btn'),
+                    style: "width:45px;"
                 });
-                this.btnBGColor.render( $('#shape-background-color-btn'));
                 this.btnBGColor.setColor('ffffff');
                 this.fillControls.push(this.btnBGColor);
-                this.colorsBG = new Common.UI.ThemeColorPalette({
-                    el: $('#shape-background-color-menu'),
-                    value: 'ffffff'
-                });
-                this.colorsBG.on('select', _.bind(this.onColorsBGSelect, this));
-                this.btnBGColor.menu.items[1].on('click',  _.bind(this.addNewColor, this, this.colorsBG, this.btnBGColor));
+                this.colorsBG = this.btnBGColor.getPicker();
+                this.btnBGColor.on('color:select', _.bind(this.onColorsBGSelect, this));
 
                 this.btnGradColor = new Common.UI.ColorButton({
-                    style: "width:45px;",
-                    menu        : new Common.UI.Menu({
-                        items: [
-                            { template: _.template('<div id="shape-gradient-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
-                            { template: _.template('<a id="shape-gradient-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
-                        ]
-                    })
+                    parentEl: $('#shape-gradient-color-btn'),
+                    style: "width:45px;"
                 });
-                this.btnGradColor.render( $('#shape-gradient-color-btn'));
                 this.btnGradColor.setColor('000000');
                 this.fillControls.push(this.btnGradColor);
-                this.colorsGrad = new Common.UI.ThemeColorPalette({
-                    el: $('#shape-gradient-color-menu'),
-                    value: '000000'
-                });
-                this.colorsGrad.on('select', _.bind(this.onColorsGradientSelect, this));
-                this.btnGradColor.menu.items[1].on('click',  _.bind(this.addNewColor, this, this.colorsGrad, this.btnGradColor));
+                this.colorsGrad = this.btnGradColor.getPicker();
+                this.btnGradColor.on('color:select', _.bind(this.onColorsGradientSelect, this));
 
                 this.btnBorderColor = new Common.UI.ColorButton({
-                    style: "width:45px;",
-                    menu        : new Common.UI.Menu({
-                        items: [
-                            { template: _.template('<div id="shape-border-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
-                            { template: _.template('<a id="shape-border-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
-                        ]
-                    })
+                    parentEl: $('#shape-border-color-btn'),
+                    style: "width:45px;"
                 });
-                this.btnBorderColor.render( $('#shape-border-color-btn'));
                 this.btnBorderColor.setColor('000000');
                 this.lockedControls.push(this.btnBorderColor);
-                this.colorsBorder = new Common.UI.ThemeColorPalette({
-                    el: $('#shape-border-color-menu'),
-                    value: '000000'
-                });
-                this.colorsBorder.on('select', _.bind(this.onColorsBorderSelect, this));
-                this.btnBorderColor.menu.items[1].on('click',  _.bind(this.addNewColor, this, this.colorsBorder, this.btnBorderColor));
+                this.colorsBorder = this.btnBorderColor.getPicker();
+                this.btnBorderColor.on('color:select', _.bind(this.onColorsBorderSelect, this));
             }
             this.colorsBorder.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
             this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
@@ -1879,7 +1821,6 @@ define([
         txtBrownPaper           : 'Brown Paper',
         txtPapyrus              : 'Papyrus',
         txtWood                 : 'Wood',
-        textNewColor            : 'Add New Custom Color',
         textAdvanced            : 'Show advanced settings',
         strTransparency         : 'Opacity',
         textNoFill              : 'No Fill',
diff --git a/apps/documenteditor/main/app/view/TableSettings.js b/apps/documenteditor/main/app/view/TableSettings.js
index 788fa0ee4..cd7b73b9a 100644
--- a/apps/documenteditor/main/app/view/TableSettings.js
+++ b/apps/documenteditor/main/app/view/TableSettings.js
@@ -148,8 +148,7 @@ define([
             this.fireEvent('editcomplete', this);
         },
 
-        onColorsBackSelect: function(picker, color) {
-            this.btnBackColor.setColor(color);
+        onColorsBackSelect: function(btn, color) {
             this.CellColor = {Value: 1, Color: color};
 
             if (this.api) {
@@ -171,14 +170,6 @@ define([
             this.fireEvent('editcomplete', this);
         },
 
-        addNewColor: function(picker, btn) {
-            picker.addNewColor((typeof(btn.color) == 'object') ? btn.color.color : btn.color);
-        },
-
-        onColorsBorderSelect: function(picker, color) {
-            this.btnBorderColor.setColor(color);
-        },
-
         onBtnBordersClick: function(btn, eOpts){
             this._UpdateBordersStyle(btn.options.strId, true);
             if (this.api) {
@@ -648,40 +639,21 @@ define([
              if (!this.btnBackColor) {
                 // create color buttons
                  this.btnBorderColor = new Common.UI.ColorButton({
-                     style: "width:45px;",
-                     menu        : new Common.UI.Menu({
-                         items: [
-                             { template: _.template('<div id="table-border-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
-                             { template: _.template('<a id="table-border-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
-                         ]
-                     })
+                     parentEl: $('#table-border-color-btn'),
+                     style: "width:45px;"
                  });
-                 this.btnBorderColor.render( $('#table-border-color-btn'));
                  this.btnBorderColor.setColor('000000');
                  this.lockedControls.push(this.btnBorderColor);
-                 this.borderColor = new Common.UI.ThemeColorPalette({
-                     el: $('#table-border-color-menu')
-                 });
-                 this.borderColor.on('select', _.bind(this.onColorsBorderSelect, this));
-                 this.btnBorderColor.menu.items[1].on('click',  _.bind(this.addNewColor, this, this.borderColor, this.btnBorderColor));
+                 this.borderColor = this.btnBorderColor.getPicker();
 
                  this.btnBackColor = new Common.UI.ColorButton({
+                     parentEl: $('#table-back-color-btn'),
                      style: "width:45px;",
-                     menu        : new Common.UI.Menu({
-                         items: [
-                             { template: _.template('<div id="table-back-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
-                             { template: _.template('<a id="table-back-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
-                         ]
-                     })
-                 });
-                 this.btnBackColor.render( $('#table-back-color-btn'));
-                 this.lockedControls.push(this.btnBackColor);
-                 this.colorsBack = new Common.UI.ThemeColorPalette({
-                     el: $('#table-back-color-menu'),
                      transparent: true
                  });
-                 this.colorsBack.on('select', _.bind(this.onColorsBackSelect, this));
-                 this.btnBackColor.menu.items[1].on('click',  _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor));
+                 this.lockedControls.push(this.btnBackColor);
+                 this.colorsBack = this.btnBackColor.getPicker();
+                 this.btnBackColor.on('color:select', _.bind(this.onColorsBackSelect, this));
              }
              this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
              this.borderColor.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
@@ -842,7 +814,6 @@ define([
         textSelectBorders       : 'Select borders that you want to change',
         textAdvanced            : 'Show advanced settings',
         txtNoBorders            : 'No borders',
-        textNewColor            : 'Add New Custom Color',
         textTemplate            : 'Select From Template',
         textRows                : 'Rows',
         textColumns             : 'Columns',
diff --git a/apps/documenteditor/main/app/view/TableSettingsAdvanced.js b/apps/documenteditor/main/app/view/TableSettingsAdvanced.js
index 55d042e4b..84781a33e 100644
--- a/apps/documenteditor/main/app/view/TableSettingsAdvanced.js
+++ b/apps/documenteditor/main/app/view/TableSettingsAdvanced.js
@@ -879,67 +879,31 @@ define([    'text!documenteditor/main/app/template/TableSettingsAdvanced.templat
             this.cmbBorderSize.on('selected', _.bind(this.onBorderSizeSelect, this));
 
             this.btnBorderColor = new Common.UI.ColorButton({
+                parentEl: $('#tableadv-border-color-btn'),
                 style: "width:45px;",
-                menu        : new Common.UI.Menu({
-                    additionalAlign: this.menuAddAlign,
-                    items: [
-                        { template: _.template('<div id="tableadv-border-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
-                        { template: _.template('<a id="tableadv-border-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
-                    ]
-                })
+                additionalAlign: this.menuAddAlign
             });
-
-            this.btnBorderColor.on('render:after', function(btn) {
-                me.colorsBorder = new Common.UI.ThemeColorPalette({
-                    el: $('#tableadv-border-color-menu')
-                });
-                me.colorsBorder.on('select', _.bind(me.onColorsBorderSelect, me));
-            });
-            this.btnBorderColor.render( $('#tableadv-border-color-btn'));
+            this.btnBorderColor.on('color:select', _.bind(me.onColorsBorderSelect, me));
             this.btnBorderColor.setColor('000000');
-            $('#tableadv-border-color-new').on('click', _.bind(this.addNewColor, this, this.colorsBorder, this.btnBorderColor));
+            this.colorsBorder = this.btnBorderColor.getPicker();
 
             this.btnBackColor = new Common.UI.ColorButton({
+                parentEl: $('#tableadv-button-back-color'),
                 style: "width:45px;",
-                menu        : new Common.UI.Menu({
-                    additionalAlign: this.menuAddAlign,
-                    items: [
-                        { template: _.template('<div id="tableadv-back-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
-                        { template: _.template('<a id="tableadv-back-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
-                    ]
-                })
+                additionalAlign: this.menuAddAlign,
+                transparent: true
             });
-
-            this.btnBackColor.on('render:after', function(btn) {
-                me.colorsBack = new Common.UI.ThemeColorPalette({
-                    el: $('#tableadv-back-color-menu'),
-                    transparent: true
-                });
-                me.colorsBack.on('select', _.bind(me.onColorsBackSelect, me));
-            });
-            this.btnBackColor.render( $('#tableadv-button-back-color'));
-            $('#tableadv-back-color-new').on('click', _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor));
+            this.btnBackColor.on('color:select', _.bind(this.onColorsBackSelect, this));
+            this.colorsBack = this.btnBackColor.getPicker();
 
             this.btnTableBackColor = new Common.UI.ColorButton({
+                parentEl: $('#tableadv-button-table-back-color'),
                 style: "width:45px;",
-                menu        : new Common.UI.Menu({
-                    additionalAlign: this.menuAddAlign,
-                    items: [
-                        { template: _.template('<div id="tableadv-table-back-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
-                        { template: _.template('<a id="tableadv-table-back-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
-                    ]
-                })
+                additionalAlign: this.menuAddAlign,
+                transparent: true
             });
-
-            this.btnTableBackColor.on('render:after', function(btn) {
-                me.colorsTableBack = new Common.UI.ThemeColorPalette({
-                    el: $('#tableadv-table-back-color-menu'),
-                    transparent: true
-                });
-                me.colorsTableBack.on('select', _.bind(me.onColorsTableBackSelect, me));
-            });
-            this.btnTableBackColor.render( $('#tableadv-button-table-back-color'));
-            $('#tableadv-table-back-color-new').on('click', _.bind(this.addNewColor, this, this.colorsTableBack, this.btnTableBackColor));
+            this.btnTableBackColor.on('color:select', _.bind(this.onColorsTableBackSelect, this));
+            this.colorsTableBack = this.btnTableBackColor.getPicker();
 
             this.tableBordersImageSpacing = new Common.UI.TableStyler({
                 el: $('#id-detablestyler-spacing'),
@@ -1688,19 +1652,13 @@ define([    'text!documenteditor/main/app/template/TableSettingsAdvanced.templat
             this.tableBordersImageSpacing.setVirtualBorderSize( this.BorderSize.pxValue );
         },
 
-        addNewColor: function(picker, btn) {
-            picker.addNewColor((typeof(btn.color) == 'object') ? btn.color.color : btn.color);
-        },
-
-        onColorsBorderSelect: function(picker, color) {
-            this.btnBorderColor.setColor(color);
+        onColorsBorderSelect: function(btn, color) {
             var colorstr = (typeof(color) == 'object') ? color.color : color;
             this.tableBordersImage.setVirtualBorderColor(colorstr);
             this.tableBordersImageSpacing.setVirtualBorderColor(colorstr);
         },
 
-        onColorsBackSelect: function(picker, color) {
-            this.btnBackColor.setColor(color);
+        onColorsBackSelect: function(btn, color) {
             this.CellColor = {Value: 1, Color: color};
 
             if (this._cellBackground === null)
@@ -1719,8 +1677,7 @@ define([    'text!documenteditor/main/app/template/TableSettingsAdvanced.templat
                 this.tableBordersImage.setCellsColor(colorstr);
         },
 
-        onColorsTableBackSelect: function(picker, color) {
-            this.btnTableBackColor.setColor(color);
+        onColorsTableBackSelect: function(btn, color) {
             this.TableColor.Color = color;
 
             if (this._changedProps) {
@@ -2132,7 +2089,6 @@ define([    'text!documenteditor/main/app/template/TableSettingsAdvanced.templat
         textBorderDesc:     'Click on diagramm or use buttons to select borders',
         textTableBackColor: 'Table Background',
         txtNoBorders:       'No borders',
-        textNewColor:       'Add New Custom Color',
         textCenter: 'Center',
         textMargin: 'Margin',
         textPage: 'Page',
diff --git a/apps/documenteditor/main/app/view/TextArtSettings.js b/apps/documenteditor/main/app/view/TextArtSettings.js
index bcc33070b..c92cb9d65 100644
--- a/apps/documenteditor/main/app/view/TextArtSettings.js
+++ b/apps/documenteditor/main/app/view/TextArtSettings.js
@@ -193,8 +193,7 @@ define([
             this.fireEvent('editcomplete', this);
         },
 
-        onColorsBackSelect: function(picker, color) {
-            this.btnBackColor.setColor(color);
+        onColorsBackSelect: function(btn, color) {
             this.ShapeColor = {Value: 1, Color: color};
 
             if (this.api && !this._noApply) {
@@ -217,10 +216,6 @@ define([
             this.fireEvent('editcomplete', this);
         },
 
-        addNewColor: function(picker, btn) {
-            picker.addNewColor((typeof(btn.color) == 'object') ? btn.color.color : btn.color);
-        },
-
         onNumTransparencyChange: function(field, newValue, oldValue, eOpts){
             this.sldrTransparency.setValue(field.getNumberValue(), true);
             if (this.api)  {
@@ -347,8 +342,7 @@ define([
             this.fireEvent('editcomplete', this);
         },
 
-        onColorsGradientSelect: function(picker, color) {
-            this.btnGradColor.setColor(color);
+        onColorsGradientSelect: function(btn, color) {
             this.GradColor.colors[this.GradColor.currentIdx] = color;
             this.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(color) == 'object') ? color.color : color));
 
@@ -510,8 +504,7 @@ define([
             this.fireEvent('editcomplete', this);
         },
 
-        onColorsBorderSelect: function(picker, color) {
-            this.btnBorderColor.setColor(color);
+        onColorsBorderSelect: function(btn, color) {
             this.BorderColor = {Value: 1, Color: color};
             if (this.api && this.BorderSize>0 && !this._noApply) {
                 var props = new Asc.asc_TextArtProperties();
@@ -1100,62 +1093,32 @@ define([
             if (this._initSettings) return;
             if (!this.btnBackColor) {
                 this.btnBorderColor = new Common.UI.ColorButton({
-                    style: "width:45px;",
-                    menu        : new Common.UI.Menu({
-                        items: [
-                            { template: _.template('<div id="textart-border-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
-                            { template: _.template('<a id="textart-border-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
-                        ]
-                    })
+                    parentEl: $('#textart-border-color-btn'),
+                    style: "width:45px;"
                 });
-                this.btnBorderColor.render( $('#textart-border-color-btn'));
                 this.btnBorderColor.setColor('000000');
                 this.lockedControls.push(this.btnBorderColor);
-                this.colorsBorder = new Common.UI.ThemeColorPalette({
-                    el: $('#textart-border-color-menu'),
-                    value: '000000'
-                });
-                this.colorsBorder.on('select', _.bind(this.onColorsBorderSelect, this));
-                this.btnBorderColor.menu.items[1].on('click',  _.bind(this.addNewColor, this, this.colorsBorder, this.btnBorderColor));
+                this.colorsBorder = this.btnBorderColor.getPicker();
+                this.btnBorderColor.on('color:select', _.bind(this.onColorsBorderSelect, this));
 
                 this.btnGradColor = new Common.UI.ColorButton({
-                    style: "width:45px;",
-                    menu        : new Common.UI.Menu({
-                        items: [
-                            { template: _.template('<div id="textart-gradient-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
-                            { template: _.template('<a id="textart-gradient-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
-                        ]
-                    })
+                    parentEl: $('#textart-gradient-color-btn'),
+                    style: "width:45px;"
                 });
-                this.btnGradColor.render( $('#textart-gradient-color-btn'));
                 this.btnGradColor.setColor('000000');
                 this.lockedControls.push(this.btnGradColor);
-                this.colorsGrad = new Common.UI.ThemeColorPalette({
-                    el: $('#textart-gradient-color-menu'),
-                    value: '000000'
-                });
-                this.colorsGrad.on('select', _.bind(this.onColorsGradientSelect, this));
-                this.btnGradColor.menu.items[1].on('click',  _.bind(this.addNewColor, this, this.colorsGrad, this.btnGradColor));
+                this.colorsGrad = this.btnGradColor.getPicker();
+                this.btnGradColor.on('color:select', _.bind(this.onColorsGradientSelect, this));
 
                 this.btnBackColor = new Common.UI.ColorButton({
+                    parentEl: $('#textart-back-color-btn'),
                     style: "width:45px;",
-                    menu        : new Common.UI.Menu({
-                        items: [
-                            { template: _.template('<div id="textart-back-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
-                            { template: _.template('<a id="textart-back-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
-                        ]
-                    })
-                });
-                this.btnBackColor.render( $('#textart-back-color-btn'));
-                this.btnBackColor.setColor('transparent');
-                this.lockedControls.push(this.btnBackColor);
-                this.colorsBack = new Common.UI.ThemeColorPalette({
-                    el: $('#textart-back-color-menu'),
-                    value: 'transparent',
                     transparent: true
                 });
-                this.colorsBack.on('select', _.bind(this.onColorsBackSelect, this));
-                this.btnBackColor.menu.items[1].on('click',  _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor));
+                this.btnBackColor.setColor('transparent');
+                this.lockedControls.push(this.btnBackColor);
+                this.colorsBack = this.btnBackColor.getPicker();
+                this.btnBackColor.on('color:select', _.bind(this.onColorsBackSelect, this));
             }
             this.colorsBorder.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
             this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
@@ -1197,7 +1160,6 @@ define([
         strSize                 : 'Size',
         strFill                 : 'Fill',
         textColor               : 'Color Fill',
-        textNewColor            : 'Add New Custom Color',
         strTransparency         : 'Opacity',
         textNoFill              : 'No Fill',
         textSelectTexture       : 'Select',
diff --git a/apps/documenteditor/main/locale/en.json b/apps/documenteditor/main/locale/en.json
index 7cc96cf00..dcb5433b1 100644
--- a/apps/documenteditor/main/locale/en.json
+++ b/apps/documenteditor/main/locale/en.json
@@ -113,6 +113,7 @@
   "Common.UI.Calendar.textShortTuesday": "Tu",
   "Common.UI.Calendar.textShortWednesday": "We",
   "Common.UI.Calendar.textYears": "Years",
+  "Common.UI.ColorButton.textNewColor": "Add New Custom Color",
   "Common.UI.ComboBorderSize.txtNoBorders": "No borders",
   "Common.UI.ComboBorderSizeEditable.txtNoBorders": "No borders",
   "Common.UI.ComboDataView.emptyComboText": "No styles",
diff --git a/apps/documenteditor/main/locale/ru.json b/apps/documenteditor/main/locale/ru.json
index c675a72dc..7d0355398 100644
--- a/apps/documenteditor/main/locale/ru.json
+++ b/apps/documenteditor/main/locale/ru.json
@@ -113,6 +113,7 @@
   "Common.UI.Calendar.textShortTuesday": "Вт",
   "Common.UI.Calendar.textShortWednesday": "Ср",
   "Common.UI.Calendar.textYears": "Годы",
+  "Common.UI.ColorButton.textNewColor": "Пользовательский цвет",
   "Common.UI.ComboBorderSize.txtNoBorders": "Без границ",
   "Common.UI.ComboBorderSizeEditable.txtNoBorders": "Без границ",
   "Common.UI.ComboDataView.emptyComboText": "Без стилей",

From c8c0416f5d431c588629402d9ebc9f17c664fa6f Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Wed, 29 Apr 2020 20:32:18 +0300
Subject: [PATCH 3/8] [PE] Refactoring color button component

---
 .../main/lib/view/ListSettingsDialog.js       |  28 +----
 .../main/app/view/ShapeSettings.js            | 112 ++++--------------
 .../main/app/view/SlideSettings.js            |  91 ++++----------
 .../main/app/view/TableSettings.js            |  45 ++-----
 .../main/app/view/TextArtSettings.js          | 112 ++++--------------
 5 files changed, 87 insertions(+), 301 deletions(-)

diff --git a/apps/common/main/lib/view/ListSettingsDialog.js b/apps/common/main/lib/view/ListSettingsDialog.js
index d3c3c6168..87df71f64 100644
--- a/apps/common/main/lib/view/ListSettingsDialog.js
+++ b/apps/common/main/lib/view/ListSettingsDialog.js
@@ -119,24 +119,12 @@ define([
             });
 
             this.btnColor = new Common.UI.ColorButton({
+                parentEl: $window.find('#id-dlg-list-color'),
                 style: "width:53px;",
-                menu        : new Common.UI.Menu({
-                    additionalAlign: this.menuAddAlign,
-                    items: [
-                        { template: _.template('<div id="id-dlg-list-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
-                        { template: _.template('<a id="id-dlg-list-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
-                    ]
-                })
+                additionalAlign: this.menuAddAlign
             });
-            this.btnColor.on('render:after', function(btn) {
-                me.colors = new Common.UI.ThemeColorPalette({
-                    el: $('#id-dlg-list-color-menu'),
-                    transparent: false
-                });
-                me.colors.on('select', _.bind(me.onColorsSelect, me));
-            });
-            this.btnColor.render($window.find('#id-dlg-list-color'));
-            $('#id-dlg-list-color-new').on('click', _.bind(this.addNewColor, this, this.colors));
+            this.btnColor.on('color:select', _.bind(this.onColorsSelect, this));
+            this.colors = this.btnColor.getPicker();
 
             this.spnStart = new Common.UI.MetricSpinner({
                 el          : $window.find('#id-dlg-list-start'),
@@ -172,12 +160,7 @@ define([
             this.colors.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
         },
 
-        addNewColor: function(picker, btn) {
-            picker.addNewColor((typeof(btn.color) == 'object') ? btn.color.color : btn.color);
-        },
-
-        onColorsSelect: function(picker, color) {
-            this.btnColor.setColor(color);
+        onColorsSelect: function(btn, color) {
             if (this._changedProps) {
                 this._changedProps.asc_putBulletColor(Common.Utils.ThemeColor.getRgbColor(color));
             }
@@ -271,7 +254,6 @@ define([
         txtSize: 'Size',
         txtColor: 'Color',
         txtOfText: '% of text',
-        textNewColor: 'Add New Custom Color',
         txtStart: 'Start at',
         txtBullet: 'Bullet',
         tipChange: 'Change bullet'
diff --git a/apps/presentationeditor/main/app/view/ShapeSettings.js b/apps/presentationeditor/main/app/view/ShapeSettings.js
index aca7564e3..3042dbdab 100644
--- a/apps/presentationeditor/main/app/view/ShapeSettings.js
+++ b/apps/presentationeditor/main/app/view/ShapeSettings.js
@@ -239,8 +239,7 @@ define([
             this.fireEvent('editcomplete', this);
         },
 
-        onColorsBackSelect: function(picker, color) {
-            this.btnBackColor.setColor(color);
+        onColorsBackSelect: function(btn, color) {
             this.ShapeColor = {Value: 1, Color: color};
 
             if (this.api && !this._noApply) {
@@ -262,10 +261,6 @@ define([
             this.fireEvent('editcomplete', this);
         },
 
-        addNewColor: function(picker, btn) {
-            picker.addNewColor((typeof(btn.color) == 'object') ? btn.color.color : btn.color);
-        },
-
         onPatternSelect: function(combo, record){
             if (this.api && !this._noApply) {
                 this.PatternFillType = record.get('type');
@@ -284,8 +279,7 @@ define([
             this.fireEvent('editcomplete', this);
         },
 
-        onColorsFGSelect: function(picker, color) {
-            this.btnFGColor.setColor(color);
+        onColorsFGSelect: function(btn, color) {
             this.FGColor = {Value: 1, Color: color};
             if (this.api && !this._noApply) {
                 var props = new Asc.asc_CShapeProperty();
@@ -303,8 +297,7 @@ define([
             this.fireEvent('editcomplete', this);
         },
 
-        onColorsBGSelect: function(picker, color) {
-            this.btnBGColor.setColor(color);
+        onColorsBGSelect: function(btn, color) {
             this.BGColor = {Value: 1, Color: color};
             if (this.api && !this._noApply) {
                 var props = new Asc.asc_CShapeProperty();
@@ -461,8 +454,7 @@ define([
             this.fireEvent('editcomplete', this);
         },
 
-        onColorsGradientSelect: function(picker, color) {
-            this.btnGradColor.setColor(color);
+        onColorsGradientSelect: function(btn, color) {
             this.GradColor.colors[this.GradColor.currentIdx] = color;
             this.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(color) == 'object') ? color.color : color));
 
@@ -619,8 +611,7 @@ define([
             this.fireEvent('editcomplete', this);
         },
 
-        onColorsBorderSelect: function(picker, color) {
-            this.btnBorderColor.setColor(color);
+        onColorsBorderSelect: function(btn, color) {
             this.BorderColor = {Value: 1, Color: color};
             if (this.api && this.BorderSize>0 && !this._noApply) {
                 var props = new Asc.asc_CShapeProperty();
@@ -1550,100 +1541,50 @@ define([
             if (this._initSettings) return;
             if (!this.btnBackColor) {
                 this.btnBackColor = new Common.UI.ColorButton({
+                    parentEl: $('#shape-back-color-btn'),
                     style: "width:45px;",
-                    menu        : new Common.UI.Menu({
-                        items: [
-                            { template: _.template('<div id="shape-back-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
-                            { template: _.template('<a id="shape-back-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
-                        ]
-                    })
-                });
-                this.btnBackColor.render( $('#shape-back-color-btn'));
-                this.btnBackColor.setColor('transparent');
-                this.fillControls.push(this.btnBackColor);
-                this.colorsBack = new Common.UI.ThemeColorPalette({
-                    el: $('#shape-back-color-menu'),
-                    value: 'transparent',
                     transparent: true
                 });
-                this.colorsBack.on('select', _.bind(this.onColorsBackSelect, this));
-                this.btnBackColor.menu.items[1].on('click',  _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor));
+                this.btnBackColor.setColor('transparent');
+                this.fillControls.push(this.btnBackColor);
+                this.colorsBack = this.btnBackColor.getPicker();
+                this.btnBackColor.on('color:select', _.bind(this.onColorsBackSelect, this));
 
                 this.btnFGColor = new Common.UI.ColorButton({
-                    style: "width:45px;",
-                    menu        : new Common.UI.Menu({
-                        items: [
-                            { template: _.template('<div id="shape-foreground-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
-                            { template: _.template('<a id="shape-foreground-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
-                        ]
-                    })
+                    parentEl: $('#shape-foreground-color-btn'),
+                    style: "width:45px;"
                 });
-                this.btnFGColor.render( $('#shape-foreground-color-btn'));
                 this.btnFGColor.setColor('000000');
                 this.fillControls.push(this.btnFGColor);
-                this.colorsFG = new Common.UI.ThemeColorPalette({
-                    el: $('#shape-foreground-color-menu'),
-                    value: '000000'
-                });
-                this.colorsFG.on('select', _.bind(this.onColorsFGSelect, this));
-                this.btnFGColor.menu.items[1].on('click',  _.bind(this.addNewColor, this, this.colorsFG, this.btnFGColor));
+                this.colorsFG = this.btnFGColor.getPicker();
+                this.btnFGColor.on('color:select', _.bind(this.onColorsFGSelect, this));
 
                 this.btnBGColor = new Common.UI.ColorButton({
-                    style: "width:45px;",
-                    menu        : new Common.UI.Menu({
-                        items: [
-                            { template: _.template('<div id="shape-background-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
-                            { template: _.template('<a id="shape-background-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
-                        ]
-                    })
+                    parentEl: $('#shape-background-color-btn'),
+                    style: "width:45px;"
                 });
-                this.btnBGColor.render( $('#shape-background-color-btn'));
                 this.btnBGColor.setColor('ffffff');
                 this.fillControls.push(this.btnBGColor);
-                this.colorsBG = new Common.UI.ThemeColorPalette({
-                    el: $('#shape-background-color-menu'),
-                    value: 'ffffff'
-                });
-                this.colorsBG.on('select', _.bind(this.onColorsBGSelect, this));
-                this.btnBGColor.menu.items[1].on('click',  _.bind(this.addNewColor, this, this.colorsBG, this.btnBGColor));
+                this.colorsBG = this.btnBGColor.getPicker();
+                this.btnBGColor.on('color:select', _.bind(this.onColorsBGSelect, this));
 
                 this.btnGradColor = new Common.UI.ColorButton({
-                    style: "width:45px;",
-                    menu        : new Common.UI.Menu({
-                        items: [
-                            { template: _.template('<div id="shape-gradient-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
-                            { template: _.template('<a id="shape-gradient-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
-                        ]
-                    })
+                    parentEl: $('#shape-gradient-color-btn'),
+                    style: "width:45px;"
                 });
-                this.btnGradColor.render( $('#shape-gradient-color-btn'));
                 this.btnGradColor.setColor('000000');
                 this.fillControls.push(this.btnGradColor);
-                this.colorsGrad = new Common.UI.ThemeColorPalette({
-                    el: $('#shape-gradient-color-menu'),
-                    value: '000000'
-                });
-                this.colorsGrad.on('select', _.bind(this.onColorsGradientSelect, this));
-                this.btnGradColor.menu.items[1].on('click',  _.bind(this.addNewColor, this, this.colorsGrad, this.btnGradColor));
+                this.colorsGrad = this.btnGradColor.getPicker();
+                this.btnGradColor.on('color:select', _.bind(this.onColorsGradientSelect, this));
 
                 this.btnBorderColor = new Common.UI.ColorButton({
-                    style: "width:45px;",
-                    menu        : new Common.UI.Menu({
-                        items: [
-                            { template: _.template('<div id="shape-border-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
-                            { template: _.template('<a id="shape-border-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
-                        ]
-                    })
+                    parentEl: $('#shape-border-color-btn'),
+                    style: "width:45px;"
                 });
-                this.btnBorderColor.render( $('#shape-border-color-btn'));
                 this.btnBorderColor.setColor('000000');
                 this.lockedControls.push(this.btnBorderColor);
-                this.colorsBorder = new Common.UI.ThemeColorPalette({
-                    el: $('#shape-border-color-menu'),
-                    value: '000000'
-                });
-                this.colorsBorder.on('select', _.bind(this.onColorsBorderSelect, this));
-                this.btnBorderColor.menu.items[1].on('click',  _.bind(this.addNewColor, this, this.colorsBorder, this.btnBorderColor));
+                this.colorsBorder = this.btnBorderColor.getPicker();
+                this.btnBorderColor.on('color:select', _.bind(this.onColorsBorderSelect, this));
             }
 
             this.colorsBorder.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
@@ -1752,7 +1693,6 @@ define([
         txtBrownPaper           : 'Brown Paper',
         txtPapyrus              : 'Papyrus',
         txtWood                 : 'Wood',
-        textNewColor            : 'Add New Custom Color',
         textAdvanced            : 'Show advanced settings',
         strTransparency         : 'Opacity',
         textNoFill              : 'No Fill',
diff --git a/apps/presentationeditor/main/app/view/SlideSettings.js b/apps/presentationeditor/main/app/view/SlideSettings.js
index 8ac00a7a3..3a1a5949e 100644
--- a/apps/presentationeditor/main/app/view/SlideSettings.js
+++ b/apps/presentationeditor/main/app/view/SlideSettings.js
@@ -134,16 +134,12 @@ define([
             this.cmbFillSrc.on('selected', _.bind(this.onFillSrcSelect, this));
 
             this.btnBackColor = new Common.UI.ColorButton({
+                parentEl: $('#slide-back-color-btn'),
                 style: "width:45px;",
                 disabled: true,
-                menu        : new Common.UI.Menu({
-                    items: [
-                        { template: _.template('<div id="slide-back-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
-                        { template: _.template('<a id="slide-back-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
-                    ]
-                })
+                transparent: true,
+                menu: true
             });
-            this.btnBackColor.render( $('#slide-back-color-btn'));
             this.btnBackColor.setColor('ffffff');
             this.FillItems.push(this.btnBackColor);
 
@@ -389,8 +385,7 @@ define([
             this.fireEvent('editcomplete', this);
         },
 
-        onColorsBackSelect: function(picker, color) {
-            this.btnBackColor.setColor(color);
+        onColorsBackSelect: function(btn, color) {
             this.SlideColor = {Value: 1, Color: color};
 
             if (this.api && !this._noApply) {
@@ -412,10 +407,6 @@ define([
             this.fireEvent('editcomplete', this);
         },
 
-        addNewColor: function(picker, btn) {
-            picker.addNewColor((typeof(btn.color) == 'object') ? btn.color.color : btn.color);
-        },
-
         onPatternSelect: function(combo, record){
             if (this.api && !this._noApply) {
                 this.PatternFillType = record.get('type');
@@ -434,8 +425,7 @@ define([
             this.fireEvent('editcomplete', this);
         },
 
-        onColorsFGSelect: function(picker, color) {
-            this.btnFGColor.setColor(color);
+        onColorsFGSelect: function(btn, color) {
             this.FGColor = {Value: 1, Color: color};
             if (this.api && !this._noApply) {
                 var props = new Asc.CAscSlideProps();
@@ -453,8 +443,7 @@ define([
             this.fireEvent('editcomplete', this);
         },
 
-        onColorsBGSelect: function(picker, color) {
-            this.btnBGColor.setColor(color);
+        onColorsBGSelect: function(btn, color) {
             this.BGColor = {Value: 1, Color: color};
             if (this.api && !this._noApply) {
                 var props = new Asc.CAscSlideProps();
@@ -567,8 +556,7 @@ define([
             this.fireEvent('editcomplete', this);
         },
 
-        onColorsGradientSelect: function(picker, color) {
-            this.btnGradColor.setColor(color);
+        onColorsGradientSelect: function(btn, color) {
             this.GradColor.colors[this.GradColor.currentIdx] = color;
             this.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(color) == 'object') ? color.color : color));
 
@@ -1072,70 +1060,36 @@ define([
         UpdateThemeColors: function() {
             if (this._initSettings) return;
             if (!this.colorsBack) {
-                this.colorsBack = new Common.UI.ThemeColorPalette({
-                    el: $('#slide-back-color-menu'),
-                    value: 'ffffff',
-                    transparent: true
-                });
-                this.colorsBack.on('select', _.bind(this.onColorsBackSelect, this));
-                this.btnBackColor.menu.items[1].on('click',  _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor));
+                this.btnBackColor.setMenu();
+                this.btnBackColor.on('color:select', _.bind(this.onColorsBackSelect, this));
+                this.colorsBack = this.btnBackColor.getPicker();
 
                 this.btnFGColor = new Common.UI.ColorButton({
-                    style: "width:45px;",
-                    menu        : new Common.UI.Menu({
-                        items: [
-                            { template: _.template('<div id="slide-foreground-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
-                            { template: _.template('<a id="slide-foreground-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
-                        ]
-                    })
+                    parentEl: $('#slide-foreground-color-btn'),
+                    style: "width:45px;"
                 });
-                this.btnFGColor.render( $('#slide-foreground-color-btn'));
                 this.btnFGColor.setColor('000000');
                 this.FillItems.push(this.btnFGColor);
-                this.colorsFG = new Common.UI.ThemeColorPalette({
-                    el: $('#slide-foreground-color-menu'),
-                    value: '000000'
-                });
-                this.colorsFG.on('select', _.bind(this.onColorsFGSelect, this));
-                this.btnFGColor.menu.items[1].on('click',  _.bind(this.addNewColor, this, this.colorsFG, this.btnFGColor));
+                this.colorsFG = this.btnFGColor.getPicker();
+                this.btnFGColor.on('color:select', _.bind(this.onColorsFGSelect, this));
 
                 this.btnBGColor = new Common.UI.ColorButton({
-                    style: "width:45px;",
-                    menu        : new Common.UI.Menu({
-                        items: [
-                            { template: _.template('<div id="slide-background-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
-                            { template: _.template('<a id="slide-background-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
-                        ]
-                    })
+                    parentEl: $('#slide-background-color-btn'),
+                    style: "width:45px;"
                 });
-                this.btnBGColor.render( $('#slide-background-color-btn'));
                 this.btnBGColor.setColor('ffffff');
                 this.FillItems.push(this.btnBGColor);
-                this.colorsBG = new Common.UI.ThemeColorPalette({
-                    el: $('#slide-background-color-menu'),
-                    value: 'ffffff'
-                });
-                this.colorsBG.on('select', _.bind(this.onColorsBGSelect, this));
-                this.btnBGColor.menu.items[1].on('click',  _.bind(this.addNewColor, this, this.colorsBG, this.btnBGColor));
+                this.colorsBG = this.btnBGColor.getPicker();
+                this.btnBGColor.on('color:select', _.bind(this.onColorsBGSelect, this));
 
                 this.btnGradColor = new Common.UI.ColorButton({
-                    style: "width:45px;",
-                    menu        : new Common.UI.Menu({
-                        items: [
-                            { template: _.template('<div id="slide-gradient-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
-                            { template: _.template('<a id="slide-gradient-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
-                        ]
-                    })
+                    parentEl: $('#slide-gradient-color-btn'),
+                    style: "width:45px;"
                 });
-                this.btnGradColor.render( $('#slide-gradient-color-btn'));
                 this.btnGradColor.setColor('000000');
                 this.FillItems.push(this.btnGradColor);
-                this.colorsGrad = new Common.UI.ThemeColorPalette({
-                    el: $('#slide-gradient-color-menu'),
-                    value: '000000'
-                });
-                this.colorsGrad.on('select', _.bind(this.onColorsGradientSelect, this));
-                this.btnGradColor.menu.items[1].on('click',  _.bind(this.addNewColor, this, this.colorsGrad, this.btnGradColor));
+                this.colorsGrad = this.btnGradColor.getPicker();
+                this.btnGradColor.on('color:select', _.bind(this.onColorsGradientSelect, this));
             }
             
             this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
@@ -1533,7 +1487,6 @@ define([
         txtBrownPaper           : 'Brown Paper',
         txtPapyrus              : 'Papyrus',
         txtWood                 : 'Wood',
-        textNewColor            : 'Add New Custom Color',
         textAdvanced            : 'Show advanced settings',
         textNoFill              : 'No Fill',
         textSelectTexture       : 'Select',
diff --git a/apps/presentationeditor/main/app/view/TableSettings.js b/apps/presentationeditor/main/app/view/TableSettings.js
index 65a3a44ff..bff9c9138 100644
--- a/apps/presentationeditor/main/app/view/TableSettings.js
+++ b/apps/presentationeditor/main/app/view/TableSettings.js
@@ -137,8 +137,7 @@ define([
             this.fireEvent('editcomplete', this);
         },
 
-        onColorsBackSelect: function(picker, color) {
-            this.btnBackColor.setColor(color);
+        onColorsBackSelect: function(btn, color) {
             this.CellColor = {Value: 1, Color: color};
 
             if (this.api) {
@@ -159,14 +158,6 @@ define([
             this.fireEvent('editcomplete', this);
         },
 
-        addNewColor: function(picker, btn) {
-            picker.addNewColor((typeof(btn.color) == 'object') ? btn.color.color : btn.color);
-        },
-
-        onColorsBorderSelect: function(picker, color) {
-            this.btnBorderColor.setColor(color);
-        },
-
         onBtnBordersClick: function(btn, eOpts){
             this._UpdateBordersStyle(btn.options.strId, true);
             if (this.api) {
@@ -615,40 +606,21 @@ define([
             if (this._initSettings) return;
             if (!this.btnBackColor) {
                 this.btnBorderColor = new Common.UI.ColorButton({
-                    style: "width:45px;",
-                    menu        : new Common.UI.Menu({
-                        items: [
-                            { template: _.template('<div id="table-border-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
-                            { template: _.template('<a id="table-border-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
-                        ]
-                    })
+                    parentEl: $('#table-border-color-btn'),
+                    style: "width:45px;"
                 });
-                this.btnBorderColor.render( $('#table-border-color-btn'));
                 this.btnBorderColor.setColor('000000');
                 this.lockedControls.push(this.btnBorderColor);
-                this.borderColor = new Common.UI.ThemeColorPalette({
-                    el: $('#table-border-color-menu')
-                });
-                this.borderColor.on('select', _.bind(this.onColorsBorderSelect, this));
-                this.btnBorderColor.menu.items[1].on('click',  _.bind(this.addNewColor, this, this.borderColor, this.btnBorderColor));
+                this.borderColor = this.btnBorderColor.getPicker();
 
                 this.btnBackColor = new Common.UI.ColorButton({
+                    parentEl: $('#table-back-color-btn'),
                     style: "width:45px;",
-                    menu        : new Common.UI.Menu({
-                        items: [
-                            { template: _.template('<div id="table-back-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
-                            { template: _.template('<a id="table-back-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
-                        ]
-                    })
-                });
-                this.btnBackColor.render( $('#table-back-color-btn'));
-                this.lockedControls.push(this.btnBackColor);
-                this.colorsBack = new Common.UI.ThemeColorPalette({
-                    el: $('#table-back-color-menu'),
                     transparent: true
                 });
-                this.colorsBack.on('select', _.bind(this.onColorsBackSelect, this));
-                this.btnBackColor.menu.items[1].on('click',  _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor));
+                this.lockedControls.push(this.btnBackColor);
+                this.colorsBack = this.btnBackColor.getPicker();
+                this.btnBackColor.on('color:select', _.bind(this.onColorsBackSelect, this));
             }
             this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
             this.borderColor.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
@@ -783,7 +755,6 @@ define([
         textSelectBorders       : 'Select borders that you want to change',
         textAdvanced            : 'Show advanced settings',
         txtNoBorders            : 'No borders',
-        textNewColor            : 'Add New Custom Color',
         textTemplate            : 'Select From Template',
         textRows                : 'Rows',
         textColumns             : 'Columns',
diff --git a/apps/presentationeditor/main/app/view/TextArtSettings.js b/apps/presentationeditor/main/app/view/TextArtSettings.js
index 7869e39c0..87c75064b 100644
--- a/apps/presentationeditor/main/app/view/TextArtSettings.js
+++ b/apps/presentationeditor/main/app/view/TextArtSettings.js
@@ -238,8 +238,7 @@ define([
             this.fireEvent('editcomplete', this);
         },
 
-        onColorsBackSelect: function(picker, color) {
-            this.btnBackColor.setColor(color);
+        onColorsBackSelect: function(btn, color) {
             this.ShapeColor = {Value: 1, Color: color};
 
             if (this.api && !this._noApply) {
@@ -262,10 +261,6 @@ define([
             this.fireEvent('editcomplete', this);
         },
 
-        addNewColor: function(picker, btn) {
-            picker.addNewColor((typeof(btn.color) == 'object') ? btn.color.color : btn.color);
-        },
-
         onPatternSelect: function(combo, record){
             if (this.api && !this._noApply) {
                 this.PatternFillType = record.get('type');
@@ -285,8 +280,7 @@ define([
             this.fireEvent('editcomplete', this);
         },
 
-        onColorsFGSelect: function(picker, color) {
-            this.btnFGColor.setColor(color);
+        onColorsFGSelect: function(btn, color) {
             this.FGColor = {Value: 1, Color: color};
             if (this.api && !this._noApply) {
                 var props = new Asc.asc_TextArtProperties();
@@ -305,8 +299,7 @@ define([
             this.fireEvent('editcomplete', this);
         },
 
-        onColorsBGSelect: function(picker, color) {
-            this.btnBGColor.setColor(color);
+        onColorsBGSelect: function(btn, color) {
             this.BGColor = {Value: 1, Color: color};
             if (this.api && !this._noApply) {
                 var props = new Asc.asc_TextArtProperties();
@@ -469,8 +462,7 @@ define([
             this.fireEvent('editcomplete', this);
         },
 
-        onColorsGradientSelect: function(picker, color) {
-            this.btnGradColor.setColor(color);
+        onColorsGradientSelect: function(btn, color) {
             this.GradColor.colors[this.GradColor.currentIdx] = color;
             this.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(color) == 'object') ? color.color : color));
 
@@ -632,8 +624,7 @@ define([
             this.fireEvent('editcomplete', this);
         },
 
-        onColorsBorderSelect: function(picker, color) {
-            this.btnBorderColor.setColor(color);
+        onColorsBorderSelect: function(btn, color) {
             this.BorderColor = {Value: 1, Color: color};
             if (this.api && this.BorderSize>0 && !this._noApply) {
                 var props = new Asc.asc_TextArtProperties();
@@ -1512,100 +1503,50 @@ define([
             if (this._initSettings) return;
             if (!this.btnBackColor) {
                 this.btnBackColor = new Common.UI.ColorButton({
+                    parentEl: $('#textart-back-color-btn'),
                     style: "width:45px;",
-                    menu        : new Common.UI.Menu({
-                        items: [
-                            { template: _.template('<div id="textart-back-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
-                            { template: _.template('<a id="textart-back-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
-                        ]
-                    })
-                });
-                this.btnBackColor.render( $('#textart-back-color-btn'));
-                this.btnBackColor.setColor('transparent');
-                this.lockedControls.push(this.btnBackColor);
-                this.colorsBack = new Common.UI.ThemeColorPalette({
-                    el: $('#textart-back-color-menu'),
-                    value: 'transparent',
                     transparent: true
                 });
-                this.colorsBack.on('select', _.bind(this.onColorsBackSelect, this));
-                this.btnBackColor.menu.items[1].on('click',  _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor));
+                this.btnBackColor.setColor('transparent');
+                this.lockedControls.push(this.btnBackColor);
+                this.colorsBack = this.btnBackColor.getPicker();
+                this.btnBackColor.on('color:select', _.bind(this.onColorsBackSelect, this));
 
                 this.btnFGColor = new Common.UI.ColorButton({
-                    style: "width:45px;",
-                    menu        : new Common.UI.Menu({
-                        items: [
-                            { template: _.template('<div id="textart-foreground-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
-                            { template: _.template('<a id="textart-foreground-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
-                        ]
-                    })
+                    parentEl: $('#textart-foreground-color-btn'),
+                    style: "width:45px;"
                 });
-                this.btnFGColor.render( $('#textart-foreground-color-btn'));
                 this.btnFGColor.setColor('000000');
                 this.lockedControls.push(this.btnFGColor);
-                this.colorsFG = new Common.UI.ThemeColorPalette({
-                    el: $('#textart-foreground-color-menu'),
-                    value: '000000'
-                });
-                this.colorsFG.on('select', _.bind(this.onColorsFGSelect, this));
-                this.btnFGColor.menu.items[1].on('click',  _.bind(this.addNewColor, this, this.colorsFG, this.btnFGColor));
+                this.colorsFG = this.btnFGColor.getPicker();
+                this.btnFGColor.on('color:select', _.bind(this.onColorsFGSelect, this));
 
                 this.btnBGColor = new Common.UI.ColorButton({
-                    style: "width:45px;",
-                    menu        : new Common.UI.Menu({
-                        items: [
-                            { template: _.template('<div id="textart-background-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
-                            { template: _.template('<a id="textart-background-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
-                        ]
-                    })
+                    parentEl: $('#textart-background-color-btn'),
+                    style: "width:45px;"
                 });
-                this.btnBGColor.render( $('#textart-background-color-btn'));
                 this.btnBGColor.setColor('ffffff');
                 this.lockedControls.push(this.btnBGColor);
-                this.colorsBG = new Common.UI.ThemeColorPalette({
-                    el: $('#textart-background-color-menu'),
-                    value: 'ffffff'
-                });
-                this.colorsBG.on('select', _.bind(this.onColorsBGSelect, this));
-                this.btnBGColor.menu.items[1].on('click',  _.bind(this.addNewColor, this, this.colorsBG, this.btnBGColor));
+                this.colorsBG = this.btnBGColor.getPicker();
+                this.btnBGColor.on('color:select', _.bind(this.onColorsBGSelect, this));
 
                 this.btnGradColor = new Common.UI.ColorButton({
-                    style: "width:45px;",
-                    menu        : new Common.UI.Menu({
-                        items: [
-                            { template: _.template('<div id="textart-gradient-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
-                            { template: _.template('<a id="textart-gradient-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
-                        ]
-                    })
+                    parentEl: $('#textart-gradient-color-btn'),
+                    style: "width:45px;"
                 });
-                this.btnGradColor.render( $('#textart-gradient-color-btn'));
                 this.btnGradColor.setColor('000000');
                 this.lockedControls.push(this.btnGradColor);
-                this.colorsGrad = new Common.UI.ThemeColorPalette({
-                    el: $('#textart-gradient-color-menu'),
-                    value: '000000'
-                });
-                this.colorsGrad.on('select', _.bind(this.onColorsGradientSelect, this));
-                this.btnGradColor.menu.items[1].on('click',  _.bind(this.addNewColor, this, this.colorsGrad, this.btnGradColor));
+                this.colorsGrad = this.btnGradColor.getPicker();
+                this.btnGradColor.on('color:select', _.bind(this.onColorsGradientSelect, this));
 
                 this.btnBorderColor = new Common.UI.ColorButton({
-                    style: "width:45px;",
-                    menu        : new Common.UI.Menu({
-                        items: [
-                            { template: _.template('<div id="textart-border-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
-                            { template: _.template('<a id="textart-border-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
-                        ]
-                    })
+                    parentEl: $('#textart-border-color-btn'),
+                    style: "width:45px;"
                 });
-                this.btnBorderColor.render( $('#textart-border-color-btn'));
                 this.btnBorderColor.setColor('000000');
                 this.lockedControls.push(this.btnBorderColor);
-                this.colorsBorder = new Common.UI.ThemeColorPalette({
-                    el: $('#textart-border-color-menu'),
-                    value: '000000'
-                });
-                this.colorsBorder.on('select', _.bind(this.onColorsBorderSelect, this));
-                this.btnBorderColor.menu.items[1].on('click',  _.bind(this.addNewColor, this, this.colorsBorder, this.btnBorderColor));
+                this.colorsBorder = this.btnBorderColor.getPicker();
+                this.btnBorderColor.on('color:select', _.bind(this.onColorsBorderSelect, this));
             }
             
             this.colorsBorder.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
@@ -1669,7 +1610,6 @@ define([
         txtBrownPaper           : 'Brown Paper',
         txtPapyrus              : 'Papyrus',
         txtWood                 : 'Wood',
-        textNewColor            : 'Add New Custom Color',
         strTransparency         : 'Opacity',
         textNoFill              : 'No Fill',
         textSelectTexture       : 'Select',

From 12a6aba11fce061e5a6692727f8743998771b1a5 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Wed, 29 Apr 2020 21:32:48 +0300
Subject: [PATCH 4/8] [SSE] Refactoring color button component

---
 .../main/app/view/CellSettings.js             | 111 ++++------------
 .../main/app/view/ChartSettings.js            | 125 +++++-------------
 .../main/app/view/ShapeSettings.js            | 112 ++++------------
 .../main/app/view/TextArtSettings.js          | 112 ++++------------
 4 files changed, 113 insertions(+), 347 deletions(-)

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

From 54e82bc948785e4670242d6013bd1b9c4ded2946 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Wed, 29 Apr 2020 22:15:04 +0300
Subject: [PATCH 5/8] Refactoring

---
 .../main/app/view/ControlSettingsDialog.js    |  1 -
 .../main/app/view/DropcapSettingsAdvanced.js  |  2 --
 .../main/app/view/ListSettingsDialog.js       |  1 -
 .../main/app/view/ParagraphSettings.js        |  1 -
 .../app/view/ParagraphSettingsAdvanced.js     |  2 --
 .../main/app/view/ShapeSettings.js            | 13 ++++--------
 .../main/app/view/TableSettings.js            |  4 +---
 .../main/app/view/TableSettingsAdvanced.js    |  3 ---
 .../main/app/view/TextArtSettings.js          |  7 ++-----
 .../main/app/view/ShapeSettings.js            | 13 ++++--------
 .../main/app/view/SlideSettings.js            | 10 +++------
 .../main/app/view/TableSettings.js            |  4 +---
 .../main/app/view/TextArtSettings.js          | 13 ++++--------
 .../main/app/view/CellSettings.js             | 11 +++-------
 .../main/app/view/ChartSettings.js            | 21 +++++++------------
 .../main/app/view/ShapeSettings.js            | 13 ++++--------
 .../main/app/view/TextArtSettings.js          | 13 ++++--------
 17 files changed, 37 insertions(+), 95 deletions(-)

diff --git a/apps/documenteditor/main/app/view/ControlSettingsDialog.js b/apps/documenteditor/main/app/view/ControlSettingsDialog.js
index d736fc090..baffae80e 100644
--- a/apps/documenteditor/main/app/view/ControlSettingsDialog.js
+++ b/apps/documenteditor/main/app/view/ControlSettingsDialog.js
@@ -127,7 +127,6 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
 
             this.btnColor = new Common.UI.ColorButton({
                 parentEl: $('#control-settings-color-btn'),
-                style: "width:45px;",
                 additionalItems: [{
                         id: 'control-settings-system-color',
                         caption: this.textSystemColor,
diff --git a/apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js b/apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js
index d491afb40..3d5fbd204 100644
--- a/apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js
+++ b/apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js
@@ -161,7 +161,6 @@ define([
 
             this.btnBorderColor = new Common.UI.ColorButton({
                 parentEl: $('#drop-advanced-button-bordercolor'),
-                style: "width:45px;",
                 additionalAlign: this.menuAddAlign
             });
             this.btnBorderColor.on('color:select', _.bind(function(btn, color) {
@@ -172,7 +171,6 @@ define([
 
             this.btnBackColor = new Common.UI.ColorButton({
                 parentEl: $('#drop-advanced-button-color'),
-                style: "width:45px;",
                 additionalAlign: this.menuAddAlign,
                 transparent: true
             });
diff --git a/apps/documenteditor/main/app/view/ListSettingsDialog.js b/apps/documenteditor/main/app/view/ListSettingsDialog.js
index 31a9abb4a..ff07be93b 100644
--- a/apps/documenteditor/main/app/view/ListSettingsDialog.js
+++ b/apps/documenteditor/main/app/view/ListSettingsDialog.js
@@ -156,7 +156,6 @@ define([
 
             this.btnColor = new Common.UI.ColorButton({
                 parentEl: $window.find('#id-dlg-bullet-color'),
-                style: 'width:45px;',
                 additionalItems: [{
                         id: 'id-dlg-bullet-text-color',
                         caption: this.txtLikeText,
diff --git a/apps/documenteditor/main/app/view/ParagraphSettings.js b/apps/documenteditor/main/app/view/ParagraphSettings.js
index a091d4dce..148b62b63 100644
--- a/apps/documenteditor/main/app/view/ParagraphSettings.js
+++ b/apps/documenteditor/main/app/view/ParagraphSettings.js
@@ -163,7 +163,6 @@ define([
 
             this.btnColor = new Common.UI.ColorButton({
                 parentEl: $markup.findById('#paragraph-color-btn'),
-                style: "width:45px;",
                 disabled: this._locked,
                 transparent: true,
                 menu        : true
diff --git a/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js b/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js
index 8aa549ca7..3a2b4ab89 100644
--- a/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js
+++ b/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js
@@ -359,7 +359,6 @@ define([    'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
 
             this.btnBorderColor = new Common.UI.ColorButton({
                 parentEl: $('#paragraphadv-border-color-btn'),
-                style: "width:45px;",
                 additionalAlign: this.menuAddAlign
             });
             this.colorsBorder = this.btnBorderColor.getPicker();
@@ -402,7 +401,6 @@ define([    'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
 
             this.btnBackColor = new Common.UI.ColorButton({
                 parentEl: $('#paragraphadv-back-color-btn'),
-                style: "width:45px;",
                 transparent: true,
                 additionalAlign: this.menuAddAlign
             });
diff --git a/apps/documenteditor/main/app/view/ShapeSettings.js b/apps/documenteditor/main/app/view/ShapeSettings.js
index 2a69356d5..7ff69e569 100644
--- a/apps/documenteditor/main/app/view/ShapeSettings.js
+++ b/apps/documenteditor/main/app/view/ShapeSettings.js
@@ -1688,7 +1688,6 @@ define([
                 // create color buttons
                 this.btnBackColor = new Common.UI.ColorButton({
                     parentEl: $('#shape-back-color-btn'),
-                    style: "width:45px;",
                     transparent: true
                 });
                 this.btnBackColor.setColor('transparent');
@@ -1697,8 +1696,7 @@ define([
                 this.btnBackColor.on('color:select', _.bind(this.onColorsBackSelect, this));
 
                 this.btnFGColor = new Common.UI.ColorButton({
-                    parentEl: $('#shape-foreground-color-btn'),
-                    style: "width:45px;"
+                    parentEl: $('#shape-foreground-color-btn')
                 });
                 this.btnFGColor.setColor('000000');
                 this.fillControls.push(this.btnFGColor);
@@ -1706,8 +1704,7 @@ define([
                 this.btnFGColor.on('color:select', _.bind(this.onColorsFGSelect, this));
 
                 this.btnBGColor = new Common.UI.ColorButton({
-                    parentEl: $('#shape-background-color-btn'),
-                    style: "width:45px;"
+                    parentEl: $('#shape-background-color-btn')
                 });
                 this.btnBGColor.setColor('ffffff');
                 this.fillControls.push(this.btnBGColor);
@@ -1715,8 +1712,7 @@ define([
                 this.btnBGColor.on('color:select', _.bind(this.onColorsBGSelect, this));
 
                 this.btnGradColor = new Common.UI.ColorButton({
-                    parentEl: $('#shape-gradient-color-btn'),
-                    style: "width:45px;"
+                    parentEl: $('#shape-gradient-color-btn')
                 });
                 this.btnGradColor.setColor('000000');
                 this.fillControls.push(this.btnGradColor);
@@ -1724,8 +1720,7 @@ define([
                 this.btnGradColor.on('color:select', _.bind(this.onColorsGradientSelect, this));
 
                 this.btnBorderColor = new Common.UI.ColorButton({
-                    parentEl: $('#shape-border-color-btn'),
-                    style: "width:45px;"
+                    parentEl: $('#shape-border-color-btn')
                 });
                 this.btnBorderColor.setColor('000000');
                 this.lockedControls.push(this.btnBorderColor);
diff --git a/apps/documenteditor/main/app/view/TableSettings.js b/apps/documenteditor/main/app/view/TableSettings.js
index cd7b73b9a..368c09bad 100644
--- a/apps/documenteditor/main/app/view/TableSettings.js
+++ b/apps/documenteditor/main/app/view/TableSettings.js
@@ -639,8 +639,7 @@ define([
              if (!this.btnBackColor) {
                 // create color buttons
                  this.btnBorderColor = new Common.UI.ColorButton({
-                     parentEl: $('#table-border-color-btn'),
-                     style: "width:45px;"
+                     parentEl: $('#table-border-color-btn')
                  });
                  this.btnBorderColor.setColor('000000');
                  this.lockedControls.push(this.btnBorderColor);
@@ -648,7 +647,6 @@ define([
 
                  this.btnBackColor = new Common.UI.ColorButton({
                      parentEl: $('#table-back-color-btn'),
-                     style: "width:45px;",
                      transparent: true
                  });
                  this.lockedControls.push(this.btnBackColor);
diff --git a/apps/documenteditor/main/app/view/TableSettingsAdvanced.js b/apps/documenteditor/main/app/view/TableSettingsAdvanced.js
index 84781a33e..766de0c50 100644
--- a/apps/documenteditor/main/app/view/TableSettingsAdvanced.js
+++ b/apps/documenteditor/main/app/view/TableSettingsAdvanced.js
@@ -880,7 +880,6 @@ define([    'text!documenteditor/main/app/template/TableSettingsAdvanced.templat
 
             this.btnBorderColor = new Common.UI.ColorButton({
                 parentEl: $('#tableadv-border-color-btn'),
-                style: "width:45px;",
                 additionalAlign: this.menuAddAlign
             });
             this.btnBorderColor.on('color:select', _.bind(me.onColorsBorderSelect, me));
@@ -889,7 +888,6 @@ define([    'text!documenteditor/main/app/template/TableSettingsAdvanced.templat
 
             this.btnBackColor = new Common.UI.ColorButton({
                 parentEl: $('#tableadv-button-back-color'),
-                style: "width:45px;",
                 additionalAlign: this.menuAddAlign,
                 transparent: true
             });
@@ -898,7 +896,6 @@ define([    'text!documenteditor/main/app/template/TableSettingsAdvanced.templat
 
             this.btnTableBackColor = new Common.UI.ColorButton({
                 parentEl: $('#tableadv-button-table-back-color'),
-                style: "width:45px;",
                 additionalAlign: this.menuAddAlign,
                 transparent: true
             });
diff --git a/apps/documenteditor/main/app/view/TextArtSettings.js b/apps/documenteditor/main/app/view/TextArtSettings.js
index c92cb9d65..e655aa011 100644
--- a/apps/documenteditor/main/app/view/TextArtSettings.js
+++ b/apps/documenteditor/main/app/view/TextArtSettings.js
@@ -1093,8 +1093,7 @@ define([
             if (this._initSettings) return;
             if (!this.btnBackColor) {
                 this.btnBorderColor = new Common.UI.ColorButton({
-                    parentEl: $('#textart-border-color-btn'),
-                    style: "width:45px;"
+                    parentEl: $('#textart-border-color-btn')
                 });
                 this.btnBorderColor.setColor('000000');
                 this.lockedControls.push(this.btnBorderColor);
@@ -1102,8 +1101,7 @@ define([
                 this.btnBorderColor.on('color:select', _.bind(this.onColorsBorderSelect, this));
 
                 this.btnGradColor = new Common.UI.ColorButton({
-                    parentEl: $('#textart-gradient-color-btn'),
-                    style: "width:45px;"
+                    parentEl: $('#textart-gradient-color-btn')
                 });
                 this.btnGradColor.setColor('000000');
                 this.lockedControls.push(this.btnGradColor);
@@ -1112,7 +1110,6 @@ define([
 
                 this.btnBackColor = new Common.UI.ColorButton({
                     parentEl: $('#textart-back-color-btn'),
-                    style: "width:45px;",
                     transparent: true
                 });
                 this.btnBackColor.setColor('transparent');
diff --git a/apps/presentationeditor/main/app/view/ShapeSettings.js b/apps/presentationeditor/main/app/view/ShapeSettings.js
index 3042dbdab..5e1d45fe3 100644
--- a/apps/presentationeditor/main/app/view/ShapeSettings.js
+++ b/apps/presentationeditor/main/app/view/ShapeSettings.js
@@ -1542,7 +1542,6 @@ define([
             if (!this.btnBackColor) {
                 this.btnBackColor = new Common.UI.ColorButton({
                     parentEl: $('#shape-back-color-btn'),
-                    style: "width:45px;",
                     transparent: true
                 });
                 this.btnBackColor.setColor('transparent');
@@ -1551,8 +1550,7 @@ define([
                 this.btnBackColor.on('color:select', _.bind(this.onColorsBackSelect, this));
 
                 this.btnFGColor = new Common.UI.ColorButton({
-                    parentEl: $('#shape-foreground-color-btn'),
-                    style: "width:45px;"
+                    parentEl: $('#shape-foreground-color-btn')
                 });
                 this.btnFGColor.setColor('000000');
                 this.fillControls.push(this.btnFGColor);
@@ -1560,8 +1558,7 @@ define([
                 this.btnFGColor.on('color:select', _.bind(this.onColorsFGSelect, this));
 
                 this.btnBGColor = new Common.UI.ColorButton({
-                    parentEl: $('#shape-background-color-btn'),
-                    style: "width:45px;"
+                    parentEl: $('#shape-background-color-btn')
                 });
                 this.btnBGColor.setColor('ffffff');
                 this.fillControls.push(this.btnBGColor);
@@ -1569,8 +1566,7 @@ define([
                 this.btnBGColor.on('color:select', _.bind(this.onColorsBGSelect, this));
 
                 this.btnGradColor = new Common.UI.ColorButton({
-                    parentEl: $('#shape-gradient-color-btn'),
-                    style: "width:45px;"
+                    parentEl: $('#shape-gradient-color-btn')
                 });
                 this.btnGradColor.setColor('000000');
                 this.fillControls.push(this.btnGradColor);
@@ -1578,8 +1574,7 @@ define([
                 this.btnGradColor.on('color:select', _.bind(this.onColorsGradientSelect, this));
 
                 this.btnBorderColor = new Common.UI.ColorButton({
-                    parentEl: $('#shape-border-color-btn'),
-                    style: "width:45px;"
+                    parentEl: $('#shape-border-color-btn')
                 });
                 this.btnBorderColor.setColor('000000');
                 this.lockedControls.push(this.btnBorderColor);
diff --git a/apps/presentationeditor/main/app/view/SlideSettings.js b/apps/presentationeditor/main/app/view/SlideSettings.js
index 3a1a5949e..ce6b0ea3e 100644
--- a/apps/presentationeditor/main/app/view/SlideSettings.js
+++ b/apps/presentationeditor/main/app/view/SlideSettings.js
@@ -135,7 +135,6 @@ define([
 
             this.btnBackColor = new Common.UI.ColorButton({
                 parentEl: $('#slide-back-color-btn'),
-                style: "width:45px;",
                 disabled: true,
                 transparent: true,
                 menu: true
@@ -1065,8 +1064,7 @@ define([
                 this.colorsBack = this.btnBackColor.getPicker();
 
                 this.btnFGColor = new Common.UI.ColorButton({
-                    parentEl: $('#slide-foreground-color-btn'),
-                    style: "width:45px;"
+                    parentEl: $('#slide-foreground-color-btn')
                 });
                 this.btnFGColor.setColor('000000');
                 this.FillItems.push(this.btnFGColor);
@@ -1074,8 +1072,7 @@ define([
                 this.btnFGColor.on('color:select', _.bind(this.onColorsFGSelect, this));
 
                 this.btnBGColor = new Common.UI.ColorButton({
-                    parentEl: $('#slide-background-color-btn'),
-                    style: "width:45px;"
+                    parentEl: $('#slide-background-color-btn')
                 });
                 this.btnBGColor.setColor('ffffff');
                 this.FillItems.push(this.btnBGColor);
@@ -1083,8 +1080,7 @@ define([
                 this.btnBGColor.on('color:select', _.bind(this.onColorsBGSelect, this));
 
                 this.btnGradColor = new Common.UI.ColorButton({
-                    parentEl: $('#slide-gradient-color-btn'),
-                    style: "width:45px;"
+                    parentEl: $('#slide-gradient-color-btn')
                 });
                 this.btnGradColor.setColor('000000');
                 this.FillItems.push(this.btnGradColor);
diff --git a/apps/presentationeditor/main/app/view/TableSettings.js b/apps/presentationeditor/main/app/view/TableSettings.js
index bff9c9138..6dbfc5f9d 100644
--- a/apps/presentationeditor/main/app/view/TableSettings.js
+++ b/apps/presentationeditor/main/app/view/TableSettings.js
@@ -606,8 +606,7 @@ define([
             if (this._initSettings) return;
             if (!this.btnBackColor) {
                 this.btnBorderColor = new Common.UI.ColorButton({
-                    parentEl: $('#table-border-color-btn'),
-                    style: "width:45px;"
+                    parentEl: $('#table-border-color-btn')
                 });
                 this.btnBorderColor.setColor('000000');
                 this.lockedControls.push(this.btnBorderColor);
@@ -615,7 +614,6 @@ define([
 
                 this.btnBackColor = new Common.UI.ColorButton({
                     parentEl: $('#table-back-color-btn'),
-                    style: "width:45px;",
                     transparent: true
                 });
                 this.lockedControls.push(this.btnBackColor);
diff --git a/apps/presentationeditor/main/app/view/TextArtSettings.js b/apps/presentationeditor/main/app/view/TextArtSettings.js
index 87c75064b..f56f8a261 100644
--- a/apps/presentationeditor/main/app/view/TextArtSettings.js
+++ b/apps/presentationeditor/main/app/view/TextArtSettings.js
@@ -1504,7 +1504,6 @@ define([
             if (!this.btnBackColor) {
                 this.btnBackColor = new Common.UI.ColorButton({
                     parentEl: $('#textart-back-color-btn'),
-                    style: "width:45px;",
                     transparent: true
                 });
                 this.btnBackColor.setColor('transparent');
@@ -1513,8 +1512,7 @@ define([
                 this.btnBackColor.on('color:select', _.bind(this.onColorsBackSelect, this));
 
                 this.btnFGColor = new Common.UI.ColorButton({
-                    parentEl: $('#textart-foreground-color-btn'),
-                    style: "width:45px;"
+                    parentEl: $('#textart-foreground-color-btn')
                 });
                 this.btnFGColor.setColor('000000');
                 this.lockedControls.push(this.btnFGColor);
@@ -1522,8 +1520,7 @@ define([
                 this.btnFGColor.on('color:select', _.bind(this.onColorsFGSelect, this));
 
                 this.btnBGColor = new Common.UI.ColorButton({
-                    parentEl: $('#textart-background-color-btn'),
-                    style: "width:45px;"
+                    parentEl: $('#textart-background-color-btn')
                 });
                 this.btnBGColor.setColor('ffffff');
                 this.lockedControls.push(this.btnBGColor);
@@ -1531,8 +1528,7 @@ define([
                 this.btnBGColor.on('color:select', _.bind(this.onColorsBGSelect, this));
 
                 this.btnGradColor = new Common.UI.ColorButton({
-                    parentEl: $('#textart-gradient-color-btn'),
-                    style: "width:45px;"
+                    parentEl: $('#textart-gradient-color-btn')
                 });
                 this.btnGradColor.setColor('000000');
                 this.lockedControls.push(this.btnGradColor);
@@ -1540,8 +1536,7 @@ define([
                 this.btnGradColor.on('color:select', _.bind(this.onColorsGradientSelect, this));
 
                 this.btnBorderColor = new Common.UI.ColorButton({
-                    parentEl: $('#textart-border-color-btn'),
-                    style: "width:45px;"
+                    parentEl: $('#textart-border-color-btn')
                 });
                 this.btnBorderColor.setColor('000000');
                 this.lockedControls.push(this.btnBorderColor);
diff --git a/apps/spreadsheeteditor/main/app/view/CellSettings.js b/apps/spreadsheeteditor/main/app/view/CellSettings.js
index 96abf1b82..d721d3569 100644
--- a/apps/spreadsheeteditor/main/app/view/CellSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/CellSettings.js
@@ -400,7 +400,6 @@ define([
 
             this.btnBorderColor = new Common.UI.ColorButton({
                 parentEl: $('#cell-border-color-btn'),
-                style: "width:45px;",
                 disabled: this._locked,
                 menu        : true
             });
@@ -409,7 +408,6 @@ define([
 
             this.btnBackColor = new Common.UI.ColorButton({
                 parentEl: $('#cell-back-color-btn'),
-                style: "width:45px;",
                 disabled: this._locked,
                 menu        : true,
                 transparent : true
@@ -755,8 +753,7 @@ define([
                  this.fillControls.push(this.btnBackColor);
 
                  this.btnGradColor = new Common.UI.ColorButton({
-                     parentEl: $('#cell-gradient-color-btn'),
-                     style: "width:45px;"
+                     parentEl: $('#cell-gradient-color-btn')
                  });
                  this.btnGradColor.setColor('000000');
                  this.fillControls.push(this.btnGradColor);
@@ -764,8 +761,7 @@ define([
                  this.btnGradColor.on('color:select', _.bind(this.onColorsGradientSelect, this));
 
                  this.btnFGColor = new Common.UI.ColorButton({
-                     parentEl: $('#cell-foreground-color-btn'),
-                     style: "width:45px;"
+                     parentEl: $('#cell-foreground-color-btn')
                  });
                  this.btnFGColor.setColor('000000');
                  this.fillControls.push(this.btnFGColor);
@@ -773,8 +769,7 @@ define([
                  this.btnFGColor.on('color:select', _.bind(this.onColorsFGSelect, this));
 
                  this.btnBGColor = new Common.UI.ColorButton({
-                     parentEl: $('#cell-background-color-btn'),
-                     style: "width:45px;"
+                     parentEl: $('#cell-background-color-btn')
                  });
                  this.btnBGColor.setColor('ffffff');
                  this.fillControls.push(this.btnBGColor);
diff --git a/apps/spreadsheeteditor/main/app/view/ChartSettings.js b/apps/spreadsheeteditor/main/app/view/ChartSettings.js
index c030b9028..dda14b980 100644
--- a/apps/spreadsheeteditor/main/app/view/ChartSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/ChartSettings.js
@@ -524,8 +524,7 @@ define([
                 defValue = this.defColor;
 
                 this.btnSparkColor = new Common.UI.ColorButton({
-                    parentEl: $('#spark-color-btn'),
-                    style: "width:45px;"
+                    parentEl: $('#spark-color-btn')
                 });
                 this.btnSparkColor.setColor('000000');
                 this.lockedControls.push(this.btnSparkColor);
@@ -533,8 +532,7 @@ define([
                 this.btnSparkColor.on('color:select', _.bind(this.onColorsSparkSelect, this));
 
                 this.btnHighColor = new Common.UI.ColorButton({
-                    parentEl: $('#spark-high-color-btn'),
-                    style: "width:45px;"
+                    parentEl: $('#spark-high-color-btn')
                 });
                 this.btnHighColor.setColor(this.defColor.color);
                 this.lockedControls.push(this.btnHighColor);
@@ -542,8 +540,7 @@ define([
                 this.btnHighColor.on('color:select', _.bind(this.onColorsPointSelect, this, 0));
 
                 this.btnLowColor = new Common.UI.ColorButton({
-                    parentEl: $('#spark-low-color-btn'),
-                    style: "width:45px;"
+                    parentEl: $('#spark-low-color-btn')
                 });
                 this.btnLowColor.setColor(this.defColor.color);
                 this.lockedControls.push(this.btnLowColor);
@@ -551,8 +548,7 @@ define([
                 this.btnLowColor.on('color:select', _.bind(this.onColorsPointSelect, this, 1));
 
                 this.btnNegativeColor = new Common.UI.ColorButton({
-                    parentEl: $('#spark-negative-color-btn'),
-                    style: "width:45px;"
+                    parentEl: $('#spark-negative-color-btn')
                 });
                 this.btnNegativeColor.setColor(this.defColor.color);
                 this.lockedControls.push(this.btnNegativeColor);
@@ -560,8 +556,7 @@ define([
                 this.btnNegativeColor.on('color:select', _.bind(this.onColorsPointSelect, this, 2));
 
                 this.btnFirstColor = new Common.UI.ColorButton({
-                    parentEl: $('#spark-first-color-btn'),
-                    style: "width:45px;"
+                    parentEl: $('#spark-first-color-btn')
                 });
                 this.lockedControls.push(this.btnFirstColor);
                 this.btnFirstColor.setColor(this.defColor.color);
@@ -569,8 +564,7 @@ define([
                 this.btnFirstColor.on('color:select', _.bind(this.onColorsPointSelect, this, 3));
 
                 this.btnLastColor = new Common.UI.ColorButton({
-                    parentEl: $('#spark-last-color-btn'),
-                    style: "width:45px;"
+                    parentEl: $('#spark-last-color-btn')
                 });
                 this.btnLastColor.setColor(this.defColor.color);
                 this.lockedControls.push(this.btnLastColor);
@@ -578,8 +572,7 @@ define([
                 this.btnLastColor.on('color:select', _.bind(this.onColorsPointSelect, this, 4));
 
                 this.btnMarkersColor = new Common.UI.ColorButton({
-                    parentEl: $('#spark-markers-color-btn'),
-                    style: "width:45px;"
+                    parentEl: $('#spark-markers-color-btn')
                 });
                 this.btnMarkersColor.setColor(this.defColor.color);
                 this.lockedControls.push(this.btnMarkersColor);
diff --git a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
index f651b9809..91c3afbc2 100644
--- a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
@@ -1587,7 +1587,6 @@ define([
             if (!this.btnBackColor) {
                 this.btnBackColor = new Common.UI.ColorButton({
                     parentEl: $('#shape-back-color-btn'),
-                    style: "width:45px;",
                     transparent: true
                 });
                 this.btnBackColor.setColor('transparent');
@@ -1596,8 +1595,7 @@ define([
                 this.btnBackColor.on('color:select', _.bind(this.onColorsBackSelect, this));
 
                 this.btnBorderColor = new Common.UI.ColorButton({
-                    parentEl: $('#shape-border-color-btn'),
-                    style: "width:45px;"
+                    parentEl: $('#shape-border-color-btn')
                 });
                 this.btnBorderColor.setColor('000000');
                 this.lockedControls.push(this.btnBorderColor);
@@ -1605,8 +1603,7 @@ define([
                 this.btnBorderColor.on('color:select', _.bind(this.onColorsBorderSelect, this));
 
                 this.btnFGColor = new Common.UI.ColorButton({
-                    parentEl: $('#shape-foreground-color-btn'),
-                    style: "width:45px;"
+                    parentEl: $('#shape-foreground-color-btn')
                 });
                 this.btnFGColor.setColor('000000');
                 this.fillControls.push(this.btnFGColor);
@@ -1614,8 +1611,7 @@ define([
                 this.btnFGColor.on('color:select', _.bind(this.onColorsFGSelect, this));
 
                 this.btnBGColor = new Common.UI.ColorButton({
-                    parentEl: $('#shape-background-color-btn'),
-                    style: "width:45px;"
+                    parentEl: $('#shape-background-color-btn')
                 });
                 this.btnBGColor.setColor('ffffff');
                 this.fillControls.push(this.btnBGColor);
@@ -1623,8 +1619,7 @@ define([
                 this.btnBGColor.on('color:select', _.bind(this.onColorsBGSelect, this));
 
                 this.btnGradColor = new Common.UI.ColorButton({
-                    parentEl: $('#shape-gradient-color-btn'),
-                    style: "width:45px;"
+                    parentEl: $('#shape-gradient-color-btn')
                 });
                 this.btnGradColor.setColor('000000');
                 this.fillControls.push(this.btnGradColor);
diff --git a/apps/spreadsheeteditor/main/app/view/TextArtSettings.js b/apps/spreadsheeteditor/main/app/view/TextArtSettings.js
index 94a0f7dea..06cb8ac0c 100644
--- a/apps/spreadsheeteditor/main/app/view/TextArtSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/TextArtSettings.js
@@ -1508,8 +1508,7 @@ define([
             if (this._initSettings) return;
             if (!this.btnBackColor) {
                 this.btnBorderColor = new Common.UI.ColorButton({
-                    parentEl: $('#textart-border-color-btn'),
-                    style: "width:45px;"
+                    parentEl: $('#textart-border-color-btn')
                 });
                 this.btnBorderColor.setColor('000000');
                 this.lockedControls.push(this.btnBorderColor);
@@ -1518,7 +1517,6 @@ define([
 
                 this.btnBackColor = new Common.UI.ColorButton({
                     parentEl: $('#textart-back-color-btn'),
-                    style: "width:45px;",
                     transparent: true
                 });
                 this.btnBackColor.setColor('transparent');
@@ -1527,8 +1525,7 @@ define([
                 this.btnBackColor.on('color:select', _.bind(this.onColorsBackSelect, this));
 
                 this.btnFGColor = new Common.UI.ColorButton({
-                    parentEl: $('#textart-foreground-color-btn'),
-                    style: "width:45px;"
+                    parentEl: $('#textart-foreground-color-btn')
                 });
                 this.btnFGColor.setColor('000000');
                 this.lockedControls.push(this.btnFGColor);
@@ -1536,8 +1533,7 @@ define([
                 this.btnFGColor.on('color:select', _.bind(this.onColorsFGSelect, this));
 
                 this.btnBGColor = new Common.UI.ColorButton({
-                    parentEl: $('#textart-background-color-btn'),
-                    style: "width:45px;"
+                    parentEl: $('#textart-background-color-btn')
                 });
                 this.btnBGColor.setColor('ffffff');
                 this.lockedControls.push(this.btnBGColor);
@@ -1545,8 +1541,7 @@ define([
                 this.btnBGColor.on('color:select', _.bind(this.onColorsBGSelect, this));
 
                 this.btnGradColor = new Common.UI.ColorButton({
-                    parentEl: $('#textart-gradient-color-btn'),
-                    style: "width:45px;"
+                    parentEl: $('#textart-gradient-color-btn')
                 });
                 this.btnGradColor.setColor('000000');
                 this.lockedControls.push(this.btnGradColor);

From a581950dbb52c59b6968b4b0d200d8aac12ebabc Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Wed, 29 Apr 2020 22:15:22 +0300
Subject: [PATCH 6/8] Refactoring

---
 apps/common/main/resources/less/buttons.less | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less
index 8c9101fec..74f9fabf5 100644
--- a/apps/common/main/resources/less/buttons.less
+++ b/apps/common/main/resources/less/buttons.less
@@ -544,6 +544,7 @@
 }
 
 .btn-color {
+    width: 45px;
     height: 22px;
     padding: 1px 11px 1px 1px;
     border:1px solid @input-border;

From d351ad052f39717ae3768f546d906e3af96e2c0c Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Wed, 29 Apr 2020 22:28:55 +0300
Subject: [PATCH 7/8] Update translation

---
 apps/documenteditor/main/locale/en.json     | 18 +++++++++---------
 apps/presentationeditor/main/locale/en.json | 11 ++++++-----
 apps/presentationeditor/main/locale/ru.json |  1 +
 apps/spreadsheeteditor/main/locale/en.json  | 11 ++++++-----
 apps/spreadsheeteditor/main/locale/ru.json  |  1 +
 5 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/apps/documenteditor/main/locale/en.json b/apps/documenteditor/main/locale/en.json
index dcb5433b1..d12bd6502 100644
--- a/apps/documenteditor/main/locale/en.json
+++ b/apps/documenteditor/main/locale/en.json
@@ -1183,7 +1183,7 @@
   "DE.Views.ControlSettingsDialog.textLang": "Language",
   "DE.Views.ControlSettingsDialog.textLock": "Locking",
   "DE.Views.ControlSettingsDialog.textName": "Title",
-  "DE.Views.ControlSettingsDialog.textNewColor": "Add New Custom Color",
+  "del_DE.Views.ControlSettingsDialog.textNewColor": "Add New Custom Color",
   "DE.Views.ControlSettingsDialog.textNone": "None",
   "DE.Views.ControlSettingsDialog.textShowAs": "Show as",
   "DE.Views.ControlSettingsDialog.textSystemColor": "System",
@@ -1445,7 +1445,7 @@
   "DE.Views.DropcapSettingsAdvanced.textLeft": "Left",
   "DE.Views.DropcapSettingsAdvanced.textMargin": "Margin",
   "DE.Views.DropcapSettingsAdvanced.textMove": "Move with text",
-  "DE.Views.DropcapSettingsAdvanced.textNewColor": "Add New Custom Color",
+  "del_DE.Views.DropcapSettingsAdvanced.textNewColor": "Add New Custom Color",
   "DE.Views.DropcapSettingsAdvanced.textNone": "None",
   "DE.Views.DropcapSettingsAdvanced.textPage": "Page",
   "DE.Views.DropcapSettingsAdvanced.textParagraph": "Paragraph",
@@ -1741,7 +1741,7 @@
   "DE.Views.ListSettingsDialog.textCenter": "Center",
   "DE.Views.ListSettingsDialog.textLeft": "Left",
   "DE.Views.ListSettingsDialog.textLevel": "Level",
-  "DE.Views.ListSettingsDialog.textNewColor": "Add New Custom Color",
+  "del_DE.Views.ListSettingsDialog.textNewColor": "Add New Custom Color",
   "DE.Views.ListSettingsDialog.textPreview": "Preview",
   "DE.Views.ListSettingsDialog.textRight": "Right",
   "DE.Views.ListSettingsDialog.txtAlign": "Alignment",
@@ -1866,7 +1866,7 @@
   "DE.Views.ParagraphSettings.textAuto": "Multiple",
   "DE.Views.ParagraphSettings.textBackColor": "Background color",
   "DE.Views.ParagraphSettings.textExact": "Exactly",
-  "DE.Views.ParagraphSettings.textNewColor": "Add New Custom Color",
+  "del_DE.Views.ParagraphSettings.textNewColor": "Add New Custom Color",
   "DE.Views.ParagraphSettings.txtAutoText": "Auto",
   "DE.Views.ParagraphSettingsAdvanced.noTabs": "The specified tabs will appear in this field",
   "DE.Views.ParagraphSettingsAdvanced.strAllCaps": "All caps",
@@ -1916,7 +1916,7 @@
   "DE.Views.ParagraphSettingsAdvanced.textLeader": "Leader",
   "DE.Views.ParagraphSettingsAdvanced.textLeft": "Left",
   "DE.Views.ParagraphSettingsAdvanced.textLevel": "Level",
-  "DE.Views.ParagraphSettingsAdvanced.textNewColor": "Add New Custom Color",
+  "del_DE.Views.ParagraphSettingsAdvanced.textNewColor": "Add New Custom Color",
   "DE.Views.ParagraphSettingsAdvanced.textNone": "None",
   "DE.Views.ParagraphSettingsAdvanced.textNoneSpecial": "(none)",
   "DE.Views.ParagraphSettingsAdvanced.textPosition": "Position",
@@ -1977,7 +1977,7 @@
   "DE.Views.ShapeSettings.textHintFlipV": "Flip Vertically",
   "DE.Views.ShapeSettings.textImageTexture": "Picture or Texture",
   "DE.Views.ShapeSettings.textLinear": "Linear",
-  "DE.Views.ShapeSettings.textNewColor": "Add New Custom Color",
+  "del_DE.Views.ShapeSettings.textNewColor": "Add New Custom Color",
   "DE.Views.ShapeSettings.textNoFill": "No Fill",
   "DE.Views.ShapeSettings.textPatternFill": "Pattern",
   "DE.Views.ShapeSettings.textRadial": "Radial",
@@ -2093,7 +2093,7 @@
   "DE.Views.TableSettings.textHeader": "Header",
   "DE.Views.TableSettings.textHeight": "Height",
   "DE.Views.TableSettings.textLast": "Last",
-  "DE.Views.TableSettings.textNewColor": "Add New Custom Color",
+  "del_DE.Views.TableSettings.textNewColor": "Add New Custom Color",
   "DE.Views.TableSettings.textRows": "Rows",
   "DE.Views.TableSettings.textSelectBorders": "Select borders you want to change applying style chosen above",
   "DE.Views.TableSettings.textTemplate": "Select From Template",
@@ -2150,7 +2150,7 @@
   "DE.Views.TableSettingsAdvanced.textMargins": "Cell Margins",
   "DE.Views.TableSettingsAdvanced.textMeasure": "Measure in",
   "DE.Views.TableSettingsAdvanced.textMove": "Move object with text",
-  "DE.Views.TableSettingsAdvanced.textNewColor": "Add New Custom Color",
+  "del_DE.Views.TableSettingsAdvanced.textNewColor": "Add New Custom Color",
   "DE.Views.TableSettingsAdvanced.textOnlyCells": "For selected cells only",
   "DE.Views.TableSettingsAdvanced.textOptions": "Options",
   "DE.Views.TableSettingsAdvanced.textOverlap": "Allow overlap",
@@ -2203,7 +2203,7 @@
   "DE.Views.TextArtSettings.textGradient": "Gradient",
   "DE.Views.TextArtSettings.textGradientFill": "Gradient Fill",
   "DE.Views.TextArtSettings.textLinear": "Linear",
-  "DE.Views.TextArtSettings.textNewColor": "Add New Custom Color",
+  "del_DE.Views.TextArtSettings.textNewColor": "Add New Custom Color",
   "DE.Views.TextArtSettings.textNoFill": "No Fill",
   "DE.Views.TextArtSettings.textRadial": "Radial",
   "DE.Views.TextArtSettings.textSelectTexture": "Select",
diff --git a/apps/presentationeditor/main/locale/en.json b/apps/presentationeditor/main/locale/en.json
index bf5cd807c..a1522e455 100644
--- a/apps/presentationeditor/main/locale/en.json
+++ b/apps/presentationeditor/main/locale/en.json
@@ -14,6 +14,7 @@
   "Common.define.chartData.textPoint": "XY (Scatter)",
   "Common.define.chartData.textStock": "Stock",
   "Common.define.chartData.textSurface": "Surface",
+  "Common.UI.ColorButton.textNewColor": "Add New Custom Color",
   "Common.UI.ComboBorderSize.txtNoBorders": "No borders",
   "Common.UI.ComboBorderSizeEditable.txtNoBorders": "No borders",
   "Common.UI.ComboDataView.emptyComboText": "No styles",
@@ -117,7 +118,7 @@
   "Common.Views.InsertTableDialog.txtTitle": "Table Size",
   "Common.Views.InsertTableDialog.txtTitleSplit": "Split Cell",
   "Common.Views.LanguageDialog.labelSelect": "Select document language",
-  "Common.Views.ListSettingsDialog.textNewColor": "Add New Custom Color",
+  "del_Common.Views.ListSettingsDialog.textNewColor": "Add New Custom Color",
   "Common.Views.ListSettingsDialog.tipChange": "Change bullet",
   "Common.Views.ListSettingsDialog.txtBullet": "Bullet",
   "Common.Views.ListSettingsDialog.txtColor": "Color",
@@ -1420,7 +1421,7 @@
   "PE.Views.ShapeSettings.textHintFlipV": "Flip Vertically",
   "PE.Views.ShapeSettings.textImageTexture": "Picture or Texture",
   "PE.Views.ShapeSettings.textLinear": "Linear",
-  "PE.Views.ShapeSettings.textNewColor": "Custom Color",
+  "del_PE.Views.ShapeSettings.textNewColor": "Custom Color",
   "PE.Views.ShapeSettings.textNoFill": "No Fill",
   "PE.Views.ShapeSettings.textPatternFill": "Pattern",
   "PE.Views.ShapeSettings.textRadial": "Radial",
@@ -1530,7 +1531,7 @@
   "PE.Views.SlideSettings.textImageTexture": "Picture or Texture",
   "PE.Views.SlideSettings.textLeft": "Left",
   "PE.Views.SlideSettings.textLinear": "Linear",
-  "PE.Views.SlideSettings.textNewColor": "Custom Color",
+  "del_PE.Views.SlideSettings.textNewColor": "Custom Color",
   "PE.Views.SlideSettings.textNoFill": "No Fill",
   "PE.Views.SlideSettings.textNone": "None",
   "PE.Views.SlideSettings.textPatternFill": "Pattern",
@@ -1635,7 +1636,7 @@
   "PE.Views.TableSettings.textHeader": "Header",
   "PE.Views.TableSettings.textHeight": "Height",
   "PE.Views.TableSettings.textLast": "Last",
-  "PE.Views.TableSettings.textNewColor": "Custom Color",
+  "del_PE.Views.TableSettings.textNewColor": "Custom Color",
   "PE.Views.TableSettings.textRows": "Rows",
   "PE.Views.TableSettings.textSelectBorders": "Select borders you want to change applying style chosen above",
   "PE.Views.TableSettings.textTemplate": "Select From Template",
@@ -1692,7 +1693,7 @@
   "PE.Views.TextArtSettings.textGradientFill": "Gradient Fill",
   "PE.Views.TextArtSettings.textImageTexture": "Picture or Texture",
   "PE.Views.TextArtSettings.textLinear": "Linear",
-  "PE.Views.TextArtSettings.textNewColor": "Add New Custom Color",
+  "del_PE.Views.TextArtSettings.textNewColor": "Add New Custom Color",
   "PE.Views.TextArtSettings.textNoFill": "No Fill",
   "PE.Views.TextArtSettings.textPatternFill": "Pattern",
   "PE.Views.TextArtSettings.textRadial": "Radial",
diff --git a/apps/presentationeditor/main/locale/ru.json b/apps/presentationeditor/main/locale/ru.json
index 5f0a90d29..0551babf5 100644
--- a/apps/presentationeditor/main/locale/ru.json
+++ b/apps/presentationeditor/main/locale/ru.json
@@ -14,6 +14,7 @@
   "Common.define.chartData.textPoint": "Точечная",
   "Common.define.chartData.textStock": "Биржевая",
   "Common.define.chartData.textSurface": "Поверхность",
+  "Common.UI.ColorButton.textNewColor": "Пользовательский цвет",
   "Common.UI.ComboBorderSize.txtNoBorders": "Без границ",
   "Common.UI.ComboBorderSizeEditable.txtNoBorders": "Без границ",
   "Common.UI.ComboDataView.emptyComboText": "Без стилей",
diff --git a/apps/spreadsheeteditor/main/locale/en.json b/apps/spreadsheeteditor/main/locale/en.json
index 13fa749b0..bcc17a9ec 100644
--- a/apps/spreadsheeteditor/main/locale/en.json
+++ b/apps/spreadsheeteditor/main/locale/en.json
@@ -15,6 +15,7 @@
   "Common.define.chartData.textStock": "Stock",
   "Common.define.chartData.textSurface": "Surface",
   "Common.define.chartData.textWinLossSpark": "Win/Loss",
+  "Common.UI.ColorButton.textNewColor": "Add New Custom Color",
   "Common.UI.ComboBorderSize.txtNoBorders": "No borders",
   "Common.UI.ComboBorderSizeEditable.txtNoBorders": "No borders",
   "Common.UI.ComboDataView.emptyComboText": "No styles",
@@ -107,7 +108,7 @@
   "Common.Views.ImageFromUrlDialog.textUrl": "Paste an image URL:",
   "Common.Views.ImageFromUrlDialog.txtEmpty": "This field is required",
   "Common.Views.ImageFromUrlDialog.txtNotUrl": "This field should be a URL in the \"http://www.example.com\" format",
-  "Common.Views.ListSettingsDialog.textNewColor": "Add New Custom Color",
+  "del_Common.Views.ListSettingsDialog.textNewColor": "Add New Custom Color",
   "Common.Views.ListSettingsDialog.tipChange": "Change bullet",
   "Common.Views.ListSettingsDialog.txtBullet": "Bullet",
   "Common.Views.ListSettingsDialog.txtColor": "Color",
@@ -1234,7 +1235,7 @@
   "SSE.Views.CellSettings.textGradient": "Gradient",
   "SSE.Views.CellSettings.textGradientFill": "Gradient Fill",
   "SSE.Views.CellSettings.textLinear": "Linear",
-  "SSE.Views.CellSettings.textNewColor": "Add New Custom Color",
+  "del_SSE.Views.CellSettings.textNewColor": "Add New Custom Color",
   "SSE.Views.CellSettings.textNoFill": "No Fill",
   "SSE.Views.CellSettings.textOrientation": "Text Orientation",
   "SSE.Views.CellSettings.textPattern": "Pattern",
@@ -1268,7 +1269,7 @@
   "SSE.Views.ChartSettings.textLowPoint": "Low Point",
   "SSE.Views.ChartSettings.textMarkers": "Markers",
   "SSE.Views.ChartSettings.textNegativePoint": "Negative Point",
-  "SSE.Views.ChartSettings.textNewColor": "Add New Custom Color",
+  "del_SSE.Views.ChartSettings.textNewColor": "Add New Custom Color",
   "SSE.Views.ChartSettings.textRanges": "Data Range",
   "SSE.Views.ChartSettings.textSelectData": "Select Data",
   "SSE.Views.ChartSettings.textShow": "Show",
@@ -2143,7 +2144,7 @@
   "SSE.Views.ShapeSettings.textHintFlipV": "Flip Vertically",
   "SSE.Views.ShapeSettings.textImageTexture": "Picture or Texture",
   "SSE.Views.ShapeSettings.textLinear": "Linear",
-  "SSE.Views.ShapeSettings.textNewColor": "Custom Color",
+  "del_SSE.Views.ShapeSettings.textNewColor": "Custom Color",
   "SSE.Views.ShapeSettings.textNoFill": "No Fill",
   "SSE.Views.ShapeSettings.textOriginalSize": "Original Size",
   "SSE.Views.ShapeSettings.textPatternFill": "Pattern",
@@ -2402,7 +2403,7 @@
   "SSE.Views.TextArtSettings.textGradientFill": "Gradient Fill",
   "SSE.Views.TextArtSettings.textImageTexture": "Picture or Texture",
   "SSE.Views.TextArtSettings.textLinear": "Linear",
-  "SSE.Views.TextArtSettings.textNewColor": "Add New Custom Color",
+  "del_SSE.Views.TextArtSettings.textNewColor": "Add New Custom Color",
   "SSE.Views.TextArtSettings.textNoFill": "No Fill",
   "SSE.Views.TextArtSettings.textPatternFill": "Pattern",
   "SSE.Views.TextArtSettings.textRadial": "Radial",
diff --git a/apps/spreadsheeteditor/main/locale/ru.json b/apps/spreadsheeteditor/main/locale/ru.json
index 7c9065068..b0ef7343a 100644
--- a/apps/spreadsheeteditor/main/locale/ru.json
+++ b/apps/spreadsheeteditor/main/locale/ru.json
@@ -15,6 +15,7 @@
   "Common.define.chartData.textStock": "Биржевая",
   "Common.define.chartData.textSurface": "Поверхность",
   "Common.define.chartData.textWinLossSpark": "Выигрыш/проигрыш",
+  "Common.UI.ColorButton.textNewColor": "Пользовательский цвет",
   "Common.UI.ComboBorderSize.txtNoBorders": "Без границ",
   "Common.UI.ComboBorderSizeEditable.txtNoBorders": "Без границ",
   "Common.UI.ComboDataView.emptyComboText": "Без стилей",

From 7e498224398edb309b4abfa34b6fe1f132ffcb3f Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Thu, 30 Apr 2020 15:11:03 +0300
Subject: [PATCH 8/8] Refactoring color button

---
 apps/common/main/lib/component/ColorButton.js | 16 +++++++++++----
 .../main/app/view/ControlSettingsDialog.js    |  4 ++--
 .../main/app/view/DropcapSettingsAdvanced.js  |  4 ++--
 .../app/view/ParagraphSettingsAdvanced.js     |  4 ++--
 .../main/app/view/ShapeSettings.js            | 20 +++++++++----------
 .../main/app/view/TableSettings.js            |  4 ++--
 .../main/app/view/TableSettingsAdvanced.js    |  4 ++--
 .../main/app/view/TextArtSettings.js          | 12 +++++------
 .../main/app/view/ShapeSettings.js            | 20 +++++++++----------
 .../main/app/view/SlideSettings.js            | 16 +++++++--------
 .../main/app/view/TableSettings.js            |  4 ++--
 .../main/app/view/TextArtSettings.js          | 20 +++++++++----------
 .../main/app/view/CellSettings.js             | 20 +++++++++----------
 .../main/app/view/ChartSettings.js            |  4 ++--
 .../main/app/view/ShapeSettings.js            | 20 +++++++++----------
 .../main/app/view/TextArtSettings.js          | 20 +++++++++----------
 16 files changed, 100 insertions(+), 92 deletions(-)

diff --git a/apps/common/main/lib/component/ColorButton.js b/apps/common/main/lib/component/ColorButton.js
index 44d71408c..c01bcd325 100644
--- a/apps/common/main/lib/component/ColorButton.js
+++ b/apps/common/main/lib/component/ColorButton.js
@@ -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() {
diff --git a/apps/documenteditor/main/app/view/ControlSettingsDialog.js b/apps/documenteditor/main/app/view/ControlSettingsDialog.js
index baffae80e..d47059c98 100644
--- a/apps/documenteditor/main/app/view/ControlSettingsDialog.js
+++ b/apps/documenteditor/main/app/view/ControlSettingsDialog.js
@@ -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));
diff --git a/apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js b/apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js
index 3d5fbd204..cb6e6deb0 100644
--- a/apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js
+++ b/apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js
@@ -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({
diff --git a/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js b/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js
index 3a2b4ab89..05cb13442 100644
--- a/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js
+++ b/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js
@@ -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'),
diff --git a/apps/documenteditor/main/app/view/ShapeSettings.js b/apps/documenteditor/main/app/view/ShapeSettings.js
index 7ff69e569..d06ec060b 100644
--- a/apps/documenteditor/main/app/view/ShapeSettings.js
+++ b/apps/documenteditor/main/app/view/ShapeSettings.js
@@ -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));
diff --git a/apps/documenteditor/main/app/view/TableSettings.js b/apps/documenteditor/main/app/view/TableSettings.js
index 368c09bad..6f4814961 100644
--- a/apps/documenteditor/main/app/view/TableSettings.js
+++ b/apps/documenteditor/main/app/view/TableSettings.js
@@ -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();
 
diff --git a/apps/documenteditor/main/app/view/TableSettingsAdvanced.js b/apps/documenteditor/main/app/view/TableSettingsAdvanced.js
index 766de0c50..581ef0d1c 100644
--- a/apps/documenteditor/main/app/view/TableSettingsAdvanced.js
+++ b/apps/documenteditor/main/app/view/TableSettingsAdvanced.js
@@ -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({
diff --git a/apps/documenteditor/main/app/view/TextArtSettings.js b/apps/documenteditor/main/app/view/TextArtSettings.js
index e655aa011..9d07d7922 100644
--- a/apps/documenteditor/main/app/view/TextArtSettings.js
+++ b/apps/documenteditor/main/app/view/TextArtSettings.js
@@ -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));
diff --git a/apps/presentationeditor/main/app/view/ShapeSettings.js b/apps/presentationeditor/main/app/view/ShapeSettings.js
index 5e1d45fe3..c6e12c973 100644
--- a/apps/presentationeditor/main/app/view/ShapeSettings.js
+++ b/apps/presentationeditor/main/app/view/ShapeSettings.js
@@ -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));
diff --git a/apps/presentationeditor/main/app/view/SlideSettings.js b/apps/presentationeditor/main/app/view/SlideSettings.js
index ce6b0ea3e..d6bf4700c 100644
--- a/apps/presentationeditor/main/app/view/SlideSettings.js
+++ b/apps/presentationeditor/main/app/view/SlideSettings.js
@@ -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));
diff --git a/apps/presentationeditor/main/app/view/TableSettings.js b/apps/presentationeditor/main/app/view/TableSettings.js
index 6dbfc5f9d..5ac50cca6 100644
--- a/apps/presentationeditor/main/app/view/TableSettings.js
+++ b/apps/presentationeditor/main/app/view/TableSettings.js
@@ -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();
 
diff --git a/apps/presentationeditor/main/app/view/TextArtSettings.js b/apps/presentationeditor/main/app/view/TextArtSettings.js
index f56f8a261..160ecfc20 100644
--- a/apps/presentationeditor/main/app/view/TextArtSettings.js
+++ b/apps/presentationeditor/main/app/view/TextArtSettings.js
@@ -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));
diff --git a/apps/spreadsheeteditor/main/app/view/CellSettings.js b/apps/spreadsheeteditor/main/app/view/CellSettings.js
index d721d3569..4b6737cb2 100644
--- a/apps/spreadsheeteditor/main/app/view/CellSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/CellSettings.js
@@ -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));
diff --git a/apps/spreadsheeteditor/main/app/view/ChartSettings.js b/apps/spreadsheeteditor/main/app/view/ChartSettings.js
index dda14b980..9e4c51c95 100644
--- a/apps/spreadsheeteditor/main/app/view/ChartSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/ChartSettings.js
@@ -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));
diff --git a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
index 91c3afbc2..a9a3673e3 100644
--- a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
@@ -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));
diff --git a/apps/spreadsheeteditor/main/app/view/TextArtSettings.js b/apps/spreadsheeteditor/main/app/view/TextArtSettings.js
index 06cb8ac0c..0c775e9c7 100644
--- a/apps/spreadsheeteditor/main/app/view/TextArtSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/TextArtSettings.js
@@ -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));