From c240e0e89e4df47a358ed63ee5c3ab22ffdae550 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Fri, 22 Jan 2021 00:45:44 +0300 Subject: [PATCH] [SSE] Fix Bug 48247 --- .../main/app/controller/Toolbar.js | 152 +++++++++++------- .../main/app/view/CellSettings.js | 9 +- .../main/app/view/Toolbar.js | 7 + .../main/resources/less/toolbar.less | 5 +- 4 files changed, 115 insertions(+), 58 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/controller/Toolbar.js b/apps/spreadsheeteditor/main/app/controller/Toolbar.js index b60a5beb5..2d6eb3b28 100644 --- a/apps/spreadsheeteditor/main/app/controller/Toolbar.js +++ b/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', color); + $('#id-toolbar-mnu-item-border-color > a .menu-item-icon').css('border-color', '#000'); 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) { - 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 ( (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 (color.get_auto()) { + if (this._state.clrtext !== 'auto') { + fontColorPicker.clearSelection(); + 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'; } - 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) { - 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 ( (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 (color.get_auto()) { + if (this._state.clrtext !== 'auto') { + fontColorPicker.clearSelection(); + 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'; } - 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.currentColor = this.toolbar.mnuTextColorPicker.currentColor.color || this.toolbar.mnuTextColorPicker.currentColor; - this.toolbar.btnTextColor.setColor(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) { diff --git a/apps/spreadsheeteditor/main/app/view/CellSettings.js b/apps/spreadsheeteditor/main/app/view/CellSettings.js index 74f1a376a..325849ad9 100644 --- a/apps/spreadsheeteditor/main/app/view/CellSettings.js +++ b/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); diff --git a/apps/spreadsheeteditor/main/app/view/Toolbar.js b/apps/spreadsheeteditor/main/app/view/Toolbar.js index 8dc515f87..952cc8788 100644 --- a/apps/spreadsheeteditor/main/app/view/Toolbar.js +++ b/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('<%= caption %>') + }, + {caption: '--'}, { template: _.template('
') }, { template: _.template('' + me.textNewColor + '') } ] diff --git a/apps/spreadsheeteditor/main/resources/less/toolbar.less b/apps/spreadsheeteditor/main/resources/less/toolbar.less index f5958f73a..0ef2047a8 100644 --- a/apps/spreadsheeteditor/main/resources/less/toolbar.less +++ b/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;