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

Refactoring Common.UI.ButtonColored

Browse source
This commit is contained in:
Julia Radzhabova 2021-07-11 02:25:12 +03:00
parent a7c5c47b0b
commit 1a055fcbcc
11 changed files with 50 additions and 113 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

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

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

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

@ -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) {

2
apps/documenteditor/main/app/view/WatermarkSettingsDialog.js
View file

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

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

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

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

@ -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',

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

@ -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",

39
apps/spreadsheeteditor/main/app/controller/Toolbar.js
View file

@ -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,13 +627,10 @@ 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) {
@ -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++) {

38
apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js
View file

@ -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) {
var initNewColor = function(btn) {
btn.setMenu();
btn.currentColor = '000000';
btn.setColor(btn.currentColor);
var picker = new Common.UI.ThemeColorPalette({
el: $(picker_el)
});
var picker = btn.getPicker();
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));
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>') }
]
})
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>') }
]
})
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);

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

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

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

@ -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",