From 53868564d9b641cf231e88512f5f59662b8317f0 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Wed, 20 Jan 2021 12:26:20 +0300 Subject: [PATCH] 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;