Merge pull request #1808 from ONLYOFFICE/fix/form-width

Fix/form width

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

@@ -94,17 +94,28 @@
             <div id="form-chb-comb"></div>
         </td>
     </tr>
+</table>
+<table cols="2">
     <tr class="form-textfield">
-        <td class="padding-small">
+        <td colspan=2>
-            <label class="input-label" style="margin-left: 22px;margin-top: 4px;"><%= scope.textWidth %></label>
+            <label class="input-label"><%= scope.textWidth %></label>
-            <div id="form-spin-width" style="display: inline-block; float: right;"></div>
         </td>
     </tr>
     <tr class="form-textfield">
-        <td class="padding-small">
+        <td class="padding-small" width="50%">
+            <div id="form-combo-width-rule" style="width: 85px;"></div>
+        </td>
+        <td class="padding-small" width="50%">
+            <div id="form-spin-width"></div>
+        </td>
+    </tr>
+    <tr class="form-textfield">
+        <td colspan=2 class="padding-small">
             <div class="separator horizontal"></div>
         </td>
     </tr>
+</table>
+<table cols="1">
     <tr class="form-image">
         <td class="padding-small">
             <label class="input-label"><%= scope.textScale %></label>

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

@@ -80,6 +80,12 @@ define([
             this._originalFormProps = null;
             this._originalProps = null;
 
+            this._arrWidthRule = [
+                {displayValue: this.textAuto,    value: Asc.CombFormWidthRule.Auto},
+                {displayValue: this.textAtLeast, value: Asc.CombFormWidthRule.AtLeast},
+                {displayValue: this.textExact,   value: Asc.CombFormWidthRule.Exact}
+            ];
+
             this.render();
         },
 
@@ -214,13 +220,26 @@ define([
             this.chComb.on('change', this.onChCombChanged.bind(this));
             this.lockedControls.push(this.chComb);
 
+            this.cmbWidthRule = new Common.UI.ComboBox({
+                el: $markup.findById('#form-combo-width-rule'),
+                cls: 'input-group-nr',
+                menuStyle: 'min-width: 85px;',
+                editable: false,
+                data: this._arrWidthRule,
+                dataHint: '1',
+                dataHintDirection: 'bottom',
+                dataHintOffset: 'big'
+            });
+            this.cmbWidthRule.setValue('');
+            this.cmbWidthRule.on('selected', this.onWidthRuleSelect.bind(this));
+
             this.spnWidth = new Common.UI.MetricSpinner({
                 el: $markup.findById('#form-spin-width'),
                 step: .1,
-                width: 64,
+                width: 85,
                 defaultUnit : "cm",
-                value: 'Auto',
+                value: '',
-                allowAuto: true,
+                allowAuto: false,
                 maxValue: 55.88,
                 minValue: 0.1,
                 dataHint: '1',
@@ -547,6 +566,7 @@ define([
             if (!checked) {
                 this.chComb.setValue(false, true);
                 this.spnWidth.setDisabled(true);
+                this.cmbWidthRule.setDisabled(true);
             }
             if (this.api && !this._noApply) {
                 var props   = this._originalProps || new AscCommon.CContentControlPr();
@@ -576,7 +596,8 @@ define([
                 this.chMaxChars.setValue(true, true);
                 this.spnMaxChars.setDisabled(false || this._state.DisabledControls);
             }
-            this.spnWidth.setDisabled(!checked || this._state.DisabledControls);
+            this.cmbWidthRule.setDisabled(!checked || this._state.Fixed || this._state.DisabledControls);
+            this.spnWidth.setDisabled(!checked || this._state.WidthRule===Asc.CombFormWidthRule.Auto || this._state.DisabledControls);
             if (this.api && !this._noApply) {
                 var props   = this._originalProps || new AscCommon.CContentControlPr();
                 var formTextPr = this._originalTextFormProps || new AscCommon.CSdtTextFormPr();
@@ -602,6 +623,7 @@ define([
                 if (this.spnWidth.getValue()) {
                     var value = this.spnWidth.getNumberValue();
                     formTextPr.put_Width(value<=0 ? 0 : parseInt(Common.Utils.Metric.fnRecalcToMM(value) * 72 * 20 / 25.4 + 0.5));
+                    formTextPr.put_WidthRule(this.cmbWidthRule.getValue());
                 } else
                     formTextPr.put_Width(0);
 
@@ -610,6 +632,19 @@ define([
             }
         },
 
+        onWidthRuleSelect: function(combo, record) {
+            if (this.api && !this._noApply) {
+                var props   = this._originalProps || new AscCommon.CContentControlPr();
+                var formTextPr = this._originalTextFormProps || new AscCommon.CSdtTextFormPr();
+                formTextPr.put_WidthRule(record.value);
+                if (record.value === Asc.CombFormWidthRule.Auto)
+                    formTextPr.put_Width(this._state.WidthPlaceholder);
+                props.put_TextFormPr(formTextPr);
+                this.api.asc_SetContentControlProperties(props, this.internalId);
+                this.fireEvent('editcomplete', this);
+            }
+        },
+
         onChRequired: function(field, newValue, oldValue, eOpts){
             var checked = (field.getValue()=='checked');
             if (this.api && !this._noApply) {
@@ -648,6 +683,8 @@ define([
 
         onChFixed: function(field, newValue, oldValue, eOpts){
             if (this.api && !this._noApply) {
+                var props   = this._originalProps || new AscCommon.CContentControlPr();
+                this.cmbWidthRule.setDisabled(!this._state.Comb || field.getValue()=='checked' || this._state.DisabledControls);
                 this.api.asc_SetFixedForm(this.internalId, field.getValue()=='checked');
                 this.fireEvent('editcomplete', this);
              }
@@ -1118,11 +1155,11 @@ define([
                     }
                     this.chAutofit.setDisabled(!this._state.Fixed || this._state.Comb || this._state.DisabledControls);
 
-                    this.spnWidth.setDisabled(!this._state.Comb || this._state.DisabledControls);
+                    this.cmbWidthRule.setDisabled(!this._state.Comb || this._state.Fixed || this._state.DisabledControls);
-                    val = formTextPr.get_Width();
+                    val = this._state.Fixed ? Asc.CombFormWidthRule.Exact : formTextPr.get_WidthRule();
-                    if ( (val===undefined || this._state.Width===undefined)&&(this._state.Width!==val) || Math.abs(this._state.Width-val)>0.1) {
+                    if ( this._state.WidthRule!==val ) {
-                        this.spnWidth.setValue(val!==0 && val!==undefined ? Common.Utils.Metric.fnRecalcFromMM(val * 25.4 / 20 / 72.0) : -1, true);
+                        this.cmbWidthRule.setValue((val !== null && val !== undefined) ? val : '');
-                        this._state.Width=val;
+                        this._state.WidthRule=val;
                     }
 
                     val = this.api.asc_GetTextFormAutoWidth();
@@ -1131,6 +1168,14 @@ define([
                         this._state.WidthPlaceholder=val;
                     }
 
+                    this.spnWidth.setDisabled(!this._state.Comb || this._state.WidthRule===Asc.CombFormWidthRule.Auto || this._state.DisabledControls);
+                    val = formTextPr.get_Width();
+                    val = (this._state.WidthRule===Asc.CombFormWidthRule.Auto || val===undefined || val===0) ? this._state.WidthPlaceholder : val;
+                    if ((val===undefined || this._state.Width===undefined)&&(this._state.Width!==val) || Math.abs(this._state.Width-val)>0.1) {
+                        this.spnWidth.setValue(val!==0 && val!==undefined ? Common.Utils.Metric.fnRecalcFromMM(val * 25.4 / 20 / 72.0) : '', true);
+                        this._state.Width=val;
+                    }
+
                     val = formTextPr.get_MaxCharacters();
                     this.chMaxChars.setValue(val && val>=0);
                     this.spnMaxChars.setDisabled(!val || val<0 || this._state.DisabledControls);
@@ -1161,7 +1206,7 @@ define([
                 }
                 var val = this._state.Width;
                 this.spnWidth && this.spnWidth.setMinValue(Common.Utils.Metric.fnRecalcFromMM(1));
-                this.spnWidth && this.spnWidth.setValue(val!==0 && val!==undefined ? Common.Utils.Metric.fnRecalcFromMM(val * 25.4 / 20 / 72.0) : -1, true);
+                this.spnWidth && this.spnWidth.setValue(val!==0 && val!==undefined ? Common.Utils.Metric.fnRecalcFromMM(val * 25.4 / 20 / 72.0) : '', true);
             }
         },
 
@@ -1230,7 +1275,8 @@ define([
                 });
             }
             this.spnMaxChars.setDisabled(this.chMaxChars.getValue()!=='checked' || this._state.DisabledControls);
-            this.spnWidth.setDisabled(!this._state.Comb || this._state.DisabledControls);
+            this.cmbWidthRule.setDisabled(!this._state.Comb || this._state.Fixed || this._state.DisabledControls);
+            this.spnWidth.setDisabled(!this._state.Comb || this._state.WidthRule===Asc.CombFormWidthRule.Auto || this._state.DisabledControls);
             this.chMulti.setDisabled(!this._state.Fixed || this._state.Comb || this._state.DisabledControls);
             this.chAutofit.setDisabled(!this._state.Fixed || this._state.Comb || this._state.DisabledControls);
             this.chAspect.setDisabled(this._state.scaleFlag === Asc.c_oAscPictureFormScaleFlag.Never || this._state.DisabledControls);
@@ -1376,7 +1422,10 @@ define([
         textTooSmall: 'Image is Too Small',
         textScale: 'When to scale',
         textBackgroundColor: 'Background Color',
-        textTag: 'Tag'
+        textTag: 'Tag',
+        textAuto: 'Auto',
+        textAtLeast: 'At least',
+        textExact: 'Exactly'
 
     }, DE.Views.FormSettings || {}));
 });

apps/documenteditor/main/locale/en.json

@@ -1865,6 +1865,9 @@
   "DE.Views.FormSettings.textUnlock": "Unlock",
   "DE.Views.FormSettings.textValue": "Value Options",
   "DE.Views.FormSettings.textWidth": "Cell width",
+  "DE.Views.FormSettings.textAuto": "Auto",
+  "DE.Views.FormSettings.textAtLeast": "At least",
+  "DE.Views.FormSettings.textExact": "Exactly",
   "DE.Views.FormsTab.capBtnCheckBox": "Checkbox",
   "DE.Views.FormsTab.capBtnComboBox": "Combo Box",
   "DE.Views.FormsTab.capBtnDownloadForm": "Download as oform",