[DE] Set highlight settings for all content controls

apps/documenteditor/main/app/controller/Toolbar.js

@@ -315,6 +315,9 @@ define([
             toolbar.listStyles.on('contextmenu',                        _.bind(this.onListStyleContextMenu, this));
             toolbar.styleMenu.on('hide:before',                         _.bind(this.onListStyleBeforeHide, this));
             toolbar.btnInsertEquation.on('click',                       _.bind(this.onInsertEquationClick, this));
+            toolbar.mnuNoControlsColor.on('click',                      _.bind(this.onNoControlsColor, this));
+            toolbar.mnuControlsColorPicker.on('select',                 _.bind(this.onSelectControlsColor, this));
+            $('#id-toolbar-menu-new-control-color').on('click',         _.bind(this.onNewControlsColor, this));
 
             $('#id-save-style-plus, #id-save-style-link', toolbar.$el).on('click', this.onMenuSaveStyle.bind(this));
 
@@ -1645,6 +1648,26 @@ define([
             Common.NotificationCenter.trigger('edit:complete', this.toolbar);
         },
 
+        onNewControlsColor: function(picker, color) {
+            this.toolbar.mnuControlsColorPicker.addNewColor();
+        },
+
+        onNoControlsColor: function(item) {
+            this.api.asc_SetGlobalContentControlShowHighlight(!item.isChecked());
+            this.toolbar.mnuControlsColorPicker.clearSelection();
+        },
+
+        onSelectControlsColor: function(picker, color) {
+            var clr = Common.Utils.ThemeColor.getRgbColor(color);
+            if (this.api) {
+                this.toolbar.mnuNoControlsColor.setChecked(true, true);
+                this.api.asc_SetGlobalContentControlShowHighlight(true);
+                this.api.asc_SetGlobalContentControlHighlightColor(clr.get_r(), clr.get_g(), clr.get_b());
+            }
+
+            Common.component.Analytics.trackEvent('ToolBar', 'Content Controls Color');
+        },
+
         onColumnsSelect: function(menu, item) {
             if (_.isUndefined(item.value))
                 return;
@@ -2516,6 +2539,8 @@ define([
                 this.onParagraphColor(this._state.clrshd_asccolor);
             }
             this._state.clrshd_asccolor = undefined;
+
+            updateColors(this.toolbar.mnuControlsColorPicker, 1);
         },
 
         _onInitEditorStyles: function(styles) {

apps/documenteditor/main/app/view/Toolbar.js

@@ -643,6 +643,23 @@ define([
                                 {
                                     caption: this.mniEditControls,
                                     value: 'settings'
+                                },
+                                {
+                                    caption: this.mniHighlightControls,
+                                    value: 'highlight',
+                                    menu: new Common.UI.Menu({
+                                        menuAlign   : 'tl-tr',
+                                        items: [
+                                            this.mnuNoControlsColor = new Common.UI.MenuItem({
+                                                id: 'id-toolbar-menu-no-highlight-controls',
+                                                caption: this.textNoHighlight,
+                                                checkable: true
+                                            }),
+                                            {caption: '--'},
+                                            {template: _.template('<div id="id-toolbar-menu-controls-color" style="width: 169px; height: 220px; margin: 10px;"></div>')},
+                                            {template: _.template('<a id="id-toolbar-menu-new-control-color" style="padding-left:12px;">' + this.textNewColor + '</a>')}
+                                        ]
+                                    })
                                 }
                             ]
                         })
@@ -1949,6 +1966,12 @@ define([
                         transparent: true
                     });
                 }
+
+                if (this.btnContentControls.cmpEl) {
+                    this.mnuControlsColorPicker = new Common.UI.ThemeColorPalette({
+                        el: $('#id-toolbar-menu-controls-color')
+                    });
+                }
             },
 
             updateMetricUnit: function () {
@@ -2358,7 +2381,9 @@ define([
             textPlainControl: 'Plain text',
             textRemoveControl: 'Remove',
             mniEditControls: 'Settings',
-            tipControls: 'Insert content control'
+            tipControls: 'Insert content control',
+            mniHighlightControls: 'Highlight settings',
+            textNoHighlight: 'No highlighting'
         }
     })(), DE.Views.Toolbar || {}));
 });