Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Change color palette for highlight color

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

7
apps/common/main/resources/less/theme-colorpalette.less
View file

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

10
apps/documenteditor/main/app/controller/Toolbar.js
View file

@ -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;
}
}

12
apps/documenteditor/main/app/view/Toolbar.js
View file

@ -355,7 +355,7 @@ define([
menu: new Common.UI.Menu({
style: 'min-width: 100px;',
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: '--'},
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) {

10
apps/presentationeditor/main/app/controller/Toolbar.js
View file

@ -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;
}
}

12
apps/presentationeditor/main/app/view/Toolbar.js
View file

@ -414,7 +414,7 @@ define([
menu: new Common.UI.Menu({
style: 'min-width: 100px;',
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: '--'},
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}]);
}
},