From c295698704b7267d7bd0e8274cf6a95983405b4f Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Thu, 21 Jan 2021 22:48:27 +0300
Subject: [PATCH] Refactoring color buttons

---
 apps/common/main/lib/component/ColorButton.js | 19 +++++++++++++++++++
 apps/common/main/resources/less/buttons.less  |  4 ++++
 .../main/app/controller/FormsTab.js           |  2 +-
 .../main/app/controller/Toolbar.js            | 19 +++++++------------
 apps/documenteditor/main/app/view/FormsTab.js |  6 ++----
 apps/documenteditor/main/app/view/Toolbar.js  | 18 ++++++------------
 .../main/app/view/WatermarkSettingsDialog.js  | 19 ++++++++-----------
 .../main/resources/less/toolbar.less          |  5 ++++-
 .../main/app/controller/Toolbar.js            |  6 ++----
 .../main/app/view/Toolbar.js                  |  6 ++----
 .../main/app/controller/Toolbar.js            | 12 +++++-------
 .../main/app/view/HeaderFooterDialog.js       | 13 +++++--------
 .../main/app/view/Statusbar.js                |  4 ----
 .../main/app/view/Toolbar.js                  | 18 ++++--------------
 14 files changed, 69 insertions(+), 82 deletions(-)

diff --git a/apps/common/main/lib/component/ColorButton.js b/apps/common/main/lib/component/ColorButton.js
index 3f22195ee..77f163661 100644
--- a/apps/common/main/lib/component/ColorButton.js
+++ b/apps/common/main/lib/component/ColorButton.js
@@ -176,4 +176,23 @@ define([
         textAutoColor: 'Automatic'
 
     }, Common.UI.ColorButton || {}));
+
+
+    Common.UI.ButtonColored = Common.UI.Button.extend(_.extend({
+        render: function(parentEl) {
+            Common.UI.Button.prototype.render.call(this, parentEl);
+
+            $('button:first-child', this.cmpEl).append( $('<div class="btn-color-value-line"></div>'));
+            this.colorEl = this.cmpEl.find('.btn-color-value-line');
+        },
+
+        setColor: function(color) {
+            if (this.colorEl) {
+                this.colorEl.css({'background-color': (color=='transparent') ? color : ((typeof(color) == 'object') ? '#'+color.color : '#'+color)});
+                this.colorEl.toggleClass('bordered', color=='transparent');
+            }
+        }
+
+    }, Common.UI.ButtonColored || {}));
+
 });
\ 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 a06138bec..4f4f1ed29 100644
--- a/apps/common/main/resources/less/buttons.less
+++ b/apps/common/main/resources/less/buttons.less
@@ -362,6 +362,10 @@
         width: 14px;
         height: 3px;
         background-color: red;
+        &.bordered {
+            border: 1px solid @gray-deep;
+        }
+
     }
 }
 
diff --git a/apps/documenteditor/main/app/controller/FormsTab.js b/apps/documenteditor/main/app/controller/FormsTab.js
index 28e15d94d..facf19713 100644
--- a/apps/documenteditor/main/app/controller/FormsTab.js
+++ b/apps/documenteditor/main/app/controller/FormsTab.js
@@ -154,7 +154,7 @@ define([
                     this.view.mnuFormsColorPicker.selectByRGB(clr, true);
                 }
                 this.view.btnHighlight.currentColor = clr;
-                $('.btn-color-value-line', this.view.btnHighlight.cmpEl).css('background-color', clr ? '#' + clr : 'transparent');
+                this.view.btnHighlight.setColor(this.view.btnHighlight.currentColor || 'transparent');
             }
         },
 
