[SSE] Fix Bug 48247

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

@@ -310,6 +310,7 @@ define([
                 toolbar.btnBackColor.on('click',                            _.bind(this.onBackColor, this));
                 toolbar.mnuTextColorPicker.on('select',                     _.bind(this.onTextColorSelect, this));
                 toolbar.mnuBackColorPicker.on('select',                     _.bind(this.onBackColorSelect, this));
+                $('#id-toolbar-menu-auto-fontcolor').on('click',            _.bind(this.onAutoFontColor, this));
                 toolbar.btnBorders.on('click',                              _.bind(this.onBorders, this));
                 if (toolbar.btnBorders.rendered) {
                     toolbar.btnBorders.menu.on('item:click',                    _.bind(this.onBordersMenu, this));
@@ -603,12 +604,12 @@ define([
             this._state.clrtext_asccolor = this._state.clrtext = undefined;
 
             this.toolbar.btnTextColor.currentColor = color;
-            this.toolbar.btnTextColor.setColor(this.toolbar.btnTextColor.currentColor);
+            this.toolbar.btnTextColor.setColor((typeof(color) == 'object') ? (color.isAuto ? '000' : color.color) : color);
 
             this.toolbar.mnuTextColorPicker.currentColor = color;
             if (this.api) {
                 this.toolbar.btnTextColor.ischanged = (fromBtn!==true);
-                this.api.asc_setCellTextColor(Common.Utils.ThemeColor.getRgbColor(color));
+                this.api.asc_setCellTextColor(color.isAuto ? color.color : Common.Utils.ThemeColor.getRgbColor(color));
                 this.toolbar.btnTextColor.ischanged = false;
             }
 
@@ -648,6 +649,25 @@ define([
             this.toolbar.mnuBorderColorPicker.addNewColor();
         },
 
+        onAutoFontColor: function(e) {
+            this._state.clrtext_asccolor = this._state.clrtext = undefined;
+
+            var color = new Asc.asc_CColor();
+            color.put_auto(true);
+
+            this.toolbar.btnTextColor.currentColor = {color: color, isAuto: true};
+            this.toolbar.btnTextColor.setColor('000');
+
+            this.toolbar.mnuTextColorPicker.clearSelection();
+            this.toolbar.mnuTextColorPicker.currentColor = {color: color, isAuto: true};
+            if (this.api) {
+                this.api.asc_setCellTextColor(color);
+            }
+
+            Common.NotificationCenter.trigger('edit:complete', this.toolbar, {restorefocus:true});
+            Common.component.Analytics.trackEvent('ToolBar', 'Text Color');
+        },
+
         onBorders: function(btn) {
             var menuItem;
 
@@ -726,10 +746,11 @@ define([
         },
 
         onAutoBorderColor: function(e) {
-            var color = '#000';
+            $('#id-toolbar-mnu-item-border-color > a .menu-item-icon').css('border-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);
+            var color = new Asc.asc_CColor();
+            color.put_auto(true);
+            this.toolbar.btnBorders.options.borderscolor = 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');
@@ -2162,32 +2183,43 @@ define([
             if (!toolbar.btnTextColor.ischanged && !fontColorPicker.isDummy) {
                 color = fontobj.asc_getFontColor();
                 if (color) {
-                    if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
+                    if (color.get_auto()) {
-                        clr = {color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), effectValue: color.get_value() };
+                        if (this._state.clrtext !== 'auto') {
-                    } else {
+                            fontColorPicker.clearSelection();
-                        clr = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
+                            var clr_item = this.toolbar.btnTextColor.menu.$el.find('#id-toolbar-menu-auto-fontcolor > a');
-                    }
+                            !clr_item.hasClass('selected') && clr_item.addClass('selected');
-                }
+                            this._state.clrtext = 'auto';
-                var type1 = typeof(clr),
-                    type2 = typeof(this._state.clrtext);
-                if ( (type1 !== type2) || (type1=='object' &&
-                    (clr.effectValue!==this._state.clrtext.effectValue || this._state.clrtext.color.indexOf(clr.color)<0)) ||
-                    (type1!='object' && this._state.clrtext!==undefined && this._state.clrtext.indexOf(clr)<0 )) {
-
-                    if (_.isObject(clr)) {
-                        var isselected = false;
-                        for (var i = 0; i < 10; i++) {
-                            if (Common.Utils.ThemeColor.ThemeValues[i] == clr.effectValue) {
-                                fontColorPicker.select(clr, true);
-                                isselected = true;
-                                break;
-                            }
                         }
-                        if (!isselected) fontColorPicker.clearSelection();
                     } else {
-                        fontColorPicker.select(clr, true);
+                        if (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() };
+                        } else {
+                            clr = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
+                        }
+                        var type1 = typeof(clr),
+                            type2 = typeof(this._state.clrtext);
+                        if ( (this._state.clrtext == 'auto') || (type1 !== type2) || (type1=='object' &&
+                            (clr.effectValue!==this._state.clrtext.effectValue || this._state.clrtext.color.indexOf(clr.color)<0)) ||
+                            (type1!='object' && this._state.clrtext!==undefined && this._state.clrtext.indexOf(clr)<0 )) {
+
+                            var clr_item = this.toolbar.btnTextColor.menu.$el.find('#id-toolbar-menu-auto-fontcolor > a');
+                            clr_item.hasClass('selected') && clr_item.removeClass('selected');
+                            if (_.isObject(clr)) {
+                                var isselected = false;
+                                for (var i = 0; i < 10; i++) {
+                                    if (Common.Utils.ThemeColor.ThemeValues[i] == clr.effectValue) {
+                                        fontColorPicker.select(clr, true);
+                                        isselected = true;
+                                        break;
+                                    }
+                                }
+                                if (!isselected) fontColorPicker.clearSelection();
+                            } else {
+                                fontColorPicker.select(clr, true);
+                            }
+                            this._state.clrtext = clr;
+                        }
                     }
-                    this._state.clrtext = clr;
                 }
                 this._state.clrtext_asccolor = color;
             }
@@ -2309,32 +2341,43 @@ define([
             if (!toolbar.btnTextColor.ischanged && !fontColorPicker.isDummy) {
                 color = xfs.asc_getFontColor();
                 if (color) {
-                    if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
+                    if (color.get_auto()) {
-                        clr = {color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), effectValue: color.get_value() };
+                        if (this._state.clrtext !== 'auto') {
-                    } else {
+                            fontColorPicker.clearSelection();
-                        clr = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
+                            var clr_item = this.toolbar.btnTextColor.menu.$el.find('#id-toolbar-menu-auto-fontcolor > a');
-                    }
+                            !clr_item.hasClass('selected') && clr_item.addClass('selected');
-                }
+                            this._state.clrtext = 'auto';
-                var type1 = typeof(clr),
-                    type2 = typeof(this._state.clrtext);
-                if ( (type1 !== type2) || (type1=='object' &&
-                    (clr.effectValue!==this._state.clrtext.effectValue || this._state.clrtext.color.indexOf(clr.color)<0)) ||
-                    (type1!='object' && this._state.clrtext!==undefined && this._state.clrtext.indexOf(clr)<0 )) {
-
-                    if (_.isObject(clr)) {
-                        var isselected = false;
-                        for (var i = 0; i < 10; i++) {
-                            if (Common.Utils.ThemeColor.ThemeValues[i] == clr.effectValue) {
-                                fontColorPicker.select(clr, true);
-                                isselected = true;
-                                break;
-                            }
                         }
-                        if (!isselected) fontColorPicker.clearSelection();
                     } else {
-                        fontColorPicker.select(clr, true);
+                        if (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() };
+                        } else {
+                            clr = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
+                        }
+                        var type1 = typeof(clr),
+                            type2 = typeof(this._state.clrtext);
+                        if ( (this._state.clrtext == 'auto') || (type1 !== type2) || (type1=='object' &&
+                            (clr.effectValue!==this._state.clrtext.effectValue || this._state.clrtext.color.indexOf(clr.color)<0)) ||
+                            (type1!='object' && this._state.clrtext!==undefined && this._state.clrtext.indexOf(clr)<0 )) {
+
+                            var clr_item = this.toolbar.btnTextColor.menu.$el.find('#id-toolbar-menu-auto-fontcolor > a');
+                            clr_item.hasClass('selected') && clr_item.removeClass('selected');
+                            if (_.isObject(clr)) {
+                                var isselected = false;
+                                for (var i = 0; i < 10; i++) {
+                                    if (Common.Utils.ThemeColor.ThemeValues[i] == clr.effectValue) {
+                                        fontColorPicker.select(clr, true);
+                                        isselected = true;
+                                        break;
+                                    }
+                                }
+                                if (!isselected) fontColorPicker.clearSelection();
+                            } else {
+                                fontColorPicker.select(clr, true);
+                            }
+                            this._state.clrtext = clr;
+                        }
                     }
-                    this._state.clrtext = clr;
                 }
                 this._state.clrtext_asccolor = color;
             }
@@ -2748,11 +2791,10 @@ define([
             };
 
             updateColors(this.toolbar.mnuTextColorPicker, Common.Utils.ThemeColor.getStandartColors()[1]);
-            if (this.toolbar.btnTextColor.currentColor === undefined) {
+            if (this.toolbar.btnTextColor.currentColor === undefined || !this.toolbar.btnTextColor.currentColor.isAuto) {
                 this.toolbar.btnTextColor.currentColor=Common.Utils.ThemeColor.getStandartColors()[1];
-            } else
+                this.toolbar.btnTextColor.setColor(this.toolbar.btnTextColor.currentColor);
-                this.toolbar.btnTextColor.currentColor = this.toolbar.mnuTextColorPicker.currentColor.color || this.toolbar.mnuTextColorPicker.currentColor;
+            }
-            this.toolbar.btnTextColor.setColor(this.toolbar.btnTextColor.currentColor);
 
             updateColors(this.toolbar.mnuBackColorPicker, Common.Utils.ThemeColor.getStandartColors()[3]);
             if (this.toolbar.btnBackColor.currentColor === undefined) {

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

@@ -111,8 +111,13 @@ define([
             if (this.api) {
                 var new_borders = [],
                     bordersWidth = this.BorderType,
-                    bordersColor = Common.Utils.ThemeColor.getRgbColor(this.btnBorderColor.color); // change when autocolor will be supported in sdk
+                    bordersColor;
-
+                if (this.btnBorderColor.isAutoColor()) {
+                    bordersColor = new Asc.asc_CColor();
+                    bordersColor.put_auto(true);
+                } else {
+                    bordersColor = Common.Utils.ThemeColor.getRgbColor(this.btnBorderColor.color);
+                }
                 if (btn.options.borderId == 'inner') {
                     new_borders[Asc.c_oAscBorderOptions.InnerV] = new Asc.asc_CBorder(bordersWidth, bordersColor);
                     new_borders[Asc.c_oAscBorderOptions.InnerH] = new Asc.asc_CBorder(bordersWidth, bordersColor);

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

@@ -488,7 +488,14 @@ define([
                     split       : true,
                     lock        : [_set.selImage, _set.editFormula, _set.selRangeEdit, _set.selSlicer, _set.coAuth, _set.coAuthText, _set.lostConnect],
                     menu        : new Common.UI.Menu({
+                        cls: 'shifted-left',
                         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: 216px; margin: 10px;"></div>') },
                             { template: _.template('<a id="id-toolbar-menu-new-fontcolor" style="padding-left:12px;">' + me.textNewColor + '</a>') }
                         ]

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

@@ -135,7 +135,10 @@
     }
 }
 
-#id-toolbar-menu-auto-bordercolor > a.selected {
+#id-toolbar-menu-auto-bordercolor > a.selected,
+#id-toolbar-menu-auto-bordercolor > a:hover,
+#id-toolbar-menu-auto-fontcolor > a.selected,
+#id-toolbar-menu-auto-fontcolor > a:hover {
     span {
         outline: 1px solid @black;
         border: 1px solid @body-bg;