From 7aa85ccc59c879ce2942731cd28c5fb94f40cf5e Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Thu, 28 Apr 2022 18:22:18 +0300 Subject: [PATCH] Change color palette for highlight color --- .../main/resources/less/theme-colorpalette.less | 7 +++++++ apps/documenteditor/main/app/controller/Toolbar.js | 10 +++++----- apps/documenteditor/main/app/view/Toolbar.js | 12 ++++++++---- .../main/app/controller/Toolbar.js | 10 +++++----- apps/presentationeditor/main/app/view/Toolbar.js | 12 ++++++++---- 5 files changed, 33 insertions(+), 18 deletions(-) diff --git a/apps/common/main/resources/less/theme-colorpalette.less b/apps/common/main/resources/less/theme-colorpalette.less index 9d81c90fd..3c71fba63 100644 --- a/apps/common/main/resources/less/theme-colorpalette.less +++ b/apps/common/main/resources/less/theme-colorpalette.less @@ -14,6 +14,13 @@ } } + &.palette-large em { + span{ + height: 28px; + width: 28px; + } + } + a { padding: 0; margin: calc(1px - 1px / @pixel-ratio-factor); diff --git a/apps/documenteditor/main/app/controller/Toolbar.js b/apps/documenteditor/main/app/controller/Toolbar.js index 7125ea6c0..4386d3cd4 100644 --- a/apps/documenteditor/main/app/controller/Toolbar.js +++ b/apps/documenteditor/main/app/controller/Toolbar.js @@ -991,9 +991,9 @@ define([ if (this._state.clrhighlight != -1) { this.toolbar.mnuHighlightTransparent.setChecked(true, true); - if (this.toolbar.mnuHighlightColorPicker.cmpEl) { + if (this.toolbar.mnuHighlightColorPicker) { this._state.clrhighlight = -1; - this.toolbar.mnuHighlightColorPicker.select(null, true); + this.toolbar.mnuHighlightColorPicker.clearSelection(); } } } else if (c !== null) { @@ -1001,13 +1001,13 @@ define([ this.toolbar.mnuHighlightTransparent.setChecked(false); this._state.clrhighlight = c.get_hex().toUpperCase(); - if ( _.contains(this.toolbar.mnuHighlightColorPicker.colors, this._state.clrhighlight) ) - this.toolbar.mnuHighlightColorPicker.select(this._state.clrhighlight, true); + if ( this.toolbar.mnuHighlightColorPicker && _.contains(this.toolbar.mnuHighlightColorPicker.colors, this._state.clrhighlight) ) + this.toolbar.mnuHighlightColorPicker.selectByRGB(this._state.clrhighlight, true); } } else { if ( this._state.clrhighlight !== c) { this.toolbar.mnuHighlightTransparent.setChecked(false, true); - this.toolbar.mnuHighlightColorPicker.select(null, true); + this.toolbar.mnuHighlightColorPicker && this.toolbar.mnuHighlightColorPicker.clearSelection(); this._state.clrhighlight = c; } } diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js index 76d672cfb..35fdb5245 100644 --- a/apps/documenteditor/main/app/view/Toolbar.js +++ b/apps/documenteditor/main/app/view/Toolbar.js @@ -355,7 +355,7 @@ define([ menu: new Common.UI.Menu({ style: 'min-width: 100px;', items: [ - {template: _.template('
')}, + {template: _.template('
')}, {caption: '--'}, this.mnuHighlightTransparent = new Common.UI.MenuItem({ caption: this.strMenuNoFill, @@ -2330,15 +2330,19 @@ define([ if (this.btnHighlightColor.cmpEl) { this.btnHighlightColor.currentColor = 'FFFF00'; this.btnHighlightColor.setColor(this.btnHighlightColor.currentColor); - this.mnuHighlightColorPicker = new Common.UI.ColorPalette({ + this.mnuHighlightColorPicker = new Common.UI.ThemeColorPalette({ el: $('#id-toolbar-menu-highlight'), colors: [ 'FFFF00', '00FF00', '00FFFF', 'FF00FF', '0000FF', 'FF0000', '00008B', '008B8B', '006400', '800080', '8B0000', '808000', 'FFFFFF', 'D3D3D3', 'A9A9A9', '000000' - ] + ], + value: 'FFFF00', + dynamiccolors: 0, + columns: 4, + outerMenu: {menu: this.btnHighlightColor.menu, index: 0, focusOnShow: true} }); - this.mnuHighlightColorPicker.select('FFFF00'); this.btnHighlightColor.setPicker(this.mnuHighlightColorPicker); + this.btnHighlightColor.menu.setInnerMenu([{menu: this.mnuHighlightColorPicker, index: 0}]); } if (this.btnFontColor.cmpEl) { diff --git a/apps/presentationeditor/main/app/controller/Toolbar.js b/apps/presentationeditor/main/app/controller/Toolbar.js index c3c8b631a..cdf03f8c8 100644 --- a/apps/presentationeditor/main/app/controller/Toolbar.js +++ b/apps/presentationeditor/main/app/controller/Toolbar.js @@ -2000,9 +2000,9 @@ define([ if (this._state.clrhighlight != -1) { this.toolbar.mnuHighlightTransparent.setChecked(true, true); - if (this.toolbar.mnuHighlightColorPicker.cmpEl) { + if (this.toolbar.mnuHighlightColorPicker) { this._state.clrhighlight = -1; - this.toolbar.mnuHighlightColorPicker.select(null, true); + this.toolbar.mnuHighlightColorPicker.clearSelection(); } } } else if (c !== null) { @@ -2010,13 +2010,13 @@ define([ this.toolbar.mnuHighlightTransparent.setChecked(false); this._state.clrhighlight = c.get_hex().toUpperCase(); - if ( _.contains(this.toolbar.mnuHighlightColorPicker.colors, this._state.clrhighlight) ) - this.toolbar.mnuHighlightColorPicker.select(this._state.clrhighlight, true); + if ( this.toolbar.mnuHighlightColorPicker && _.contains(this.toolbar.mnuHighlightColorPicker.colors, this._state.clrhighlight) ) + this.toolbar.mnuHighlightColorPicker.selectByRGB(this._state.clrhighlight, true); } } else { if ( this._state.clrhighlight !== c) { this.toolbar.mnuHighlightTransparent.setChecked(false, true); - this.toolbar.mnuHighlightColorPicker.select(null, true); + this.toolbar.mnuHighlightColorPicker && this.toolbar.mnuHighlightColorPicker.clearSelection(); this._state.clrhighlight = c; } } diff --git a/apps/presentationeditor/main/app/view/Toolbar.js b/apps/presentationeditor/main/app/view/Toolbar.js index 330f02d09..b3c0b48d6 100644 --- a/apps/presentationeditor/main/app/view/Toolbar.js +++ b/apps/presentationeditor/main/app/view/Toolbar.js @@ -414,7 +414,7 @@ define([ menu: new Common.UI.Menu({ style: 'min-width: 100px;', items: [ - {template: _.template('
')}, + {template: _.template('
')}, {caption: '--'}, me.mnuHighlightTransparent = new Common.UI.MenuItem({ caption: me.strMenuNoFill, @@ -1535,15 +1535,19 @@ define([ if (this.btnHighlightColor.cmpEl) { this.btnHighlightColor.currentColor = 'FFFF00'; this.btnHighlightColor.setColor(this.btnHighlightColor.currentColor); - this.mnuHighlightColorPicker = new Common.UI.ColorPalette({ + this.mnuHighlightColorPicker = new Common.UI.ThemeColorPalette({ el: $('#id-toolbar-menu-highlight'), colors: [ 'FFFF00', '00FF00', '00FFFF', 'FF00FF', '0000FF', 'FF0000', '00008B', '008B8B', '006400', '800080', '8B0000', '808000', 'FFFFFF', 'D3D3D3', 'A9A9A9', '000000' - ] + ], + value: 'FFFF00', + dynamiccolors: 0, + columns: 4, + outerMenu: {menu: this.btnHighlightColor.menu, index: 0, focusOnShow: true} }); - this.mnuHighlightColorPicker.select('FFFF00'); this.btnHighlightColor.setPicker(this.mnuHighlightColorPicker); + this.btnHighlightColor.menu.setInnerMenu([{menu: this.mnuHighlightColorPicker, index: 0}]); } },