From c295698704b7267d7bd0e8274cf6a95983405b4f Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Thu, 21 Jan 2021 22:48:27 +0300 Subject: [PATCH 1/2] Refactoring color buttons --- apps/common/main/lib/component/ColorButton.js | 19 +++++++++++++++++++ apps/common/main/resources/less/buttons.less | 4 ++++ .../main/app/controller/FormsTab.js | 2 +- .../main/app/controller/Toolbar.js | 19 +++++++------------ apps/documenteditor/main/app/view/FormsTab.js | 6 ++---- apps/documenteditor/main/app/view/Toolbar.js | 18 ++++++------------ .../main/app/view/WatermarkSettingsDialog.js | 19 ++++++++----------- .../main/resources/less/toolbar.less | 5 ++++- .../main/app/controller/Toolbar.js | 6 ++---- .../main/app/view/Toolbar.js | 6 ++---- .../main/app/controller/Toolbar.js | 12 +++++------- .../main/app/view/HeaderFooterDialog.js | 13 +++++-------- .../main/app/view/Statusbar.js | 4 ---- .../main/app/view/Toolbar.js | 18 ++++-------------- 14 files changed, 69 insertions(+), 82 deletions(-) diff --git a/apps/common/main/lib/component/ColorButton.js b/apps/common/main/lib/component/ColorButton.js index 3f22195ee..77f163661 100644 --- a/apps/common/main/lib/component/ColorButton.js +++ b/apps/common/main/lib/component/ColorButton.js @@ -176,4 +176,23 @@ define([ textAutoColor: 'Automatic' }, Common.UI.ColorButton || {})); + + + Common.UI.ButtonColored = Common.UI.Button.extend(_.extend({ + render: function(parentEl) { + Common.UI.Button.prototype.render.call(this, parentEl); + + $('button:first-child', this.cmpEl).append( $('
')); + this.colorEl = this.cmpEl.find('.btn-color-value-line'); + }, + + setColor: function(color) { + if (this.colorEl) { + this.colorEl.css({'background-color': (color=='transparent') ? color : ((typeof(color) == 'object') ? '#'+color.color : '#'+color)}); + this.colorEl.toggleClass('bordered', color=='transparent'); + } + } + + }, Common.UI.ButtonColored || {})); + }); \ 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 a06138bec..4f4f1ed29 100644 --- a/apps/common/main/resources/less/buttons.less +++ b/apps/common/main/resources/less/buttons.less @@ -362,6 +362,10 @@ width: 14px; height: 3px; background-color: red; + &.bordered { + border: 1px solid @gray-deep; + } + } } diff --git a/apps/documenteditor/main/app/controller/FormsTab.js b/apps/documenteditor/main/app/controller/FormsTab.js index 28e15d94d..facf19713 100644 --- a/apps/documenteditor/main/app/controller/FormsTab.js +++ b/apps/documenteditor/main/app/controller/FormsTab.js @@ -154,7 +154,7 @@ define([ this.view.mnuFormsColorPicker.selectByRGB(clr, true); } this.view.btnHighlight.currentColor = clr; - $('.btn-color-value-line', this.view.btnHighlight.cmpEl).css('background-color', clr ? '#' + clr : 'transparent'); + this.view.btnHighlight.setColor(this.view.btnHighlight.currentColor || 'transparent'); } }, diff --git a/apps/documenteditor/main/app/controller/Toolbar.js b/apps/documenteditor/main/app/controller/Toolbar.js index 9a2a7ffe2..233b6b8eb 100644 --- a/apps/documenteditor/main/app/controller/Toolbar.js +++ b/apps/documenteditor/main/app/controller/Toolbar.js @@ -2380,7 +2380,7 @@ define([ this.api.put_TextColor(color); this.toolbar.btnFontColor.currentColor = {color: color, isAuto: true}; - $('.btn-color-value-line', this.toolbar.btnFontColor.cmpEl).css('background-color', '#000'); + this.toolbar.btnFontColor.setColor('000'); this.toolbar.mnuFontColorPicker.clearSelection(); this.toolbar.mnuFontColorPicker.currentColor = {color: color, isAuto: true}; @@ -2397,10 +2397,8 @@ define([ onSelectFontColor: function(picker, color) { this._state.clrtext = this._state.clrtext_asccolor = undefined; - var clr = (typeof(color) == 'object') ? (color.isAuto ? '#000' : color.color) : color; - this.toolbar.btnFontColor.currentColor = color; - $('.btn-color-value-line', this.toolbar.btnFontColor.cmpEl).css('background-color', '#' + clr); + this.toolbar.btnFontColor.setColor((typeof(color) == 'object') ? (color.isAuto ? '000' : color.color) : color); this.toolbar.mnuFontColorPicker.currentColor = color; if (this.api) @@ -2412,10 +2410,8 @@ define([ onParagraphColorPickerSelect: function(picker, color) { this._state.clrback = this._state.clrshd_asccolor = undefined; - var clr = (typeof(color) == 'object') ? color.color : color; - this.toolbar.btnParagraphColor.currentColor = color; - $('.btn-color-value-line', this.toolbar.btnParagraphColor.cmpEl).css('background-color', color!='transparent'?'#'+clr:clr); + this.toolbar.btnParagraphColor.setColor(color); this.toolbar.mnuParagraphColorPicker.currentColor = color; if (this.api) { @@ -2451,7 +2447,7 @@ define([ this._setMarkerColor('transparent', 'menu'); item.setChecked(true, true); this.toolbar.btnHighlightColor.currentColor = 'transparent'; - $('.btn-color-value-line', this.toolbar.btnHighlightColor.cmpEl).css('background-color', 'transparent'); + this.toolbar.btnHighlightColor.setColor(this.toolbar.btnHighlightColor.currentColor); }, onParagraphColor: function(shd) { @@ -2853,7 +2849,7 @@ define([ updateColors(this.toolbar.mnuFontColorPicker, 1); if (this.toolbar.btnFontColor.currentColor===undefined || !this.toolbar.btnFontColor.currentColor.isAuto) { this.toolbar.btnFontColor.currentColor = this.toolbar.mnuFontColorPicker.currentColor.color || this.toolbar.mnuFontColorPicker.currentColor; - $('.btn-color-value-line', this.toolbar.btnFontColor.cmpEl).css('background-color', '#' + this.toolbar.btnFontColor.currentColor); + this.toolbar.btnFontColor.setColor(this.toolbar.btnFontColor.currentColor); } if (this._state.clrtext_asccolor!==undefined) { this._state.clrtext = undefined; @@ -2863,7 +2859,7 @@ define([ updateColors(this.toolbar.mnuParagraphColorPicker, 0); this.toolbar.btnParagraphColor.currentColor = this.toolbar.mnuParagraphColorPicker.currentColor.color || this.toolbar.mnuParagraphColorPicker.currentColor; - $('.btn-color-value-line', this.toolbar.btnParagraphColor.cmpEl).css('background-color', '#' + this.toolbar.btnParagraphColor.currentColor); + this.toolbar.btnParagraphColor.setColor(this.toolbar.btnParagraphColor.currentColor); if (this._state.clrshd_asccolor!==undefined) { this._state.clrback = undefined; this.onParagraphColor(this._state.clrshd_asccolor); @@ -2921,8 +2917,7 @@ define([ me.toolbar.mnuHighlightTransparent.setChecked(false); me.toolbar.btnHighlightColor.currentColor = strcolor; - $('.btn-color-value-line', me.toolbar.btnHighlightColor.cmpEl).css('background-color', '#' + strcolor); - + me.toolbar.btnHighlightColor.setColor(me.toolbar.btnHighlightColor.currentColor); me.toolbar.btnHighlightColor.toggle(true, true); } diff --git a/apps/documenteditor/main/app/view/FormsTab.js b/apps/documenteditor/main/app/view/FormsTab.js index 541b789b5..a878e1756 100644 --- a/apps/documenteditor/main/app/view/FormsTab.js +++ b/apps/documenteditor/main/app/view/FormsTab.js @@ -175,7 +175,7 @@ define([ }); this.paragraphControls.push(this.btnClearFields); - this.btnHighlight = new Common.UI.Button({ + this.btnHighlight = new Common.UI.ButtonColored({ parentEl : $host.find('#slot-form-highlight'), cls : 'btn-toolbar', iconCls : 'toolbar__icon btn-highlight', @@ -221,9 +221,7 @@ define([ ], value: me.btnHighlight.currentColor }); - var colorVal = $('
'); - $('button:first-child', me.btnHighlight.cmpEl).append(colorVal); - colorVal.css('background-color', me.btnHighlight.currentColor ? '#' + me.btnHighlight.currentColor : 'transparent'); + me.btnHighlight.setColor(me.btnHighlight.currentColor || 'transparent'); } else { me.btnHighlight.cmpEl.parents('.group').hide().prev('.separator').hide(); } diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js index 91c67dd67..01e9a82d1 100644 --- a/apps/documenteditor/main/app/view/Toolbar.js +++ b/apps/documenteditor/main/app/view/Toolbar.js @@ -232,7 +232,7 @@ define([ }); this.paragraphControls.push(this.btnSubscript); - this.btnHighlightColor = new Common.UI.Button({ + this.btnHighlightColor = new Common.UI.ButtonColored({ id: 'id-toolbar-btn-highlight', cls: 'btn-toolbar', iconCls: 'toolbar__icon btn-highlight', @@ -254,7 +254,7 @@ define([ this.paragraphControls.push(this.btnHighlightColor); this.textOnlyControls.push(this.btnHighlightColor); - this.btnFontColor = new Common.UI.Button({ + this.btnFontColor = new Common.UI.ButtonColored({ id: 'id-toolbar-btn-fontcolor', cls: 'btn-toolbar', iconCls: 'toolbar__icon btn-fontcolor', @@ -275,7 +275,7 @@ define([ }); this.paragraphControls.push(this.btnFontColor); - this.btnParagraphColor = new Common.UI.Button({ + this.btnParagraphColor = new Common.UI.ButtonColored({ id: 'id-toolbar-btn-paracolor', cls: 'btn-toolbar', iconCls: 'toolbar__icon btn-paracolor', @@ -1948,10 +1948,8 @@ define([ // var colorVal; if (this.btnHighlightColor.cmpEl) { - colorVal = $('
'); - $('button:first-child', this.btnHighlightColor.cmpEl).append(colorVal); this.btnHighlightColor.currentColor = 'FFFF00'; - colorVal.css('background-color', '#' + this.btnHighlightColor.currentColor); + this.btnHighlightColor.setColor(this.btnHighlightColor.currentColor); this.mnuHighlightColorPicker = new Common.UI.ColorPalette({ el: $('#id-toolbar-menu-highlight'), colors: [ @@ -1963,18 +1961,14 @@ define([ } if (this.btnFontColor.cmpEl) { - colorVal = $('
'); - $('button:first-child', this.btnFontColor.cmpEl).append(colorVal); - colorVal.css('background-color', this.btnFontColor.currentColor || 'transparent'); + this.btnFontColor.setColor(this.btnFontColor.currentColor || 'transparent'); this.mnuFontColorPicker = new Common.UI.ThemeColorPalette({ el: $('#id-toolbar-menu-fontcolor') }); } if (this.btnParagraphColor.cmpEl) { - colorVal = $('
'); - $('button:first-child', this.btnParagraphColor.cmpEl).append(colorVal); - colorVal.css('background-color', this.btnParagraphColor.currentColor || 'transparent'); + this.btnParagraphColor.setColor(this.btnParagraphColor.currentColor || 'transparent'); this.mnuParagraphColorPicker = new Common.UI.ThemeColorPalette({ el: $('#id-toolbar-menu-paracolor'), transparent: true diff --git a/apps/documenteditor/main/app/view/WatermarkSettingsDialog.js b/apps/documenteditor/main/app/view/WatermarkSettingsDialog.js index 63a5b9a05..3d2fc432c 100644 --- a/apps/documenteditor/main/app/view/WatermarkSettingsDialog.js +++ b/apps/documenteditor/main/app/view/WatermarkSettingsDialog.js @@ -316,10 +316,8 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template', var initNewColor = function(btn, picker_el) { if (btn && btn.cmpEl) { - btn.currentColor = '#c0c0c0'; - var colorVal = $('
'); - $('button:first-child', btn.cmpEl).append(colorVal); - colorVal.css('background-color', btn.currentColor); + btn.currentColor = 'c0c0c0'; + btn.setColor( btn.currentColor); var picker = new Common.UI.ThemeColorPalette({ el: $(picker_el) }); @@ -330,13 +328,14 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template', picker.on('select', _.bind(me.onColorSelect, me)); return picker; }; - this.btnTextColor = new Common.UI.Button({ + this.btnTextColor = new Common.UI.ButtonColored({ parentEl: $('#watermark-textcolor'), cls : 'btn-toolbar', iconCls : 'toolbar__icon btn-fontcolor', hint : this.textColor, menu : new Common.UI.Menu({ cls: 'shifted-left', + additionalAlign: this.menuAddAlign, items: [ { id: 'watermark-auto-color', @@ -406,9 +405,8 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template', clr_item.hasClass('selected') && clr_item.removeClass('selected'); this.isAutoColor = false; - var clr = (typeof(color) == 'object') ? color.color : color; this.btnTextColor.currentColor = color; - $('.btn-color-value-line', this.btnTextColor.cmpEl).css('background-color', '#' + clr); + this.btnTextColor.setColor( this.btnTextColor.currentColor); }, updateThemeColors: function() { @@ -424,9 +422,8 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template', !clr_item.hasClass('selected') && clr_item.addClass('selected'); this.isAutoColor = true; - var color = "000"; - this.btnTextColor.currentColor = color; - $('.btn-color-value-line', this.btnTextColor.cmpEl).css('background-color', '#' + color); + this.btnTextColor.currentColor = "000"; + this.btnTextColor.setColor( this.btnTextColor.currentColor); this.mnuTextColorPicker.clearSelection(); }, @@ -613,7 +610,7 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template', } } this.btnTextColor.currentColor = clr; - $('.btn-color-value-line', this.btnTextColor.cmpEl).css('background-color', '#' + ((typeof(clr) == 'object') ? clr.color : clr)); + this.btnTextColor.setColor( this.btnTextColor.currentColor); } val = props.get_Text(); val && this.cmbText.setValue(val); diff --git a/apps/documenteditor/main/resources/less/toolbar.less b/apps/documenteditor/main/resources/less/toolbar.less index 8d3103841..eaa991b84 100644 --- a/apps/documenteditor/main/resources/less/toolbar.less +++ b/apps/documenteditor/main/resources/less/toolbar.less @@ -171,7 +171,10 @@ text-overflow: ellipsis; } -#id-toolbar-menu-auto-fontcolor > a.selected { +#id-toolbar-menu-auto-fontcolor > a.selected, +#id-toolbar-menu-auto-fontcolor > a:hover, +#watermark-auto-color > a.selected, +#watermark-auto-color > a:hover { span { outline: 1px solid @black; border: 1px solid @body-bg; diff --git a/apps/presentationeditor/main/app/controller/Toolbar.js b/apps/presentationeditor/main/app/controller/Toolbar.js index 442e795a4..7c3ccb00e 100644 --- a/apps/presentationeditor/main/app/controller/Toolbar.js +++ b/apps/presentationeditor/main/app/controller/Toolbar.js @@ -1846,10 +1846,8 @@ define([ onSelectFontColor: function(picker, color) { this._state.clrtext = this._state.clrtext_asccolor = undefined; - var clr = (typeof(color) == 'object') ? color.color : color; - this.toolbar.btnFontColor.currentColor = color; - $('.btn-color-value-line', this.toolbar.btnFontColor.cmpEl).css('background-color', '#' + clr); + this.toolbar.btnFontColor.setColor((typeof(color) == 'object') ? color.color : color); this.toolbar.mnuFontColorPicker.currentColor = color; if (this.api) @@ -2147,7 +2145,7 @@ define([ updateColors(this.toolbar.mnuFontColorPicker, 1); if (this.toolbar.btnFontColor.currentColor===undefined) { this.toolbar.btnFontColor.currentColor = this.toolbar.mnuFontColorPicker.currentColor.color || this.toolbar.mnuFontColorPicker.currentColor; - $('.btn-color-value-line', this.toolbar.btnFontColor.cmpEl).css('background-color', '#' + this.toolbar.btnFontColor.currentColor); + this.toolbar.btnFontColor.setColor(this.toolbar.btnFontColor.currentColor); } if (this._state.clrtext_asccolor!==undefined) { this._state.clrtext = undefined; diff --git a/apps/presentationeditor/main/app/view/Toolbar.js b/apps/presentationeditor/main/app/view/Toolbar.js index 8aec0c910..e2d9f79b3 100644 --- a/apps/presentationeditor/main/app/view/Toolbar.js +++ b/apps/presentationeditor/main/app/view/Toolbar.js @@ -334,7 +334,7 @@ define([ }); me.paragraphControls.push(me.btnSubscript); - me.btnFontColor = new Common.UI.Button({ + me.btnFontColor = new Common.UI.ButtonColored({ id: 'id-toolbar-btn-fontcolor', cls: 'btn-toolbar', iconCls: 'toolbar__icon btn-fontcolor', @@ -1316,9 +1316,7 @@ define([ // DataView and pickers // if (this.btnFontColor.cmpEl) { - var colorVal = $('
'); - $('button:first-child', this.btnFontColor.cmpEl).append(colorVal); - colorVal.css('background-color', this.btnFontColor.currentColor || 'transparent'); + this.btnFontColor.setColor(this.btnFontColor.currentColor || 'transparent'); this.mnuFontColorPicker = new Common.UI.ThemeColorPalette({ el: $('#id-toolbar-menu-fontcolor') }); diff --git a/apps/spreadsheeteditor/main/app/controller/Toolbar.js b/apps/spreadsheeteditor/main/app/controller/Toolbar.js index 28e6fd814..b60a5beb5 100644 --- a/apps/spreadsheeteditor/main/app/controller/Toolbar.js +++ b/apps/spreadsheeteditor/main/app/controller/Toolbar.js @@ -602,10 +602,8 @@ define([ onTextColorSelect: function(picker, color, fromBtn) { this._state.clrtext_asccolor = this._state.clrtext = undefined; - var clr = (typeof(color) == 'object') ? color.color : color; - this.toolbar.btnTextColor.currentColor = color; - $('.btn-color-value-line', this.toolbar.btnTextColor.cmpEl).css('background-color', '#' + clr); + this.toolbar.btnTextColor.setColor(this.toolbar.btnTextColor.currentColor); this.toolbar.mnuTextColorPicker.currentColor = color; if (this.api) { @@ -624,8 +622,8 @@ define([ var clr = (typeof(color) == 'object') ? color.color : color; this.toolbar.btnBackColor.currentColor = color; - $('.btn-color-value-line', this.toolbar.btnBackColor.cmpEl).css('background-color', clr == 'transparent' ? 'transparent' : '#' + clr); - + this.toolbar.btnBackColor.setColor(this.toolbar.btnBackColor.currentColor); + this.toolbar.mnuBackColorPicker.currentColor = color; if (this.api) { this.toolbar.btnBackColor.ischanged = (fromBtn!==true); @@ -2754,14 +2752,14 @@ define([ this.toolbar.btnTextColor.currentColor=Common.Utils.ThemeColor.getStandartColors()[1]; } else this.toolbar.btnTextColor.currentColor = this.toolbar.mnuTextColorPicker.currentColor.color || this.toolbar.mnuTextColorPicker.currentColor; - $('.btn-color-value-line', this.toolbar.btnTextColor.cmpEl).css('background-color', '#' + 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) { this.toolbar.btnBackColor.currentColor=Common.Utils.ThemeColor.getStandartColors()[3]; } else this.toolbar.btnBackColor.currentColor = this.toolbar.mnuBackColorPicker.currentColor.color || this.toolbar.mnuBackColorPicker.currentColor; - $('.btn-color-value-line', this.toolbar.btnBackColor.cmpEl).css('background-color', this.toolbar.btnBackColor.currentColor == 'transparent' ? 'transparent' : '#' + this.toolbar.btnBackColor.currentColor); + this.toolbar.btnBackColor.setColor(this.toolbar.btnBackColor.currentColor); if (this._state.clrtext_asccolor!==undefined || this._state.clrshd_asccolor!==undefined) { this._state.clrtext = undefined; diff --git a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js index c0e829df6..6d75af34f 100644 --- a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js +++ b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js @@ -536,10 +536,8 @@ define([ var initNewColor = function(btn, picker_el) { if (btn && btn.cmpEl) { - btn.currentColor = '#000000'; - var colorVal = $('
'); - $('button:first-child', btn.cmpEl).append(colorVal); - colorVal.css('background-color', btn.currentColor); + btn.currentColor = '000000'; + btn.setColor(btn.currentColor); var picker = new Common.UI.ThemeColorPalette({ el: $(picker_el) }); @@ -552,7 +550,7 @@ define([ return picker; }; this.btnTextColor = []; - this.btnTextColor.push(new Common.UI.Button({ + this.btnTextColor.push(new Common.UI.ButtonColored({ parentEl: $('#id-dlg-h-textcolor'), cls : 'btn-toolbar', iconCls : 'toolbar__icon btn-fontcolor', @@ -571,7 +569,7 @@ define([ this.mnuTextColorPicker.push(initNewColor(this.btnTextColor[0], "#id-dlg-h-menu-fontcolor")); this.headerControls.push(this.btnTextColor[0]); - this.btnTextColor.push(new Common.UI.Button({ + this.btnTextColor.push(new Common.UI.ButtonColored({ parentEl: $('#id-dlg-f-textcolor'), cls : 'btn-toolbar', iconCls : 'toolbar__icon btn-fontcolor', @@ -901,9 +899,8 @@ define([ }, onColorSelect: function(btn, picker, color) { - var clr = (typeof(color) == 'object') ? color.color : color; btn.currentColor = color; - $('.btn-color-value-line', btn.cmpEl).css('background-color', '#' + clr); + btn.setColor(btn.currentColor); picker.currentColor = color; if (this.HFObject) this.HFObject.setTextColor(Common.Utils.ThemeColor.getRgbColor(color)); diff --git a/apps/spreadsheeteditor/main/app/view/Statusbar.js b/apps/spreadsheeteditor/main/app/view/Statusbar.js index 4fab2e202..0cf3a88e8 100644 --- a/apps/spreadsheeteditor/main/app/view/Statusbar.js +++ b/apps/spreadsheeteditor/main/app/view/Statusbar.js @@ -340,10 +340,6 @@ define([ {caption: this.ungroupSheets, value: 'noselect'} ] }).on('render:after', function(btn) { - var colorVal = $('
'); - $('button:first-child', btn.cmpEl).append(colorVal); - colorVal.css('background-color', btn.currentColor || 'transparent'); - me.mnuTabColor = new Common.UI.ThemeColorPalette({ el: $('#id-tab-menu-color'), transparent: true diff --git a/apps/spreadsheeteditor/main/app/view/Toolbar.js b/apps/spreadsheeteditor/main/app/view/Toolbar.js index 692a7408a..8dc515f87 100644 --- a/apps/spreadsheeteditor/main/app/view/Toolbar.js +++ b/apps/spreadsheeteditor/main/app/view/Toolbar.js @@ -481,7 +481,7 @@ define([ }); me.mnuTextColorPicker = dummyCmp(); - me.btnTextColor = new Common.UI.Button({ + me.btnTextColor = new Common.UI.ButtonColored({ id : 'id-toolbar-btn-fontcolor', cls : 'btn-toolbar', iconCls : 'toolbar__icon btn-fontcolor', @@ -496,7 +496,7 @@ define([ }); me.mnuBackColorPicker = dummyCmp(); - me.btnBackColor = new Common.UI.Button({ + me.btnBackColor = new Common.UI.ButtonColored({ id : 'id-toolbar-btn-fillparag', cls : 'btn-toolbar', iconCls : 'toolbar__icon btn-paracolor', @@ -1868,11 +1868,6 @@ define([ }) ] })); - - var colorVal = $('
'); - $('button:first-child', this.btnBorders.cmpEl).append(colorVal); - colorVal.css('background-color', this.btnBorders.currentColor || 'transparent'); - this.mnuBorderColorPicker = new Common.UI.ThemeColorPalette({ el: $('#id-toolbar-menu-bordercolor') }); @@ -1936,18 +1931,13 @@ define([ // DataView and pickers // if (this.btnTextColor && this.btnTextColor.cmpEl) { - var colorVal = $('
'); - $('button:first-child', this.btnTextColor.cmpEl).append(colorVal); - colorVal.css('background-color', this.btnTextColor.currentColor || 'transparent'); + this.btnTextColor.setColor(this.btnTextColor.currentColor || 'transparent'); this.mnuTextColorPicker = new Common.UI.ThemeColorPalette({ el: $('#id-toolbar-menu-fontcolor') }); } if (this.btnBackColor && this.btnBackColor.cmpEl) { - var colorVal = $('
'); - $('button:first-child', this.btnBackColor.cmpEl).append(colorVal); - colorVal.css('background-color', this.btnBackColor.currentColor || 'transparent'); - + this.btnBackColor.setColor(this.btnBackColor.currentColor || 'transparent'); this.mnuBackColorPicker = new Common.UI.ThemeColorPalette({ el: $('#id-toolbar-menu-paracolor'), transparent: true From c240e0e89e4df47a358ed63ee5c3ab22ffdae550 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Fri, 22 Jan 2021 00:45:44 +0300 Subject: [PATCH 2/2] [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;