diff --git a/apps/common/main/lib/component/ThemeColorPalette.js b/apps/common/main/lib/component/ThemeColorPalette.js
index 85fd4365d..9348e351f 100644
--- a/apps/common/main/lib/component/ThemeColorPalette.js
+++ b/apps/common/main/lib/component/ThemeColorPalette.js
@@ -306,7 +306,7 @@ define([
select: function(color, suppressEvent) {
var el = this.$el || $(this.el);
- this.clearSelection(true);
+ this.clearSelection();
if (typeof(color) == 'object' ) {
var effectEl;
diff --git a/apps/documenteditor/main/app/controller/Toolbar.js b/apps/documenteditor/main/app/controller/Toolbar.js
index 1ff8b5b5c..ec5669090 100644
--- a/apps/documenteditor/main/app/controller/Toolbar.js
+++ b/apps/documenteditor/main/app/controller/Toolbar.js
@@ -2450,7 +2450,7 @@ define([
this._setMarkerColor(color, 'menu');
},
- onSelectFontColor: function(picker, color) {
+ onSelectFontColor: function(btn, color) {
this._state.clrtext = this._state.clrtext_asccolor = undefined;
this.toolbar.btnFontColor.currentColor = color;
@@ -2463,7 +2463,7 @@ define([
Common.component.Analytics.trackEvent('ToolBar', 'Text Color');
},
- onParagraphColorPickerSelect: function(picker, color) {
+ onParagraphColorPickerSelect: function(btn, color) {
this._state.clrback = this._state.clrshd_asccolor = undefined;
this.toolbar.btnParagraphColor.currentColor = color;
diff --git a/apps/documenteditor/main/app/view/FormsTab.js b/apps/documenteditor/main/app/view/FormsTab.js
index 577de8963..52467723a 100644
--- a/apps/documenteditor/main/app/view/FormsTab.js
+++ b/apps/documenteditor/main/app/view/FormsTab.js
@@ -108,7 +108,7 @@ define([
me.fireEvent('forms:clear');
});
if (this.mnuFormsColorPicker) {
- this.btnHighlight.on('color:select', function(picker, color) {
+ this.btnHighlight.on('color:select', function(btn, color) {
me.fireEvent('forms:select-color', [color]);
});
this.mnuNoFormsColor.on('click', function (item) {
diff --git a/apps/documenteditor/main/app/view/WatermarkSettingsDialog.js b/apps/documenteditor/main/app/view/WatermarkSettingsDialog.js
index 7001ff849..072deeb48 100644
--- a/apps/documenteditor/main/app/view/WatermarkSettingsDialog.js
+++ b/apps/documenteditor/main/app/view/WatermarkSettingsDialog.js
@@ -382,7 +382,7 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
}, 10);
},
- onColorSelect: function(picker, color) {
+ onColorSelect: function(btn, color) {
this.isAutoColor = false;
this.btnTextColor.currentColor = color;
},
diff --git a/apps/presentationeditor/main/app/controller/Toolbar.js b/apps/presentationeditor/main/app/controller/Toolbar.js
index d4f2a1ee7..5545fdece 100644
--- a/apps/presentationeditor/main/app/controller/Toolbar.js
+++ b/apps/presentationeditor/main/app/controller/Toolbar.js
@@ -301,8 +301,7 @@ define([
toolbar.btnMarkers.menu.on('show:after', _.bind(this.onListShowAfter, this, 0, toolbar.mnuMarkersPicker));
toolbar.btnNumbers.menu.on('show:after', _.bind(this.onListShowAfter, this, 1, toolbar.mnuNumbersPicker));
toolbar.btnFontColor.on('click', _.bind(this.onBtnFontColor, this));
- toolbar.mnuFontColorPicker.on('select', _.bind(this.onSelectFontColor, this));
- $('#id-toolbar-menu-new-fontcolor').on('click', _.bind(this.onNewFontColor, this));
+ toolbar.btnFontColor.on('color:select', _.bind(this.onSelectFontColor, this));
toolbar.btnHighlightColor.on('click', _.bind(this.onBtnHighlightColor, this));
toolbar.mnuHighlightColorPicker.on('select', _.bind(this.onSelectHighlightColor, this));
toolbar.mnuHighlightTransparent.on('click', _.bind(this.onHighlightTransparentClick, this));
@@ -1871,11 +1870,7 @@ define([
return out_value;
},
- onNewFontColor: function(picker, color) {
- this.toolbar.mnuFontColorPicker.addNewColor();
- },
-
- onSelectFontColor: function(picker, color) {
+ onSelectFontColor: function(btn, color) {
this._state.clrtext = this._state.clrtext_asccolor = undefined;
this.toolbar.btnFontColor.currentColor = color;
diff --git a/apps/presentationeditor/main/app/view/Toolbar.js b/apps/presentationeditor/main/app/view/Toolbar.js
index f4d32ac28..fab865616 100644
--- a/apps/presentationeditor/main/app/view/Toolbar.js
+++ b/apps/presentationeditor/main/app/view/Toolbar.js
@@ -362,13 +362,7 @@ define([
iconCls: 'toolbar__icon btn-fontcolor',
lock: [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noTextSelected, _set.shapeLock],
split: true,
- menu: new Common.UI.Menu({
- cls: 'shifted-left',
- items: [
- {template: _.template('')},
- {template: _.template('')}
- ]
- })
+ menu: true
});
me.paragraphControls.push(me.btnFontColor);
@@ -1361,10 +1355,9 @@ define([
// DataView and pickers
//
if (this.btnFontColor.cmpEl) {
+ this.btnFontColor.setMenu();
+ this.mnuFontColorPicker = this.btnFontColor.getPicker();
this.btnFontColor.setColor(this.btnFontColor.currentColor || 'transparent');
- this.mnuFontColorPicker = new Common.UI.ThemeColorPalette({
- el: $('#id-toolbar-menu-fontcolor')
- });
}
if (this.btnHighlightColor.cmpEl) {
this.btnHighlightColor.currentColor = 'FFFF00';
@@ -1377,6 +1370,7 @@ define([
]
});
this.mnuHighlightColorPicker.select('FFFF00');
+ this.btnHighlightColor.setPicker(this.mnuHighlightColorPicker);
}
},
@@ -1733,7 +1727,6 @@ define([
txtDistribVert: 'Distribute Vertically',
tipChangeSlide: 'Change Slide Layout',
tipColorSchemas: 'Change Color Scheme',
- textNewColor: 'Add New Custom Color',
mniSlideStandard: 'Standard (4:3)',
mniSlideWide: 'Widescreen (16:9)',
mniSlideAdvanced: 'Advanced Settings',
diff --git a/apps/presentationeditor/main/locale/en.json b/apps/presentationeditor/main/locale/en.json
index 4129c9812..886830828 100644
--- a/apps/presentationeditor/main/locale/en.json
+++ b/apps/presentationeditor/main/locale/en.json
@@ -50,6 +50,8 @@
"Common.Translation.warnFileLocked": "The file is being edited in another app. You can continue editing and save it as a copy.",
"Common.Translation.warnFileLockedBtnEdit": "Create a copy",
"Common.Translation.warnFileLockedBtnView": "Open for viewing",
+ "Common.UI.ButtonColored.textAutoColor": "Automatic",
+ "Common.UI.ButtonColored.textNewColor": "Add New Custom Color",
"Common.UI.ColorButton.textAutoColor": "Automatic",
"Common.UI.ColorButton.textNewColor": "Add New Custom Color",
"Common.UI.ComboBorderSize.txtNoBorders": "No borders",
@@ -1906,7 +1908,7 @@
"PE.Views.Toolbar.textColumnsTwo": "Two Columns",
"PE.Views.Toolbar.textItalic": "Italic",
"PE.Views.Toolbar.textListSettings": "List Settings",
- "PE.Views.Toolbar.textNewColor": "Add New Custom Color",
+ "del_PE.Views.Toolbar.textNewColor": "Add New Custom Color",
"PE.Views.Toolbar.textShapeAlignBottom": "Align Bottom",
"PE.Views.Toolbar.textShapeAlignCenter": "Align Center",
"PE.Views.Toolbar.textShapeAlignLeft": "Align Left",
diff --git a/apps/spreadsheeteditor/main/app/controller/Toolbar.js b/apps/spreadsheeteditor/main/app/controller/Toolbar.js
index 92881e950..c0d34aa37 100644
--- a/apps/spreadsheeteditor/main/app/controller/Toolbar.js
+++ b/apps/spreadsheeteditor/main/app/controller/Toolbar.js
@@ -315,10 +315,10 @@ define([
toolbar.btnSubscript.on('click', _.bind(this.onSubscript, this));
toolbar.btnSubscript.menu.on('item:click', _.bind(this.onSubscriptMenu, this));
toolbar.btnTextColor.on('click', _.bind(this.onTextColor, this));
+ toolbar.btnTextColor.on('color:select', _.bind(this.onTextColorSelect, this));
+ toolbar.btnTextColor.on('auto:select', _.bind(this.onAutoFontColor, this));
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.btnBackColor.on('color:select', _.bind(this.onBackColorSelect, this));
toolbar.btnBorders.on('click', _.bind(this.onBorders, this));
if (toolbar.btnBorders.rendered) {
toolbar.btnBorders.menu.on('item:click', _.bind(this.onBordersMenu, this));
@@ -378,8 +378,6 @@ define([
if (toolbar.cmbNumberFormat.cmpEl)
toolbar.cmbNumberFormat.cmpEl.on('click', '#id-toolbar-mnu-item-more-formats a', _.bind(this.onNumberFormatSelect, this));
toolbar.btnCurrencyStyle.menu.on('item:click', _.bind(this.onNumberFormatMenu, this));
- $('#id-toolbar-menu-new-fontcolor').on('click', _.bind(this.onNewTextColor, this));
- $('#id-toolbar-menu-new-paracolor').on('click', _.bind(this.onNewBackColor, this));
$('#id-toolbar-menu-new-bordercolor').on('click', _.bind(this.onNewBorderColor, this));
toolbar.btnPageOrient.menu.on('item:click', _.bind(this.onPageOrientSelect, this));
toolbar.btnPageMargins.menu.on('item:click', _.bind(this.onPageMarginsSelect, this));
@@ -613,11 +611,10 @@ define([
this.toolbar.mnuBackColorPicker.trigger('select', this.toolbar.mnuBackColorPicker, this.toolbar.mnuBackColorPicker.currentColor, true);
},
- onTextColorSelect: function(picker, color, fromBtn) {
+ onTextColorSelect: function(btn, color, fromBtn) {
this._state.clrtext_asccolor = this._state.clrtext = undefined;
this.toolbar.btnTextColor.currentColor = color;
- this.toolbar.btnTextColor.setColor((typeof(color) == 'object') ? (color.isAuto ? '000' : color.color) : color);
this.toolbar.mnuTextColorPicker.currentColor = color;
if (this.api) {
@@ -630,14 +627,11 @@ define([
Common.component.Analytics.trackEvent('ToolBar', 'Text Color');
},
- onBackColorSelect: function(picker, color, fromBtn) {
+ onBackColorSelect: function(btn, color, fromBtn) {
this._state.clrshd_asccolor = this._state.clrback = undefined;
- var clr = (typeof(color) == 'object') ? color.color : color;
-
this.toolbar.btnBackColor.currentColor = color;
- this.toolbar.btnBackColor.setColor(this.toolbar.btnBackColor.currentColor);
-
+
this.toolbar.mnuBackColorPicker.currentColor = color;
if (this.api) {
this.toolbar.btnBackColor.ischanged = (fromBtn!==true);
@@ -648,14 +642,6 @@ define([
Common.component.Analytics.trackEvent('ToolBar', 'Background Color');
},
- onNewTextColor: function(picker, color) {
- this.toolbar.mnuTextColorPicker.addNewColor();
- },
-
- onNewBackColor: function(picker, color) {
- this.toolbar.mnuBackColorPicker.addNewColor();
- },
-
onNewBorderColor: function(picker, color) {
this.toolbar.btnBorders.menu.hide();
this.toolbar.btnBorders.toggle(false, true);
@@ -669,9 +655,6 @@ define([
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);
@@ -2410,8 +2393,7 @@ define([
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.toolbar.btnTextColor.setAutoColor(true);
this._state.clrtext = 'auto';
}
} else {
@@ -2426,8 +2408,7 @@ define([
(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');
+ this.toolbar.btnTextColor.setAutoColor(false);
if (_.isObject(clr)) {
var isselected = false;
for (var i = 0; i < 10; i++) {
@@ -2565,8 +2546,7 @@ define([
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');
+ toolbar.btnTextColor.setAutoColor(true);
this._state.clrtext = 'auto';
}
} else {
@@ -2581,8 +2561,7 @@ define([
(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');
+ toolbar.btnTextColor.setAutoColor(false);
if (_.isObject(clr)) {
var isselected = false;
for (var i = 0; i < 10; i++) {
diff --git a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js
index 54c1480a7..8fd8290e4 100644
--- a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js
@@ -534,19 +534,13 @@ define([
this.btnSubscript[1].on('click', _.bind(this.onSubscriptClick, this));
this.footerControls.push(this.btnSubscript[1]);
- var initNewColor = function(btn, picker_el) {
- if (btn && btn.cmpEl) {
- btn.currentColor = '000000';
- btn.setColor(btn.currentColor);
- var picker = new Common.UI.ThemeColorPalette({
- el: $(picker_el)
- });
- picker.currentColor = btn.currentColor;
- }
- btn.menu.cmpEl.on('click', picker_el+'-new', _.bind(function() {
- picker.addNewColor((typeof(btn.color) == 'object') ? btn.color.color : btn.color);
- }, me));
- picker.on('select', _.bind(me.onColorSelect, me, btn));
+ var initNewColor = function(btn) {
+ btn.setMenu();
+ btn.currentColor = '000000';
+ btn.setColor(btn.currentColor);
+ var picker = btn.getPicker();
+ picker.currentColor = btn.currentColor;
+ btn.on('color:select', _.bind(me.onColorSelect, me));
return picker;
};
this.btnTextColor = [];
@@ -556,17 +550,13 @@ define([
iconCls : 'toolbar__icon btn-fontcolor',
hint : this.textColor,
split : true,
- menu : new Common.UI.Menu({
- additionalAlign: this.menuAddAlign,
- items: [
- { template: _.template('') },
- { template: _.template('') }
- ]
- })
+ additionalAlign: this.menuAddAlign,
+ menu : true
}));
this.btnTextColor[0].on('click', _.bind(this.onTextColor, this));
+
this.mnuTextColorPicker = [];
- this.mnuTextColorPicker.push(initNewColor(this.btnTextColor[0], "#id-dlg-h-menu-fontcolor"));
+ this.mnuTextColorPicker.push(initNewColor(this.btnTextColor[0]));
this.headerControls.push(this.btnTextColor[0]);
this.btnTextColor.push(new Common.UI.ButtonColored({
@@ -575,16 +565,11 @@ define([
iconCls : 'toolbar__icon btn-fontcolor',
hint : this.textColor,
split : true,
- menu : new Common.UI.Menu({
- additionalAlign: this.menuAddAlign,
- items: [
- { template: _.template('') },
- { template: _.template('') }
- ]
- })
+ additionalAlign: this.menuAddAlign,
+ menu : true
}));
this.btnTextColor[1].on('click', _.bind(this.onTextColor, this));
- this.mnuTextColorPicker.push(initNewColor(this.btnTextColor[1], "#id-dlg-f-menu-fontcolor"));
+ this.mnuTextColorPicker.push(initNewColor(this.btnTextColor[1]));
this.footerControls.push(this.btnTextColor[1]);
this.btnOk = new Common.UI.Button({
@@ -898,10 +883,9 @@ define([
mnuTextColorPicker.trigger('select', mnuTextColorPicker, mnuTextColorPicker.currentColor, true);
},
- onColorSelect: function(btn, picker, color) {
+ onColorSelect: function(btn, color) {
btn.currentColor = color;
- btn.setColor(btn.currentColor);
- picker.currentColor = color;
+ btn.colorPicker.currentColor = color;
if (this.HFObject)
this.HFObject.setTextColor(Common.Utils.ThemeColor.getRgbColor(color));
this.onCanvasClick(this.currentCanvas);
diff --git a/apps/spreadsheeteditor/main/app/view/Toolbar.js b/apps/spreadsheeteditor/main/app/view/Toolbar.js
index 40280cd67..7277446db 100644
--- a/apps/spreadsheeteditor/main/app/view/Toolbar.js
+++ b/apps/spreadsheeteditor/main/app/view/Toolbar.js
@@ -488,19 +488,8 @@ define([
iconCls : 'toolbar__icon btn-fontcolor',
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('') }
- ]
- })
+ menu: true,
+ auto: true
});
me.mnuBackColorPicker = dummyCmp();
@@ -510,12 +499,8 @@ define([
iconCls : 'toolbar__icon btn-paracolor',
split : true,
lock : [_set.selImage, _set.editCell, _set.selSlicer, _set.coAuth, _set.coAuthText, _set.lostConnect],
- menu : new Common.UI.Menu({
- items: [
- { template: _.template('') },
- { template: _.template('') }
- ]
- })
+ transparent: true,
+ menu: true
});
me.btnBorders = new Common.UI.Button({
@@ -2154,17 +2139,14 @@ define([
// DataView and pickers
//
if (this.btnTextColor && this.btnTextColor.cmpEl) {
+ this.btnTextColor.setMenu();
+ this.mnuTextColorPicker = this.btnTextColor.getPicker();
this.btnTextColor.setColor(this.btnTextColor.currentColor || 'transparent');
- this.mnuTextColorPicker = new Common.UI.ThemeColorPalette({
- el: $('#id-toolbar-menu-fontcolor')
- });
}
if (this.btnBackColor && this.btnBackColor.cmpEl) {
+ this.btnBackColor.setMenu();
+ this.mnuBackColorPicker = this.btnBackColor.getPicker();
this.btnBackColor.setColor(this.btnBackColor.currentColor || 'transparent');
- this.mnuBackColorPicker = new Common.UI.ThemeColorPalette({
- el: $('#id-toolbar-menu-paracolor'),
- transparent: true
- });
}
},
diff --git a/apps/spreadsheeteditor/main/locale/en.json b/apps/spreadsheeteditor/main/locale/en.json
index e0bcb8240..0f72ec533 100644
--- a/apps/spreadsheeteditor/main/locale/en.json
+++ b/apps/spreadsheeteditor/main/locale/en.json
@@ -102,6 +102,8 @@
"Common.Translation.warnFileLocked": "The file is being edited in another app. You can continue editing and save it as a copy.",
"Common.Translation.warnFileLockedBtnEdit": "Create a copy",
"Common.Translation.warnFileLockedBtnView": "Open for viewing",
+ "Common.UI.ButtonColored.textAutoColor": "Automatic",
+ "Common.UI.ButtonColored.textNewColor": "Add New Custom Color",
"Common.UI.ColorButton.textAutoColor": "Automatic",
"Common.UI.ColorButton.textNewColor": "Add New Custom Color",
"Common.UI.ComboBorderSize.txtNoBorders": "No borders",