diff --git a/apps/documenteditor/main/app/controller/Toolbar.js b/apps/documenteditor/main/app/controller/Toolbar.js
index 9a2a7ffe2..233b6b8eb 100644
--- a/apps/documenteditor/main/app/controller/Toolbar.js
+++ b/apps/documenteditor/main/app/controller/Toolbar.js
@@ -2380,7 +2380,7 @@ define([
             this.api.put_TextColor(color);
 
             this.toolbar.btnFontColor.currentColor = {color: color, isAuto: true};
-            $('.btn-color-value-line', this.toolbar.btnFontColor.cmpEl).css('background-color', '#000');
+            this.toolbar.btnFontColor.setColor('000');
 
             this.toolbar.mnuFontColorPicker.clearSelection();
             this.toolbar.mnuFontColorPicker.currentColor = {color: color, isAuto: true};
@@ -2397,10 +2397,8 @@ define([
         onSelectFontColor: function(picker, color) {
             this._state.clrtext = this._state.clrtext_asccolor = undefined;
 
-            var clr = (typeof(color) == 'object') ? (color.isAuto ? '#000' : color.color) : color;
-
             this.toolbar.btnFontColor.currentColor = color;
-            $('.btn-color-value-line', this.toolbar.btnFontColor.cmpEl).css('background-color', '#' + clr);
+            this.toolbar.btnFontColor.setColor((typeof(color) == 'object') ? (color.isAuto ? '000' : color.color) : color);
 
             this.toolbar.mnuFontColorPicker.currentColor = color;
             if (this.api)
@@ -2412,10 +2410,8 @@ define([
         onParagraphColorPickerSelect: function(picker, color) {
             this._state.clrback = this._state.clrshd_asccolor = undefined;
 
-            var clr = (typeof(color) == 'object') ? color.color : color;
-
             this.toolbar.btnParagraphColor.currentColor = color;
-            $('.btn-color-value-line', this.toolbar.btnParagraphColor.cmpEl).css('background-color', color!='transparent'?'#'+clr:clr);
+            this.toolbar.btnParagraphColor.setColor(color);
 
             this.toolbar.mnuParagraphColorPicker.currentColor = color;
             if (this.api) {
@@ -2451,7 +2447,7 @@ define([
             this._setMarkerColor('transparent', 'menu');
             item.setChecked(true, true);
             this.toolbar.btnHighlightColor.currentColor = 'transparent';
-            $('.btn-color-value-line', this.toolbar.btnHighlightColor.cmpEl).css('background-color', 'transparent');
+            this.toolbar.btnHighlightColor.setColor(this.toolbar.btnHighlightColor.currentColor);
         },
 
         onParagraphColor: function(shd) {
@@ -2853,7 +2849,7 @@ define([
             updateColors(this.toolbar.mnuFontColorPicker, 1);
             if (this.toolbar.btnFontColor.currentColor===undefined || !this.toolbar.btnFontColor.currentColor.isAuto) {
                 this.toolbar.btnFontColor.currentColor = this.toolbar.mnuFontColorPicker.currentColor.color || this.toolbar.mnuFontColorPicker.currentColor;
-                $('.btn-color-value-line', this.toolbar.btnFontColor.cmpEl).css('background-color', '#' + this.toolbar.btnFontColor.currentColor);
+                this.toolbar.btnFontColor.setColor(this.toolbar.btnFontColor.currentColor);
             }
             if (this._state.clrtext_asccolor!==undefined) {
                 this._state.clrtext = undefined;
@@ -2863,7 +2859,7 @@ define([
 
             updateColors(this.toolbar.mnuParagraphColorPicker, 0);
             this.toolbar.btnParagraphColor.currentColor = this.toolbar.mnuParagraphColorPicker.currentColor.color || this.toolbar.mnuParagraphColorPicker.currentColor;
-            $('.btn-color-value-line', this.toolbar.btnParagraphColor.cmpEl).css('background-color', '#' + this.toolbar.btnParagraphColor.currentColor);
+            this.toolbar.btnParagraphColor.setColor(this.toolbar.btnParagraphColor.currentColor);
             if (this._state.clrshd_asccolor!==undefined) {
                 this._state.clrback = undefined;
                 this.onParagraphColor(this._state.clrshd_asccolor);
@@ -2921,8 +2917,7 @@ define([
                 me.toolbar.mnuHighlightTransparent.setChecked(false);
 
                 me.toolbar.btnHighlightColor.currentColor = strcolor;
-                $('.btn-color-value-line', me.toolbar.btnHighlightColor.cmpEl).css('background-color', '#' + strcolor);
-
+                me.toolbar.btnHighlightColor.setColor(me.toolbar.btnHighlightColor.currentColor);
                 me.toolbar.btnHighlightColor.toggle(true, true);
             }
 
diff --git a/apps/documenteditor/main/app/view/FormsTab.js b/apps/documenteditor/main/app/view/FormsTab.js
index 541b789b5..a878e1756 100644
--- a/apps/documenteditor/main/app/view/FormsTab.js
+++ b/apps/documenteditor/main/app/view/FormsTab.js
@@ -175,7 +175,7 @@ define([
                 });
                 this.paragraphControls.push(this.btnClearFields);
 
-                this.btnHighlight = new Common.UI.Button({
+                this.btnHighlight = new Common.UI.ButtonColored({
                     parentEl    : $host.find('#slot-form-highlight'),
                     cls         : 'btn-toolbar',
                     iconCls     : 'toolbar__icon btn-highlight',
@@ -221,9 +221,7 @@ define([
                             ],
                             value: me.btnHighlight.currentColor
                         });
-                        var colorVal = $('<div class="btn-color-value-line"></div>');
-                        $('button:first-child', me.btnHighlight.cmpEl).append(colorVal);
-                        colorVal.css('background-color', me.btnHighlight.currentColor ? '#' + me.btnHighlight.currentColor : 'transparent');
+                        me.btnHighlight.setColor(me.btnHighlight.currentColor || 'transparent');
                     } else {
                         me.btnHighlight.cmpEl.parents('.group').hide().prev('.separator').hide();
                     }
diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js
index 91c67dd67..01e9a82d1 100644
--- a/apps/documenteditor/main/app/view/Toolbar.js
+++ b/apps/documenteditor/main/app/view/Toolbar.js
@@ -232,7 +232,7 @@ define([
                     });
                     this.paragraphControls.push(this.btnSubscript);
 
-                    this.btnHighlightColor = new Common.UI.Button({
+                    this.btnHighlightColor = new Common.UI.ButtonColored({
                         id: 'id-toolbar-btn-highlight',
                         cls: 'btn-toolbar',
                         iconCls: 'toolbar__icon btn-highlight',
@@ -254,7 +254,7 @@ define([
                     this.paragraphControls.push(this.btnHighlightColor);
                     this.textOnlyControls.push(this.btnHighlightColor);
 
-                    this.btnFontColor = new Common.UI.Button({
+                    this.btnFontColor = new Common.UI.ButtonColored({
                         id: 'id-toolbar-btn-fontcolor',
                         cls: 'btn-toolbar',
                         iconCls: 'toolbar__icon btn-fontcolor',
@@ -275,7 +275,7 @@ define([
                     });
                     this.paragraphControls.push(this.btnFontColor);
 
-                    this.btnParagraphColor = new Common.UI.Button({
+                    this.btnParagraphColor = new Common.UI.ButtonColored({
                         id: 'id-toolbar-btn-paracolor',
                         cls: 'btn-toolbar',
                         iconCls: 'toolbar__icon btn-paracolor',
@@ -1948,10 +1948,8 @@ define([
                 //
                 var colorVal;
                 if (this.btnHighlightColor.cmpEl) {
-                    colorVal = $('<div class="btn-color-value-line"></div>');
-                    $('button:first-child', this.btnHighlightColor.cmpEl).append(colorVal);
                     this.btnHighlightColor.currentColor = 'FFFF00';
-                    colorVal.css('background-color', '#' + this.btnHighlightColor.currentColor);
+                    this.btnHighlightColor.setColor(this.btnHighlightColor.currentColor);
                     this.mnuHighlightColorPicker = new Common.UI.ColorPalette({
                         el: $('#id-toolbar-menu-highlight'),
                         colors: [
@@ -1963,18 +1961,14 @@ define([
                 }
 
                 if (this.btnFontColor.cmpEl) {
-                    colorVal = $('<div class="btn-color-value-line"></div>');
-                    $('button:first-child', this.btnFontColor.cmpEl).append(colorVal);
-                    colorVal.css('background-color', this.btnFontColor.currentColor || 'transparent');
+                    this.btnFontColor.setColor(this.btnFontColor.currentColor || 'transparent');
                     this.mnuFontColorPicker = new Common.UI.ThemeColorPalette({
                         el: $('#id-toolbar-menu-fontcolor')
                     });
                 }
 
                 if (this.btnParagraphColor.cmpEl) {
-                    colorVal = $('<div class="btn-color-value-line"></div>');
-                    $('button:first-child', this.btnParagraphColor.cmpEl).append(colorVal);
-                    colorVal.css('background-color', this.btnParagraphColor.currentColor || 'transparent');
+                    this.btnParagraphColor.setColor(this.btnParagraphColor.currentColor || 'transparent');
                     this.mnuParagraphColorPicker = new Common.UI.ThemeColorPalette({
                         el: $('#id-toolbar-menu-paracolor'),
                         transparent: true
diff --git a/apps/documenteditor/main/app/view/WatermarkSettingsDialog.js b/apps/documenteditor/main/app/view/WatermarkSettingsDialog.js
index 63a5b9a05..3d2fc432c 100644
--- a/apps/documenteditor/main/app/view/WatermarkSettingsDialog.js
+++ b/apps/documenteditor/main/app/view/WatermarkSettingsDialog.js
@@ -316,10 +316,8 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
 
             var initNewColor = function(btn, picker_el) {
                 if (btn && btn.cmpEl) {
-                    btn.currentColor = '#c0c0c0';
-                    var colorVal = $('<div class="btn-color-value-line"></div>');
-                    $('button:first-child', btn.cmpEl).append(colorVal);
-                    colorVal.css('background-color', btn.currentColor);
+                    btn.currentColor = 'c0c0c0';
+                    btn.setColor( btn.currentColor);
                     var picker = new Common.UI.ThemeColorPalette({
                         el: $(picker_el)
                     });
@@ -330,13 +328,14 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
                 picker.on('select', _.bind(me.onColorSelect, me));
                 return picker;
             };
-            this.btnTextColor = new Common.UI.Button({
+            this.btnTextColor = new Common.UI.ButtonColored({
                 parentEl: $('#watermark-textcolor'),
                 cls         : 'btn-toolbar',
                 iconCls     : 'toolbar__icon btn-fontcolor',
                 hint        : this.textColor,
                 menu        : new Common.UI.Menu({
                     cls: 'shifted-left',
+                    additionalAlign: this.menuAddAlign,
                     items: [
                     {
                         id: 'watermark-auto-color',
@@ -406,9 +405,8 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
             clr_item.hasClass('selected') && clr_item.removeClass('selected');
             this.isAutoColor = false;
 
-            var clr = (typeof(color) == 'object') ? color.color : color;
             this.btnTextColor.currentColor = color;
-            $('.btn-color-value-line', this.btnTextColor.cmpEl).css('background-color', '#' + clr);
+            this.btnTextColor.setColor( this.btnTextColor.currentColor);
         },
 
         updateThemeColors: function() {
@@ -424,9 +422,8 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
             !clr_item.hasClass('selected') && clr_item.addClass('selected');
             this.isAutoColor = true;
 
-            var color = "000";
-            this.btnTextColor.currentColor = color;
-            $('.btn-color-value-line', this.btnTextColor.cmpEl).css('background-color', '#' + color);
+            this.btnTextColor.currentColor = "000";
+            this.btnTextColor.setColor( this.btnTextColor.currentColor);
             this.mnuTextColorPicker.clearSelection();
         },
 
@@ -613,7 +610,7 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
                             }
                         }
                         this.btnTextColor.currentColor = clr;
-                        $('.btn-color-value-line', this.btnTextColor.cmpEl).css('background-color', '#' + ((typeof(clr) == 'object') ? clr.color : clr));
+                        this.btnTextColor.setColor( this.btnTextColor.currentColor);
                     }
                     val = props.get_Text();
                     val && this.cmbText.setValue(val);
diff --git a/apps/documenteditor/main/resources/less/toolbar.less b/apps/documenteditor/main/resources/less/toolbar.less
index 8d3103841..eaa991b84 100644
--- a/apps/documenteditor/main/resources/less/toolbar.less
+++ b/apps/documenteditor/main/resources/less/toolbar.less
@@ -171,7 +171,10 @@
     text-overflow: ellipsis;
 }
 
-#id-toolbar-menu-auto-fontcolor > a.selected {
+#id-toolbar-menu-auto-fontcolor > a.selected,
+#id-toolbar-menu-auto-fontcolor > a:hover,
+#watermark-auto-color > a.selected,
+#watermark-auto-color > a:hover {
     span {
         outline: 1px solid @black;
         border: 1px solid @body-bg;
diff --git a/apps/presentationeditor/main/app/controller/Toolbar.js b/apps/presentationeditor/main/app/controller/Toolbar.js
index 442e795a4..7c3ccb00e 100644
--- a/apps/presentationeditor/main/app/controller/Toolbar.js
+++ b/apps/presentationeditor/main/app/controller/Toolbar.js
@@ -1846,10 +1846,8 @@ define([
         onSelectFontColor: function(picker, color) {
             this._state.clrtext = this._state.clrtext_asccolor  = undefined;
 
-            var clr = (typeof(color) == 'object') ? color.color : color;
-
             this.toolbar.btnFontColor.currentColor = color;
-            $('.btn-color-value-line', this.toolbar.btnFontColor.cmpEl).css('background-color', '#' + clr);
+            this.toolbar.btnFontColor.setColor((typeof(color) == 'object') ? color.color : color);
 
             this.toolbar.mnuFontColorPicker.currentColor = color;
             if (this.api)
@@ -2147,7 +2145,7 @@ define([
             updateColors(this.toolbar.mnuFontColorPicker, 1);
             if (this.toolbar.btnFontColor.currentColor===undefined) {
                 this.toolbar.btnFontColor.currentColor = this.toolbar.mnuFontColorPicker.currentColor.color || this.toolbar.mnuFontColorPicker.currentColor;
-                $('.btn-color-value-line', this.toolbar.btnFontColor.cmpEl).css('background-color', '#' + this.toolbar.btnFontColor.currentColor);
+                this.toolbar.btnFontColor.setColor(this.toolbar.btnFontColor.currentColor);
             }
             if (this._state.clrtext_asccolor!==undefined) {
                 this._state.clrtext = undefined;
diff --git a/apps/presentationeditor/main/app/view/Toolbar.js b/apps/presentationeditor/main/app/view/Toolbar.js
index 8aec0c910..e2d9f79b3 100644
--- a/apps/presentationeditor/main/app/view/Toolbar.js
+++ b/apps/presentationeditor/main/app/view/Toolbar.js
@@ -334,7 +334,7 @@ define([
                     });
                     me.paragraphControls.push(me.btnSubscript);
 
-                    me.btnFontColor = new Common.UI.Button({
+                    me.btnFontColor = new Common.UI.ButtonColored({
                         id: 'id-toolbar-btn-fontcolor',
                         cls: 'btn-toolbar',
                         iconCls: 'toolbar__icon btn-fontcolor',
@@ -1316,9 +1316,7 @@ define([
                 // DataView and pickers
                 //
                 if (this.btnFontColor.cmpEl) {
-                    var colorVal = $('<div class="btn-color-value-line"></div>');
-                    $('button:first-child', this.btnFontColor.cmpEl).append(colorVal);
-                    colorVal.css('background-color', this.btnFontColor.currentColor || 'transparent');
+                    this.btnFontColor.setColor(this.btnFontColor.currentColor || 'transparent');
                     this.mnuFontColorPicker = new Common.UI.ThemeColorPalette({
                         el: $('#id-toolbar-menu-fontcolor')
                     });
diff --git a/apps/spreadsheeteditor/main/app/controller/Toolbar.js b/apps/spreadsheeteditor/main/app/controller/Toolbar.js
index 28e6fd814..b60a5beb5 100644
--- a/apps/spreadsheeteditor/main/app/controller/Toolbar.js
+++ b/apps/spreadsheeteditor/main/app/controller/Toolbar.js
@@ -602,10 +602,8 @@ define([
         onTextColorSelect: function(picker, color, fromBtn) {
             this._state.clrtext_asccolor = this._state.clrtext = undefined;
 
-            var clr = (typeof(color) == 'object') ? color.color : color;
-
             this.toolbar.btnTextColor.currentColor = color;
-            $('.btn-color-value-line', this.toolbar.btnTextColor.cmpEl).css('background-color', '#' + clr);
+            this.toolbar.btnTextColor.setColor(this.toolbar.btnTextColor.currentColor);
 
             this.toolbar.mnuTextColorPicker.currentColor = color;
             if (this.api) {
@@ -624,8 +622,8 @@ define([
             var clr = (typeof(color) == 'object') ? color.color : color;
 
             this.toolbar.btnBackColor.currentColor = color;
-            $('.btn-color-value-line', this.toolbar.btnBackColor.cmpEl).css('background-color', clr == 'transparent' ? 'transparent' : '#' + clr);
-
+            this.toolbar.btnBackColor.setColor(this.toolbar.btnBackColor.currentColor);
+            
             this.toolbar.mnuBackColorPicker.currentColor = color;
             if (this.api) {
                 this.toolbar.btnBackColor.ischanged = (fromBtn!==true);
@@ -2754,14 +2752,14 @@ define([
                 this.toolbar.btnTextColor.currentColor=Common.Utils.ThemeColor.getStandartColors()[1];
             } else
                 this.toolbar.btnTextColor.currentColor = this.toolbar.mnuTextColorPicker.currentColor.color || this.toolbar.mnuTextColorPicker.currentColor;
-            $('.btn-color-value-line', this.toolbar.btnTextColor.cmpEl).css('background-color', '#' + this.toolbar.btnTextColor.currentColor);
+            this.toolbar.btnTextColor.setColor(this.toolbar.btnTextColor.currentColor);
 
             updateColors(this.toolbar.mnuBackColorPicker, Common.Utils.ThemeColor.getStandartColors()[3]);
             if (this.toolbar.btnBackColor.currentColor === undefined) {
                 this.toolbar.btnBackColor.currentColor=Common.Utils.ThemeColor.getStandartColors()[3];
             } else
                 this.toolbar.btnBackColor.currentColor = this.toolbar.mnuBackColorPicker.currentColor.color || this.toolbar.mnuBackColorPicker.currentColor;
-            $('.btn-color-value-line', this.toolbar.btnBackColor.cmpEl).css('background-color', this.toolbar.btnBackColor.currentColor == 'transparent' ? 'transparent' : '#' + this.toolbar.btnBackColor.currentColor);
+            this.toolbar.btnBackColor.setColor(this.toolbar.btnBackColor.currentColor);
 
             if (this._state.clrtext_asccolor!==undefined || this._state.clrshd_asccolor!==undefined) {
                 this._state.clrtext = undefined;
diff --git a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js
index c0e829df6..6d75af34f 100644
--- a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js
@@ -536,10 +536,8 @@ define([
 
             var initNewColor = function(btn, picker_el) {
                 if (btn && btn.cmpEl) {
-                    btn.currentColor = '#000000';
-                    var colorVal = $('<div class="btn-color-value-line"></div>');
-                    $('button:first-child', btn.cmpEl).append(colorVal);
-                    colorVal.css('background-color', btn.currentColor);
+                    btn.currentColor = '000000';
+                    btn.setColor(btn.currentColor);
                     var picker = new Common.UI.ThemeColorPalette({
                         el: $(picker_el)
                     });
@@ -552,7 +550,7 @@ define([
                 return picker;
             };
             this.btnTextColor = [];
-            this.btnTextColor.push(new Common.UI.Button({
+            this.btnTextColor.push(new Common.UI.ButtonColored({
                 parentEl: $('#id-dlg-h-textcolor'),
                 cls         : 'btn-toolbar',
                 iconCls     : 'toolbar__icon btn-fontcolor',
@@ -571,7 +569,7 @@ define([
             this.mnuTextColorPicker.push(initNewColor(this.btnTextColor[0], "#id-dlg-h-menu-fontcolor"));
             this.headerControls.push(this.btnTextColor[0]);
 
-            this.btnTextColor.push(new Common.UI.Button({
+            this.btnTextColor.push(new Common.UI.ButtonColored({
                 parentEl: $('#id-dlg-f-textcolor'),
                 cls         : 'btn-toolbar',
                 iconCls     : 'toolbar__icon btn-fontcolor',
@@ -901,9 +899,8 @@ define([
         },
 
         onColorSelect: function(btn, picker, color) {
-            var clr = (typeof(color) == 'object') ? color.color : color;
             btn.currentColor = color;
-            $('.btn-color-value-line', btn.cmpEl).css('background-color', '#' + clr);
+            btn.setColor(btn.currentColor);
             picker.currentColor = color;
             if (this.HFObject)
                 this.HFObject.setTextColor(Common.Utils.ThemeColor.getRgbColor(color));
diff --git a/apps/spreadsheeteditor/main/app/view/Statusbar.js b/apps/spreadsheeteditor/main/app/view/Statusbar.js
index 4fab2e202..0cf3a88e8 100644
--- a/apps/spreadsheeteditor/main/app/view/Statusbar.js
+++ b/apps/spreadsheeteditor/main/app/view/Statusbar.js
@@ -340,10 +340,6 @@ define([
                         {caption: this.ungroupSheets,  value: 'noselect'}
                     ]
                 }).on('render:after', function(btn) {
-                        var colorVal = $('<div class="btn-color-value-line"></div>');
-                        $('button:first-child', btn.cmpEl).append(colorVal);
-                        colorVal.css('background-color', btn.currentColor || 'transparent');
-
                         me.mnuTabColor = new Common.UI.ThemeColorPalette({
                             el: $('#id-tab-menu-color'),
                             transparent: true
diff --git a/apps/spreadsheeteditor/main/app/view/Toolbar.js b/apps/spreadsheeteditor/main/app/view/Toolbar.js
index 692a7408a..8dc515f87 100644
--- a/apps/spreadsheeteditor/main/app/view/Toolbar.js
+++ b/apps/spreadsheeteditor/main/app/view/Toolbar.js
@@ -481,7 +481,7 @@ define([
                 });
 
                 me.mnuTextColorPicker = dummyCmp();
-                me.btnTextColor = new Common.UI.Button({
+                me.btnTextColor = new Common.UI.ButtonColored({
                     id          : 'id-toolbar-btn-fontcolor',
                     cls         : 'btn-toolbar',
                     iconCls     : 'toolbar__icon btn-fontcolor',
@@ -496,7 +496,7 @@ define([
                 });
 
                 me.mnuBackColorPicker = dummyCmp();
-                me.btnBackColor = new Common.UI.Button({
+                me.btnBackColor = new Common.UI.ButtonColored({
                     id          : 'id-toolbar-btn-fillparag',
                     cls         : 'btn-toolbar',
                     iconCls     : 'toolbar__icon btn-paracolor',
@@ -1868,11 +1868,6 @@ define([
                         })
                     ]
                 }));
-
-                var colorVal = $('<div class="btn-color-value-line"></div>');
-                $('button:first-child', this.btnBorders.cmpEl).append(colorVal);
-                colorVal.css('background-color', this.btnBorders.currentColor || 'transparent');
-
                 this.mnuBorderColorPicker = new Common.UI.ThemeColorPalette({
                     el: $('#id-toolbar-menu-bordercolor')
                 });
@@ -1936,18 +1931,13 @@ define([
             // DataView and pickers
             //
             if (this.btnTextColor && this.btnTextColor.cmpEl) {
-                var colorVal = $('<div class="btn-color-value-line"></div>');
-                $('button:first-child', this.btnTextColor.cmpEl).append(colorVal);
-                colorVal.css('background-color', this.btnTextColor.currentColor || 'transparent');
+                this.btnTextColor.setColor(this.btnTextColor.currentColor || 'transparent');
                 this.mnuTextColorPicker = new Common.UI.ThemeColorPalette({
                     el: $('#id-toolbar-menu-fontcolor')
                 });
             }
             if (this.btnBackColor && this.btnBackColor.cmpEl) {
-                var colorVal = $('<div class="btn-color-value-line"></div>');
-                $('button:first-child', this.btnBackColor.cmpEl).append(colorVal);
-                colorVal.css('background-color', this.btnBackColor.currentColor || 'transparent');
-
+                this.btnBackColor.setColor(this.btnBackColor.currentColor || 'transparent');
                 this.mnuBackColorPicker = new Common.UI.ThemeColorPalette({
                     el: $('#id-toolbar-menu-paracolor'),
                     transparent: true