From 44e25e39eaa335e49dad2427d51f8e266b9dc190 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Wed, 29 Apr 2020 17:37:59 +0300 Subject: [PATCH] [DE] Refactoring color button component --- apps/common/main/lib/component/ColorButton.js | 69 ++++++++++- .../main/app/view/ControlSettingsDialog.js | 40 ++----- .../main/app/view/DropcapSettingsAdvanced.js | 85 ++++--------- .../main/app/view/ListSettingsDialog.js | 54 +++------ .../main/app/view/ParagraphSettings.js | 28 ++--- .../app/view/ParagraphSettingsAdvanced.js | 53 ++------ .../main/app/view/ShapeSettings.js | 113 +++++------------- .../main/app/view/TableSettings.js | 45 ++----- .../main/app/view/TableSettingsAdvanced.js | 78 +++--------- .../main/app/view/TextArtSettings.js | 70 +++-------- apps/documenteditor/main/locale/en.json | 1 + apps/documenteditor/main/locale/ru.json | 1 + 12 files changed, 208 insertions(+), 429 deletions(-) diff --git a/apps/common/main/lib/component/ColorButton.js b/apps/common/main/lib/component/ColorButton.js index da2cd4624..44d71408c 100644 --- a/apps/common/main/lib/component/ColorButton.js +++ b/apps/common/main/lib/component/ColorButton.js @@ -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([ '' ].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('
') }, + { template: _.template('' + this.textNewColor + '') } + ]) + }); + 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 || {})); }); \ No newline at end of file diff --git a/apps/documenteditor/main/app/view/ControlSettingsDialog.js b/apps/documenteditor/main/app/view/ControlSettingsDialog.js index 295763422..d736fc090 100644 --- a/apps/documenteditor/main/app/view/ControlSettingsDialog.js +++ b/apps/documenteditor/main/app/view/ControlSettingsDialog.js @@ -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('<%= caption %>') - }, - {caption: '--'}, - { template: _.template('
') }, - { template: _.template('' + me.textNewColor + '') } - ] - }) + additionalItems: [{ + id: 'control-settings-system-color', + caption: this.textSystemColor, + template: _.template('<%= caption %>') + }, + {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', diff --git a/apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js b/apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js index a7a38058a..d491afb40 100644 --- a/apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js +++ b/apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js @@ -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('
') }, - { template: _.template('' + me.textNewColor + '') } - ] - }) + 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('
') }, - { template: _.template('' + me.textNewColor + '') } - ] - }) + 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', diff --git a/apps/documenteditor/main/app/view/ListSettingsDialog.js b/apps/documenteditor/main/app/view/ListSettingsDialog.js index 5ec2260a6..31a9abb4a 100644 --- a/apps/documenteditor/main/app/view/ListSettingsDialog.js +++ b/apps/documenteditor/main/app/view/ListSettingsDialog.js @@ -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('
') }, - { template: _.template('' + this.textNewColor + '') } - ] - }) + 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', diff --git a/apps/documenteditor/main/app/view/ParagraphSettings.js b/apps/documenteditor/main/app/view/ParagraphSettings.js index c683aa42f..a091d4dce 100644 --- a/apps/documenteditor/main/app/view/ParagraphSettings.js +++ b/apps/documenteditor/main/app/view/ParagraphSettings.js @@ -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('
') }, - { template: _.template('' + this.textNewColor + '') } - ] - })); - 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 || {})); }); \ No newline at end of file diff --git a/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js b/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js index f53a0ec94..8aa549ca7 100644 --- a/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js +++ b/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js @@ -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('
') }, - { template: _.template('' + me.textNewColor + '') } - ] - }) + 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('
') }, - { template: _.template('' + me.textNewColor + '') } - ] - }) + 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', diff --git a/apps/documenteditor/main/app/view/ShapeSettings.js b/apps/documenteditor/main/app/view/ShapeSettings.js index bc5488a8f..2a69356d5 100644 --- a/apps/documenteditor/main/app/view/ShapeSettings.js +++ b/apps/documenteditor/main/app/view/ShapeSettings.js @@ -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('
') }, - { template: _.template('' + this.textNewColor + '') } - ] - }) - }); - 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('
') }, - { template: _.template('' + this.textNewColor + '') } - ] - }) + 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('
') }, - { template: _.template('' + this.textNewColor + '') } - ] - }) + 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('
') }, - { template: _.template('' + this.textNewColor + '') } - ] - }) + 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('
') }, - { template: _.template('' + this.textNewColor + '') } - ] - }) + 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', diff --git a/apps/documenteditor/main/app/view/TableSettings.js b/apps/documenteditor/main/app/view/TableSettings.js index 788fa0ee4..cd7b73b9a 100644 --- a/apps/documenteditor/main/app/view/TableSettings.js +++ b/apps/documenteditor/main/app/view/TableSettings.js @@ -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('
') }, - { template: _.template('' + this.textNewColor + '') } - ] - }) + 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('
') }, - { template: _.template('' + this.textNewColor + '') } - ] - }) - }); - 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', diff --git a/apps/documenteditor/main/app/view/TableSettingsAdvanced.js b/apps/documenteditor/main/app/view/TableSettingsAdvanced.js index 55d042e4b..84781a33e 100644 --- a/apps/documenteditor/main/app/view/TableSettingsAdvanced.js +++ b/apps/documenteditor/main/app/view/TableSettingsAdvanced.js @@ -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('
') }, - { template: _.template('' + me.textNewColor + '') } - ] - }) + 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('
') }, - { template: _.template('' + me.textNewColor + '') } - ] - }) + 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('
') }, - { template: _.template('' + me.textNewColor + '') } - ] - }) + 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', diff --git a/apps/documenteditor/main/app/view/TextArtSettings.js b/apps/documenteditor/main/app/view/TextArtSettings.js index bcc33070b..c92cb9d65 100644 --- a/apps/documenteditor/main/app/view/TextArtSettings.js +++ b/apps/documenteditor/main/app/view/TextArtSettings.js @@ -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('
') }, - { template: _.template('' + this.textNewColor + '') } - ] - }) + 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('
') }, - { template: _.template('' + this.textNewColor + '') } - ] - }) + 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('
') }, - { template: _.template('' + this.textNewColor + '') } - ] - }) - }); - 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', diff --git a/apps/documenteditor/main/locale/en.json b/apps/documenteditor/main/locale/en.json index 7cc96cf00..dcb5433b1 100644 --- a/apps/documenteditor/main/locale/en.json +++ b/apps/documenteditor/main/locale/en.json @@ -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", diff --git a/apps/documenteditor/main/locale/ru.json b/apps/documenteditor/main/locale/ru.json index c675a72dc..7d0355398 100644 --- a/apps/documenteditor/main/locale/ru.json +++ b/apps/documenteditor/main/locale/ru.json @@ -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": "Без стилей",