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

[DE] Refactoring color button component

Browse source
This commit is contained in:
Julia Radzhabova 2020-04-29 17:37:59 +03:00
parent 81f30a34c0
commit 44e25e39ea
12 changed files with 208 additions and 429 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -34,11 +34,12 @@ if (Common === undefined)
var Common = {};
define([
'common/main/lib/component/Button'
'common/main/lib/component/Button',
'common/main/lib/component/ThemeColorPalette'
], function () {
'use strict';
Common.UI.ColorButton = Common.UI.Button.extend({
Common.UI.ColorButton = Common.UI.Button.extend(_.extend({
options : {
hint: false,
enableToggle: false,
@ -54,12 +55,72 @@ define([
'</div>'
].join('')),
initialize : function(options) {
if (!options.menu && options.menu !== false) {// menu==null or undefined
// set default menu
var me = this;
options.menu = me.getMenu(options);
me.on('render:after', function(btn) {
me.getPicker();
});
}
Common.UI.Button.prototype.initialize.call(this, options);
},
onColorSelect: function(picker, color) {
this.setColor(color);
this.trigger('color:select', this, color);
},
setColor: function(color) {
var span = $(this.cmpEl).find('button span:nth-child(1)');
this.color = color;
span.toggleClass('color-transparent', color=='transparent');
span.css({'background-color': (color=='transparent') ? color : ((typeof(color) == 'object') ? '#'+color.color : '#'+color)});
}
});
},
getPicker: function() {
if (!this.colorPicker) {
this.colorPicker = new Common.UI.ThemeColorPalette({
el: this.cmpEl.find('#' + this.menu.id + '-color-menu'),
transparent: this.options.transparent
});
this.colorPicker.on('select', _.bind(this.onColorSelect, this));
this.cmpEl.find('#' + this.menu.id + '-color-new').on('click', _.bind(this.addNewColor, this));
}
return this.colorPicker;
},
getMenu: function(options) {
if (typeof this.menu !== 'object') {
options = options || this.options;
var id = Common.UI.getId(),
menu = new Common.UI.Menu({
id: id,
additionalAlign: options.additionalAlign,
items: (options.additionalItems ? options.additionalItems : []).concat([
{ template: _.template('<div id="' + id + '-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
{ template: _.template('<a id="' + id + '-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
])
});
return menu;
}
return this.menu;
},
setMenu: function (m) {
m = m || this.getMenu();
Common.UI.Button.prototype.setMenu.call(this, m);
this.getPicker();
},
addNewColor: function() {
this.colorPicker && this.colorPicker.addNewColor((typeof(this.color) == 'object') ? this.color.color : this.color);
},
textNewColor: 'Add New Custom Color'
}, Common.UI.ColorButton || {}));
});

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

@ -126,31 +126,19 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
this.cmbShow.setValue(Asc.c_oAscSdtAppearance.Frame);
this.btnColor = new Common.UI.ColorButton({
parentEl: $('#control-settings-color-btn'),
style: "width:45px;",
menu : new Common.UI.Menu({
additionalAlign: this.menuAddAlign,
items: [
{
id: 'control-settings-system-color',
caption: this.textSystemColor,
template: _.template('<a tabindex="-1" type="menuitem"><span class="menu-item-icon" style="background-image: none; width: 12px; height: 12px; margin: 1px 7px 0 -7px; background-color: #dcdcdc;"></span><%= caption %></a>')
},
{caption: '--'},
{ template: _.template('<div id="control-settings-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
{ template: _.template('<a id="control-settings-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
]
})
additionalItems: [{
id: 'control-settings-system-color',
caption: this.textSystemColor,
template: _.template('<a tabindex="-1" type="menuitem"><span class="menu-item-icon" style="background-image: none; width: 12px; height: 12px; margin: 1px 7px 0 -7px; background-color: #dcdcdc;"></span><%= caption %></a>')
},
{caption: '--'}],
additionalAlign: this.menuAddAlign
});
this.btnColor.on('render:after', function(btn) {
me.colors = new Common.UI.ThemeColorPalette({
el: $('#control-settings-color-menu')
});
me.colors.on('select', _.bind(me.onColorsSelect, me));
});
this.btnColor.render( $('#control-settings-color-btn'));
this.btnColor.setColor('000000');
this.btnColor.menu.items[3].on('click', _.bind(this.addNewColor, this, this.colors, this.btnColor));
this.btnColor.on('color:select', _.bind(this.onColorsSelect, this));
this.colors = this.btnColor.getPicker();
$('#control-settings-system-color').on('click', _.bind(this.onSystemColor, this));
this.btnApplyAll = new Common.UI.Button({
@ -264,8 +252,7 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
this.afterRender();
},
onColorsSelect: function(picker, color) {
this.btnColor.setColor(color);
onColorsSelect: function(btn, color) {
var clr_item = this.btnColor.menu.$el.find('#control-settings-system-color > a');
clr_item.hasClass('selected') && clr_item.removeClass('selected');
this.isSystemColor = false;
@ -275,10 +262,6 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
this.colors.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
},
addNewColor: function(picker, btn) {
picker.addNewColor((typeof(btn.color) == 'object') ? btn.color.color : btn.color);
},
onSystemColor: function(e) {
var color = Common.Utils.ThemeColor.getHexColor(220, 220, 220);
this.btnColor.setColor(color);
@ -634,7 +617,6 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
textColor: 'Color',
textBox: 'Bounding box',
textNone: 'None',
textNewColor: 'Add New Custom Color',
textApplyAll: 'Apply to All',
textAppearance: 'Appearance',
textSystemColor: 'System',

85
apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js
View file

@ -160,73 +160,41 @@ define([
this.BorderSize = {ptValue: rec.get('value'), pxValue: rec.get('pxValue')};
this.btnBorderColor = new Common.UI.ColorButton({
parentEl: $('#drop-advanced-button-bordercolor'),
style: "width:45px;",
menu : new Common.UI.Menu({
additionalAlign: this.menuAddAlign,
items: [
{ template: _.template('<div id="drop-advanced-border-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
{ template: _.template('<a id="drop-advanced-border-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
]
})
additionalAlign: this.menuAddAlign
});
this.btnBorderColor.on('render:after', function(btn) {
me.colorsBorder = new Common.UI.ThemeColorPalette({
el: $('#drop-advanced-border-color-menu')
})
.on('select', _.bind(function(picker, color) {
me.btnBorderColor.setColor(color);
me.tableStyler.setVirtualBorderColor((typeof(color) == 'object') ? color.color : color);
}, me));
});
this.btnBorderColor.render( $('#drop-advanced-button-bordercolor'));
this.btnBorderColor.on('color:select', _.bind(function(btn, color) {
this.tableStyler.setVirtualBorderColor((typeof(color) == 'object') ? color.color : color);
}, this));
this.btnBorderColor.setColor('000000');
this.btnBorderColor.menu.cmpEl.on('click', '#drop-advanced-border-color-new', _.bind(function() {
me.colorsBorder.addNewColor((typeof(me.btnBorderColor.color) == 'object') ? me.btnBorderColor.color.color : me.btnBorderColor.color);
}, me));
this.colorsBorder = this.btnBorderColor.getPicker();
this.btnBackColor = new Common.UI.ColorButton({
parentEl: $('#drop-advanced-button-color'),
style: "width:45px;",
menu : new Common.UI.Menu({
additionalAlign: this.menuAddAlign,
items: [
{ template: _.template('<div id="drop-advanced-back-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
{ template: _.template('<a id="drop-advanced-back-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
]
})
additionalAlign: this.menuAddAlign,
transparent: true
});
this.btnBackColor.on('color:select', _.bind(function(btn, color) {
var clr, border;
me.paragraphShade = color;
this.btnBackColor.on('render:after', function(btn) {
me.colorsBack = new Common.UI.ThemeColorPalette({
el: $('#drop-advanced-back-color-menu'),
transparent: true
})
.on('select', _.bind(function(picker, color) {
var clr, border;
me.btnBackColor.setColor(color);
me.paragraphShade = color;
if (me._changedProps) {
if (me._changedProps.get_Shade()===undefined || me._changedProps.get_Shade()===null) {
me._changedProps.put_Shade(new Asc.asc_CParagraphShd());
}
if (color=='transparent') {
me._changedProps.get_Shade().put_Value(Asc.c_oAscShdNil);
} else {
me._changedProps.get_Shade().put_Value(Asc.c_oAscShdClear);
me._changedProps.get_Shade().put_Color(Common.Utils.ThemeColor.getRgbColor(color));
}
if (me._changedProps) {
if (me._changedProps.get_Shade()===undefined || me._changedProps.get_Shade()===null) {
me._changedProps.put_Shade(new Asc.asc_CParagraphShd());
}
var colorstr = (typeof(color) == 'object') ? color.color : color;
me.tableStyler.setCellsColor(colorstr);
}, me));
});
this.btnBackColor.render( $('#drop-advanced-button-color'));
this.btnBackColor.menu.cmpEl.on('click', '#drop-advanced-back-color-new', _.bind(function() {
me.colorsBack.addNewColor();
}, me));
if (color=='transparent') {
me._changedProps.get_Shade().put_Value(Asc.c_oAscShdNil);
} else {
me._changedProps.get_Shade().put_Value(Asc.c_oAscShdClear);
me._changedProps.get_Shade().put_Color(Common.Utils.ThemeColor.getRgbColor(color));
}
}
var colorstr = (typeof(color) == 'object') ? color.color : color;
me.tableStyler.setCellsColor(colorstr);
}, this));
this.colorsBack = this.btnBackColor.getPicker();
this.spnMarginTop = new Common.UI.MetricSpinner({
el : $('#drop-advanced-input-top'),
@ -1163,7 +1131,6 @@ define([
textBackColor: 'Background Color',
textBorderDesc: 'Click on diagramm or use buttons to select borders',
txtNoBorders: 'No borders',
textNewColor: 'Add New Custom Color',
textPosition: 'Position',
textAlign: 'Alignment',
textTop: 'Top',

54
apps/documenteditor/main/app/view/ListSettingsDialog.js
View file

@ -155,39 +155,27 @@ define([
$window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
this.btnColor = new Common.UI.ColorButton({
parentEl: $window.find('#id-dlg-bullet-color'),
style: 'width:45px;',
menu : new Common.UI.Menu({
additionalAlign: this.menuAddAlign,
items: [
{
id: 'id-dlg-bullet-text-color',
caption: this.txtLikeText,
checkable: true,
toggleGroup: 'list-settings-color'
},
{
id: 'id-dlg-bullet-auto-color',
caption: this.textAuto,
checkable: true,
toggleGroup: 'list-settings-color'
},
{caption: '--'},
{ template: _.template('<div id="id-dlg-bullet-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
{ template: _.template('<a id="id-dlg-bullet-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
]
})
additionalItems: [{
id: 'id-dlg-bullet-text-color',
caption: this.txtLikeText,
checkable: true,
toggleGroup: 'list-settings-color'
},
{
id: 'id-dlg-bullet-auto-color',
caption: this.textAuto,
checkable: true,
toggleGroup: 'list-settings-color'
},
{caption: '--'}],
additionalAlign: this.menuAddAlign
});
this.btnColor.on('render:after', function(btn) {
me.colors = new Common.UI.ThemeColorPalette({
el: $window.find('#id-dlg-bullet-color-menu'),
transparent: false
});
me.colors.on('select', _.bind(me.onColorsSelect, me));
});
this.btnColor.render($window.find('#id-dlg-bullet-color'));
$window.find('#id-dlg-bullet-color-new').on('click', _.bind(this.addNewColor, this, this.colors));
this.btnColor.on('color:select', _.bind(this.onColorsSelect, this));
this.btnColor.menu.items[0].on('toggle', _.bind(this.onLikeTextColor, this));
this.btnColor.menu.items[1].on('toggle', _.bind(this.onAutoColor, this));
this.colors = this.btnColor.getPicker();
this.btnEdit = new Common.UI.Button({
el: $window.find('#id-dlg-bullet-font')
@ -363,10 +351,6 @@ define([
this.colors.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
},
addNewColor: function(picker, btn) {
picker.addNewColor((typeof(btn.color) == 'object') ? btn.color.color : btn.color);
},
onAutoColor: function(item, state) {
if (!!state) {
var color = Common.Utils.ThemeColor.getHexColor(0, 0, 0);
@ -399,8 +383,7 @@ define([
}
},
onColorsSelect: function(picker, color) {
this.btnColor.setColor(color);
onColorsSelect: function(btn, color) {
if (this._changedProps) {
if (!this._changedProps.get_TextPr()) this._changedProps.put_TextPr(new AscCommonWord.CTextPr());
this._changedProps.get_TextPr().put_Color(Common.Utils.ThemeColor.getRgbColor(color));
@ -564,7 +547,6 @@ define([
txtTitle: 'List Settings',
txtSize: 'Size',
txtColor: 'Color',
textNewColor: 'Add New Custom Color',
txtBullet: 'Bullet',
txtFont: 'Font and Symbol',
txtAlign: 'Alignment',

28
apps/documenteditor/main/app/view/ParagraphSettings.js
View file

@ -162,11 +162,12 @@ define([
this.lockedControls.push(this.chAddInterval);
this.btnColor = new Common.UI.ColorButton({
parentEl: $markup.findById('#paragraph-color-btn'),
style: "width:45px;",
disabled: this._locked,
transparent: true,
menu : true
});
this.btnColor.render($markup.findById('#paragraph-color-btn'));
this.lockedControls.push(this.btnColor);
this.numLineHeight.on('change', this.onNumLineHeightChange.bind(this));
@ -178,6 +179,7 @@ define([
this.chAddInterval.on('change', this.onAddIntervalChange.bind(this));
this.cmbLineRule.on('selected', this.onLineRuleSelect.bind(this));
this.cmbLineRule.on('hide:after', this.onHideMenus.bind(this));
this.btnColor.on('color:select', this.onColorPickerSelect.bind(this));
this.linkAdvanced = $markup.findById('#paragraph-advanced-link');
this.linkAdvanced.toggleClass('disabled', this._locked);
@ -264,8 +266,7 @@ define([
}
},
onColorPickerSelect: function(picker, color) {
this.btnColor.setColor(color);
onColorPickerSelect: function(btn, color) {
this.BackColor = color;
this._state.BackColor = this.BackColor;
@ -441,24 +442,10 @@ define([
}
},
addNewColor: function() {
this.mnuColorPicker.addNewColor((typeof(this.btnColor.color) == 'object') ? this.btnColor.color.color : this.btnColor.color);
},
UpdateThemeColors: function() {
if (!this.mnuColorPicker) {
this.btnColor.setMenu( new Common.UI.Menu({
items: [
{ template: _.template('<div id="paragraph-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
{ template: _.template('<a id="paragraph-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
]
}));
this.mnuColorPicker = new Common.UI.ThemeColorPalette({
el: $('#paragraph-color-menu'),
transparent: true
});
this.mnuColorPicker.on('select', _.bind(this.onColorPickerSelect, this));
this.btnColor.menu.items[1].on('click', _.bind(this.addNewColor, this));
this.btnColor.setMenu();
this.mnuColorPicker = this.btnColor.getPicker();
}
this.mnuColorPicker.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
},
@ -499,7 +486,6 @@ define([
textAdvanced: 'Show advanced settings',
textAt: 'At',
txtAutoText: 'Auto',
textBackColor: 'Background color',
textNewColor: 'Add New Custom Color'
textBackColor: 'Background color'
}, DE.Views.ParagraphSettings || {}));
});

53
apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js
View file

@ -358,25 +358,13 @@ define([ 'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
this.cmbBorderSize.on('selected', _.bind(this.onBorderSizeSelect, this));
this.btnBorderColor = new Common.UI.ColorButton({
parentEl: $('#paragraphadv-border-color-btn'),
style: "width:45px;",
menu : new Common.UI.Menu({
additionalAlign: this.menuAddAlign,
items: [
{ template: _.template('<div id="paragraphadv-border-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
{ template: _.template('<a id="paragraphadv-border-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
]
})
additionalAlign: this.menuAddAlign
});
this.btnBorderColor.on('render:after', function(btn) {
me.colorsBorder = new Common.UI.ThemeColorPalette({
el: $('#paragraphadv-border-color-menu')
});
me.colorsBorder.on('select', _.bind(me.onColorsBorderSelect, me));
});
this.btnBorderColor.render( $('#paragraphadv-border-color-btn'));
this.colorsBorder = this.btnBorderColor.getPicker();
this.btnBorderColor.on('color:select', _.bind(this.onColorsBorderSelect, this));
this.btnBorderColor.setColor('000000');
$('#paragraphadv-border-color-new').on('click', _.bind(this.addNewColor, this, this.colorsBorder, this.btnBorderColor));
this.BordersImage = new Common.UI.TableStyler({
el: $('#id-deparagraphstyler'),
@ -413,25 +401,13 @@ define([ 'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
}, this);
this.btnBackColor = new Common.UI.ColorButton({
parentEl: $('#paragraphadv-back-color-btn'),
style: "width:45px;",
menu : new Common.UI.Menu({
additionalAlign: this.menuAddAlign,
items: [
{ template: _.template('<div id="paragraphadv-back-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
{ template: _.template('<a id="paragraphadv-back-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
]
})
transparent: true,
additionalAlign: this.menuAddAlign
});
this.btnBackColor.on('render:after', function(btn) {
me.colorsBack = new Common.UI.ThemeColorPalette({
el: $('#paragraphadv-back-color-menu'),
transparent: true
});
me.colorsBack.on('select', _.bind(me.onColorsBackSelect, me));
});
this.btnBackColor.render( $('#paragraphadv-back-color-btn'));
$('#paragraphadv-back-color-new').on('click', _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor));
this.colorsBack = this.btnBackColor.getPicker();
this.btnBackColor.on('color:select', _.bind(this.onColorsBackSelect, this));
// Font
@ -1094,17 +1070,11 @@ define([ 'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
this.BordersImage.setVirtualBorderSize( this.BorderSize.pxValue );
},
addNewColor: function(picker, btn) {
picker.addNewColor((typeof(btn.color) == 'object') ? btn.color.color : btn.color);
},
onColorsBorderSelect: function(picker, color) {
this.btnBorderColor.setColor(color);
onColorsBorderSelect: function(btn, color) {
this.BordersImage.setVirtualBorderColor((typeof(color) == 'object') ? color.color : color);
},
onColorsBackSelect: function(picker, color) {
this.btnBackColor.setColor(color);
onColorsBackSelect: function(btn, color) {
this.paragraphShade = color;
if (this._changedProps) {
@ -1447,7 +1417,6 @@ define([ 'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
textBackColor: 'Background Color',
textBorderDesc: 'Click on diagramm or use buttons to select borders',
txtNoBorders: 'No borders',
textNewColor: 'Add New Custom Color',
textEffects: 'Effects',
textCharacterSpacing: 'Character Spacing',
textSpacing: 'Spacing',

113
apps/documenteditor/main/app/view/ShapeSettings.js
View file

@ -248,8 +248,7 @@ define([
this.fireEvent('editcomplete', this);
},
onColorsBackSelect: function(picker, color) {
this.btnBackColor.setColor(color);
onColorsBackSelect: function(btn, color) {
this.ShapeColor = {Value: 1, Color: color};
if (this.api && !this._noApply) {
@ -272,10 +271,6 @@ define([
this.fireEvent('editcomplete', this);
},
addNewColor: function(picker, btn) {
picker.addNewColor((typeof(btn.color) == 'object') ? btn.color.color : btn.color);
},
onPatternSelect: function(combo, record){
if (this.api && !this._noApply) {
this.PatternFillType = record.get('type');
@ -295,8 +290,7 @@ define([
this.fireEvent('editcomplete', this);
},
onColorsFGSelect: function(picker, color) {
this.btnFGColor.setColor(color);
onColorsFGSelect: function(btn, color) {
this.FGColor = {Value: 1, Color: color};
if (this.api && !this._noApply) {
var props = new Asc.asc_CShapeProperty();
@ -315,8 +309,7 @@ define([
this.fireEvent('editcomplete', this);
},
onColorsBGSelect: function(picker, color) {
this.btnBGColor.setColor(color);
onColorsBGSelect: function(btn, color) {
this.BGColor = {Value: 1, Color: color};
if (this.api && !this._noApply) {
var props = new Asc.asc_CShapeProperty();
@ -479,8 +472,7 @@ define([
this.fireEvent('editcomplete', this);
},
onColorsGradientSelect: function(picker, color) {
this.btnGradColor.setColor(color);
onColorsGradientSelect: function(btn, color) {
this.GradColor.colors[this.GradColor.currentIdx] = color;
this.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(color) == 'object') ? color.color : color));
@ -641,8 +633,7 @@ define([
this.fireEvent('editcomplete', this);
},
onColorsBorderSelect: function(picker, color) {
this.btnBorderColor.setColor(color);
onColorsBorderSelect: function(btn, color) {
this.BorderColor = {Value: 1, Color: color};
if (this.api && this.BorderSize>0 && !this._noApply) {
var props = new Asc.asc_CShapeProperty();
@ -1696,99 +1687,50 @@ define([
if (!this.btnBackColor) {
// create color buttons
this.btnBackColor = new Common.UI.ColorButton({
parentEl: $('#shape-back-color-btn'),
style: "width:45px;",
menu : new Common.UI.Menu({
items: [
{ template: _.template('<div id="shape-back-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
{ template: _.template('<a id="shape-back-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
]
})
});
this.btnBackColor.render( $('#shape-back-color-btn'));
this.btnBackColor.setColor('transparent');
this.fillControls.push(this.btnBackColor);
this.colorsBack = new Common.UI.ThemeColorPalette({
el: $('#shape-back-color-menu'),
value: 'transparent',
transparent: true
});
this.colorsBack.on('select', _.bind(this.onColorsBackSelect, this));
this.btnBackColor.menu.items[1].on('click', _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor));
this.btnBackColor.setColor('transparent');
this.fillControls.push(this.btnBackColor);
this.colorsBack = this.btnBackColor.getPicker();
this.btnBackColor.on('color:select', _.bind(this.onColorsBackSelect, this));
this.btnFGColor = new Common.UI.ColorButton({
style: "width:45px;",
menu : new Common.UI.Menu({
items: [
{ template: _.template('<div id="shape-foreground-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
{ template: _.template('<a id="shape-foreground-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
]
})
parentEl: $('#shape-foreground-color-btn'),
style: "width:45px;"
});
this.btnFGColor.render( $('#shape-foreground-color-btn'));
this.btnFGColor.setColor('000000');
this.fillControls.push(this.btnFGColor);
this.colorsFG = new Common.UI.ThemeColorPalette({
el: $('#shape-foreground-color-menu'),
value: '000000'
});
this.colorsFG.on('select', _.bind(this.onColorsFGSelect, this));
this.btnFGColor.menu.items[1].on('click', _.bind(this.addNewColor, this, this.colorsFG, this.btnFGColor));
this.colorsFG = this.btnFGColor.getPicker();
this.btnFGColor.on('color:select', _.bind(this.onColorsFGSelect, this));
this.btnBGColor = new Common.UI.ColorButton({
style: "width:45px;",
menu : new Common.UI.Menu({
items: [
{ template: _.template('<div id="shape-background-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
{ template: _.template('<a id="shape-background-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
]
})
parentEl: $('#shape-background-color-btn'),
style: "width:45px;"
});
this.btnBGColor.render( $('#shape-background-color-btn'));
this.btnBGColor.setColor('ffffff');
this.fillControls.push(this.btnBGColor);
this.colorsBG = new Common.UI.ThemeColorPalette({
el: $('#shape-background-color-menu'),
value: 'ffffff'
});
this.colorsBG.on('select', _.bind(this.onColorsBGSelect, this));
this.btnBGColor.menu.items[1].on('click', _.bind(this.addNewColor, this, this.colorsBG, this.btnBGColor));
this.colorsBG = this.btnBGColor.getPicker();
this.btnBGColor.on('color:select', _.bind(this.onColorsBGSelect, this));
this.btnGradColor = new Common.UI.ColorButton({
style: "width:45px;",
menu : new Common.UI.Menu({
items: [
{ template: _.template('<div id="shape-gradient-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
{ template: _.template('<a id="shape-gradient-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
]
})
parentEl: $('#shape-gradient-color-btn'),
style: "width:45px;"
});
this.btnGradColor.render( $('#shape-gradient-color-btn'));
this.btnGradColor.setColor('000000');
this.fillControls.push(this.btnGradColor);
this.colorsGrad = new Common.UI.ThemeColorPalette({
el: $('#shape-gradient-color-menu'),
value: '000000'
});
this.colorsGrad.on('select', _.bind(this.onColorsGradientSelect, this));
this.btnGradColor.menu.items[1].on('click', _.bind(this.addNewColor, this, this.colorsGrad, this.btnGradColor));
this.colorsGrad = this.btnGradColor.getPicker();
this.btnGradColor.on('color:select', _.bind(this.onColorsGradientSelect, this));
this.btnBorderColor = new Common.UI.ColorButton({
style: "width:45px;",
menu : new Common.UI.Menu({
items: [
{ template: _.template('<div id="shape-border-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
{ template: _.template('<a id="shape-border-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
]
})
parentEl: $('#shape-border-color-btn'),
style: "width:45px;"
});
this.btnBorderColor.render( $('#shape-border-color-btn'));
this.btnBorderColor.setColor('000000');
this.lockedControls.push(this.btnBorderColor);
this.colorsBorder = new Common.UI.ThemeColorPalette({
el: $('#shape-border-color-menu'),
value: '000000'
});
this.colorsBorder.on('select', _.bind(this.onColorsBorderSelect, this));
this.btnBorderColor.menu.items[1].on('click', _.bind(this.addNewColor, this, this.colorsBorder, this.btnBorderColor));
this.colorsBorder = this.btnBorderColor.getPicker();
this.btnBorderColor.on('color:select', _.bind(this.onColorsBorderSelect, this));
}
this.colorsBorder.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
@ -1879,7 +1821,6 @@ define([
txtBrownPaper : 'Brown Paper',
txtPapyrus : 'Papyrus',
txtWood : 'Wood',
textNewColor : 'Add New Custom Color',
textAdvanced : 'Show advanced settings',
strTransparency : 'Opacity',
textNoFill : 'No Fill',

45
apps/documenteditor/main/app/view/TableSettings.js
View file

@ -148,8 +148,7 @@ define([
this.fireEvent('editcomplete', this);
},
onColorsBackSelect: function(picker, color) {
this.btnBackColor.setColor(color);
onColorsBackSelect: function(btn, color) {
this.CellColor = {Value: 1, Color: color};
if (this.api) {
@ -171,14 +170,6 @@ define([
this.fireEvent('editcomplete', this);
},
addNewColor: function(picker, btn) {
picker.addNewColor((typeof(btn.color) == 'object') ? btn.color.color : btn.color);
},
onColorsBorderSelect: function(picker, color) {
this.btnBorderColor.setColor(color);
},
onBtnBordersClick: function(btn, eOpts){
this._UpdateBordersStyle(btn.options.strId, true);
if (this.api) {
@ -648,40 +639,21 @@ define([
if (!this.btnBackColor) {
// create color buttons
this.btnBorderColor = new Common.UI.ColorButton({
style: "width:45px;",
menu : new Common.UI.Menu({
items: [
{ template: _.template('<div id="table-border-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
{ template: _.template('<a id="table-border-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
]
})
parentEl: $('#table-border-color-btn'),
style: "width:45px;"
});
this.btnBorderColor.render( $('#table-border-color-btn'));
this.btnBorderColor.setColor('000000');
this.lockedControls.push(this.btnBorderColor);
this.borderColor = new Common.UI.ThemeColorPalette({
el: $('#table-border-color-menu')
});
this.borderColor.on('select', _.bind(this.onColorsBorderSelect, this));
this.btnBorderColor.menu.items[1].on('click', _.bind(this.addNewColor, this, this.borderColor, this.btnBorderColor));
this.borderColor = this.btnBorderColor.getPicker();
this.btnBackColor = new Common.UI.ColorButton({
parentEl: $('#table-back-color-btn'),
style: "width:45px;",
menu : new Common.UI.Menu({
items: [
{ template: _.template('<div id="table-back-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
{ template: _.template('<a id="table-back-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
]
})
});
this.btnBackColor.render( $('#table-back-color-btn'));
this.lockedControls.push(this.btnBackColor);
this.colorsBack = new Common.UI.ThemeColorPalette({
el: $('#table-back-color-menu'),
transparent: true
});
this.colorsBack.on('select', _.bind(this.onColorsBackSelect, this));
this.btnBackColor.menu.items[1].on('click', _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor));
this.lockedControls.push(this.btnBackColor);
this.colorsBack = this.btnBackColor.getPicker();
this.btnBackColor.on('color:select', _.bind(this.onColorsBackSelect, this));
}
this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
this.borderColor.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
@ -842,7 +814,6 @@ define([
textSelectBorders : 'Select borders that you want to change',
textAdvanced : 'Show advanced settings',
txtNoBorders : 'No borders',
textNewColor : 'Add New Custom Color',
textTemplate : 'Select From Template',
textRows : 'Rows',
textColumns : 'Columns',

78
apps/documenteditor/main/app/view/TableSettingsAdvanced.js
View file

@ -879,67 +879,31 @@ define([ 'text!documenteditor/main/app/template/TableSettingsAdvanced.templat
this.cmbBorderSize.on('selected', _.bind(this.onBorderSizeSelect, this));
this.btnBorderColor = new Common.UI.ColorButton({
parentEl: $('#tableadv-border-color-btn'),
style: "width:45px;",
menu : new Common.UI.Menu({
additionalAlign: this.menuAddAlign,
items: [
{ template: _.template('<div id="tableadv-border-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
{ template: _.template('<a id="tableadv-border-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
]
})
additionalAlign: this.menuAddAlign
});
this.btnBorderColor.on('render:after', function(btn) {
me.colorsBorder = new Common.UI.ThemeColorPalette({
el: $('#tableadv-border-color-menu')
});
me.colorsBorder.on('select', _.bind(me.onColorsBorderSelect, me));
});
this.btnBorderColor.render( $('#tableadv-border-color-btn'));
this.btnBorderColor.on('color:select', _.bind(me.onColorsBorderSelect, me));
this.btnBorderColor.setColor('000000');
$('#tableadv-border-color-new').on('click', _.bind(this.addNewColor, this, this.colorsBorder, this.btnBorderColor));
this.colorsBorder = this.btnBorderColor.getPicker();
this.btnBackColor = new Common.UI.ColorButton({
parentEl: $('#tableadv-button-back-color'),
style: "width:45px;",
menu : new Common.UI.Menu({
additionalAlign: this.menuAddAlign,
items: [
{ template: _.template('<div id="tableadv-back-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
{ template: _.template('<a id="tableadv-back-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
]
})
additionalAlign: this.menuAddAlign,
transparent: true
});
this.btnBackColor.on('render:after', function(btn) {
me.colorsBack = new Common.UI.ThemeColorPalette({
el: $('#tableadv-back-color-menu'),
transparent: true
});
me.colorsBack.on('select', _.bind(me.onColorsBackSelect, me));
});
this.btnBackColor.render( $('#tableadv-button-back-color'));
$('#tableadv-back-color-new').on('click', _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor));
this.btnBackColor.on('color:select', _.bind(this.onColorsBackSelect, this));
this.colorsBack = this.btnBackColor.getPicker();
this.btnTableBackColor = new Common.UI.ColorButton({
parentEl: $('#tableadv-button-table-back-color'),
style: "width:45px;",
menu : new Common.UI.Menu({
additionalAlign: this.menuAddAlign,
items: [
{ template: _.template('<div id="tableadv-table-back-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
{ template: _.template('<a id="tableadv-table-back-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
]
})
additionalAlign: this.menuAddAlign,
transparent: true
});
this.btnTableBackColor.on('render:after', function(btn) {
me.colorsTableBack = new Common.UI.ThemeColorPalette({
el: $('#tableadv-table-back-color-menu'),
transparent: true
});
me.colorsTableBack.on('select', _.bind(me.onColorsTableBackSelect, me));
});
this.btnTableBackColor.render( $('#tableadv-button-table-back-color'));
$('#tableadv-table-back-color-new').on('click', _.bind(this.addNewColor, this, this.colorsTableBack, this.btnTableBackColor));
this.btnTableBackColor.on('color:select', _.bind(this.onColorsTableBackSelect, this));
this.colorsTableBack = this.btnTableBackColor.getPicker();
this.tableBordersImageSpacing = new Common.UI.TableStyler({
el: $('#id-detablestyler-spacing'),
@ -1688,19 +1652,13 @@ define([ 'text!documenteditor/main/app/template/TableSettingsAdvanced.templat
this.tableBordersImageSpacing.setVirtualBorderSize( this.BorderSize.pxValue );
},
addNewColor: function(picker, btn) {
picker.addNewColor((typeof(btn.color) == 'object') ? btn.color.color : btn.color);
},
onColorsBorderSelect: function(picker, color) {
this.btnBorderColor.setColor(color);
onColorsBorderSelect: function(btn, color) {
var colorstr = (typeof(color) == 'object') ? color.color : color;
this.tableBordersImage.setVirtualBorderColor(colorstr);
this.tableBordersImageSpacing.setVirtualBorderColor(colorstr);
},
onColorsBackSelect: function(picker, color) {
this.btnBackColor.setColor(color);
onColorsBackSelect: function(btn, color) {
this.CellColor = {Value: 1, Color: color};
if (this._cellBackground === null)
@ -1719,8 +1677,7 @@ define([ 'text!documenteditor/main/app/template/TableSettingsAdvanced.templat
this.tableBordersImage.setCellsColor(colorstr);
},
onColorsTableBackSelect: function(picker, color) {
this.btnTableBackColor.setColor(color);
onColorsTableBackSelect: function(btn, color) {
this.TableColor.Color = color;
if (this._changedProps) {
@ -2132,7 +2089,6 @@ define([ 'text!documenteditor/main/app/template/TableSettingsAdvanced.templat
textBorderDesc: 'Click on diagramm or use buttons to select borders',
textTableBackColor: 'Table Background',
txtNoBorders: 'No borders',
textNewColor: 'Add New Custom Color',
textCenter: 'Center',
textMargin: 'Margin',
textPage: 'Page',

70
apps/documenteditor/main/app/view/TextArtSettings.js
View file

@ -193,8 +193,7 @@ define([
this.fireEvent('editcomplete', this);
},
onColorsBackSelect: function(picker, color) {
this.btnBackColor.setColor(color);
onColorsBackSelect: function(btn, color) {
this.ShapeColor = {Value: 1, Color: color};
if (this.api && !this._noApply) {
@ -217,10 +216,6 @@ define([
this.fireEvent('editcomplete', this);
},
addNewColor: function(picker, btn) {
picker.addNewColor((typeof(btn.color) == 'object') ? btn.color.color : btn.color);
},
onNumTransparencyChange: function(field, newValue, oldValue, eOpts){
this.sldrTransparency.setValue(field.getNumberValue(), true);
if (this.api) {
@ -347,8 +342,7 @@ define([
this.fireEvent('editcomplete', this);
},
onColorsGradientSelect: function(picker, color) {
this.btnGradColor.setColor(color);
onColorsGradientSelect: function(btn, color) {
this.GradColor.colors[this.GradColor.currentIdx] = color;
this.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(color) == 'object') ? color.color : color));
@ -510,8 +504,7 @@ define([
this.fireEvent('editcomplete', this);
},
onColorsBorderSelect: function(picker, color) {
this.btnBorderColor.setColor(color);
onColorsBorderSelect: function(btn, color) {
this.BorderColor = {Value: 1, Color: color};
if (this.api && this.BorderSize>0 && !this._noApply) {
var props = new Asc.asc_TextArtProperties();
@ -1100,62 +1093,32 @@ define([
if (this._initSettings) return;
if (!this.btnBackColor) {
this.btnBorderColor = new Common.UI.ColorButton({
style: "width:45px;",
menu : new Common.UI.Menu({
items: [
{ template: _.template('<div id="textart-border-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
{ template: _.template('<a id="textart-border-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
]
})
parentEl: $('#textart-border-color-btn'),
style: "width:45px;"
});
this.btnBorderColor.render( $('#textart-border-color-btn'));
this.btnBorderColor.setColor('000000');
this.lockedControls.push(this.btnBorderColor);
this.colorsBorder = new Common.UI.ThemeColorPalette({
el: $('#textart-border-color-menu'),
value: '000000'
});
this.colorsBorder.on('select', _.bind(this.onColorsBorderSelect, this));
this.btnBorderColor.menu.items[1].on('click', _.bind(this.addNewColor, this, this.colorsBorder, this.btnBorderColor));
this.colorsBorder = this.btnBorderColor.getPicker();
this.btnBorderColor.on('color:select', _.bind(this.onColorsBorderSelect, this));
this.btnGradColor = new Common.UI.ColorButton({
style: "width:45px;",
menu : new Common.UI.Menu({
items: [
{ template: _.template('<div id="textart-gradient-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
{ template: _.template('<a id="textart-gradient-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
]
})
parentEl: $('#textart-gradient-color-btn'),
style: "width:45px;"
});
this.btnGradColor.render( $('#textart-gradient-color-btn'));
this.btnGradColor.setColor('000000');
this.lockedControls.push(this.btnGradColor);
this.colorsGrad = new Common.UI.ThemeColorPalette({
el: $('#textart-gradient-color-menu'),
value: '000000'
});
this.colorsGrad.on('select', _.bind(this.onColorsGradientSelect, this));
this.btnGradColor.menu.items[1].on('click', _.bind(this.addNewColor, this, this.colorsGrad, this.btnGradColor));
this.colorsGrad = this.btnGradColor.getPicker();
this.btnGradColor.on('color:select', _.bind(this.onColorsGradientSelect, this));
this.btnBackColor = new Common.UI.ColorButton({
parentEl: $('#textart-back-color-btn'),
style: "width:45px;",
menu : new Common.UI.Menu({
items: [
{ template: _.template('<div id="textart-back-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
{ template: _.template('<a id="textart-back-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
]
})
});
this.btnBackColor.render( $('#textart-back-color-btn'));
this.btnBackColor.setColor('transparent');
this.lockedControls.push(this.btnBackColor);
this.colorsBack = new Common.UI.ThemeColorPalette({
el: $('#textart-back-color-menu'),
value: 'transparent',
transparent: true
});
this.colorsBack.on('select', _.bind(this.onColorsBackSelect, this));
this.btnBackColor.menu.items[1].on('click', _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor));
this.btnBackColor.setColor('transparent');
this.lockedControls.push(this.btnBackColor);
this.colorsBack = this.btnBackColor.getPicker();
this.btnBackColor.on('color:select', _.bind(this.onColorsBackSelect, this));
}
this.colorsBorder.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
@ -1197,7 +1160,6 @@ define([
strSize : 'Size',
strFill : 'Fill',
textColor : 'Color Fill',
textNewColor : 'Add New Custom Color',
strTransparency : 'Opacity',
textNoFill : 'No Fill',
textSelectTexture : 'Select',

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

@ -113,6 +113,7 @@
"Common.UI.Calendar.textShortTuesday": "Tu",
"Common.UI.Calendar.textShortWednesday": "We",
"Common.UI.Calendar.textYears": "Years",
"Common.UI.ColorButton.textNewColor": "Add New Custom Color",
"Common.UI.ComboBorderSize.txtNoBorders": "No borders",
"Common.UI.ComboBorderSizeEditable.txtNoBorders": "No borders",
"Common.UI.ComboDataView.emptyComboText": "No styles",

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

@ -113,6 +113,7 @@
"Common.UI.Calendar.textShortTuesday": "Вт",
"Common.UI.Calendar.textShortWednesday": "Ср",
"Common.UI.Calendar.textYears": "Годы",
"Common.UI.ColorButton.textNewColor": "Пользовательский цвет",
"Common.UI.ComboBorderSize.txtNoBorders": "Без границ",
"Common.UI.ComboBorderSizeEditable.txtNoBorders": "Без границ",
"Common.UI.ComboDataView.emptyComboText": "Без стилей",