For Bug 48248: add auto color to ColorButton component

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

@@ -77,6 +77,7 @@ define([
 
         onColorSelect: function(picker, color) {
             this.setColor(color);
+            this.setAutoColor(false);
             this.trigger('color:select', this, color);
         },
 
@@ -98,6 +99,10 @@ define([
                 });
                 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');
+                }
             }
             return this.colorPicker;
         },
@@ -105,13 +110,24 @@ define([
         getMenu: function(options) {
             if (typeof this.menu !== 'object') {
                 options = options || this.options;
-                var height = options.paletteHeight || 216;
+                var height = options.paletteHeight || 216,
-                var id = Common.UI.getId(),
+                    id = Common.UI.getId(),
-                    menu = new Common.UI.Menu({
+                    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([
+                    items: (options.additionalItems ? options.additionalItems : []).concat(auto).concat([
                         { template: _.template('<div id="' + id + '-color-menu" style="width: 169px; height:' + height + 'px; margin: 10px;"></div>') },
                         { template: _.template('<a id="' + id + '-color-new" style="">' + this.textNewColor + '</a>') }
                     ])
@@ -131,7 +147,23 @@ define([
             this.colorPicker && this.colorPicker.addNewColor((typeof(this.color) == 'object') ? this.color.color : this.color);
         },
 
-        textNewColor: 'Add New Custom Color'
+        onAutoColorSelect: function() {
+            this.setColor(this.autocolor);
+            this.setAutoColor(true);
+            this.colorPicker && this.colorPicker.clearSelection();
+            this.trigger('auto:select', this, this.autocolor);
+        },
+
+        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');
+        },
+
+        textNewColor: 'Add New Custom Color',
+        textAutoColor: 'Automatic'
 
     }, Common.UI.ColorButton || {}));
 });

apps/common/main/resources/less/buttons.less

@@ -595,6 +595,18 @@
     }
 }
 
+// for color button auto color
+.dropdown-menu {
+    li > a.selected,
+    li > a:hover {
+        span.color-auto {
+            outline: 1px solid #000;
+            border: 1px solid #fff;
+        }
+    }
+}
+
+
 .btn-options {
     padding: 0;
     margin:0;

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

@@ -130,12 +130,10 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
 
             this.btnColor = new Common.UI.ColorButton({
                 parentEl: $('#control-settings-color-btn'),
-                additionalItems: [{
+                auto: {
-                        id: 'control-settings-system-color',
+                    caption: this.textSystemColor,
-                        caption: this.textSystemColor,
+                    color: 'dcdcdc'
-                        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: #dcdcdc;"></span><%= caption %></a>')
+                },
-                    },
-                    {caption: '--'}],
                 additionalAlign: this.menuAddAlign,
                 color: '000000',
                 colors: ['000000', '993300', '333300', '003300', '003366', '000080', '333399', '333333', '800000', 'FF6600',
@@ -146,8 +144,8 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
                 paletteHeight: 94
             });
             this.btnColor.on('color:select', _.bind(this.onColorsSelect, this));
+            this.btnColor.on('auto:select', _.bind(this.onSystemColor, this));
             this.colors = this.btnColor.getPicker();
-            $('#control-settings-system-color').on('click', _.bind(this.onSystemColor, this));
 
             this.btnApplyAll = new Common.UI.Button({
                 el: $('#control-settings-btn-all')
@@ -382,17 +380,10 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
         },
 
         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;
         },
 
-        onSystemColor: function(e) {
+        onSystemColor: function(btn, color) {
-            var color = Common.Utils.ThemeColor.getHexColor(220, 220, 220);
-            this.btnColor.setColor(color);
-            this.colors.clearSelection();
-            var clr_item = this.btnColor.menu.$el.find('#control-settings-system-color > a');
-            !clr_item.hasClass('selected') && clr_item.addClass('selected');
             this.isSystemColor = true;
         },
 
@@ -428,10 +419,10 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
                 if (val) {
                     val = Common.Utils.ThemeColor.getHexColor(val.get_r(), val.get_g(), val.get_b());
                     this.colors.selectByRGB(val,true);
+                    this.btnColor.setAutoColor(false);
                 } else {
                     this.colors.clearSelection();
-                    var clr_item = this.btnColor.menu.$el.find('#control-settings-system-color > a');
+                    this.btnColor.setAutoColor(true);
-                    !clr_item.hasClass('selected') && clr_item.addClass('selected');
                     val = Common.Utils.ThemeColor.getHexColor(220, 220, 220);
                 }
                 this.btnColor.setColor(val);

apps/documenteditor/main/resources/less/toolbar.less

@@ -171,9 +171,7 @@
     text-overflow: ellipsis;
 }
 
-#id-toolbar-menu-auto-fontcolor > a.selected,
+#id-toolbar-menu-auto-fontcolor > a.selected {
-#control-settings-system-color > a.selected,
-#control-settings-system-color > a:hover {
     span {
         outline: 1px solid #000;
         border: 1px solid #fff;