[SSE] Bug 48248: Add auto color for cell borders

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

@@ -71,6 +71,9 @@ define([
         render: function(parentEl) {
             Common.UI.Button.prototype.render.call(this, parentEl);
 
+            if (this.options.auto)
+                this.autocolor = (typeof this.options.auto == 'object') ? this.options.auto.color || '000000' : '000000';
+
             if (this.options.color!==undefined)
                 this.setColor(this.options.color);
         },

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

@@ -173,8 +173,8 @@
 
 #id-toolbar-menu-auto-fontcolor > a.selected {
     span {
-        outline: 1px solid #000;
-        border: 1px solid #fff;
+        outline: 1px solid @black;
+        border: 1px solid @body-bg;
     }
 }
 

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

@@ -315,6 +315,7 @@ define([
                     toolbar.btnBorders.menu.on('item:click',                    _.bind(this.onBordersMenu, this));
                     toolbar.mnuBorderWidth.on('item:toggle',                    _.bind(this.onBordersWidth, this));
                     toolbar.mnuBorderColorPicker.on('select',                   _.bind(this.onBordersColor, this));
+                    $('#id-toolbar-menu-auto-bordercolor').on('click',          _.bind(this.onAutoBorderColor, this));
                 }
                 toolbar.btnAlignLeft.on('click',                            _.bind(this.onHorizontalAlign, this, AscCommon.align_Left));
                 toolbar.btnAlignCenter.on('click',                          _.bind(this.onHorizontalAlign, this, AscCommon.align_Center));
@@ -715,10 +716,26 @@ define([
         },
 
         onBordersColor: function(picker, color) {
-            $('#id-toolbar-mnu-item-border-color .menu-item-icon').css('border-color', '#' + ((typeof(color) == 'object') ? color.color : color));
+            $('#id-toolbar-mnu-item-border-color > a .menu-item-icon').css('border-color', '#' + ((typeof(color) == 'object') ? color.color : color));
             this.toolbar.mnuBorderColor.onUnHoverItem();
             this.toolbar.btnBorders.options.borderscolor = Common.Utils.ThemeColor.getRgbColor(color);
             this.toolbar.mnuBorderColorPicker.currentColor = color;
+            var clr_item = this.toolbar.btnBorders.menu.$el.find('#id-toolbar-menu-auto-bordercolor > a');
+            clr_item.hasClass('selected') && clr_item.removeClass('selected');
+
+            Common.NotificationCenter.trigger('edit:complete', this.toolbar);
+            Common.component.Analytics.trackEvent('ToolBar', 'Border Color');
+        },
+
+        onAutoBorderColor: function(e) {
+            var color = '#000';
+            $('#id-toolbar-mnu-item-border-color > a .menu-item-icon').css('border-color', color);
+            this.toolbar.mnuBorderColor.onUnHoverItem();
+            this.toolbar.btnBorders.options.borderscolor = Common.Utils.ThemeColor.getRgbColor(color);
+            this.toolbar.mnuBorderColorPicker.clearSelection();
+            this.toolbar.mnuBorderColorPicker.currentColor = {color: color, isAuto: true};
+            var clr_item = this.toolbar.btnBorders.menu.$el.find('#id-toolbar-menu-auto-bordercolor > a');
+            !clr_item.hasClass('selected') && clr_item.addClass('selected');
 
             Common.NotificationCenter.trigger('edit:complete', this.toolbar);
             Common.component.Analytics.trackEvent('ToolBar', 'Border Color');
@@ -2756,9 +2773,14 @@ define([
             this._state.clrshd_asccolor = undefined;
 
             if (this.toolbar.mnuBorderColorPicker) {
-                updateColors(this.toolbar.mnuBorderColorPicker, Common.Utils.ThemeColor.getEffectColors()[1]);
-                this.toolbar.btnBorders.options.borderscolor = this.toolbar.mnuBorderColorPicker.currentColor.color || this.toolbar.mnuBorderColorPicker.currentColor;
-                $('#id-toolbar-mnu-item-border-color .menu-item-icon').css('border-color', '#' + this.toolbar.btnBorders.options.borderscolor);
+                updateColors(this.toolbar.mnuBorderColorPicker, {color: '000', isAuto: true});
+                var currentColor = this.toolbar.mnuBorderColorPicker.currentColor;
+                if (currentColor && currentColor.isAuto) {
+                    var clr_item = this.toolbar.btnBorders.menu.$el.find('#id-toolbar-menu-auto-bordercolor > a');
+                    !clr_item.hasClass('selected') && clr_item.addClass('selected');
+                }
+                this.toolbar.btnBorders.options.borderscolor = currentColor.color || currentColor;
+                $('#id-toolbar-mnu-item-border-color > a .menu-item-icon').css('border-color', '#' + this.toolbar.btnBorders.options.borderscolor);
             }
         },
 

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

@@ -111,7 +111,7 @@ define([
             if (this.api) {
                 var new_borders = [],
                     bordersWidth = this.BorderType,
-                    bordersColor = Common.Utils.ThemeColor.getRgbColor(this.btnBorderColor.color);
+                    bordersColor = Common.Utils.ThemeColor.getRgbColor(this.btnBorderColor.color); // change when autocolor will be supported in sdk
 
                 if (btn.options.borderId == 'inner') {
                     new_borders[Asc.c_oAscBorderOptions.InnerV] = new Asc.asc_CBorder(bordersWidth, bordersColor);
@@ -410,7 +410,8 @@ define([
                 parentEl: $('#cell-border-color-btn'),
                 disabled: this._locked,
                 menu        : true,
-                color: '000000'
+                color: 'auto',
+                auto: true
             });
             this.lockedControls.push(this.btnBorderColor);
 
@@ -856,7 +857,7 @@ define([
              }
              this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
              this.borderColor.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
-             this.btnBorderColor.setColor(this.borderColor.getColor());
+            !this.btnBorderColor.isAutoColor() && this.btnBorderColor.setColor(this.borderColor.getColor());
              this.colorsGrad.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
              this.colorsFG.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
              this.colorsBG.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());

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

@@ -1852,7 +1852,15 @@ define([
                             template    : _.template('<a id="<%= id %>"tabindex="-1" type="menuitem"><span class="menu-item-icon" style="background-image: none; width: 12px; height: 12px; margin: 2px 9px 0 -11px; border-style: solid; border-width: 3px; border-color: #000;"></span><%= caption %></a>'),
                             menu        : new Common.UI.Menu({
                                 menuAlign   : 'tl-tr',
+                                cls: 'shifted-left',
                                 items       : [
+                                    {
+                                        id: 'id-toolbar-menu-auto-bordercolor',
+                                        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>'),
+                                        stopPropagation: true
+                                    },
+                                    {caption: '--'},
                                     { template: _.template('<div id="id-toolbar-menu-bordercolor" style="width: 169px; height: 216px; margin: 10px;"></div>'), stopPropagation: true },
                                     { template: _.template('<a id="id-toolbar-menu-new-bordercolor" style="padding-left:12px;">' + this.textNewColor + '</a>'),  stopPropagation: true }
                                 ]
@@ -2458,6 +2466,7 @@ define([
         textVertical: 'Vertical Text',
         textTabView: 'View',
         tipEditChartData: 'Select Data',
-        tipEditChartType: 'Change Chart Type'
+        tipEditChartType: 'Change Chart Type',
+        textAutoColor: 'Automatic'
     }, SSE.Views.Toolbar || {}));
 });

apps/spreadsheeteditor/main/resources/less/toolbar.less

@@ -135,6 +135,13 @@
     }
 }
 
+#id-toolbar-menu-auto-bordercolor > a.selected {
+    span {
+        outline: 1px solid @black;
+        border: 1px solid @body-bg;
+    }
+}
+
 .item-equation {
     border: 1px solid @gray;
     .background-ximage-v2('toolbar/math.png', 1500px);