From ff43f0dc71ee5d8776ef551acbaf80ec9138867f Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Wed, 20 Jan 2021 18:38:07 +0300 Subject: [PATCH] [SSE] Bug 48248: Add auto color for cell borders --- apps/common/main/lib/component/ColorButton.js | 3 ++ .../main/resources/less/toolbar.less | 4 +-- .../main/app/controller/Toolbar.js | 30 ++++++++++++++++--- .../main/app/view/CellSettings.js | 7 +++-- .../main/app/view/Toolbar.js | 11 ++++++- .../main/resources/less/toolbar.less | 7 +++++ 6 files changed, 52 insertions(+), 10 deletions(-) diff --git a/apps/common/main/lib/component/ColorButton.js b/apps/common/main/lib/component/ColorButton.js index 99d51a4b4..3f22195ee 100644 --- a/apps/common/main/lib/component/ColorButton.js +++ b/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); }, diff --git a/apps/documenteditor/main/resources/less/toolbar.less b/apps/documenteditor/main/resources/less/toolbar.less index 9c7bfc831..1d26397db 100644 --- a/apps/documenteditor/main/resources/less/toolbar.less +++ b/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; } } diff --git a/apps/spreadsheeteditor/main/app/controller/Toolbar.js b/apps/spreadsheeteditor/main/app/controller/Toolbar.js index 1889bb2ba..28e6fd814 100644 --- a/apps/spreadsheeteditor/main/app/controller/Toolbar.js +++ b/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); } }, diff --git a/apps/spreadsheeteditor/main/app/view/CellSettings.js b/apps/spreadsheeteditor/main/app/view/CellSettings.js index ff7b560a6..74f1a376a 100644 --- a/apps/spreadsheeteditor/main/app/view/CellSettings.js +++ b/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()); diff --git a/apps/spreadsheeteditor/main/app/view/Toolbar.js b/apps/spreadsheeteditor/main/app/view/Toolbar.js index 8654ba253..692a7408a 100644 --- a/apps/spreadsheeteditor/main/app/view/Toolbar.js +++ b/apps/spreadsheeteditor/main/app/view/Toolbar.js @@ -1852,7 +1852,15 @@ define([ template : _.template('<%= caption %>'), menu : new Common.UI.Menu({ menuAlign : 'tl-tr', + cls: 'shifted-left', items : [ + { + id: 'id-toolbar-menu-auto-bordercolor', + caption: this.textAutoColor, + template: _.template('<%= caption %>'), + stopPropagation: true + }, + {caption: '--'}, { template: _.template('
'), stopPropagation: true }, { template: _.template('' + this.textNewColor + ''), 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 || {})); }); \ No newline at end of file diff --git a/apps/spreadsheeteditor/main/resources/less/toolbar.less b/apps/spreadsheeteditor/main/resources/less/toolbar.less index 751c71ac6..f5958f73a 100644 --- a/apps/spreadsheeteditor/main/resources/less/toolbar.less +++ b/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);