diff --git a/apps/common/main/lib/component/ColorButton.js b/apps/common/main/lib/component/ColorButton.js index c945965e4e..cc3be8503c 100644 --- a/apps/common/main/lib/component/ColorButton.js +++ b/apps/common/main/lib/component/ColorButton.js @@ -101,13 +101,14 @@ define([ if (options.eyeDropper) { eyedropper.push({ id: id + '-eyedropper', - caption: this.textEyedropper + caption: this.textEyedropper, + iconCls: 'menu__icon btn-eyedropper' }); } var menu = new Common.UI.Menu({ id: id, - cls: 'shifted-left', + cls: 'color-menu ' + (options.eyeDropper ? 'shifted-right' : 'shifted-left'), additionalAlign: options.additionalAlign, items: (options.additionalItems ? options.additionalItems : []).concat(auto).concat([ { template: _.template('
') }, diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less index 961621877d..24c49f932f 100644 --- a/apps/common/main/resources/less/buttons.less +++ b/apps/common/main/resources/less/buttons.less @@ -814,6 +814,27 @@ } } +.color-menu.dropdown-menu.shifted-right { + li > a { + padding-left: 32px; + + .rtl & { + padding-left: 20px; + padding-right: 32px; + } + + span.color-auto { + margin-left: -18px; + margin-top: 1px; + + .rtl & { + margin-left: 0; + margin-right: -18px; + } + } + } +} + .btn-options { padding: 0; diff --git a/apps/documenteditor/main/app/controller/Main.js b/apps/documenteditor/main/app/controller/Main.js index aa4c13932e..74851e2ffc 100644 --- a/apps/documenteditor/main/app/controller/Main.js +++ b/apps/documenteditor/main/app/controller/Main.js @@ -955,7 +955,8 @@ define([ // this.getMainMenu().closeFullScaleMenu(); var application = this.getApplication(), toolbarController = application.getController('Toolbar'), - toolbarView = toolbarController.getView(); + toolbarView = toolbarController.getView(), + rightMenu = application.getController('RightMenu').getView('RightMenu'); if (this.appOptions.isEdit && toolbarView && (toolbarView.btnInsertShape.pressed || toolbarView.btnInsertText.pressed) && ( !_.isObject(arguments[1]) || arguments[1].id !== 'tlbtn-insertshape')) { // TODO: Event from api is needed to clear btnInsertShape state @@ -970,7 +971,7 @@ define([ this.api.SetMarkerFormat(false); toolbarView.btnHighlightColor.toggle(false, false); } - if (this.appOptions.isEdit && toolbarView && toolbarView._isEyedropperStart) { + if (this.appOptions.isEdit && (toolbarView && toolbarView._isEyedropperStart || rightMenu && rightMenu._isEyedropperStart)) { this.api.asc_cancelEyedropper(); } application.getController('DocumentHolder').getView().focus(); diff --git a/apps/documenteditor/main/app/view/ParagraphSettings.js b/apps/documenteditor/main/app/view/ParagraphSettings.js index 38af8797d9..2804267db9 100644 --- a/apps/documenteditor/main/app/view/ParagraphSettings.js +++ b/apps/documenteditor/main/app/view/ParagraphSettings.js @@ -191,6 +191,7 @@ define([ disabled: this._locked, transparent: true, menu: true, + eyeDropper: true, dataHint: '1', dataHintDirection: 'bottom', dataHintOffset: 'medium' @@ -273,6 +274,8 @@ define([ 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.btnColor.on('eyedropper:start', this.onEyedropperStart.bind(this)); + this.btnColor.on('eyedropper:end', this.onEyedropperEnd.bind(this)); this.numIndentsLeft.on('change', this.onNumIndentsLeftChange.bind(this)); this.numIndentsRight.on('change', this.onNumIndentsRightChange.bind(this)); this.numSpecialBy.on('change', this.onFirstLineChange.bind(this)); @@ -687,6 +690,15 @@ define([ } }, + onEyedropperStart: function (btn) { + this.api.asc_startEyedropper(_.bind(btn.eyedropperEnd, btn)); + this.fireEvent('eyedropper', true); + }, + + onEyedropperEnd: function () { + this.fireEvent('eyedropper', false); + }, + strParagraphSpacing: 'Paragraph Spacing', strSomeParagraphSpace: 'Don\'t add interval between paragraphs of the same style', strLineHeight: 'Line Spacing', diff --git a/apps/documenteditor/main/app/view/RightMenu.js b/apps/documenteditor/main/app/view/RightMenu.js index f5fd200464..c36febc778 100644 --- a/apps/documenteditor/main/app/view/RightMenu.js +++ b/apps/documenteditor/main/app/view/RightMenu.js @@ -250,12 +250,13 @@ define([ var me = this; me.api = api; var _fire_editcomplete = function() {me.fireEvent('editcomplete', me);}; - this.paragraphSettings.setApi(api).on('editcomplete', _fire_editcomplete); + var _isEyedropperStart = function (isStart) {this._isEyedropperStart = isStart;}; + this.paragraphSettings.setApi(api).on('editcomplete', _fire_editcomplete).on('eyedropper', _.bind(_isEyedropperStart, this)); this.headerSettings.setApi(api).on('editcomplete', _fire_editcomplete); this.imageSettings.setApi(api).on('editcomplete', _fire_editcomplete); this.chartSettings.setApi(api).on('editcomplete', _fire_editcomplete); - this.tableSettings.setApi(api).on('editcomplete', _fire_editcomplete); - this.shapeSettings.setApi(api).on('editcomplete', _fire_editcomplete); + this.tableSettings.setApi(api).on('editcomplete', _fire_editcomplete).on('eyedropper', _.bind(_isEyedropperStart, this)); + this.shapeSettings.setApi(api).on('editcomplete', _fire_editcomplete).on('eyedropper', _.bind(_isEyedropperStart, this)); this.textartSettings.setApi(api).on('editcomplete', _fire_editcomplete); if (this.mergeSettings) this.mergeSettings.setApi(api).on('editcomplete', _fire_editcomplete); if (this.signatureSettings) this.signatureSettings.setApi(api).on('editcomplete', _fire_editcomplete); diff --git a/apps/documenteditor/main/app/view/ShapeSettings.js b/apps/documenteditor/main/app/view/ShapeSettings.js index a8d1cdd590..6fad1471e7 100644 --- a/apps/documenteditor/main/app/view/ShapeSettings.js +++ b/apps/documenteditor/main/app/view/ShapeSettings.js @@ -1884,6 +1884,7 @@ define([ parentEl: $('#shape-back-color-btn'), transparent: true, color: 'transparent', + eyeDropper: true, dataHint: '1', dataHintDirection: 'bottom', dataHintOffset: 'big' @@ -1891,10 +1892,13 @@ define([ this.fillControls.push(this.btnBackColor); this.colorsBack = this.btnBackColor.getPicker(); this.btnBackColor.on('color:select', _.bind(this.onColorsBackSelect, this)); + this.btnBackColor.on('eyedropper:start', _.bind(this.onEyedropperStart, this)); + this.btnBackColor.on('eyedropper:end', _.bind(this.onEyedropperEnd, this)); this.btnFGColor = new Common.UI.ColorButton({ parentEl: $('#shape-foreground-color-btn'), color: '000000', + eyeDropper: true, dataHint: '1', dataHintDirection: 'bottom', dataHintOffset: 'big' @@ -1902,10 +1906,13 @@ define([ this.fillControls.push(this.btnFGColor); this.colorsFG = this.btnFGColor.getPicker(); this.btnFGColor.on('color:select', _.bind(this.onColorsFGSelect, this)); + this.btnFGColor.on('eyedropper:start', _.bind(this.onEyedropperStart, this)); + this.btnFGColor.on('eyedropper:end', _.bind(this.onEyedropperEnd, this)); this.btnBGColor = new Common.UI.ColorButton({ parentEl: $('#shape-background-color-btn'), color: 'ffffff', + eyeDropper: true, dataHint: '1', dataHintDirection: 'bottom', dataHintOffset: 'big' @@ -1913,10 +1920,13 @@ define([ this.fillControls.push(this.btnBGColor); this.colorsBG = this.btnBGColor.getPicker(); this.btnBGColor.on('color:select', _.bind(this.onColorsBGSelect, this)); + this.btnBGColor.on('eyedropper:start', _.bind(this.onEyedropperStart, this)); + this.btnBGColor.on('eyedropper:end', _.bind(this.onEyedropperEnd, this)); this.btnGradColor = new Common.UI.ColorButton({ parentEl: $('#shape-gradient-color-btn'), color: '000000', + eyeDropper: true, dataHint: '1', dataHintDirection: 'bottom', dataHintOffset: 'big' @@ -1924,10 +1934,13 @@ define([ this.fillControls.push(this.btnGradColor); this.colorsGrad = this.btnGradColor.getPicker(); this.btnGradColor.on('color:select', _.bind(this.onColorsGradientSelect, this)); + this.btnGradColor.on('eyedropper:start', _.bind(this.onEyedropperStart, this)); + this.btnGradColor.on('eyedropper:end', _.bind(this.onEyedropperEnd, this)); this.btnBorderColor = new Common.UI.ColorButton({ parentEl: $('#shape-border-color-btn'), color: '000000', + eyeDropper: true, dataHint: '1', dataHintDirection: 'bottom', dataHintOffset: 'big' @@ -1935,6 +1948,8 @@ define([ this.lockedControls.push(this.btnBorderColor); this.colorsBorder = this.btnBorderColor.getPicker(); this.btnBorderColor.on('color:select', _.bind(this.onColorsBorderSelect, this)); + this.btnBorderColor.on('eyedropper:start', _.bind(this.onEyedropperStart, this)); + this.btnBorderColor.on('eyedropper:end', _.bind(this.onEyedropperEnd, this)); } this.colorsBorder.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); @@ -2094,6 +2109,15 @@ define([ } }, + onEyedropperStart: function (btn) { + this.api.asc_startEyedropper(_.bind(btn.eyedropperEnd, btn)); + this.fireEvent('eyedropper', true); + }, + + onEyedropperEnd: function () { + this.fireEvent('eyedropper', false); + }, + txtNoBorders : 'No Line', strStroke : 'Stroke', strColor : 'Color', diff --git a/apps/documenteditor/main/app/view/TableSettings.js b/apps/documenteditor/main/app/view/TableSettings.js index cdda7f4570..afcb2dc7c8 100644 --- a/apps/documenteditor/main/app/view/TableSettings.js +++ b/apps/documenteditor/main/app/view/TableSettings.js @@ -714,16 +714,20 @@ define([ parentEl: $('#table-border-color-btn'), color: 'auto', auto: true, + eyeDropper: true, dataHint: '1', dataHintDirection: 'bottom', dataHintOffset: 'big' }); this.lockedControls.push(this.btnBorderColor); this.borderColor = this.btnBorderColor.getPicker(); + this.btnBorderColor.on('eyedropper:start', _.bind(this.onEyedropperStart, this)); + this.btnBorderColor.on('eyedropper:end', _.bind(this.onEyedropperEnd, this)); this.btnBackColor = new Common.UI.ColorButton({ parentEl: $('#table-back-color-btn'), transparent: true, + eyeDropper: true, dataHint: '1', dataHintDirection: 'bottom', dataHintOffset: 'big' @@ -731,6 +735,8 @@ define([ this.lockedControls.push(this.btnBackColor); this.colorsBack = this.btnBackColor.getPicker(); this.btnBackColor.on('color:select', _.bind(this.onColorsBackSelect, this)); + this.btnBackColor.on('eyedropper:start', _.bind(this.onEyedropperStart, this)); + this.btnBackColor.on('eyedropper:end', _.bind(this.onEyedropperEnd, this)); } this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); this.borderColor.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); @@ -984,6 +990,15 @@ define([ } }, + onEyedropperStart: function (btn) { + this.api.asc_startEyedropper(_.bind(btn.eyedropperEnd, btn)); + this.fireEvent('eyedropper', true); + }, + + onEyedropperEnd: function () { + this.fireEvent('eyedropper', false); + }, + textBorders: 'Border\'s Style', textBorderColor: 'Color', textBackColor: 'Background color', diff --git a/apps/documenteditor/main/app/view/TextArtSettings.js b/apps/documenteditor/main/app/view/TextArtSettings.js index 7c86cdec48..5125b4612a 100644 --- a/apps/documenteditor/main/app/view/TextArtSettings.js +++ b/apps/documenteditor/main/app/view/TextArtSettings.js @@ -1242,6 +1242,7 @@ define([ this.btnBorderColor = new Common.UI.ColorButton({ parentEl: $('#textart-border-color-btn'), color: '000000', + eyeDropper: true, dataHint: '1', dataHintDirection: 'bottom', dataHintOffset: 'big' @@ -1249,10 +1250,13 @@ define([ this.lockedControls.push(this.btnBorderColor); this.colorsBorder = this.btnBorderColor.getPicker(); this.btnBorderColor.on('color:select', _.bind(this.onColorsBorderSelect, this)); + this.btnBorderColor.on('eyedropper:start', _.bind(this.onEyedropperStart, this)); + this.btnBorderColor.on('eyedropper:end', _.bind(this.onEyedropperEnd, this)); this.btnGradColor = new Common.UI.ColorButton({ parentEl: $('#textart-gradient-color-btn'), color: '000000', + eyeDropper: true, dataHint: '1', dataHintDirection: 'bottom', dataHintOffset: 'big' @@ -1260,11 +1264,14 @@ define([ this.lockedControls.push(this.btnGradColor); this.colorsGrad = this.btnGradColor.getPicker(); this.btnGradColor.on('color:select', _.bind(this.onColorsGradientSelect, this)); + this.btnGradColor.on('eyedropper:start', _.bind(this.onEyedropperStart, this)); + this.btnGradColor.on('eyedropper:end', _.bind(this.onEyedropperEnd, this)); this.btnBackColor = new Common.UI.ColorButton({ parentEl: $('#textart-back-color-btn'), transparent: true, color: 'transparent', + eyeDropper: true, dataHint: '1', dataHintDirection: 'bottom', dataHintOffset: 'big' @@ -1272,6 +1279,8 @@ define([ this.lockedControls.push(this.btnBackColor); this.colorsBack = this.btnBackColor.getPicker(); this.btnBackColor.on('color:select', _.bind(this.onColorsBackSelect, this)); + this.btnBackColor.on('eyedropper:start', _.bind(this.onEyedropperStart, this)); + this.btnBackColor.on('eyedropper:end', _.bind(this.onEyedropperEnd, this)); } this.colorsBorder.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); @@ -1398,6 +1407,15 @@ define([ } }, + onEyedropperStart: function (btn) { + this.api.asc_startEyedropper(_.bind(btn.eyedropperEnd, btn)); + this.fireEvent('eyedropper', true); + }, + + onEyedropperEnd: function () { + this.fireEvent('eyedropper', false); + }, + txtNoBorders : 'No Line', strStroke : 'Stroke', strColor : 'Color',