Refactoring Common.UI.ButtonColored

apps/common/main/lib/component/ColorButton.js

@@ -233,7 +233,6 @@ define([
                     e.stopPropagation();
                     _.delay(function() {
                         me.focusInner(e);
-                        // me.colorPicker.focus(e.keyCode == Common.UI.Keys.DOWN ? 'first' : 'last');
                     }, 10);
                 }
             }
@@ -270,14 +269,184 @@ define([
 
             $('button:first-child', this.cmpEl).append( $('<div class="btn-color-value-line"></div>'));
             this.colorEl = this.cmpEl.find('.btn-color-value-line');
+
+            if (this.options.auto)
+                this.autocolor = (typeof this.options.auto == 'object') ? this.options.auto.color || '000000' : '000000';
+
+            this.cmpEl.on('keydown.after.bs.dropdown', _.bind(this.onAfterKeydownMenu, this));
+
+            if (this.options.color!==undefined)
+                this.setColor(this.options.color);
+        },
+
+        getPicker: function(color, colors) {
+            if (!this.colorPicker) {
+                this.colorPicker = new Common.UI.ThemeColorPalette({
+                    el: this.cmpEl.find('#' + this.menu.id + '-color-menu'),
+                    transparent: this.options.transparent,
+                    value: color,
+                    colors: colors,
+                    parentButton: this
+                });
+                this.colorPicker.on('select', _.bind(this.onColorSelect, this));
+                this.cmpEl.find('#' + this.menu.id + '-color-new').on('click', _.bind(this.addNewColor, this));
+                if (this.options.auto) {
+                    this.cmpEl.find('#' + this.menu.id + '-color-auto').on('click', _.bind(this.onAutoColorSelect, this));
+                    this.colorAuto = this.cmpEl.find('#' + this.menu.id + '-color-auto > a');
+                    (color == 'auto') && this.setAutoColor(true);
+                }
+            }
+            return this.colorPicker;
+        },
+
+        setPicker: function(picker) {
+            this.colorPicker = picker;
+        },
+
+        getMenu: function(options) {
+            if (typeof this.menu !== 'object') {
+                options = options || this.options;
+                var height = options.paletteHeight || 240,
+                    id = Common.UI.getId(),
+                    auto = [];
+                if (options.auto) {
+                    this.autocolor = (typeof options.auto == 'object') ? options.auto.color || '000000' : '000000';
+                    auto.push({
+                        id: id + '-color-auto',
+                        caption: (typeof options.auto == 'object') ? options.auto.caption || this.textAutoColor : this.textAutoColor,
+                        template: _.template('<a tabindex="-1" type="menuitem"><span class="menu-item-icon color-auto" style="background-image: none; width: 12px; height: 12px; margin: 1px 7px 0 1px; background-color: #' + this.autocolor + ';"></span><%= caption %></a>')
+                    });
+                    auto.push({caption: '--'});
+                }
+
+                var menu = new Common.UI.Menu({
+                    id: id,
+                    cls: 'shifted-left',
+                    additionalAlign: options.additionalAlign,
+                    items: (options.additionalItems ? options.additionalItems : []).concat(auto).concat([
+                        { template: _.template('<div id="' + id + '-color-menu" style="width: 169px; height:' + height + 'px; margin: 10px;"></div>') },
+                        {
+                            id: id + '-color-new',
+                            template: _.template('<a tabindex="-1" type="menuitem" style="">' + this.textNewColor + '</a>')
+                        }
+                    ])
+                });
+                this.colorPicker && (this.colorPicker.parentButton = menu);
+                var me = this;
+                menu.on('keydown:before', _.bind(this.onBeforeKeyDown, this));
+                menu.on('show:after', function(menu) {
+                    me.colorPicker && _.delay(function() {
+                        me.colorPicker.showLastSelected();
+                        !(options.additionalItems || options.auto) && me.colorPicker.focus();
+                    }, 10);
+                }).on('hide:after', function() {
+                    if (me.options.takeFocusOnClose) {
+                        setTimeout(function(){me.focus();}, 1);
+                    }
+                });
+                return menu;
+            }
+            return this.menu;
+        },
+
+        setMenu: function (m) {
+            m = m || this.getMenu();
+            Common.UI.Button.prototype.setMenu.call(this, m);
+            this.getPicker(this.options.color, this.options.colors);
+        },
+
+        onColorSelect: function(picker, color) {
+            this.setColor(color);
+            this.setAutoColor(false);
+            this.trigger('color:select', this, color);
         },
 
         setColor: function(color) {
+            if (color == 'auto' && this.options.auto)
+                color = this.autocolor;
+            this.color = color;
+
             if (this.colorEl) {
                 this.colorEl.css({'background-color': (color=='transparent') ? color : ((typeof(color) == 'object') ? '#'+color.color : '#'+color)});
                 this.colorEl.toggleClass('bordered', color=='transparent');
             }
-        }
+        },
+
+        setAutoColor: function(selected) {
+            if (!this.colorAuto) return;
+            if (selected && !this.colorAuto.hasClass('selected'))
+                this.colorAuto.addClass('selected');
+            else if (!selected && this.colorAuto.hasClass('selected'))
+                this.colorAuto.removeClass('selected');
+        },
+
+        isAutoColor: function() {
+            return this.colorAuto && this.colorAuto.hasClass('selected');
+        },
+
+        onAutoColorSelect: function() {
+            this.setColor('auto');
+            this.setAutoColor(true);
+            this.colorPicker && this.colorPicker.clearSelection();
+            this.trigger('auto:select', this, this.autocolor);
+        },
+
+        addNewColor: function() {
+            this.colorPicker && this.colorPicker.addNewColor((typeof(this.color) == 'object') ? this.color.color : this.color);
+        },
+
+        onAfterKeydownMenu: function(e) {
+            if ((e.keyCode == Common.UI.Keys.DOWN || e.keyCode == Common.UI.Keys.SPACE) && !this.isMenuOpen()) {
+                $('button', this.cmpEl).click();
+                return false;
+            }
+        },
+
+        onBeforeKeyDown: function(menu, e) {
+            console.log(e.keyCode);
+            if (e.keyCode == Common.UI.Keys.RETURN) {
+                e.preventDefault();
+                e.stopPropagation();
+                var li = $(e.target).closest('li');
+                (li.length>0) && li.click();
+                Common.UI.Menu.Manager.hideAll();
+            } else if (e.namespace!=="after.bs.dropdown" && (e.keyCode == Common.UI.Keys.DOWN || e.keyCode == Common.UI.Keys.UP)) {
+                var $items = $('> [role=menu] > li:not(.divider):not(.disabled):visible', menu.$el).find('> a');
+                if (!$items.length) return;
+                var index = $items.index($items.filter(':focus')),
+                    me = this,
+                    pickerIndex = $items.length-1 ;
+                if (e.keyCode == Common.UI.Keys.DOWN && (index==pickerIndex-1 || pickerIndex==0) || e.keyCode == Common.UI.Keys.UP && index==pickerIndex) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    _.delay(function() {
+                        me.focusInner(e);
+                    }, 10);
+                }
+            }
+        },
+
+        isMenuOpen: function() {
+            return this.cmpEl.hasClass('open');
+        },
+
+        focusInner: function(e) {
+            if (!this.colorPicker) return;
+
+            this.colorPicker.focus(e.keyCode == Common.UI.Keys.DOWN ? 'first' : 'last');
+        },
+
+        focusOuter: function(e) {
+            if (!this.menu) return;
+
+            var $items = $('> [role=menu] > li:not(.divider):not(.disabled):visible', this.menu.$el).find('> a');
+            if (!$items.length) return;
+
+            $items.eq(e.keyCode == Common.UI.Keys.UP ? $items.length-2 : $items.length-1).focus();
+        },
+
+        textNewColor: 'Add New Custom Color',
+        textAutoColor: 'Automatic'
 
     }, Common.UI.ButtonColored || {}));
 

