From 53868564d9b641cf231e88512f5f59662b8317f0 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Wed, 20 Jan 2021 12:26:20 +0300 Subject: [PATCH 1/5] For Bug 48248: add auto color to ColorButton component --- apps/common/main/lib/component/ColorButton.js | 42 ++++++++++++++++--- apps/common/main/resources/less/buttons.less | 12 ++++++ .../main/app/view/ControlSettingsDialog.js | 25 ++++------- .../main/resources/less/toolbar.less | 4 +- 4 files changed, 58 insertions(+), 25 deletions(-) diff --git a/apps/common/main/lib/component/ColorButton.js b/apps/common/main/lib/component/ColorButton.js index cdbbb0002..41b24ecb8 100644 --- a/apps/common/main/lib/component/ColorButton.js +++ b/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 id = Common.UI.getId(), - menu = new Common.UI.Menu({ + var height = options.paletteHeight || 216, + id = Common.UI.getId(), + 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('<%= caption %>') + }); + 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('
') }, { template: _.template('' + this.textNewColor + '') } ]) @@ -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 || {})); }); \ No newline at end of file diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less index 77f7e9f2e..a06138bec 100644 --- a/apps/common/main/resources/less/buttons.less +++ b/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; diff --git a/apps/documenteditor/main/app/view/ControlSettingsDialog.js b/apps/documenteditor/main/app/view/ControlSettingsDialog.js index db0d6c3f2..52d450069 100644 --- a/apps/documenteditor/main/app/view/ControlSettingsDialog.js +++ b/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: [{ - id: 'control-settings-system-color', - caption: this.textSystemColor, - template: _.template('<%= caption %>') - }, - {caption: '--'}], + auto: { + caption: this.textSystemColor, + color: 'dcdcdc' + }, 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) { - 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'); + onSystemColor: function(btn, color) { 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'); - !clr_item.hasClass('selected') && clr_item.addClass('selected'); + this.btnColor.setAutoColor(true); val = Common.Utils.ThemeColor.getHexColor(220, 220, 220); } this.btnColor.setColor(val); diff --git a/apps/documenteditor/main/resources/less/toolbar.less b/apps/documenteditor/main/resources/less/toolbar.less index 1acca729c..9c7bfc831 100644 --- a/apps/documenteditor/main/resources/less/toolbar.less +++ b/apps/documenteditor/main/resources/less/toolbar.less @@ -171,9 +171,7 @@ text-overflow: ellipsis; } -#id-toolbar-menu-auto-fontcolor > a.selected, -#control-settings-system-color > a.selected, -#control-settings-system-color > a:hover { +#id-toolbar-menu-auto-fontcolor > a.selected { span { outline: 1px solid #000; border: 1px solid #fff; From e90296cda1a745425c07e8cb688181930bcafd74 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Wed, 20 Jan 2021 16:40:00 +0300 Subject: [PATCH 2/5] [DE] ColorButton: fix auto color --- apps/common/main/lib/component/ColorButton.js | 9 ++++++- .../main/app/view/ControlSettingsDialog.js | 24 +++++-------------- 2 files changed, 14 insertions(+), 19 deletions(-) diff --git a/apps/common/main/lib/component/ColorButton.js b/apps/common/main/lib/component/ColorButton.js index 41b24ecb8..99d51a4b4 100644 --- a/apps/common/main/lib/component/ColorButton.js +++ b/apps/common/main/lib/component/ColorButton.js @@ -82,6 +82,8 @@ define([ }, setColor: function(color) { + if (color == 'auto' && this.options.auto) + color = this.autocolor; var span = $(this.cmpEl).find('button span:nth-child(1)'); this.color = color; @@ -102,6 +104,7 @@ define([ 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'); + (color == 'auto') && this.setAutoColor(true); } } return this.colorPicker; @@ -148,7 +151,7 @@ define([ }, onAutoColorSelect: function() { - this.setColor(this.autocolor); + this.setColor('auto'); this.setAutoColor(true); this.colorPicker && this.colorPicker.clearSelection(); this.trigger('auto:select', this, this.autocolor); @@ -162,6 +165,10 @@ define([ this.colorAuto.removeClass('selected'); }, + isAutoColor: function() { + return this.colorAuto && this.colorAuto.hasClass('selected'); + }, + textNewColor: 'Add New Custom Color', textAutoColor: 'Automatic' diff --git a/apps/documenteditor/main/app/view/ControlSettingsDialog.js b/apps/documenteditor/main/app/view/ControlSettingsDialog.js index 52d450069..8717bdfe5 100644 --- a/apps/documenteditor/main/app/view/ControlSettingsDialog.js +++ b/apps/documenteditor/main/app/view/ControlSettingsDialog.js @@ -132,10 +132,10 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template', parentEl: $('#control-settings-color-btn'), auto: { caption: this.textSystemColor, - color: 'dcdcdc' + color: Common.Utils.ThemeColor.getHexColor(220, 220, 220) }, additionalAlign: this.menuAddAlign, - color: '000000', + color: 'auto', colors: ['000000', '993300', '333300', '003300', '003366', '000080', '333399', '333333', '800000', 'FF6600', '808000', '00FF00', '008080', '0000FF', '666699', '808080', 'FF0000', 'FF9900', '99CC00', '339966', '33CCCC', '3366FF', '800080', '999999', 'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF', @@ -143,8 +143,6 @@ 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(); this.btnApplyAll = new Common.UI.Button({ @@ -379,14 +377,6 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template', }, 100); }, - onColorsSelect: function(btn, color) { - this.isSystemColor = false; - }, - - onSystemColor: function(btn, color) { - this.isSystemColor = true; - }, - afterRender: function() { this.updateMetricUnit(); this._setDefaults(this.props); @@ -415,16 +405,14 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template', (val!==null && val!==undefined) && this.cmbShow.setValue(val); val = props.get_Color(); - this.isSystemColor = (val===null); 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(); - this.btnColor.setAutoColor(true); - val = Common.Utils.ThemeColor.getHexColor(220, 220, 220); + val = 'auto'; } + this.btnColor.setAutoColor(val == 'auto'); this.btnColor.setColor(val); val = props.get_Lock(); @@ -559,7 +547,7 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template', props.put_PlaceholderText(this.txtPlaceholder.getValue() || ' '); props.put_Appearance(this.cmbShow.getValue()); - if (this.isSystemColor) { + if (this.btnColor.isAutoColor()) { props.put_Color(null); } else { var color = Common.Utils.ThemeColor.getRgbColor(this.colors.getColor()); @@ -669,7 +657,7 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template', if (this.api) { var props = new AscCommon.CContentControlPr(); props.put_Appearance(this.cmbShow.getValue()); - if (this.isSystemColor) { + if (this.btnColor.isAutoColor()) { props.put_Color(null); } else { var color = Common.Utils.ThemeColor.getRgbColor(this.colors.getColor()); From e32c1fd3cf75b638eed87a340f87d1826934e481 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Wed, 20 Jan 2021 16:42:48 +0300 Subject: [PATCH 3/5] [DE][PE] Bug 48248: add auto color to border palette --- .../main/app/view/DropcapSettingsAdvanced.js | 25 ++++++++++++++----- .../app/view/ParagraphSettingsAdvanced.js | 24 +++++++++++++----- .../main/app/view/TableSettings.js | 13 +++++++--- .../main/app/view/TableSettingsAdvanced.js | 23 ++++++++++++----- .../main/app/view/TableSettings.js | 5 ++-- 5 files changed, 67 insertions(+), 23 deletions(-) diff --git a/apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js b/apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js index b5da68de6..eab91f096 100644 --- a/apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js +++ b/apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js @@ -163,11 +163,15 @@ define([ this.btnBorderColor = new Common.UI.ColorButton({ parentEl: $('#drop-advanced-button-bordercolor'), additionalAlign: this.menuAddAlign, - color: '000000' + color: 'auto', + auto: true }); this.btnBorderColor.on('color:select', _.bind(function(btn, color) { this.tableStyler.setVirtualBorderColor((typeof(color) == 'object') ? color.color : color); }, this)); + this.btnBorderColor.on('auto:select', _.bind(function(btn, color) { + this.tableStyler.setVirtualBorderColor((typeof(color) == 'object') ? color.color : color); + }, this)); this.colorsBorder = this.btnBorderColor.getPicker(); this.btnBackColor = new Common.UI.ColorButton({ @@ -668,13 +672,16 @@ define([ if (this.borderProps !== undefined) { this.btnBorderColor.setColor(this.borderProps.borderColor); - this.tableStyler.setVirtualBorderColor((typeof(this.borderProps.borderColor) == 'object') ? this.borderProps.borderColor.color : this.borderProps.borderColor); + this.btnBorderColor.setAutoColor(this.borderProps.borderColor=='auto'); + this.tableStyler.setVirtualBorderColor((typeof(this.btnBorderColor.color) == 'object') ? this.btnBorderColor.color.color : this.btnBorderColor.color); + if (this.borderProps.borderColor=='auto') + this.colorsBorder.clearSelection(); + else + this.colorsBorder.select(this.borderProps.borderColor,true); this.cmbBorderSize.setValue(this.borderProps.borderSize.ptValue); this.BorderSize = {ptValue: this.borderProps.borderSize.ptValue, pxValue: this.borderProps.borderSize.pxValue}; this.tableStyler.setVirtualBorderSize(this.BorderSize.pxValue); - - this.colorsBorder.select(this.borderProps.borderColor); } this.setTitle((this.isFrame) ? this.textTitleFrame : this.textTitle); @@ -775,7 +782,7 @@ define([ paragraphProps : this._changedProps, borderProps : { borderSize : this.BorderSize, - borderColor : this.btnBorderColor.color + borderColor : this.btnBorderColor.isAutoColor() ? 'auto' : this.btnBorderColor.color } }; }, @@ -1086,7 +1093,13 @@ define([ var size = parseFloat(this.BorderSize.ptValue); border.put_Value(1); border.put_Size(size * 25.4 / 72.0); - var color = Common.Utils.ThemeColor.getRgbColor(this.btnBorderColor.color); + var color; + if (this.btnBorderColor.isAutoColor()) { + color = new Asc.asc_CColor(); + color.put_auto(true); + } else { + color = Common.Utils.ThemeColor.getRgbColor(this.btnBorderColor.color); + } border.put_Color(color); } else { diff --git a/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js b/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js index 6eb3ee1e9..c948f4679 100644 --- a/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js +++ b/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js @@ -376,10 +376,12 @@ define([ 'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem this.btnBorderColor = new Common.UI.ColorButton({ parentEl: $('#paragraphadv-border-color-btn'), additionalAlign: this.menuAddAlign, - color: '000000' + color: 'auto', + auto: true }); this.colorsBorder = this.btnBorderColor.getPicker(); this.btnBorderColor.on('color:select', _.bind(this.onColorsBorderSelect, this)); + this.btnBorderColor.on('auto:select', _.bind(this.onColorsBorderSelect, this)); this.BordersImage = new Common.UI.TableStyler({ el: $('#id-deparagraphstyler'), @@ -781,7 +783,7 @@ define([ 'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem var horizontalAlign = this.cmbTextAlignment.getValue(); this._changedProps.asc_putJc((horizontalAlign !== undefined && horizontalAlign !== null) ? horizontalAlign : c_paragraphTextAlignment.LEFT); - return { paragraphProps: this._changedProps, borderProps: {borderSize: this.BorderSize, borderColor: this.btnBorderColor.color} }; + return { paragraphProps: this._changedProps, borderProps: {borderSize: this.BorderSize, borderColor: this.btnBorderColor.isAutoColor() ? 'auto' : this.btnBorderColor.color} }; }, _setDefaults: function(props) { @@ -962,14 +964,18 @@ define([ 'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem if (this.borderProps !== undefined) { this.btnBorderColor.setColor(this.borderProps.borderColor); - this.BordersImage.setVirtualBorderColor((typeof(this.borderProps.borderColor) == 'object') ? this.borderProps.borderColor.color : this.borderProps.borderColor); + this.btnBorderColor.setAutoColor(this.borderProps.borderColor=='auto'); + this.BordersImage.setVirtualBorderColor((typeof(this.btnBorderColor.color) == 'object') ? this.btnBorderColor.color.color : this.btnBorderColor.color); + + if (this.borderProps.borderColor=='auto') + this.colorsBorder.clearSelection(); + else + this.colorsBorder.select(this.borderProps.borderColor,true); this.cmbBorderSize.setValue(this.borderProps.borderSize.ptValue); var rec = this.cmbBorderSize.getSelectedRecord(); if (rec) this.onBorderSizeSelect(this.cmbBorderSize, rec); - - this.colorsBorder.select(this.borderProps.borderColor,true); } for (var i=0; i Date: Wed, 20 Jan 2021 18:38:07 +0300 Subject: [PATCH 4/5] [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); From 14ad8d8aef35a891104d84342d625b562d9fcd95 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Wed, 20 Jan 2021 18:42:55 +0300 Subject: [PATCH 5/5] Add translation --- apps/documenteditor/main/locale/en.json | 1 + apps/presentationeditor/main/locale/en.json | 1 + apps/spreadsheeteditor/main/locale/en.json | 2 ++ 3 files changed, 4 insertions(+) diff --git a/apps/documenteditor/main/locale/en.json b/apps/documenteditor/main/locale/en.json index 356c98978..059cf6a77 100644 --- a/apps/documenteditor/main/locale/en.json +++ b/apps/documenteditor/main/locale/en.json @@ -147,6 +147,7 @@ "Common.UI.Calendar.textShortWednesday": "We", "Common.UI.Calendar.textYears": "Years", "Common.UI.ColorButton.textNewColor": "Add New Custom Color", + "Common.UI.ColorButton.textAutoColor": "Automatic", "Common.UI.ComboBorderSize.txtNoBorders": "No borders", "Common.UI.ComboBorderSizeEditable.txtNoBorders": "No borders", "Common.UI.ComboDataView.emptyComboText": "No styles", diff --git a/apps/presentationeditor/main/locale/en.json b/apps/presentationeditor/main/locale/en.json index 0903a9e9b..8b1b46995 100644 --- a/apps/presentationeditor/main/locale/en.json +++ b/apps/presentationeditor/main/locale/en.json @@ -42,6 +42,7 @@ "Common.define.chartData.textSurface": "Surface", "Common.Translation.warnFileLocked": "The file is being edited in another app. You can continue editing and save it as a copy.", "Common.UI.ColorButton.textNewColor": "Add New Custom Color", + "Common.UI.ColorButton.textAutoColor": "Automatic", "Common.UI.ComboBorderSize.txtNoBorders": "No borders", "Common.UI.ComboBorderSizeEditable.txtNoBorders": "No borders", "Common.UI.ComboDataView.emptyComboText": "No styles", diff --git a/apps/spreadsheeteditor/main/locale/en.json b/apps/spreadsheeteditor/main/locale/en.json index 9c58f2360..310579715 100644 --- a/apps/spreadsheeteditor/main/locale/en.json +++ b/apps/spreadsheeteditor/main/locale/en.json @@ -43,6 +43,7 @@ "Common.define.chartData.textWinLossSpark": "Win/Loss", "Common.Translation.warnFileLocked": "The file is being edited in another app. You can continue editing and save it as a copy.", "Common.UI.ColorButton.textNewColor": "Add New Custom Color", + "Common.UI.ColorButton.textAutoColor": "Automatic", "Common.UI.ComboBorderSize.txtNoBorders": "No borders", "Common.UI.ComboBorderSizeEditable.txtNoBorders": "No borders", "Common.UI.ComboDataView.emptyComboText": "No styles", @@ -3018,6 +3019,7 @@ "SSE.Views.Toolbar.txtTime": "Time", "SSE.Views.Toolbar.txtUnmerge": "Unmerge Cells", "SSE.Views.Toolbar.txtYen": "¥ Yen", + "SSE.Views.Toolbar.textAutoColor": "Automatic", "SSE.Views.Top10FilterDialog.textType": "Show", "SSE.Views.Top10FilterDialog.txtBottom": "Bottom", "SSE.Views.Top10FilterDialog.txtBy": "by",