diff --git a/apps/common/main/lib/component/ColorButton.js b/apps/common/main/lib/component/ColorButton.js index cdbbb0002..3f22195ee 100644 --- a/apps/common/main/lib/component/ColorButton.js +++ b/apps/common/main/lib/component/ColorButton.js @@ -71,16 +71,22 @@ define([ render: function(parentEl) { Common.UI.Button.prototype.render.call(this, parentEl); + if (this.options.auto) + this.autocolor = (typeof this.options.auto == 'object') ? this.options.auto.color || '000000' : '000000'; + if (this.options.color!==undefined) this.setColor(this.options.color); }, onColorSelect: function(picker, color) { this.setColor(color); + this.setAutoColor(false); this.trigger('color:select', this, color); }, setColor: function(color) { + if (color == 'auto' && this.options.auto) + color = this.autocolor; var span = $(this.cmpEl).find('button span:nth-child(1)'); this.color = color; @@ -98,6 +104,11 @@ define([ }); this.colorPicker.on('select', _.bind(this.onColorSelect, this)); this.cmpEl.find('#' + this.menu.id + '-color-new').on('click', _.bind(this.addNewColor, this)); + if (this.options.auto) { + this.cmpEl.find('#' + this.menu.id + '-color-auto').on('click', _.bind(this.onAutoColorSelect, this)); + this.colorAuto = this.cmpEl.find('#' + this.menu.id + '-color-auto > a'); + (color == 'auto') && this.setAutoColor(true); + } } return this.colorPicker; }, @@ -105,13 +116,24 @@ define([ getMenu: function(options) { if (typeof this.menu !== 'object') { options = options || this.options; - var height = options.paletteHeight || 216; - var id = Common.UI.getId(), - menu = new Common.UI.Menu({ + var height = options.paletteHeight || 216, + id = Common.UI.getId(), + auto = []; + if (options.auto) { + this.autocolor = (typeof options.auto == 'object') ? options.auto.color || '000000' : '000000'; + auto.push({ + id: id + '-color-auto', + caption: (typeof options.auto == 'object') ? options.auto.caption || this.textAutoColor : this.textAutoColor, + template: _.template('<%= caption %>') + }); + auto.push({caption: '--'}); + } + + var menu = new Common.UI.Menu({ id: id, cls: 'shifted-left', additionalAlign: options.additionalAlign, - items: (options.additionalItems ? options.additionalItems : []).concat([ + items: (options.additionalItems ? options.additionalItems : []).concat(auto).concat([ { template: _.template('
') }, { template: _.template('' + this.textNewColor + '') } ]) @@ -131,7 +153,27 @@ define([ this.colorPicker && this.colorPicker.addNewColor((typeof(this.color) == 'object') ? this.color.color : this.color); }, - textNewColor: 'Add New Custom Color' + onAutoColorSelect: function() { + this.setColor('auto'); + this.setAutoColor(true); + this.colorPicker && this.colorPicker.clearSelection(); + this.trigger('auto:select', this, this.autocolor); + }, + + setAutoColor: function(selected) { + if (!this.colorAuto) return; + if (selected && !this.colorAuto.hasClass('selected')) + this.colorAuto.addClass('selected'); + else if (!selected && this.colorAuto.hasClass('selected')) + this.colorAuto.removeClass('selected'); + }, + + isAutoColor: function() { + return this.colorAuto && this.colorAuto.hasClass('selected'); + }, + + textNewColor: 'Add New Custom Color', + textAutoColor: 'Automatic' }, Common.UI.ColorButton || {})); }); \ No newline at end of file diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less index 77f7e9f2e..a06138bec 100644 --- a/apps/common/main/resources/less/buttons.less +++ b/apps/common/main/resources/less/buttons.less @@ -595,6 +595,18 @@ } } +// for color button auto color +.dropdown-menu { + li > a.selected, + li > a:hover { + span.color-auto { + outline: 1px solid #000; + border: 1px solid #fff; + } + } +} + + .btn-options { padding: 0; margin:0; diff --git a/apps/documenteditor/main/app/view/ControlSettingsDialog.js b/apps/documenteditor/main/app/view/ControlSettingsDialog.js index db0d6c3f2..8717bdfe5 100644 --- a/apps/documenteditor/main/app/view/ControlSettingsDialog.js +++ b/apps/documenteditor/main/app/view/ControlSettingsDialog.js @@ -130,14 +130,12 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template', this.btnColor = new Common.UI.ColorButton({ parentEl: $('#control-settings-color-btn'), - additionalItems: [{ - id: 'control-settings-system-color', - caption: this.textSystemColor, - template: _.template('<%= caption %>') - }, - {caption: '--'}], + auto: { + caption: this.textSystemColor, + color: Common.Utils.ThemeColor.getHexColor(220, 220, 220) + }, additionalAlign: this.menuAddAlign, - color: '000000', + color: 'auto', colors: ['000000', '993300', '333300', '003300', '003366', '000080', '333399', '333333', '800000', 'FF6600', '808000', '00FF00', '008080', '0000FF', '666699', '808080', 'FF0000', 'FF9900', '99CC00', '339966', '33CCCC', '3366FF', '800080', '999999', 'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF', @@ -145,9 +143,7 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template', ], paletteHeight: 94 }); - 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({ el: $('#control-settings-btn-all') @@ -381,21 +377,6 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template', }, 100); }, - 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; - }, - - onSystemColor: function(e) { - var color = Common.Utils.ThemeColor.getHexColor(220, 220, 220); - this.btnColor.setColor(color); - this.colors.clearSelection(); - var clr_item = this.btnColor.menu.$el.find('#control-settings-system-color > a'); - !clr_item.hasClass('selected') && clr_item.addClass('selected'); - this.isSystemColor = true; - }, - afterRender: function() { this.updateMetricUnit(); this._setDefaults(this.props); @@ -424,16 +405,14 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template', (val!==null && val!==undefined) && this.cmbShow.setValue(val); val = props.get_Color(); - this.isSystemColor = (val===null); if (val) { val = Common.Utils.ThemeColor.getHexColor(val.get_r(), val.get_g(), val.get_b()); this.colors.selectByRGB(val,true); } else { this.colors.clearSelection(); - var clr_item = this.btnColor.menu.$el.find('#control-settings-system-color > a'); - !clr_item.hasClass('selected') && clr_item.addClass('selected'); - val = Common.Utils.ThemeColor.getHexColor(220, 220, 220); + val = 'auto'; } + this.btnColor.setAutoColor(val == 'auto'); this.btnColor.setColor(val); val = props.get_Lock(); @@ -568,7 +547,7 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template', props.put_PlaceholderText(this.txtPlaceholder.getValue() || ' '); props.put_Appearance(this.cmbShow.getValue()); - if (this.isSystemColor) { + if (this.btnColor.isAutoColor()) { props.put_Color(null); } else { var color = Common.Utils.ThemeColor.getRgbColor(this.colors.getColor()); @@ -678,7 +657,7 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template', if (this.api) { var props = new AscCommon.CContentControlPr(); props.put_Appearance(this.cmbShow.getValue()); - if (this.isSystemColor) { + if (this.btnColor.isAutoColor()) { props.put_Color(null); } else { var color = Common.Utils.ThemeColor.getRgbColor(this.colors.getColor()); diff --git a/apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js b/apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js index b5da68de6..eab91f096 100644 --- a/apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js +++ b/apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js @@ -163,11 +163,15 @@ define([ this.btnBorderColor = new Common.UI.ColorButton({ parentEl: $('#drop-advanced-button-bordercolor'), additionalAlign: this.menuAddAlign, - color: '000000' + color: 'auto', + auto: true }); this.btnBorderColor.on('color:select', _.bind(function(btn, color) { this.tableStyler.setVirtualBorderColor((typeof(color) == 'object') ? color.color : color); }, this)); + this.btnBorderColor.on('auto:select', _.bind(function(btn, color) { + this.tableStyler.setVirtualBorderColor((typeof(color) == 'object') ? color.color : color); + }, this)); this.colorsBorder = this.btnBorderColor.getPicker(); this.btnBackColor = new Common.UI.ColorButton({ @@ -668,13 +672,16 @@ define([ if (this.borderProps !== undefined) { this.btnBorderColor.setColor(this.borderProps.borderColor); - this.tableStyler.setVirtualBorderColor((typeof(this.borderProps.borderColor) == 'object') ? this.borderProps.borderColor.color : this.borderProps.borderColor); + this.btnBorderColor.setAutoColor(this.borderProps.borderColor=='auto'); + this.tableStyler.setVirtualBorderColor((typeof(this.btnBorderColor.color) == 'object') ? this.btnBorderColor.color.color : this.btnBorderColor.color); + if (this.borderProps.borderColor=='auto') + this.colorsBorder.clearSelection(); + else + this.colorsBorder.select(this.borderProps.borderColor,true); this.cmbBorderSize.setValue(this.borderProps.borderSize.ptValue); this.BorderSize = {ptValue: this.borderProps.borderSize.ptValue, pxValue: this.borderProps.borderSize.pxValue}; this.tableStyler.setVirtualBorderSize(this.BorderSize.pxValue); - - this.colorsBorder.select(this.borderProps.borderColor); } this.setTitle((this.isFrame) ? this.textTitleFrame : this.textTitle); @@ -775,7 +782,7 @@ define([ paragraphProps : this._changedProps, borderProps : { borderSize : this.BorderSize, - borderColor : this.btnBorderColor.color + borderColor : this.btnBorderColor.isAutoColor() ? 'auto' : this.btnBorderColor.color } }; }, @@ -1086,7 +1093,13 @@ define([ var size = parseFloat(this.BorderSize.ptValue); border.put_Value(1); border.put_Size(size * 25.4 / 72.0); - var color = Common.Utils.ThemeColor.getRgbColor(this.btnBorderColor.color); + var color; + if (this.btnBorderColor.isAutoColor()) { + color = new Asc.asc_CColor(); + color.put_auto(true); + } else { + color = Common.Utils.ThemeColor.getRgbColor(this.btnBorderColor.color); + } border.put_Color(color); } else { diff --git a/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js b/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js index 6eb3ee1e9..c948f4679 100644 --- a/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js +++ b/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js @@ -376,10 +376,12 @@ define([ 'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem this.btnBorderColor = new Common.UI.ColorButton({ parentEl: $('#paragraphadv-border-color-btn'), additionalAlign: this.menuAddAlign, - color: '000000' + color: 'auto', + auto: true }); this.colorsBorder = this.btnBorderColor.getPicker(); this.btnBorderColor.on('color:select', _.bind(this.onColorsBorderSelect, this)); + this.btnBorderColor.on('auto:select', _.bind(this.onColorsBorderSelect, this)); this.BordersImage = new Common.UI.TableStyler({ el: $('#id-deparagraphstyler'), @@ -781,7 +783,7 @@ define([ 'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem var horizontalAlign = this.cmbTextAlignment.getValue(); this._changedProps.asc_putJc((horizontalAlign !== undefined && horizontalAlign !== null) ? horizontalAlign : c_paragraphTextAlignment.LEFT); - return { paragraphProps: this._changedProps, borderProps: {borderSize: this.BorderSize, borderColor: this.btnBorderColor.color} }; + return { paragraphProps: this._changedProps, borderProps: {borderSize: this.BorderSize, borderColor: this.btnBorderColor.isAutoColor() ? 'auto' : this.btnBorderColor.color} }; }, _setDefaults: function(props) { @@ -962,14 +964,18 @@ define([ 'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem if (this.borderProps !== undefined) { this.btnBorderColor.setColor(this.borderProps.borderColor); - this.BordersImage.setVirtualBorderColor((typeof(this.borderProps.borderColor) == 'object') ? this.borderProps.borderColor.color : this.borderProps.borderColor); + this.btnBorderColor.setAutoColor(this.borderProps.borderColor=='auto'); + this.BordersImage.setVirtualBorderColor((typeof(this.btnBorderColor.color) == 'object') ? this.btnBorderColor.color.color : this.btnBorderColor.color); + + if (this.borderProps.borderColor=='auto') + this.colorsBorder.clearSelection(); + else + this.colorsBorder.select(this.borderProps.borderColor,true); this.cmbBorderSize.setValue(this.borderProps.borderSize.ptValue); var rec = this.cmbBorderSize.getSelectedRecord(); if (rec) this.onBorderSizeSelect(this.cmbBorderSize, rec); - - this.colorsBorder.select(this.borderProps.borderColor,true); } for (var i=0; i