[DE] Add background color in form settings

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

@@ -321,6 +321,7 @@ define([
             this.rightmenu.tableSettings.UpdateThemeColors();
             this.rightmenu.shapeSettings.UpdateThemeColors();
             this.rightmenu.textartSettings.UpdateThemeColors();
+            this.rightmenu.formSettings.UpdateThemeColors();
         },
 
         updateMetricUnit: function() {

apps/documenteditor/main/app/template/FormSettings.template

@@ -113,6 +113,12 @@
             <div id="form-color-btn" style="display: inline-block; float: right;"></div>
         </td>
     </tr>
+    <tr>
+        <td class="padding-large">
+            <label class="input-label" style="margin-top: 4px;"><%= scope.textBackgroundColor %></label>
+            <div id="form-background-color-btn" style="display: inline-block; float: right;"></div>
+        </td>
+    </tr>
 </table>
 <table cols="1">
     <tr>

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

@@ -659,6 +659,26 @@ define([
             }
         },
 
+        onColorBGSelect: function(btn, color) {
+            this.BackgroundColor = color;
+            this._state.BackgroundColor = undefined;
+
+            var props   = this._originalProps || new AscCommon.CContentControlPr();
+            var formPr = this._originalFormProps || new AscCommon.CSdtFormPr();
+
+            if (this.api) {
+                if (color === 'transparent') {
+                    formPr.put_Shd(false);
+                } else {
+                    formPr.put_Shd(true, Common.Utils.ThemeColor.getRgbColor(color));
+                }
+                props.put_FormPr(formPr);
+                this.api.asc_SetContentControlProperties(props, this.internalId);
+            }
+
+            this.fireEvent('editcomplete', this);
+        },
+
         onColorPickerSelect: function(btn, color) {
             this.BorderColor = color;
             this._state.BorderColor = undefined;
@@ -863,6 +883,45 @@ define([
                         (this.BorderColor != 'transparent') && this.mnuColorPicker.selectByRGB(typeof(this.BorderColor) == 'object' ? this.BorderColor.color : this.BorderColor,true);
                         this._state.BorderColor = this.BorderColor;
                     }
+
+                    var shd = formPr.get_Shd();
+                    if (shd) {
+                        var bgColor = shd.get_Color();
+                        if (bgColor) {
+                            if (bgColor.get_type() === Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
+                                this.BackgroundColor = {color: Common.Utils.ThemeColor.getHexColor(bgColor.get_r(), bgColor.get_g(), bgColor.get_b()), effectValue: bgColor.get_value() };
+                            } else {
+                                this.BackgroundColor = Common.Utils.ThemeColor.getHexColor(bgColor.get_r(), bgColor.get_g(), bgColor.get_b());
+                            }
+                        } else
+                            this.BackgroundColor = 'transparent';
+                    } else {
+                        this.BackgroundColor = 'transparent';
+                    }
+
+                    type1 = typeof(this.BackgroundColor);
+                    type2 = typeof(this._state.BackgroundColor);
+                    if ( (type1 !== type2) || (type1 === 'object' &&
+                        (this.BackgroundColor.effectValue!==this._state.BackgroundColor.effectValue || this._state.BackgroundColor.color.indexOf(this.BackgroundColor.color)<0)) ||
+                        (type1 !== 'object' && this._state.BackgroundColor.indexOf(this.BackgroundColor)<0 )) {
+
+                        this.btnBGColor.setColor(this.BackgroundColor);
+                        if ( typeof(this.BackgroundColor) == 'object' ) {
+                            var isselected = false;
+                            for (i=0; i<10; i++) {
+                                if ( Common.Utils.ThemeColor.ThemeValues[i] === this.BackgroundColor.effectValue ) {
+                                    this.mnuBGColorPicker.select(this.BackgroundColor, true);
+                                    isselected = true;
+                                    break;
+                                }
+                            }
+                            if (!isselected) this.mnuBGColorPicker.clearSelection();
+                        } else
+                            this.mnuBGColorPicker.select(this.BackgroundColor,true);
+
+                        this._state.BackgroundColor = this.BackgroundColor;
+                    }
+
                 }
 
                 var pictPr = props.get_PictureFormPr();
@@ -980,6 +1039,18 @@ define([
                 this.btnColor.setMenu();
                 this.mnuColorPicker = this.btnColor.getPicker();
             }
+            if (!this.btnBGColor) {
+                this.btnBGColor = new Common.UI.ColorButton({
+                    parentEl: $('#form-background-color-btn'),
+                    transparent: true,
+                    menu: true
+                });
+                this.lockedControls.push(this.btnBGColor);
+                this.btnBGColor.on('color:select', _.bind(this.onColorBGSelect, this));
+                this.btnBGColor.setMenu();
+                this.mnuBGColorPicker = this.btnBGColor.getPicker();
+            }
+            this.mnuBGColorPicker.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
         },
         
         onHideMenus: function(menu, e, isFromInputControl){
@@ -1090,7 +1161,8 @@ define([
         textNever: 'Never',
         textTooBig: 'Image is Too Big',
         textTooSmall: 'Image is Too Small',
-        textScale: 'When to scale'
+        textScale: 'When to scale',
+        textBackgroundColor: 'Background Color'
 
     }, DE.Views.FormSettings || {}));
 });

apps/documenteditor/main/locale/en.json

@@ -1776,6 +1776,7 @@
   "DE.Views.FormSettings.textUnlock": "Unlock",
   "DE.Views.FormSettings.textValue": "Value Options",
   "DE.Views.FormSettings.textWidth": "Cell width",
+  "DE.Views.FormSettings.textBackgroundColor": "Background Color",
   "DE.Views.FormsTab.capBtnCheckBox": "Checkbox",
   "DE.Views.FormsTab.capBtnComboBox": "Combo Box",
   "DE.Views.FormsTab.capBtnDropDown": "Dropdown",