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

Merge pull request #1728 from ONLYOFFICE/feature/color-palette

Browse source 
Feature/color palette
This commit is contained in:
Julia Radzhabova 2022-04-28 18:32:15 +03:00 committed by GitHub
parent 6a2b8157ee 7aa85ccc59
commit 8e1096aa67
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 119 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
apps/common/main/lib/component/ColorButton.js
View file

@ -55,12 +55,15 @@ define([
getPicker: function(color, colors) { getPicker: function(color, colors) {
if (!this.colorPicker) { if (!this.colorPicker) {
this.colorPicker = new Common.UI.ThemeColorPalette({ var config = {
el: this.cmpEl.find('#' + this.menu.id + '-color-menu'), el: this.cmpEl.find('#' + this.menu.id + '-color-menu'),
transparent: this.options.transparent,
value: color, value: color,
colors: colors colors: colors
}); };
(this.options.transparent!==undefined) && (config['transparent'] = this.options.transparent);
(this.options.hideEmptyColors!==undefined) && (config['hideEmptyColors'] = this.options.hideEmptyColors);
this.colorPicker = new Common.UI.ThemeColorPalette(config);
this.colorPicker.on('select', _.bind(this.onColorSelect, this)); this.colorPicker.on('select', _.bind(this.onColorSelect, this));
this.cmpEl.find('#' + this.menu.id + '-color-new').on('click', _.bind(this.addNewColor, this)); this.cmpEl.find('#' + this.menu.id + '-color-new').on('click', _.bind(this.addNewColor, this));
if (this.options.auto) { if (this.options.auto) {
@ -80,7 +83,7 @@ define([
getMenu: function(options) { getMenu: function(options) {
if (typeof this.menu !== 'object') { if (typeof this.menu !== 'object') {
options = options || this.options; options = options || this.options;
var height = options.paletteHeight || 240, var height = options.paletteHeight ? options.paletteHeight + 'px' : 'auto',
id = Common.UI.getId(), id = Common.UI.getId(),
auto = []; auto = [];
if (options.auto) { if (options.auto) {
@ -98,7 +101,8 @@ define([
cls: 'shifted-left', cls: 'shifted-left',
additionalAlign: options.additionalAlign, additionalAlign: options.additionalAlign,
items: (options.additionalItems ? options.additionalItems : []).concat(auto).concat([ items: (options.additionalItems ? options.additionalItems : []).concat(auto).concat([
{ template: _.template('<div id="' + id + '-color-menu" style="width: 169px; height:' + height + 'px; margin: 10px;"></div>') }, { template: _.template('<div id="' + id + '-color-menu" style="width: 164px; height:' + height + '; display: inline-block;"></div>') },
{caption: '--'},
{ {
id: id + '-color-new', id: id + '-color-new',
template: _.template('<a tabindex="-1" type="menuitem" style="">' + this.textNewColor + '</a>') template: _.template('<a tabindex="-1" type="menuitem" style="">' + this.textNewColor + '</a>')

51
apps/common/main/lib/component/ThemeColorPalette.js
View file

@ -52,7 +52,9 @@ define([
dynamiccolors: 10, dynamiccolors: 10,
standardcolors: 10, standardcolors: 10,
themecolors: 10, themecolors: 10,
columns: 10,
effects: 5, effects: 5,
hideEmptyColors: true,
allowReselect: true, allowReselect: true,
transparent: false, transparent: false,
value: '000000', value: '000000',
@ -62,7 +64,7 @@ define([
template : template :
_.template( _.template(
'<div style="padding: 8px 12px 12px;">' + '<div style="padding: 4px 0 0 12px;">' +
'<% var me = this; var idx = 0; %>' + '<% var me = this; var idx = 0; %>' +
'<% $(colors).each(function(num, item) { %>' + '<% $(colors).each(function(num, item) { %>' +
'<% if (me.isBlankSeparator(item)) { %> <div class="palette-color-spacer" style="width:100%;height:8px;float:left;"></div>' + '<% if (me.isBlankSeparator(item)) { %> <div class="palette-color-spacer" style="width:100%;height:8px;float:left;"></div>' +
@ -76,6 +78,9 @@ define([
'<em><span unselectable="on">&#160;</span></em>' + '<em><span unselectable="on">&#160;</span></em>' +
'</a>' + '</a>' +
'<% } else if (me.isEffect(item)) { %>' + '<% } else if (me.isEffect(item)) { %>' +
'<% if (idx>0 && me.columns>0 && idx%me.columns===0) { %> ' +
'<div style="width:100%;height:0;float:left;"></div>' +
'<% } %>' +
'<a effectid="<%=item.effectId%>" effectvalue="<%=item.effectValue%>" class="palette-color-effect color-<%=item.color%>" style="background:#<%=item.color%>" idx="<%=idx++%>">' + '<a effectid="<%=item.effectId%>" effectvalue="<%=item.effectValue%>" class="palette-color-effect color-<%=item.color%>" style="background:#<%=item.color%>" idx="<%=idx++%>">' +
'<em><span style="background:#<%=item.color%>;" unselectable="on">&#160;</span></em>' + '<em><span style="background:#<%=item.color%>;" unselectable="on">&#160;</span></em>' +
'</a>' + '</a>' +
@ -85,9 +90,11 @@ define([
'<% }); %>' + '<% }); %>' +
'</div>' + '</div>' +
'<% if (me.options.dynamiccolors!==undefined) { %>' + '<% if (me.options.dynamiccolors!==undefined) { %>' +
'<div class="palette-color-spacer" style="width:100%;height:8px;float:left;"></div><div style="padding: 12px;">' + '<div class="palette-color-dynamiccolors" style="padding: 4px 0 0 12px">' +
'<div class="palette-color-spacer" style="width:100%;height:8px;float:left;"></div>' +
'<div class="palette-color-caption" style="width:100%;float:left;font-size: 11px;"><%=me.textRecentColors%></div>' +
'<% for (var i=0; i<me.options.dynamiccolors; i++) { %>' + '<% for (var i=0; i<me.options.dynamiccolors; i++) { %>' +
'<a class="color-dynamic-<%=i%> dynamic-empty-color" color="" idx="<%=idx++%>">' + '<a class="color-dynamic-<%=i%> dynamic-empty-color <%= me.emptyColorsClass %>" color="" idx="<%=idx++%>">' +
'<em><span unselectable="on">&#160;</span></em></a>' + '<em><span unselectable="on">&#160;</span></em></a>' +
'<% } %>' + '<% } %>' +
'<% } %>' + '<% } %>' +
@ -103,10 +110,12 @@ define([
el = me.$el || $(this.el); el = me.$el || $(this.el);
this.colors = me.options.colors || this.generateColorData(me.options.themecolors, me.options.effects, me.options.standardcolors, me.options.transparent); this.colors = me.options.colors || this.generateColorData(me.options.themecolors, me.options.effects, me.options.standardcolors, me.options.transparent);
this.columns = me.options.columns || 0;
this.enableKeyEvents= me.options.enableKeyEvents; this.enableKeyEvents= me.options.enableKeyEvents;
this.tabindex = me.options.tabindex || 0; this.tabindex = me.options.tabindex || 0;
this.outerMenu = me.options.outerMenu; this.outerMenu = me.options.outerMenu;
this.lastSelectedIdx = -1; this.lastSelectedIdx = -1;
this.emptyColorsClass = me.options.hideEmptyColors ? 'hidden' : '';
me.colorItems = []; me.colorItems = [];
if (me.options.keyMoveDirection=='vertical') if (me.options.keyMoveDirection=='vertical')
@ -123,6 +132,15 @@ define([
this.updateColors(this.options.updateColorsArr[0], this.options.updateColorsArr[1]); this.updateColors(this.options.updateColorsArr[0], this.options.updateColorsArr[1]);
if (this.options.value) if (this.options.value)
this.select(this.options.value, true); this.select(this.options.value, true);
if (this.options.outerMenu && this.options.outerMenu.focusOnShow && this.options.outerMenu.menu) {
el.addClass('focused');
this.options.outerMenu.menu.on('show:after', function(menu) {
_.delay(function() {
me.showLastSelected();
me.focus();
}, 10);
});
}
this.updateCustomColors(); this.updateCustomColors();
el.closest('.btn-group').on('show.bs.dropdown', _.bind(this.updateCustomColors, this)); el.closest('.btn-group').on('show.bs.dropdown', _.bind(this.updateCustomColors, this));
el.closest('.dropdown-submenu').on('show.bs.dropdown', _.bind(this.updateCustomColors, this)); el.closest('.dropdown-submenu').on('show.bs.dropdown', _.bind(this.updateCustomColors, this));
@ -178,9 +196,12 @@ define([
colors = colors ? colors.split(',') : []; colors = colors ? colors.split(',') : [];
var i = -1, colorEl, c = colors.length < this.options.dynamiccolors ? colors.length : this.options.dynamiccolors; var i = -1, colorEl, c = colors.length < this.options.dynamiccolors ? colors.length : this.options.dynamiccolors;
if (this.options.hideEmptyColors && this._layoutParams && el.find('.dynamic-empty-color').length !== (this.options.dynamiccolors - c)) {// recalc indexed if change custom colors
this._layoutParams = undefined;
}
while (++i < c) { while (++i < c) {
colorEl = el.find('.color-dynamic-'+ i); colorEl = el.find('.color-dynamic-'+ i);
colorEl.removeClass('dynamic-empty-color').attr('color', colors[i]); colorEl.removeClass('dynamic-empty-color').removeClass(this.emptyColorsClass).attr('color', colors[i]);
colorEl.find('span').css({ colorEl.find('span').css({
'background-color': '#'+colors[i] 'background-color': '#'+colors[i]
}); });
@ -193,12 +214,13 @@ define([
while (i < this.options.dynamiccolors) { while (i < this.options.dynamiccolors) {
colorEl = el.find('.color-dynamic-'+ i); colorEl = el.find('.color-dynamic-'+ i);
colorEl.removeAttr('color'); colorEl.removeAttr('color');
colorEl.addClass('dynamic-empty-color'); colorEl.addClass('dynamic-empty-color').addClass(this.emptyColorsClass);
colorEl.find('span').css({ colorEl.find('span').css({
'background-color': 'transparent' 'background-color': 'transparent'
}); });
i++; i++;
} }
el.find('.palette-color-dynamiccolors').toggleClass(this.emptyColorsClass, c===0);
} }
}, },
@ -207,7 +229,7 @@ define([
var target = $(e.target).closest('a'); var target = $(e.target).closest('a');
var color, cmp; var color, cmp;
if (target.length==0) return; if (target.length==0) return false;
if (target.hasClass('color-transparent') ) { if (target.hasClass('color-transparent') ) {
me.clearSelection(true); me.clearSelection(true);
@ -275,12 +297,16 @@ define([
if (child.length==0) { if (child.length==0) {
this.updateCustomColors(); this.updateCustomColors();
child = el.find('.color-dynamic-' + (this.options.dynamiccolors - 1)); child = el.find('.color-dynamic-' + (this.options.dynamiccolors - 1));
} else {
if (this.options.hideEmptyColors && this._layoutParams) // recalc indexed
this._layoutParams = undefined;
} }
child.first().removeClass('dynamic-empty-color').addClass(this.selectedCls).attr('color', color[1]); child.first().removeClass('dynamic-empty-color').removeClass(this.emptyColorsClass).addClass(this.selectedCls).attr('color', color[1]);
child.first().find('span').css({ child.first().find('span').css({
'background-color': '#'+color[1] 'background-color': '#'+color[1]
}); });
el.find('.palette-color-dynamiccolors').removeClass(this.emptyColorsClass);
this.select(color[1], true); this.select(color[1], true);
} }
}, },
@ -493,7 +519,7 @@ define([
var arr = [], var arr = [],
len = (themecolors>0 && effects>0) ? themecolors * effects : 0; len = (themecolors>0 && effects>0) ? themecolors * effects : 0;
if (themecolors>0) { if (themecolors>0) {
arr = [this.textThemeColors, '-']; arr = [this.textThemeColors];
for (var i=0; i<themecolors; i++) for (var i=0; i<themecolors; i++)
arr.push({color: 'FFFFFF', effectId: 1}); arr.push({color: 'FFFFFF', effectId: 1});
@ -502,10 +528,10 @@ define([
arr.push({color: 'FFFFFF', effectId: 1}); arr.push({color: 'FFFFFF', effectId: 1});
if (standardcolors) if (standardcolors)
arr.push('-', '--', '-'); arr.push('-');
} }
if (standardcolors) { if (standardcolors) {
arr.push(this.textStandartColors, '-'); arr.push(this.textStandartColors);
if (transparent) { if (transparent) {
arr.push('transparent'); arr.push('transparent');
standardcolors--; standardcolors--;
@ -513,8 +539,6 @@ define([
for (var i=0; i<standardcolors; i++) for (var i=0; i<standardcolors; i++)
arr.push('FFFFFF'); arr.push('FFFFFF');
} }
if (this.options.dynamiccolors && (themecolors || standardcolors))
arr.push('-', '--');
return arr; return arr;
}, },
@ -650,6 +674,7 @@ define([
}, },
textThemeColors : 'Theme Colors', textThemeColors : 'Theme Colors',
textStandartColors : 'Standart Colors' textStandartColors : 'Standard Colors',
textRecentColors : 'Recent Colors'
}, Common.UI.ThemeColorPalette || {})); }, Common.UI.ThemeColorPalette || {}));
}); });

3
apps/common/main/lib/extend/Bootstrap.js
View file

@ -128,8 +128,9 @@ function patchDropDownKeyDown(e) {
var mnu = $('> [role=menu]', li), var mnu = $('> [role=menu]', li),
$subitems = mnu.find('> li:not(.divider):not(.disabled):visible > a'), $subitems = mnu.find('> li:not(.divider):not(.disabled):visible > a'),
$dataviews = mnu.find('> li:not(.divider):not(.disabled):visible .dataview'), $dataviews = mnu.find('> li:not(.divider):not(.disabled):visible .dataview'),
$palette = mnu.find('> li:not(.divider):not(.disabled):visible .theme-colorpalette.focused'),
$internal_menu = mnu.find('> li:not(.divider):not(.disabled):visible ul.internal-menu'); $internal_menu = mnu.find('> li:not(.divider):not(.disabled):visible ul.internal-menu');
if ($subitems.length>0 && $dataviews.length<1 && $internal_menu.length<1) if ($subitems.length>0 && $dataviews.length<1 && $internal_menu.length<1 && $palette.length<1)
($subitems.index($subitems.filter(':focus'))<0) && $subitems.eq(0).focus(); ($subitems.index($subitems.filter(':focus'))<0) && $subitems.eq(0).focus();
}, 250); }, 250);
} }

1
apps/common/main/resources/less/dropdown-menu.less
View file

@ -159,6 +159,7 @@
height: @scaled-one-px-value; height: @scaled-one-px-value;
background-color: @border-divider-ie; background-color: @border-divider-ie;
background-color: @border-divider; background-color: @border-divider;
margin: 4px 0;
} }
.dataview { .dataview {

7
apps/common/main/resources/less/theme-colorpalette.less
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);

10
apps/documenteditor/main/app/controller/Toolbar.js
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;
} }
} }

1
apps/documenteditor/main/app/view/ControlSettingsDialog.js
View file

@ -141,7 +141,6 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
'33CCCC', '3366FF', '800080', '999999', 'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF', '33CCCC', '3366FF', '800080', '999999', 'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF',
'993366', 'C0C0C0', 'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', 'C9C8FF', 'CC99FF', 'FFFFFF' '993366', 'C0C0C0', 'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', 'C9C8FF', 'CC99FF', 'FFFFFF'
], ],
paletteHeight: 94,
cls: 'move-focus', cls: 'move-focus',
takeFocusOnClose: true takeFocusOnClose: true
}); });

1
apps/documenteditor/main/app/view/FormSettings.js
View file

@ -1150,7 +1150,6 @@ define([
'33CCCC', '3366FF', '800080', '999999', 'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF', '33CCCC', '3366FF', '800080', '999999', 'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF',
'993366', 'C0C0C0', 'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', 'C9C8FF', 'CC99FF', 'FFFFFF' '993366', 'C0C0C0', 'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', 'C9C8FF', 'CC99FF', 'FFFFFF'
], ],
paletteHeight: 94,
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom', dataHintDirection: 'bottom',
dataHintOffset: 'big' dataHintOffset: 'big'

1
apps/documenteditor/main/app/view/FormsTab.js
View file

@ -258,7 +258,6 @@ define([
'33CCCC', '3366FF', '800080', '999999', 'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF', '33CCCC', '3366FF', '800080', '999999', 'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF',
'993366', 'C0C0C0', 'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', 'C9C8FF', 'CC99FF', 'FFFFFF' '993366', 'C0C0C0', 'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', 'C9C8FF', 'CC99FF', 'FFFFFF'
], ],
paletteHeight: 94,
dataHint: '1', dataHint: '1',
dataHintDirection: 'left', dataHintDirection: 'left',
dataHintOffset: 'small' dataHintOffset: 'small'

15
apps/documenteditor/main/app/view/Toolbar.js
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,
@ -898,7 +898,8 @@ define([
checkable: true checkable: true
}), }),
{caption: '--'}, {caption: '--'},
{template: _.template('<div id="id-toolbar-menu-controls-color" style="width: 169px; height: 94px; margin: 10px;"></div>')}, {template: _.template('<div id="id-toolbar-menu-controls-color" style="width: 164px; display: inline-block;"></div>')},
{caption: '--'},
{ {
id: 'id-toolbar-menu-new-control-color', id: 'id-toolbar-menu-new-control-color',
template: _.template('<a tabindex="-1" type="menuitem" style="padding-left:12px;">' + this.textNewColor + '</a>') template: _.template('<a tabindex="-1" type="menuitem" style="padding-left:12px;">' + this.textNewColor + '</a>')
@ -2329,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) {

1
apps/documenteditor/main/locale/en.json
View file

@ -183,6 +183,7 @@
"Common.UI.SearchDialog.txtBtnReplaceAll": "Replace All", "Common.UI.SearchDialog.txtBtnReplaceAll": "Replace All",
"Common.UI.SynchronizeTip.textDontShow": "Don't show this message again", "Common.UI.SynchronizeTip.textDontShow": "Don't show this message again",
"Common.UI.SynchronizeTip.textSynchronize": "The document has been changed by another user.<br>Please click to save your changes and reload the updates.", "Common.UI.SynchronizeTip.textSynchronize": "The document has been changed by another user.<br>Please click to save your changes and reload the updates.",
"Common.UI.ThemeColorPalette.textRecentColors": "Recent Colors",
"Common.UI.ThemeColorPalette.textStandartColors": "Standard Colors", "Common.UI.ThemeColorPalette.textStandartColors": "Standard Colors",
"Common.UI.ThemeColorPalette.textThemeColors": "Theme Colors", "Common.UI.ThemeColorPalette.textThemeColors": "Theme Colors",
"Common.UI.Themes.txtThemeClassicLight": "Classic Light", "Common.UI.Themes.txtThemeClassicLight": "Classic Light",

10
apps/presentationeditor/main/app/controller/Toolbar.js
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;
} }
} }

12
apps/presentationeditor/main/app/view/Toolbar.js
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}]);
} }
}, },

1
apps/presentationeditor/main/locale/en.json
View file

@ -270,6 +270,7 @@
"Common.UI.SearchDialog.txtBtnReplaceAll": "Replace All", "Common.UI.SearchDialog.txtBtnReplaceAll": "Replace All",
"Common.UI.SynchronizeTip.textDontShow": "Don't show this message again", "Common.UI.SynchronizeTip.textDontShow": "Don't show this message again",
"Common.UI.SynchronizeTip.textSynchronize": "The document has been changed by another user.<br>Please click to save your changes and reload the updates.", "Common.UI.SynchronizeTip.textSynchronize": "The document has been changed by another user.<br>Please click to save your changes and reload the updates.",
"Common.UI.ThemeColorPalette.textRecentColors": "Recent Colors",
"Common.UI.ThemeColorPalette.textStandartColors": "Standard Colors", "Common.UI.ThemeColorPalette.textStandartColors": "Standard Colors",
"Common.UI.ThemeColorPalette.textThemeColors": "Theme Colors", "Common.UI.ThemeColorPalette.textThemeColors": "Theme Colors",
"Common.UI.Themes.txtThemeClassicLight": "Classic Light", "Common.UI.Themes.txtThemeClassicLight": "Classic Light",

13
apps/spreadsheeteditor/main/app/view/FormatRulesEditDlg.js
View file

@ -531,8 +531,13 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
menu : new Common.UI.Menu({ menu : new Common.UI.Menu({
menuAlign : 'tl-tr', menuAlign : 'tl-tr',
items : [ items : [
{ template: _.template('<div id="format-rules-borders-menu-bordercolor" style="width: 169px; height: 220px; margin: 10px;"></div>'), stopPropagation: true }, { template: _.template('<div id="format-rules-borders-menu-bordercolor" style="width: 164px; display: inline-block;"></div>'), stopPropagation: true },
{ template: _.template('<a id="format-rules-borders-menu-new-bordercolor" style="padding-left:12px;">' + this.textNewColor + '</a>'), stopPropagation: true } {caption: '--'},
{
id: "format-rules-borders-menu-new-bordercolor",
template: _.template('<a tabindex="-1" type="menuitem" style="padding-left:12px;">' + this.textNewColor + '</a>'),
stopPropagation: true
}
] ]
}) })
}) })
@ -542,8 +547,10 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
this.btnBorders.menu.on('item:click', _.bind(this.onBordersMenu, this)); this.btnBorders.menu.on('item:click', _.bind(this.onBordersMenu, this));
this.btnBorders.on('click', _.bind(this.onBorders, this)); this.btnBorders.on('click', _.bind(this.onBorders, this));
this.mnuBorderColorPicker = new Common.UI.ThemeColorPalette({ this.mnuBorderColorPicker = new Common.UI.ThemeColorPalette({
el: $('#format-rules-borders-menu-bordercolor') el: $('#format-rules-borders-menu-bordercolor'),
outerMenu: {menu: this.mnuBorderColor.menu, index: 0, focusOnShow: true}
}); });
this.mnuBorderColor.menu.setInnerMenu([{menu: this.mnuBorderColorPicker, index: 0}]);
this.mnuBorderColorPicker.on('select', _.bind(this.onBordersColor, this)); this.mnuBorderColorPicker.on('select', _.bind(this.onBordersColor, this));
$('#format-rules-borders-menu-new-bordercolor').on('click', _.bind(function() { $('#format-rules-borders-menu-new-bordercolor').on('click', _.bind(function() {
me.mnuBorderColorPicker.addNewColor(); me.mnuBorderColorPicker.addNewColor();

14
apps/spreadsheeteditor/main/app/view/Statusbar.js
View file

@ -335,8 +335,12 @@ define([
menuAlign: 'tl-tr', menuAlign: 'tl-tr',
cls: 'color-tab', cls: 'color-tab',
items: [ items: [
{ template: _.template('<div id="id-tab-menu-color" style="width: 169px; height: 240px;"></div>') }, { template: _.template('<div id="id-tab-menu-color" style="width: 164px;display: inline-block;"></div>') },
{ template: _.template('<a id="id-tab-menu-new-color" style="padding-left:12px;">' + me.textNewColor + '</a>') } {caption: '--'},
{
id: "id-tab-menu-new-color",
template: _.template('<a tabindex="-1" type="menuitem" style="padding-left:12px;">' + me.textNewColor + '</a>')
}
] ]
}); });
@ -373,11 +377,15 @@ define([
}).on('render:after', function(btn) { }).on('render:after', function(btn) {
me.mnuTabColor = new Common.UI.ThemeColorPalette({ me.mnuTabColor = new Common.UI.ThemeColorPalette({
el: $('#id-tab-menu-color'), el: $('#id-tab-menu-color'),
outerMenu: {menu: menuColorItems, index: 0, focusOnShow: true},
transparent: true transparent: true
}); });
menuColorItems.setInnerMenu([{menu: me.mnuTabColor, index: 0}]);
me.mnuTabColor.on('select', function(picker, color) { me.mnuTabColor.on('select', function(picker, color) {
me.fireEvent('sheet:setcolor', [color]); me.fireEvent('sheet:setcolor', [color]);
setTimeout(function(){
me.tabMenu.hide();
}, 1);
}); });
}); });

13
apps/spreadsheeteditor/main/app/view/Toolbar.js
View file

@ -2120,16 +2120,23 @@ define([
stopPropagation: true stopPropagation: true
}, },
{caption: '--'}, {caption: '--'},
{ template: _.template('<div id="id-toolbar-menu-bordercolor" style="width: 169px; height: 240px;"></div>'), stopPropagation: true }, { template: _.template('<div id="id-toolbar-menu-bordercolor" style="width: 164px;display: inline-block;"></div>'), stopPropagation: true },
{ template: _.template('<a id="id-toolbar-menu-new-bordercolor" style="padding-left:12px;">' + this.textNewColor + '</a>'), stopPropagation: true } {caption: '--'},
{
id: "id-toolbar-menu-new-bordercolor",
template: _.template('<a tabindex="-1" type="menuitem" style="padding-left:12px;">' + this.textNewColor + '</a>'),
stopPropagation: true
}
] ]
}) })
}) })
] ]
})); }));
this.mnuBorderColorPicker = new Common.UI.ThemeColorPalette({ this.mnuBorderColorPicker = new Common.UI.ThemeColorPalette({
el: $('#id-toolbar-menu-bordercolor') el: $('#id-toolbar-menu-bordercolor'),
outerMenu: {menu: this.mnuBorderColor.menu, index: 2}
}); });
this.mnuBorderColor.menu.setInnerMenu([{menu: this.mnuBorderColorPicker, index: 2}]);
} }
if ( this.btnInsertChart ) { if ( this.btnInsertChart ) {

1
apps/spreadsheeteditor/main/locale/en.json
View file

@ -128,6 +128,7 @@
"Common.UI.SearchDialog.txtBtnReplaceAll": "Replace All", "Common.UI.SearchDialog.txtBtnReplaceAll": "Replace All",
"Common.UI.SynchronizeTip.textDontShow": "Don't show this message again", "Common.UI.SynchronizeTip.textDontShow": "Don't show this message again",
"Common.UI.SynchronizeTip.textSynchronize": "The document has been changed by another user.<br>Please click to save your changes and reload the updates.", "Common.UI.SynchronizeTip.textSynchronize": "The document has been changed by another user.<br>Please click to save your changes and reload the updates.",
"Common.UI.ThemeColorPalette.textRecentColors": "Recent Colors",
"Common.UI.ThemeColorPalette.textStandartColors": "Standard Colors", "Common.UI.ThemeColorPalette.textStandartColors": "Standard Colors",
"Common.UI.ThemeColorPalette.textThemeColors": "Theme Colors", "Common.UI.ThemeColorPalette.textThemeColors": "Theme Colors",
"Common.UI.Themes.txtThemeClassicLight": "Classic Light", "Common.UI.Themes.txtThemeClassicLight": "Classic Light",