Change color palette for highlight color

This commit is contained in:
Julia Radzhabova 2022-04-28 18:22:18 +03:00
parent 7690bd393a
commit 7aa85ccc59
5 changed files with 33 additions and 18 deletions

View file

@ -14,6 +14,13 @@
} }
} }
&.palette-large em {
span{
height: 28px;
width: 28px;
}
}
a { a {
padding: 0; padding: 0;
margin: calc(1px - 1px / @pixel-ratio-factor); margin: calc(1px - 1px / @pixel-ratio-factor);

View file

@ -991,9 +991,9 @@ define([
if (this._state.clrhighlight != -1) { if (this._state.clrhighlight != -1) {
this.toolbar.mnuHighlightTransparent.setChecked(true, true); this.toolbar.mnuHighlightTransparent.setChecked(true, true);
if (this.toolbar.mnuHighlightColorPicker.cmpEl) { if (this.toolbar.mnuHighlightColorPicker) {
this._state.clrhighlight = -1; this._state.clrhighlight = -1;
this.toolbar.mnuHighlightColorPicker.select(null, true); this.toolbar.mnuHighlightColorPicker.clearSelection();
} }
} }
} else if (c !== null) { } else if (c !== null) {
@ -1001,13 +1001,13 @@ define([
this.toolbar.mnuHighlightTransparent.setChecked(false); this.toolbar.mnuHighlightTransparent.setChecked(false);
this._state.clrhighlight = c.get_hex().toUpperCase(); this._state.clrhighlight = c.get_hex().toUpperCase();
if ( _.contains(this.toolbar.mnuHighlightColorPicker.colors, this._state.clrhighlight) ) if ( this.toolbar.mnuHighlightColorPicker && _.contains(this.toolbar.mnuHighlightColorPicker.colors, this._state.clrhighlight) )
this.toolbar.mnuHighlightColorPicker.select(this._state.clrhighlight, true); this.toolbar.mnuHighlightColorPicker.selectByRGB(this._state.clrhighlight, true);
} }
} else { } else {
if ( this._state.clrhighlight !== c) { if ( this._state.clrhighlight !== c) {
this.toolbar.mnuHighlightTransparent.setChecked(false, true); this.toolbar.mnuHighlightTransparent.setChecked(false, true);
this.toolbar.mnuHighlightColorPicker.select(null, true); this.toolbar.mnuHighlightColorPicker && this.toolbar.mnuHighlightColorPicker.clearSelection();
this._state.clrhighlight = c; this._state.clrhighlight = c;
} }
} }

View file

@ -355,7 +355,7 @@ define([
menu: new Common.UI.Menu({ menu: new Common.UI.Menu({
style: 'min-width: 100px;', style: 'min-width: 100px;',
items: [ items: [
{template: _.template('<div id="id-toolbar-menu-highlight" style="width: 120px; height: 120px; margin: 10px;"></div>')}, {template: _.template('<div id="id-toolbar-menu-highlight" style="width: 145px; display: inline-block;" class="palette-large"></div>')},
{caption: '--'}, {caption: '--'},
this.mnuHighlightTransparent = new Common.UI.MenuItem({ this.mnuHighlightTransparent = new Common.UI.MenuItem({
caption: this.strMenuNoFill, caption: this.strMenuNoFill,
@ -2330,15 +2330,19 @@ define([
if (this.btnHighlightColor.cmpEl) { if (this.btnHighlightColor.cmpEl) {
this.btnHighlightColor.currentColor = 'FFFF00'; this.btnHighlightColor.currentColor = 'FFFF00';
this.btnHighlightColor.setColor(this.btnHighlightColor.currentColor); this.btnHighlightColor.setColor(this.btnHighlightColor.currentColor);
this.mnuHighlightColorPicker = new Common.UI.ColorPalette({ this.mnuHighlightColorPicker = new Common.UI.ThemeColorPalette({
el: $('#id-toolbar-menu-highlight'), el: $('#id-toolbar-menu-highlight'),
colors: [ colors: [
'FFFF00', '00FF00', '00FFFF', 'FF00FF', '0000FF', 'FF0000', '00008B', '008B8B', 'FFFF00', '00FF00', '00FFFF', 'FF00FF', '0000FF', 'FF0000', '00008B', '008B8B',
'006400', '800080', '8B0000', '808000', 'FFFFFF', 'D3D3D3', 'A9A9A9', '000000' '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.setPicker(this.mnuHighlightColorPicker);
this.btnHighlightColor.menu.setInnerMenu([{menu: this.mnuHighlightColorPicker, index: 0}]);
} }
if (this.btnFontColor.cmpEl) { if (this.btnFontColor.cmpEl) {

View file

@ -2000,9 +2000,9 @@ define([
if (this._state.clrhighlight != -1) { if (this._state.clrhighlight != -1) {
this.toolbar.mnuHighlightTransparent.setChecked(true, true); this.toolbar.mnuHighlightTransparent.setChecked(true, true);
if (this.toolbar.mnuHighlightColorPicker.cmpEl) { if (this.toolbar.mnuHighlightColorPicker) {
this._state.clrhighlight = -1; this._state.clrhighlight = -1;
this.toolbar.mnuHighlightColorPicker.select(null, true); this.toolbar.mnuHighlightColorPicker.clearSelection();
} }
} }
} else if (c !== null) { } else if (c !== null) {
@ -2010,13 +2010,13 @@ define([
this.toolbar.mnuHighlightTransparent.setChecked(false); this.toolbar.mnuHighlightTransparent.setChecked(false);
this._state.clrhighlight = c.get_hex().toUpperCase(); this._state.clrhighlight = c.get_hex().toUpperCase();
if ( _.contains(this.toolbar.mnuHighlightColorPicker.colors, this._state.clrhighlight) ) if ( this.toolbar.mnuHighlightColorPicker && _.contains(this.toolbar.mnuHighlightColorPicker.colors, this._state.clrhighlight) )
this.toolbar.mnuHighlightColorPicker.select(this._state.clrhighlight, true); this.toolbar.mnuHighlightColorPicker.selectByRGB(this._state.clrhighlight, true);
} }
} else { } else {
if ( this._state.clrhighlight !== c) { if ( this._state.clrhighlight !== c) {
this.toolbar.mnuHighlightTransparent.setChecked(false, true); this.toolbar.mnuHighlightTransparent.setChecked(false, true);
this.toolbar.mnuHighlightColorPicker.select(null, true); this.toolbar.mnuHighlightColorPicker && this.toolbar.mnuHighlightColorPicker.clearSelection();
this._state.clrhighlight = c; this._state.clrhighlight = c;
} }
} }

View file

@ -414,7 +414,7 @@ define([
menu: new Common.UI.Menu({ menu: new Common.UI.Menu({
style: 'min-width: 100px;', style: 'min-width: 100px;',
items: [ items: [
{template: _.template('<div id="id-toolbar-menu-highlight" style="width: 120px; height: 120px; margin: 10px;"></div>')}, {template: _.template('<div id="id-toolbar-menu-highlight" style="width: 145px; display: inline-block;" class="palette-large"></div>')},
{caption: '--'}, {caption: '--'},
me.mnuHighlightTransparent = new Common.UI.MenuItem({ me.mnuHighlightTransparent = new Common.UI.MenuItem({
caption: me.strMenuNoFill, caption: me.strMenuNoFill,
@ -1535,15 +1535,19 @@ define([
if (this.btnHighlightColor.cmpEl) { if (this.btnHighlightColor.cmpEl) {
this.btnHighlightColor.currentColor = 'FFFF00'; this.btnHighlightColor.currentColor = 'FFFF00';
this.btnHighlightColor.setColor(this.btnHighlightColor.currentColor); this.btnHighlightColor.setColor(this.btnHighlightColor.currentColor);
this.mnuHighlightColorPicker = new Common.UI.ColorPalette({ this.mnuHighlightColorPicker = new Common.UI.ThemeColorPalette({
el: $('#id-toolbar-menu-highlight'), el: $('#id-toolbar-menu-highlight'),
colors: [ colors: [
'FFFF00', '00FF00', '00FFFF', 'FF00FF', '0000FF', 'FF0000', '00008B', '008B8B', 'FFFF00', '00FF00', '00FFFF', 'FF00FF', '0000FF', 'FF0000', '00008B', '008B8B',
'006400', '800080', '8B0000', '808000', 'FFFFFF', 'D3D3D3', 'A9A9A9', '000000' '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.setPicker(this.mnuHighlightColorPicker);
this.btnHighlightColor.menu.setInnerMenu([{menu: this.mnuHighlightColorPicker, index: 0}]);
} }
}, },