Merge pull request 'feature/autofit-right-menu' (#609) from feature/autofit-right-menu into develop

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

@@ -127,12 +127,7 @@
     </tr>
     <tr>
         <td class="padding-small" colspan=2>
-            <div class="separator horizontal"></div>
-        </td>
-    </tr>
-    <tr>
-        <td class="padding-small" colspan=2>
-            <button type="button" class="btn btn-text-default" id="table-btn-add-formula" style="width:100%;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textAddFormula %></button>
+            <div id="table-checkbox-autofit"></div>
         </td>
     </tr>
     <tr>
@@ -142,12 +137,7 @@
     </tr>
     <tr>
         <td class="padding-small" colspan=2>
-            <div id="table-checkbox-repeat-row"></div>
-        </td>
-    </tr>
-    <tr>
-        <td class="padding-small" colspan=2>
-            <div class="separator horizontal"></div>
+            <div id="table-btn-add-formula" style="width:100%;"></div>
         </td>
     </tr>
     <tr>
@@ -155,6 +145,11 @@
             <div id="table-btn-convert-to-text" style="width:100%;"></div>
         </td>
     </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div id="table-checkbox-repeat-row"></div>
+        </td>
+    </tr>
     <tr>
         <td class="padding-small" colspan=2>
             <div class="separator horizontal"></div>

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

@@ -146,6 +146,15 @@ define([
             this.fireEvent('editcomplete', this);
         },
 
+        onCheckAutofitChange: function(field, newValue, oldValue, eOpts) {
+            if (this.api) {
+                var properties = new Asc.CTableProp();
+                properties.put_TableLayout((field.getValue()=='checked') ? Asc.c_oAscTableLayout.AutoFit : Asc.c_oAscTableLayout. Fixed);
+                this.api.tblApply(properties);
+            }
+            this.fireEvent('editcomplete', this);
+        },
+
         onColorsBackSelect: function(btn, color) {
             this.CellColor = {Value: 1, Color: color};
 
@@ -296,6 +305,16 @@ define([
             });
             this.lockedControls.push(this.chColBanded);
 
+            this.chAutofit = new Common.UI.CheckBox({
+                el: $('#table-checkbox-autofit'),
+                labelText: this.textAutofit,
+                dataHint: '1',
+                dataHintDirection: 'left',
+                dataHintOffset: 'small'
+            });
+            this.chAutofit.on('change', _.bind(this.onCheckAutofitChange, this));
+            this.lockedControls.push(this.chAutofit);
+
             this.chHeader.on('change', _.bind(this.onCheckTemplateChange, this, 0));
             this.chTotal.on('change', _.bind(this.onCheckTemplateChange, this, 1));
             this.chBanded.on('change', _.bind(this.onCheckTemplateChange, this, 2));
@@ -471,7 +490,13 @@ define([
             }, this));
 
             this.btnAddFormula = new Common.UI.Button({
-                el: $('#table-btn-add-formula')
+                parentEl: $('#table-btn-add-formula'),
+                cls: 'btn-toolbar align-left',
+                iconCls: 'toolbar__icon btn-function',
+                caption     : this.textAddFormula,
+                dataHint: '1',
+                dataHintDirection: 'left',
+                dataHintOffset: 'medium'
             });
             this.lockedControls.push(this.btnAddFormula);
             this.btnAddFormula.on('click', _.bind(this.onAddFormula, this));
@@ -615,6 +640,9 @@ define([
                     this._state.RepeatRow=value;
                 }
                 this.chRepeatRow.setDisabled(this._state.RepeatRow === null || this._locked);
+                var autoFit = props.get_TableLayout();
+                this.chAutofit.setDisabled(autoFit === undefined || this._locked);
+                this.chAutofit.setValue(autoFit===Asc.c_oAscTableLayout.AutoFit, true);
             }
         },
 
@@ -987,7 +1015,7 @@ define([
 
         onEyedropperEnd: function () {
             this.fireEvent('eyedropper', false);
-        }
+        },
 
     }, DE.Views.TableSettings || {}));
 });

apps/documenteditor/main/locale/en.json

@@ -3481,6 +3481,7 @@
   "DE.Views.TableSettings.txtTable_ListTable": "List table",
   "DE.Views.TableSettings.txtTable_PlainTable": "Plain table",
   "DE.Views.TableSettings.txtTable_TableGrid": "Table grid",
+  "DE.Views.TableSettings.textAutofit": "Automaticaly resize to fit content",
   "DE.Views.TableSettingsAdvanced.textAlign": "Alignment",
   "DE.Views.TableSettingsAdvanced.textAlignment": "Alignment",
   "DE.Views.TableSettingsAdvanced.textAllowSpacing": "Spacing between cells",

