[DE] Added table settings: change width/height, distribute rows/columns.

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

@@ -260,6 +260,7 @@ define([
             this.rightmenu.paragraphSettings.updateMetricUnit();
             this.rightmenu.chartSettings.updateMetricUnit();
             this.rightmenu.imageSettings.updateMetricUnit();
+            this.rightmenu.tableSettings.updateMetricUnit();
         },
 
         createDelayedElements: function() {

apps/documenteditor/main/app/template/TableSettings.template

@@ -95,14 +95,9 @@
         </td>
     </tr>
     <tr>
-        <td colspan=2>
+        <td class="padding-small" colspan=2>
-            <label class="header"><%= scope.textWrap %></label>
+            <label class="header" style="margin-top: 3px;"><%= scope.textEdit %></label>
-        </td>
+            <div id="table-btn-edit" style="display: inline-block; float:right;"></div>
-    </tr>
-    <tr>
-        <td class="padding-small">
-            <div id="table-button-wrap-none" style="display: inline-block; margin-right:5px;"></div>
-            <div id="table-button-wrap-parallel" style="display: inline-block; margin-right:5px;"></div>
         </td>
     </tr>
     <tr>
@@ -110,10 +105,31 @@
             <div class="separator horizontal"></div>
         </td>
     </tr>
+    <tr>
+        <td colspan=2>
+            <label class="header"><%= scope.textCellSize %></label>
+        </td>
+    </tr>
     <tr>
         <td class="padding-small" colspan=2>
-            <label class="header" style="margin-top: 3px;"><%= scope.textEdit %></label>
+            <label style="margin-top: 3px;"><%= scope.textHeight %></label>
-            <div id="table-btn-edit" style="display: inline-block; float:right;"></div>
+            <div id="table-spin-cell-height" style="display: inline-block; float:right;"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <label style="margin-top: 3px;"><%= scope.textWidth %></label>
+            <div id="table-spin-cell-width" style="display: inline-block; float:right;"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <button type="button" class="btn btn-text-default" id="table-btn-distrub-rows" style="width:100%;"><%= scope.textDistributeRows %></button>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <button type="button" class="btn btn-text-default" id="table-btn-distrub-cols" style="width:100%;"><%= scope.textDistributeCols %></button>
         </td>
     </tr>
     <tr>

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

@@ -79,14 +79,11 @@ define([
                 CheckFirst: false,
                 CheckLast: false,
                 CheckColBanded: false,
-                WrapStyle: -1,
-                CanBeFlow: true,
-                TableAlignment: -1,
-                TableIndent: 0,
                 BackColor: '#000000',
                 RepeatRow: false,
                 DisabledControls: false
             };
+            this.spinners = [];
             this.lockedControls = [];
             this._locked = false;
             this._originalLook = new Asc.CTablePropLook();
@@ -96,7 +93,6 @@ define([
             this.CellColor = {Value: 1, Color: 'transparent'};  // value=1 - цвет определен - прозрачный или другой, value=0 - цвет не определен, рисуем прозрачным
             this.BorderSize = 1;
             this._noApply = false;
-            this._wrapHandled = false;
 
             this.render();
         },
@@ -140,24 +136,6 @@ define([
             this.fireEvent('editcomplete', this);
         },
 
-        onBtnWrapClick: function(btn, e) {
-            if (this.api && btn.pressed && !this._noApply) {
-                var properties = new Asc.CTableProp();
-                properties.put_TableWrap(btn.options.posId);
-                if (btn.options.posId == c_tableWrap.TABLE_WRAP_NONE) {
-                    if (this._state.TableAlignment<0)
-                        this._state.TableAlignment = c_tableAlign.TABLE_ALIGN_LEFT;
-                    properties.put_TableAlignment(this._state.TableAlignment);
-                    properties.put_TableIndent(this._state.TableIndent);
-                }
-                properties.put_CellSelect(true);
-                this.api.tblApply(properties);
-            }
-            if (this._wrapHandled) { this._wrapHandled = false; return; }
-            this._wrapHandled = true;
-            this.fireEvent('editcomplete', this);
-        },
-
         onCheckRepeatRowChange: function(field, newValue, oldValue, eOpts) {
             if (this.api)   {
                 var properties = new Asc.CTableProp();
@@ -259,8 +237,6 @@ define([
         setApi: function(o) {
             this.api = o;
             if (o) {
-                this.api.asc_registerCallback('asc_onTblWrapStyleChanged', _.bind(this._TblWrapStyleChanged, this));
-                this.api.asc_registerCallback('asc_onTblAlignChanged', _.bind(this._TblAlignChanged, this));
                 this.api.asc_registerCallback('asc_onInitTableTemplates', _.bind(this._onInitTemplates, this));
             }
             return this;
@@ -310,32 +286,6 @@ define([
             this.chLast.on('change', _.bind(this.onCheckTemplateChange, this, 4));
             this.chColBanded.on('change', _.bind(this.onCheckTemplateChange, this, 5));
 
-            this.btnWrapNone = new Common.UI.Button({
-                cls: 'btn-options huge',
-                iconCls: 'icon-right-panel btn-wrap-none',
-                posId: c_tableWrap.TABLE_WRAP_NONE,
-                hint: this.textWrapNoneTooltip,
-                enableToggle: true,
-                allowDepress: false,
-                toggleGroup : 'tablewrapGroup'
-            });
-            this.btnWrapNone.render( $('#table-button-wrap-none')) ;
-            this.btnWrapNone.on('click', _.bind(this.onBtnWrapClick, this));
-            this.lockedControls.push(this.btnWrapNone);
-
-            this.btnWrapParallel = new Common.UI.Button({
-                cls: 'btn-options huge',
-                iconCls: 'icon-right-panel btn-wrap-parallel',
-                posId: c_tableWrap.TABLE_WRAP_PARALLEL,
-                hint: this.textWrapParallelTooltip,
-                enableToggle: true,
-                allowDepress: false,
-                toggleGroup : 'tablewrapGroup'
-            });
-            this.btnWrapParallel.render( $('#table-button-wrap-parallel')) ;
-            this.btnWrapParallel.on('click', _.bind(this.onBtnWrapClick, this));
-            this.lockedControls.push(this.btnWrapParallel);
-
             var _arrBorderPosition = [
                 ['l', 'btn-borders-small btn-position-left', 'table-button-border-left',            this.tipLeft],
                 ['c','btn-borders-small btn-position-inner-vert', 'table-button-border-inner-vert', this.tipInnerVert],
@@ -417,6 +367,50 @@ define([
             this.chRepeatRow.on('change', _.bind(this.onCheckRepeatRowChange, this));
             this.lockedControls.push(this.chRepeatRow);
 
+            this.numHeight = new Common.UI.MetricSpinner({
+                el: $('#table-spin-cell-height'),
+                step: .1,
+                width: 115,
+                defaultUnit : "cm",
+                value: '1 cm',
+                maxValue: 55.88,
+                minValue: 0
+            });
+            this.numHeight.on('change', _.bind(function(field, newValue, oldValue, eOpts){
+                // this._changedProps.put_Height(this.cmbUnit.getValue() ? -field.getNumberValue() : Common.Utils.Metric.fnRecalcToMM(field.getNumberValue()));
+            }, this));
+            this.lockedControls.push(this.numHeight);
+            this.spinners.push(this.numHeight);
+
+            this.numWidth = new Common.UI.MetricSpinner({
+                el: $('#table-spin-cell-width'),
+                step: .1,
+                width: 115,
+                defaultUnit : "cm",
+                value: '1 cm',
+                maxValue: 55.88,
+                minValue: 0
+            });
+            this.numWidth.on('change', _.bind(function(field, newValue, oldValue, eOpts){
+                // this._changedProps.put_Width(this.cmbUnit.getValue() ? -field.getNumberValue() : Common.Utils.Metric.fnRecalcToMM(field.getNumberValue()));
+            }, this));
+            this.lockedControls.push(this.numWidth);
+            this.spinners.push(this.numWidth);
+
+            this.btnDistributeRows = new Common.UI.Button({
+                el: $('#table-btn-distrub-rows')
+            });
+            this.lockedControls.push(this.btnDistributeRows);
+            this.btnDistributeRows.on('click', _.bind(function(field, newValue, oldValue, eOpts){
+            }, this));
+
+            this.btnDistributeCols = new Common.UI.Button({
+                el: $('#table-btn-distrub-cols')
+            });
+            this.lockedControls.push(this.btnDistributeCols);
+            this.btnDistributeCols.on('click', _.bind(function(field, newValue, oldValue, eOpts){
+            }, this));
+
             this.linkAdvanced = $('#table-advanced-link');
             $(this.el).on('click', '#table-advanced-link', _.bind(this.openAdvancedSettings, this));
         },
@@ -424,6 +418,7 @@ define([
         createDelayedElements: function() {
             this.createDelayedControls();
             this.UpdateThemeColors();
+            this.updateMetricUnit();
             this._initSettings = false;
         },
 
@@ -438,17 +433,16 @@ define([
                 this._originalProps = new Asc.CTableProp(props);
                 this._originalProps.put_CellSelect(true);
 
-                this._TblWrapStyleChanged(props.get_TableWrap());
+                var value = null;//props.get_Width();
-
+                if ( Math.abs(this._state.Width-value)>0.001 ||
-                var value = props.get_CanBeFlow() && !this._locked;
+                    (this._state.Width===null || value===null)&&(this._state.Width!==value)) {
-                if ( this._state.CanBeFlow!==value ) {
+                    this.numWidth.setValue((value !== null) ? Common.Utils.Metric.fnRecalcFromMM(value) : '', true);
-                    this.btnWrapParallel.setDisabled(!value);
+                }
-                    this._state.CanBeFlow=value;
+                value = null;//props.get_Height();
+                if ( Math.abs(this._state.Height-value)>0.001 ||
+                    (this._state.Height===null || value===null)&&(this._state.Height!==value)) {
+                    this.numHeight.setValue((value !== null) ? Common.Utils.Metric.fnRecalcFromMM(value) : '', true);
                 }
-
-                // align props
-                this._TblAlignChanged(props.get_TableAlignment());
-                this._state.TableIndent = (props.get_TableAlignment() !== c_tableAlign.TABLE_ALIGN_LEFT) ? 0 : props.get_TableIndent();
 
                 //for table-template
                 value = props.get_TableStyle();
@@ -567,6 +561,16 @@ define([
             }
         },
 
+        updateMetricUnit: function() {
+            if (this.spinners) {
+                for (var i=0; i<this.spinners.length; i++) {
+                    var spinner = this.spinners[i];
+                    spinner.setDefaultUnit(Common.Utils.Metric.getCurrentMetricName());
+                    spinner.setStep(Common.Utils.Metric.getCurrentMetric()==Common.Utils.Metric.c_MetricUnits.pt ? 1 : 0.1);
+                }
+            }
+        },
+
         _UpdateBordersStyle: function(border) {
             this.CellBorders = new Asc.CBorders();
             var updateBorders = this.CellBorders;
@@ -621,21 +625,6 @@ define([
             }
         },
 
-        _TblWrapStyleChanged: function(style) {
-            if (!this.btnWrapNone || !this.btnWrapParallel) return;
-            if ( this._state.WrapStyle!==style ) {
-                this._noApply = true;
-                this.btnWrapNone.toggle((style==c_tableWrap.TABLE_WRAP_NONE), true);
-                this.btnWrapParallel.toggle((style==c_tableWrap.TABLE_WRAP_PARALLEL), true);
-                this._noApply = false;
-                this._state.WrapStyle=style;
-            }
-        },
-
-        _TblAlignChanged: function(style) {
-            this._state.TableAlignment=style;
-        },
-
         UpdateThemeColors: function() {
              if (!this.btnBackColor) {
                 // create color buttons
@@ -777,12 +766,9 @@ define([
             }
         },
 
-        textWrap:           'Text Wrapping',
         textBorders:        'Border\'s Style',
         textBorderColor:    'Color',
         textBackColor:      'Background color',
-        textWrapParallelTooltip: 'Flow table',
-        textWrapNoneTooltip: 'Inline table',
         textEdit:           'Rows & Columns',
         selectRowText           : 'Select Row',
         selectColumnText        : 'Select Column',
@@ -823,7 +809,12 @@ define([
         tipInner:           'Set Inner Lines Only',
         tipInnerVert:       'Set Vertical Inner Lines Only',
         tipInnerHor:        'Set Horizontal Inner Lines Only',
-        tipOuter:           'Set Outer Border Only'
+        tipOuter:           'Set Outer Border Only',
+        textCellSize: 'Cell Size',
+        textHeight: 'Height',
+        textWidth: 'Width',
+        textDistributeRows: 'Distribute rows',
+        textDistributeCols: 'Distribute columns'
 
     }, DE.Views.TableSettings || {}));
 });

apps/documenteditor/main/locale/en.json

@@ -1522,9 +1522,14 @@
   "DE.Views.TableSettings.textSelectBorders": "Select borders you want to change applying style chosen above",
   "DE.Views.TableSettings.textTemplate": "Select From Template",
   "DE.Views.TableSettings.textTotal": "Total",
-  "DE.Views.TableSettings.textWrap": "Wrapping Style",
+  "del_DE.Views.TableSettings.textWrap": "Wrapping Style",
-  "DE.Views.TableSettings.textWrapNoneTooltip": "Inline table",
+  "del_DE.Views.TableSettings.textWrapNoneTooltip": "Inline table",
-  "DE.Views.TableSettings.textWrapParallelTooltip": "Flow table",
+  "del_DE.Views.TableSettings.textWrapParallelTooltip": "Flow table",
+  "DE.Views.TableSettings.textCellSize": "Cell Size",
+  "DE.Views.TableSettings.textHeight": "Height",
+  "DE.Views.TableSettings.textWidth": "Width",
+  "DE.Views.TableSettings.textDistributeRows": "Distribute rows",
+  "DE.Views.TableSettings.textDistributeCols": "Distribute columns",
   "DE.Views.TableSettings.tipAll": "Set outer border and all inner lines",
   "DE.Views.TableSettings.tipBottom": "Set outer bottom border only",
   "DE.Views.TableSettings.tipInner": "Set inner lines only",