Refactoring Common.UI.ButtonColored
This commit is contained in:
Julia Radzhabova
parent
a7c5c47b0b
commit
1a055fcbcc
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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('<div id="id-toolbar-menu-fontcolor" style="width: 169px; height: 240px; margin: 10px;"></div>')},
|
||||
{template: _.template('<a id="id-toolbar-menu-new-fontcolor" style="padding-left:12px;">' + me.textNewColor + '</a>')}
|
||||
]
|
||||
})
|
||||
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',
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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++) {
|
||||
|
|
|
|||
|
|
@ -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('<div id="id-dlg-h-menu-fontcolor" style="width: 169px; height: 240px;"></div>') },
|
||||
{ template: _.template('<a id="id-dlg-h-menu-fontcolor-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||
]
|
||||
})
|
||||
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('<div id="id-dlg-f-menu-fontcolor" style="width: 169px; height: 240px;"></div>') },
|
||||
{ template: _.template('<a id="id-dlg-f-menu-fontcolor-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||
]
|
||||
})
|
||||
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);
|
||||
|
|
|
|||
|
|
@ -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('<a tabindex="-1" type="menuitem"><span class="menu-item-icon" style="background-image: none; width: 12px; height: 12px; margin: 1px 7px 0 1px; background-color: #000;"></span><%= caption %></a>')
|
||||
},
|
||||
{caption: '--'},
|
||||
{ template: _.template('<div id="id-toolbar-menu-fontcolor" style="width: 169px; height: 240px;"></div>') },
|
||||
{ template: _.template('<a id="id-toolbar-menu-new-fontcolor" style="padding-left:12px;">' + me.textNewColor + '</a>') }
|
||||
]
|
||||
})
|
||||
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('<div id="id-toolbar-menu-paracolor" style="width: 169px; height: 240px;"></div>') },
|
||||
{ template: _.template('<a id="id-toolbar-menu-new-paracolor" style="padding-left:12px;">' + me.textNewColor + '</a>') }
|
||||
]
|
||||
})
|
||||
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
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Reference in a new issue