apps/documenteditor/main/app/controller/FormsTab.js

@@ -90,7 +90,6 @@ define([
             this.addListeners({
                 'FormsTab': {
                     'forms:insert': this.onControlsSelect,
-                    'forms:new-color': this.onNewControlsColor,
                     'forms:clear': this.onClearClick,
                     'forms:no-color': this.onNoControlsColor,
                     'forms:select-color': this.onSelectControlsColor,
@@ -206,10 +205,6 @@ define([
             Common.NotificationCenter.trigger('edit:complete', this.toolbar);
         },
 
-        onNewControlsColor: function() {
-            this.view.mnuFormsColorPicker.addNewColor();
-        },
-
         onNoControlsColor: function(item) {
             if (!item.isChecked())
                 this.api.asc_SetSpecialFormsHighlightColor(201, 200, 255);

apps/documenteditor/main/app/controller/Toolbar.js

@@ -310,14 +310,12 @@ define([
             toolbar.mnuMultiChangeLevel.menu.on('item:click',           _.bind(this.onChangeLevelClick, this, 2));
             toolbar.btnHighlightColor.on('click',                       _.bind(this.onBtnHighlightColor, this));
             toolbar.btnFontColor.on('click',                            _.bind(this.onBtnFontColor, this));
+            toolbar.btnFontColor.on('color:select',                     _.bind(this.onSelectFontColor, this));
+            toolbar.btnFontColor.on('auto:select',                      _.bind(this.onAutoFontColor, this));
             toolbar.btnParagraphColor.on('click',                       _.bind(this.onBtnParagraphColor, this));
+            toolbar.btnParagraphColor.on('color:select',                _.bind(this.onParagraphColorPickerSelect, this));
             toolbar.mnuHighlightColorPicker.on('select',                _.bind(this.onSelectHighlightColor, this));
-            toolbar.mnuFontColorPicker.on('select',                     _.bind(this.onSelectFontColor, this));
-            toolbar.mnuParagraphColorPicker.on('select',                _.bind(this.onParagraphColorPickerSelect, this));
             toolbar.mnuHighlightTransparent.on('click',                 _.bind(this.onHighlightTransparentClick, this));
-            $('#id-toolbar-menu-auto-fontcolor').on('click',            _.bind(this.onAutoFontColor, this));
-            $('#id-toolbar-menu-new-fontcolor').on('click',             _.bind(this.onNewFontColor, this));
-            $('#id-toolbar-menu-new-paracolor').on('click',             _.bind(this.onNewParagraphColor, this));
             toolbar.mnuLineSpace.on('item:toggle',                      _.bind(this.onLineSpaceToggle, this));
             toolbar.mnuNonPrinting.on('item:toggle',                    _.bind(this.onMenuNonPrintingToggle, this));
             toolbar.btnShowHidenChars.on('toggle',                      _.bind(this.onNonPrintingToggle, this));
@@ -2437,10 +2435,6 @@ define([
             return out_value;
         },
 
-        onNewFontColor: function(picker, color) {
-            this.toolbar.mnuFontColorPicker.addNewColor();
-        },
-
         onAutoFontColor: function(e) {
             this._state.clrtext = this._state.clrtext_asccolor = undefined;
 
@@ -2449,16 +2443,9 @@ define([
             this.api.put_TextColor(color);
 
             this.toolbar.btnFontColor.currentColor = {color: color, isAuto: true};
-            this.toolbar.btnFontColor.setColor('000');
-
-            this.toolbar.mnuFontColorPicker.clearSelection();
             this.toolbar.mnuFontColorPicker.currentColor = {color: color, isAuto: true};
         },
 
-        onNewParagraphColor: function(picker, color) {
-            this.toolbar.mnuParagraphColorPicker.addNewColor();
-        },
-
         onSelectHighlightColor: function(picker, color) {
             this._setMarkerColor(color, 'menu');
         },
@@ -2562,9 +2549,8 @@ define([
         onApiTextColor: function(color) {
             if (color.get_auto()) {
                 if (this._state.clrtext !== 'auto') {
+                    this.toolbar.btnFontColor.setAutoColor(true);
                     this.toolbar.mnuFontColorPicker.clearSelection();
-                    var clr_item = this.toolbar.btnFontColor.menu.$el.find('#id-toolbar-menu-auto-fontcolor > a');
-                    !clr_item.hasClass('selected') && clr_item.addClass('selected');
                     this._state.clrtext = 'auto';
                 }
             } else {
@@ -2583,8 +2569,7 @@ define([
                     (clr.effectValue!==this._state.clrtext.effectValue || this._state.clrtext.color.indexOf(clr.color)<0)) ||
                     (type1!='object' && this._state.clrtext.indexOf(clr)<0 )) {
 
-                    var clr_item = this.toolbar.btnFontColor.menu.$el.find('#id-toolbar-menu-auto-fontcolor > a');
+                    this.toolbar.btnFontColor.setAutoColor(false);
-                    clr_item.hasClass('selected') && clr_item.removeClass('selected');
                     if ( typeof(clr) == 'object' ) {
                         var isselected = false;
                         for (var i=0; i<10; i++) {

apps/documenteditor/main/app/view/FormsTab.js

@@ -108,18 +108,12 @@ define([
                 me.fireEvent('forms:clear');
             });
             if (this.mnuFormsColorPicker) {
-                $('#id-toolbar-menu-new-form-color').on('click', function (b, e) {
+                this.btnHighlight.on('color:select', function(picker, color) {
-                    me.fireEvent('forms:new-color');
+                    me.fireEvent('forms:select-color', [color]);
                 });
                 this.mnuNoFormsColor.on('click', function (item) {
                     me.fireEvent('forms:no-color', [item]);
                 });
-                this.mnuFormsColorPicker.on('select', function(picker, color) {
-                    me.fireEvent('forms:select-color', [color]);
-                });
-                this.btnHighlight.menu.on('show:after', function(picker, color) {
-                    me.fireEvent('forms:open-color', [color]);
-                });
             }
             this.btnPrevForm && this.btnPrevForm.on('click', function (b, e) {
                 me.fireEvent('forms:goto', ['prev']);
@@ -222,7 +216,20 @@ define([
                         iconCls     : 'toolbar__icon btn-highlight',
                         caption     : this.textHighlight,
                         menu        : true,
-                        disabled: true
+                        disabled: true,
+                        additionalItems: [ this.mnuNoFormsColor = new Common.UI.MenuItem({
+                                              id: 'id-toolbar-menu-no-highlight-form',
+                                              caption: this.textNoHighlight,
+                                              checkable: true,
+                                              style: 'padding-left: 20px;'
+                                          }),
+                                          {caption: '--'}],
+                        colors: ['000000', '993300', '333300', '003300', '003366', '000080', '333399', '333333', '800000', 'FF6600',
+                                    '808000', '00FF00', '008080', '0000FF', '666699', '808080', 'FF0000', 'FF9900', '99CC00', '339966',
+                                    '33CCCC', '3366FF', '800080', '999999', 'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF',
+                                    '993366', 'C0C0C0', 'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', 'C9C8FF', 'CC99FF', 'FFFFFF'
+                                ],
+                        paletteHeight: 94
                     });
                     this.paragraphControls.push(this.btnHighlight);
                 }
@@ -267,28 +274,9 @@ define([
                 })).then(function(){
                     if (config.isEdit && config.canFeatureContentControl) {
                         if (config.canEditContentControl) {
-                            me.btnHighlight.setMenu(new Common.UI.Menu({
+                            me.btnHighlight.setMenu();
-                                items: [
+                            me.mnuFormsColorPicker = me.btnHighlight.getPicker();
-                                    me.mnuNoFormsColor = new Common.UI.MenuItem({
+                            me.mnuNoFormsColor.setChecked(me.btnHighlight.currentColor === null);
-                                        id: 'id-toolbar-menu-no-highlight-form',
-                                        caption: me.textNoHighlight,
-                                        checkable: true,
-                                        checked: me.btnHighlight.currentColor === null
-                                    }),
-                                    {caption: '--'},
-                                    {template: _.template('<div id="id-toolbar-menu-form-color" style="width: 169px; height: 94px; margin: 10px;"></div>')},
-                                    {template: _.template('<a id="id-toolbar-menu-new-form-color" style="padding-left:12px;">' + me.textNewColor + '</a>')}
-                                ]
-                            }));
-                            me.mnuFormsColorPicker = new Common.UI.ThemeColorPalette({
-                                el: $('#id-toolbar-menu-form-color'),
-                                colors: ['000000', '993300', '333300', '003300', '003366', '000080', '333399', '333333', '800000', 'FF6600',
-                                    '808000', '00FF00', '008080', '0000FF', '666699', '808080', 'FF0000', 'FF9900', '99CC00', '339966',
-                                    '33CCCC', '3366FF', '800080', '999999', 'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF',
-                                    '993366', 'C0C0C0', 'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', '99CCFF', 'CC99FF', 'FFFFFF'
-                                ],
-                                value: me.btnHighlight.currentColor
-                            });
                             me.btnHighlight.setColor(me.btnHighlight.currentColor || 'transparent');
                         } else {
                             me.btnHighlight.cmpEl.parents('.group').hide().prev('.separator').hide();
@@ -380,7 +368,6 @@ define([
             tipImageField: 'Insert image',
             tipViewForm: 'View form',
             textNoHighlight: 'No highlighting',
-            textNewColor: 'Add New Custom Color',
             textClear: 'Clear Fields',
             capBtnPrev: 'Previous Field',
             capBtnNext: 'Next Field',

apps/documenteditor/main/app/view/Toolbar.js

@@ -259,19 +259,8 @@ define([
                         cls: 'btn-toolbar',
                         iconCls: 'toolbar__icon btn-fontcolor',
                         split: true,
-                        menu: new Common.UI.Menu({
+                        menu: true,
-                            cls: 'shifted-left',
+                        auto: true
-                            items: [
-                                {
-                                    id: 'id-toolbar-menu-auto-fontcolor',
-                                    caption: this.textAutoColor,
-                                    template: _.template('<a tabindex="-1" type="menuitem"><span class="menu-item-icon" style="background-image: none; width: 12px; height: 12px; margin: 1px 7px 0 1px; background-color: #000;"></span><%= caption %></a>')
-                                },
-                                {caption: '--'},
-                                {template: _.template('<div id="id-toolbar-menu-fontcolor" style="width: 169px; height: 240px;"></div>')},
-                                {template: _.template('<a id="id-toolbar-menu-new-fontcolor" style="">' + this.textNewColor + '</a>')}
-                            ]
-                        })
                     });
                     this.paragraphControls.push(this.btnFontColor);
 
@@ -280,12 +269,8 @@ define([
                         cls: 'btn-toolbar',
                         iconCls: 'toolbar__icon btn-paracolor',
                         split: true,
-                        menu: new Common.UI.Menu({
+                        transparent: true,
-                            items: [
+                        menu: true
-                                {template: _.template('<div id="id-toolbar-menu-paracolor" style="width: 169px; height: 240px;"></div>')},
-                                {template: _.template('<a id="id-toolbar-menu-new-paracolor" style="padding-left:12px;">' + this.textNewColor + '</a>')}
-                            ]
-                        })
                     });
                     this.paragraphControls.push(this.btnParagraphColor);
                     this.textOnlyControls.push(this.btnParagraphColor);
@@ -2005,21 +1990,19 @@ define([
                         ]
                     });
                     this.mnuHighlightColorPicker.select('FFFF00');
+                    this.btnHighlightColor.setPicker(this.mnuHighlightColorPicker);
                 }
 
                 if (this.btnFontColor.cmpEl) {
+                    this.btnFontColor.setMenu();
+                    this.mnuFontColorPicker = this.btnFontColor.getPicker();
                     this.btnFontColor.setColor(this.btnFontColor.currentColor || 'transparent');
-                    this.mnuFontColorPicker = new Common.UI.ThemeColorPalette({
-                        el: $('#id-toolbar-menu-fontcolor')
-                    });
                 }
 
                 if (this.btnParagraphColor.cmpEl) {
+                    this.btnParagraphColor.setMenu();
+                    this.mnuParagraphColorPicker = this.btnParagraphColor.getPicker();
                     this.btnParagraphColor.setColor(this.btnParagraphColor.currentColor || 'transparent');
-                    this.mnuParagraphColorPicker = new Common.UI.ThemeColorPalette({
-                        el: $('#id-toolbar-menu-paracolor'),
-                        transparent: true
-                    });
                 }
 
                 if (this.btnContentControls.cmpEl) {

apps/documenteditor/main/app/view/WatermarkSettingsDialog.js

@@ -314,44 +314,24 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
             });
             this.textControls.push(this.btnStrikeout);
 
-            var initNewColor = function(btn, picker_el) {
-                if (btn && btn.cmpEl) {
-                    btn.currentColor = 'c0c0c0';
-                    btn.setColor( btn.currentColor);
-                    var picker = new Common.UI.ThemeColorPalette({
-                        el: $(picker_el)
-                    });
-                }
-                btn.menu.cmpEl.on('click', picker_el+'-new', _.bind(function() {
-                    picker.addNewColor((typeof(btn.color) == 'object') ? btn.color.color : btn.color);
-                }, me));
-                picker.on('select', _.bind(me.onColorSelect, me));
-                return picker;
-            };
             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({
+                additionalAlign: this.menuAddAlign,
-                    cls: 'shifted-left',
+                auto: true,
-                    additionalAlign: this.menuAddAlign,
+                color: 'c0c0c0',
-                    items: [
+                menu: true
-                    {
-                        id: 'watermark-auto-color',
-                        caption: this.textAuto,
-                        template: _.template('<a tabindex="-1" type="menuitem"><span class="menu-item-icon" style="background-image: none; width: 12px; height: 12px; margin: 1px 7px 0 1px; background-color: #000;"></span><%= caption %></a>')
-                    },
-                    {caption: '--'},
-                        { template: _.template('<div id="watermark-menu-textcolor" style="width: 169px; height: 240px; margin: 10px;"></div>') },
-                        { template: _.template('<a id="watermark-menu-textcolor-new">' + this.textNewColor + '</a>') }
-                    ]
-                })
             });
-            this.mnuTextColorPicker = initNewColor(this.btnTextColor, "#watermark-menu-textcolor");
+            this.btnTextColor.setMenu();
-            $('#watermark-auto-color').on('click', _.bind(this.onAutoColor, this));
+            this.mnuTextColorPicker = this.btnTextColor.getPicker();
+            this.btnTextColor.currentColor = 'c0c0c0';
             this.textControls.push(this.btnTextColor);
 
+            this.btnTextColor.on('color:select', _.bind(this.onColorSelect, this));
+            this.btnTextColor.on('auto:select',  _.bind(this.onAutoColor, this));
+
             this.chTransparency = new Common.UI.CheckBox({
                 el: $('#watermark-chb-transparency'),
                 labelText: this.textTransparency,
@@ -403,30 +383,17 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
         },
 
         onColorSelect: function(picker, color) {
-            var clr_item = this.btnTextColor.menu.$el.find('#watermark-auto-color > a');
-            clr_item.hasClass('selected') && clr_item.removeClass('selected');
             this.isAutoColor = false;
-
             this.btnTextColor.currentColor = color;
-            this.btnTextColor.setColor( this.btnTextColor.currentColor);
         },
 
         updateThemeColors: function() {
             this.mnuTextColorPicker.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(e) {
-            var clr_item = this.btnTextColor.menu.$el.find('#watermark-auto-color > a');
-            !clr_item.hasClass('selected') && clr_item.addClass('selected');
             this.isAutoColor = true;
-
             this.btnTextColor.currentColor = "000";
-            this.btnTextColor.setColor( this.btnTextColor.currentColor);
-            this.mnuTextColorPicker.clearSelection();
         },
 
         afterRender: function() {
@@ -582,16 +549,14 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
                         this.btnUnderline.toggle(val.get_Underline());
                         this.btnStrikeout.toggle(val.get_Strikeout());
                         var color = val.get_Color(),
-                            clr_item = this.btnTextColor.menu.$el.find('#watermark-auto-color > a'),
                             clr = "c0c0c0";
 
                         if (color.get_auto()) {
                             clr = "000";
                             this.isAutoColor = true;
                             this.mnuTextColorPicker.clearSelection();
-                            !clr_item.hasClass('selected') && clr_item.addClass('selected');
+                            this.btnTextColor.setAutoColor(true);
                         } else {
-                            clr_item.hasClass('selected') && clr_item.removeClass('selected');
                             if (color) {
                                 color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME ?
                                     clr = {color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), effectValue: color.get_value()} :
@@ -718,7 +683,6 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
         textDiagonal: 'Diagonal',
         textHor: 'Horizontal',
         textColor: 'Text color',
-        textNewColor: 'Add New Custom Color',
         textLanguage: 'Language',
         textFromStorage: 'From Storage',
         textSelect: 'Select Image'

apps/documenteditor/main/locale/en.json

@@ -124,6 +124,8 @@
   "Common.Translation.warnFileLocked": "You can't edit this file because it's being edited in another app.",
   "Common.Translation.warnFileLockedBtnEdit": "Create a copy",
   "Common.Translation.warnFileLockedBtnView": "Open for viewing",
+  "Common.UI.ButtonColored.textAutoColor": "Automatic",
+  "Common.UI.ButtonColored.textNewColor": "Add New Custom Color",
   "Common.UI.Calendar.textApril": "April",
   "Common.UI.Calendar.textAugust": "August",
   "Common.UI.Calendar.textDecember": "December",
@@ -1787,7 +1789,7 @@
   "DE.Views.FormsTab.textClear": "Clear Fields",
   "DE.Views.FormsTab.textClearFields": "Clear All Fields",
   "DE.Views.FormsTab.textHighlight": "Highlight Settings",
-  "DE.Views.FormsTab.textNewColor": "Add New Custom Color",
+  "del_DE.Views.FormsTab.textNewColor": "Add New Custom Color",
   "DE.Views.FormsTab.textNoHighlight": "No highlighting",
   "DE.Views.FormsTab.textRequired": "Fill all required fields to send form.",
   "DE.Views.FormsTab.textSubmited": "Form submitted successfully",
@@ -2749,7 +2751,7 @@
   "DE.Views.WatermarkSettingsDialog.textItalic": "Italic",
   "DE.Views.WatermarkSettingsDialog.textLanguage": "Language",
   "DE.Views.WatermarkSettingsDialog.textLayout": "Layout",
-  "DE.Views.WatermarkSettingsDialog.textNewColor": "Add New Custom Color",
+  "del_DE.Views.WatermarkSettingsDialog.textNewColor": "Add New Custom Color",
   "DE.Views.WatermarkSettingsDialog.textNone": "None",
   "DE.Views.WatermarkSettingsDialog.textScale": "Scale",
   "DE.Views.WatermarkSettingsDialog.textSelect": "Select Image",