apps/documenteditor/main/resources/img/toolbar/2.5x/btn-function.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.4032 7.0633L10.2649 7.55901H9.14372L8.29896 10.8412C7.92521 12.2883 7.54891 13.4074 7.17005 14.1985C6.63247 15.3151 6.05394 16.0862 5.43445 16.5118C4.96343 16.8373 4.49241 17 4.02139 17C3.71421 17 3.4531 16.9099 3.23807 16.7296C3.07936 16.6044 3 16.4417 3 16.2414C3 16.0812 3.06656 15.941 3.19967 15.8208C3.32767 15.7057 3.48638 15.6481 3.67581 15.6481C3.81404 15.6481 3.9318 15.6906 4.02907 15.7758C4.12123 15.8609 4.16731 15.9585 4.16731 16.0687C4.16731 16.1788 4.11355 16.2815 4.00603 16.3766C3.92412 16.4467 3.88316 16.4993 3.88316 16.5343C3.88316 16.5794 3.90108 16.6144 3.93692 16.6395C3.983 16.6745 4.05467 16.6921 4.15195 16.6921C4.3721 16.6921 4.60505 16.6245 4.8508 16.4893C5.09142 16.3541 5.30645 16.1513 5.49589 15.8809C5.68532 15.6155 5.86451 15.23 6.03346 14.7242C6.10514 14.5139 6.29713 13.8205 6.60943 12.6438L7.94569 7.55901H6.60943L6.71695 7.0633C7.14189 7.0633 7.43884 7.03577 7.60779 6.98069C7.77674 6.9206 7.93033 6.81044 8.06857 6.65021C8.21192 6.48498 8.39623 6.17954 8.6215 5.73391C8.92357 5.13305 9.21284 4.66738 9.4893 4.33691C9.86817 3.89127 10.2649 3.5583 10.6796 3.33798C11.0995 3.11266 11.4937 3 11.8623 3C12.2514 3 12.5637 3.09764 12.7992 3.29292C13.0347 3.48319 13.1525 3.69099 13.1525 3.91631C13.1525 4.09156 13.0936 4.23927 12.9759 4.35944C12.8581 4.47961 12.7071 4.5397 12.5228 4.5397C12.3641 4.5397 12.2335 4.49464 12.1311 4.40451C12.0338 4.31438 11.9852 4.20672 11.9852 4.08154C11.9852 4.00143 12.0185 3.90379 12.085 3.78863C12.1516 3.66845 12.1849 3.58834 12.1849 3.54828C12.1849 3.47818 12.1618 3.42561 12.1157 3.39056C12.0492 3.34049 11.9519 3.31545 11.8239 3.31545C11.5014 3.31545 11.2121 3.41559 10.9561 3.61588C10.6131 3.88126 10.3059 4.29685 10.0346 4.86266C9.89632 5.15808 9.6429 5.89163 9.27427 7.0633H10.4032Z" fill="black"/>
+<path d="M12.8453 6.88305C13.0962 7.14342 13.2856 7.40379 13.4136 7.66416C13.5058 7.84442 13.6568 8.3176 13.8667 9.08369L14.5425 8.09227C14.7217 7.85193 14.9393 7.62411 15.1953 7.4088C15.4513 7.18848 15.6765 7.03827 15.8711 6.95815C15.994 6.90808 16.1296 6.88305 16.2781 6.88305C16.4983 6.88305 16.6723 6.94063 16.8003 7.05579C16.9334 7.17096 17 7.31116 17 7.47639C17 7.66667 16.9616 7.79685 16.8848 7.86695C16.7415 7.99213 16.5776 8.05472 16.3933 8.05472C16.2858 8.05472 16.1706 8.03219 16.0477 7.98712C15.8071 7.90701 15.6458 7.86695 15.5639 7.86695C15.441 7.86695 15.2951 7.93705 15.1262 8.07725C14.8087 8.33763 14.4299 8.84084 13.9896 9.58691L14.6193 12.1706C14.7166 12.5662 14.7985 12.804 14.8651 12.8841C14.9316 12.9592 14.9982 12.9968 15.0647 12.9968C15.1722 12.9968 15.2977 12.9392 15.441 12.824C15.7226 12.5937 15.9632 12.2933 16.1629 11.9227L16.4317 12.0579C16.1092 12.6488 15.6996 13.1395 15.203 13.53C14.9214 13.7504 14.6833 13.8605 14.4888 13.8605C14.202 13.8605 13.9742 13.7028 13.8053 13.3873C13.6978 13.1921 13.475 12.3509 13.1371 10.8637C12.3385 12.2207 11.6985 13.0944 11.2172 13.485C10.9049 13.7353 10.6029 13.8605 10.311 13.8605C10.1062 13.8605 9.91936 13.7879 9.75041 13.6427C9.62754 13.5325 9.5661 13.3848 9.5661 13.1996C9.5661 13.0343 9.62242 12.8966 9.73505 12.7865C9.84769 12.6763 9.98592 12.6212 10.1498 12.6212C10.3136 12.6212 10.4877 12.7014 10.672 12.8616C10.8051 12.9768 10.9075 13.0343 10.9792 13.0343C11.0406 13.0343 11.1199 12.9943 11.2172 12.9142C11.4579 12.7239 11.7855 12.3133 12.2002 11.6824C12.6149 11.0515 12.8863 10.5959 13.0143 10.3155C12.6968 9.09871 12.5253 8.45529 12.4997 8.38519C12.382 8.05973 12.2284 7.8294 12.0389 7.69421C11.8495 7.55901 11.5705 7.49142 11.2019 7.49142C11.0841 7.49142 10.9484 7.49642 10.7948 7.50644V7.23605L12.8453 6.88305Z" fill="black"/>
+</svg>

apps/documenteditor/main/resources/img/toolbar/v2/2.5x/btn-function.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none">
+    <path d="M6 19c.32.32.756.5 1.209.5a1.38 1.38 0 0 0 1.377-1.285l.828-12.43A1.38 1.38 0 0 1 10.791 4.5c.453 0 .889.18 1.21.5m-.5 4.5h-4m5.5 8 2.5-3m0 0 2.5-3m-2.5 3 2.5 3m-2.5-3-2.5-3" class="icon-stroke-gray-primary"/>
+</svg>

apps/documenteditor/main/resources/less/rightmenu.less

@@ -62,7 +62,7 @@
             display: inline-block;
         }
 
-        #table-btn-convert-to-text {
+        #table-btn-convert-to-text, #table-btn-add-formula {
             .btn {
                 width: 100%;
             }