Merge pull request #114 from ONLYOFFICE/feature/highlight-forms

Feature/highlight forms

apps/common/main/lib/component/ThemeColorPalette.js

@@ -320,6 +320,33 @@ define([
             }
         },
 
+        selectByRGB: function(rgb, suppressEvent) {
+            var el = $(this.el);
+            el.find('a.' + this.selectedCls).removeClass(this.selectedCls);
+
+            var color = (typeof(rgb) == 'object') ? rgb.color : rgb;
+            if (/#?[a-fA-F0-9]{6}/.test(color)) {
+                color = /#?([a-fA-F0-9]{6})/.exec(color)[1].toUpperCase();
+            }
+
+            if (/^[a-fA-F0-9]{6}|transparent$/.test(color)) {
+                if (color != this.value || this.options.allowReselect) {
+                    var co = (color == 'transparent') ? el.find('a.color-transparent') : el.find('a.color-' + color).first();
+                    if (co.length==0)
+                        co = el.find('#'+color).first();
+                    if (co.length==0)
+                        co = el.find('a[color="'+color+'"]').first();
+                    if (co.length>0) {
+                        co.addClass(this.selectedCls);
+                        this.value = color;
+                    }
+                    if (suppressEvent !== true) {
+                        this.fireEvent('select', this, color);
+                    }
+                }
+            }
+        },
+
         updateColors: function(effectcolors, standartcolors, value) {
             if (effectcolors===undefined || standartcolors===undefined) return;
 

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));
 
@@ -362,6 +365,7 @@ define([
             this.api.asc_registerCallback('asc_onSectionProps',         _.bind(this.onSectionProps, this));
             this.api.asc_registerCallback('asc_onContextMenu',          _.bind(this.onContextMenu, this));
             this.api.asc_registerCallback('asc_onShowParaMarks',        _.bind(this.onShowParaMarks, this));
+            this.api.asc_registerCallback('asc_onChangeSdtGlobalSettings',_.bind(this.onChangeSdtGlobalSettings, this));
         },
 
         onChangeCompactView: function(view, compact) {
@@ -886,6 +890,19 @@ define([
             this._onInitEditorStyles(styles);
         },
 
+        onChangeSdtGlobalSettings: function() {
+            var show = this.api.asc_GetGlobalContentControlShowHighlight();
+            this.toolbar.mnuNoControlsColor.setChecked(!show, true);
+            this.toolbar.mnuControlsColorPicker.clearSelection();
+            if (show){
+                var clr = this.api.asc_GetGlobalContentControlHighlightColor();
+                if (clr) {
+                    clr = Common.Utils.ThemeColor.getHexColor(clr.r, clr.g, clr.b);
+                    this.toolbar.mnuControlsColorPicker.selectByRGB(clr, true);
+                }
+            }
+        },
+
         onNewDocument: function(btn, e) {
             if (this.api)
                 this.api.OpenNewDocument();
@@ -1647,6 +1664,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());
+            if (!item.isChecked())
+                this.api.asc_SetGlobalContentControlHighlightColor(220, 220, 220);
+        },
+
+        onSelectControlsColor: function(picker, color) {
+            var clr = Common.Utils.ThemeColor.getRgbColor(color);
+            if (this.api) {
+                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;
@@ -2518,6 +2555,9 @@ define([
                 this.onParagraphColor(this._state.clrshd_asccolor);
             }
             this._state.clrshd_asccolor = undefined;
+
+            updateColors(this.toolbar.mnuControlsColorPicker, 1);
+            this.onChangeSdtGlobalSettings();
         },
 
         _onInitEditorStyles: function(styles) {

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

@@ -228,7 +228,7 @@ define([
                 val = props.get_Color();
                 val = (val) ? Common.Utils.ThemeColor.getHexColor(val.r, val.g, val.b) : '#000000';
                 this.btnColor.setColor(val);
-                this.colors.select(val,true);
+                this.colors.selectByRGB(val,true);
 
                 val = props.get_Lock();
                 (val===undefined) && (val = Asc.c_oAscSdtLockType.Unlocked);

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>')}
+                                        ]
+                                    })
                                 }
                             ]
                         })
@@ -1933,6 +1950,12 @@ define([
                         transparent: true
                     });
                 }
+
+                if (this.btnContentControls.cmpEl) {
+                    this.mnuControlsColorPicker = new Common.UI.ThemeColorPalette({
+                        el: $('#id-toolbar-menu-controls-color')
+                    });
+                }
             },
 
             updateMetricUnit: function () {
@@ -2342,7 +2365,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 || {}));
 });

apps/documenteditor/main/locale/en.json

@@ -1937,5 +1937,8 @@
   "DE.Views.Toolbar.txtScheme6": "Concourse",
   "DE.Views.Toolbar.txtScheme7": "Equity",
   "DE.Views.Toolbar.txtScheme8": "Flow",
-  "DE.Views.Toolbar.txtScheme9": "Foundry"
+  "DE.Views.Toolbar.txtScheme9": "Foundry",
+  "DE.Views.Toolbar.mniHighlightControls": "Highlight settings",
+  "DE.Views.Toolbar.textNoHighlight": "No highlighting"
+
 }