Merge pull request #3 from ONLYOFFICE/feature/sse-table-settings

Feature/sse table settings

apps/common/main/resources/less/combo-dataview.less

@@ -157,9 +157,8 @@
     }
 }
 
-.combo-template {
+.combo-template(@combo-dataview-height: 64px) {
     @combo-dataview-button-width: 18px;
-    @combo-dataview-height: 64px;
 
     height: @combo-dataview-height;
 
@@ -196,6 +195,10 @@
     }
 };
 
+.combo-template {
+    .combo-template(64px);
+}
+
 .combo-pattern {
     @combo-dataview-button-width: 15px;
     @combo-dataview-height: 40px;

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

@@ -91,7 +91,6 @@ define([
             this._locked = false;
             this._originalLook = new Asc.CTablePropLook();
 
-            var fullwidth = 218;
             this._originalProps = null;
             this.CellBorders = {};
             this.CellColor = {Value: 1, Color: 'transparent'};  // value=1 - цвет определен - прозрачный или другой, value=0 - цвет не определен, рисуем прозрачным

apps/spreadsheeteditor/main/app/controller/DocumentHolder.js

@@ -153,6 +153,9 @@ define([
             view.pmiDeleteCells.menu.on('item:click',           _.bind(me.onDeleteCells, me));
             view.pmiSortCells.menu.on('item:click',             _.bind(me.onSortCells, me));
             view.pmiClear.menu.on('item:click',                 _.bind(me.onClear, me));
+            view.pmiSelectTable.menu.on('item:click',           _.bind(me.onSelectTable, me));
+            view.pmiInsertTable.menu.on('item:click',           _.bind(me.onInsertTable, me));
+            view.pmiDeleteTable.menu.on('item:click',           _.bind(me.onDeleteTable, me));
             view.pmiInsFunction.on('click',                     _.bind(me.onInsFunction, me));
             view.menuAddHyperlink.on('click',                   _.bind(me.onInsHyperlink, me));
             view.menuEditHyperlink.on('click',                  _.bind(me.onInsHyperlink, me));
@@ -349,6 +352,33 @@ define([
             }
         },
 
+        onSelectTable: function(menu, item) {
+            if (this.api && this.documentHolder.ssMenu.formatTableName) {
+                this.api.asc_changeSelectionFormatTable(this.documentHolder.ssMenu.formatTableName, item.value);
+
+                Common.NotificationCenter.trigger('edit:complete', this.documentHolder);
+                Common.component.Analytics.trackEvent('DocumentHolder', 'Select Table');
+            }
+        },
+
+        onInsertTable: function(menu, item) {
+            if (this.api && this.documentHolder.ssMenu.formatTableName) {
+                this.api.asc_insertCellsInTable(this.documentHolder.ssMenu.formatTableName, item.value);
+
+                Common.NotificationCenter.trigger('edit:complete', this.documentHolder);
+                Common.component.Analytics.trackEvent('DocumentHolder', 'Insert to Table');
+            }
+        },
+
+        onDeleteTable: function(menu, item) {
+            if (this.api && this.documentHolder.ssMenu.formatTableName) {
+                this.api.asc_deleteCellsInTable(this.documentHolder.ssMenu.formatTableName, item.value);
+
+                Common.NotificationCenter.trigger('edit:complete', this.documentHolder);
+                Common.component.Analytics.trackEvent('DocumentHolder', 'Delete from Table');
+            }
+        },
+
         onInsFunction: function(item) {
             var controller = this.getApplication().getController('FormulaDialog');
             if (controller && this.api) {
@@ -1147,17 +1177,35 @@ define([
             seltype !== Asc.c_oAscSelectionType.RangeChart && seltype !== Asc.c_oAscSelectionType.RangeChartText && seltype !== Asc.c_oAscSelectionType.RangeShapeText)) {
                 if (!showMenu && !documentHolder.ssMenu.isVisible()) return;
                 
-                var iscelledit = this.api.isCellEdited;
+                var iscelledit = this.api.isCellEdited,
+                    formatTableInfo = cellinfo.asc_getFormatTableInfo(),
+                    isintable = (formatTableInfo !== null);
+                documentHolder.ssMenu.formatTableName = (isintable) ? formatTableInfo.asc_getTableName() : null;
 
                 documentHolder.pmiInsertEntire.setVisible(isrowmenu||iscolmenu);
                 documentHolder.pmiInsertEntire.setCaption((isrowmenu) ? this.textInsertTop : this.textInsertLeft);
                 documentHolder.pmiDeleteEntire.setVisible(isrowmenu||iscolmenu);
-                documentHolder.pmiInsertCells.setVisible(iscellmenu && !iscelledit);
-                documentHolder.pmiDeleteCells.setVisible(iscellmenu && !iscelledit);
-                documentHolder.pmiSortCells.setVisible((iscellmenu||isallmenu||cansort) && !iscelledit);
+                documentHolder.pmiInsertCells.setVisible(iscellmenu && !iscelledit && !isintable);
+                documentHolder.pmiDeleteCells.setVisible(iscellmenu && !iscelledit && !isintable);
+                documentHolder.pmiSelectTable.setVisible(iscellmenu && !iscelledit && isintable);
+                documentHolder.pmiInsertTable.setVisible(iscellmenu && !iscelledit && isintable);
+                documentHolder.pmiDeleteTable.setVisible(iscellmenu && !iscelledit && isintable);
+                documentHolder.pmiSortCells.setVisible((iscellmenu||isallmenu||cansort) && !iscelledit && !isintable);
                 documentHolder.pmiInsFunction.setVisible(iscellmenu||insfunc);
                 documentHolder.pmiAddNamedRange.setVisible(iscellmenu && !iscelledit);
 
+                if (isintable) {
+                    documentHolder.pmiInsertTable.menu.items[0].setDisabled(!formatTableInfo.asc_getIsInsertRowAbove());
+                    documentHolder.pmiInsertTable.menu.items[1].setDisabled(!formatTableInfo.asc_getIsInsertRowBelow());
+                    documentHolder.pmiInsertTable.menu.items[2].setDisabled(!formatTableInfo.asc_getIsInsertColumnLeft());
+                    documentHolder.pmiInsertTable.menu.items[3].setDisabled(!formatTableInfo.asc_getIsInsertColumnRight());
+
+                    documentHolder.pmiDeleteTable.menu.items[0].setDisabled(!formatTableInfo.asc_getIsDeleteRow());
+                    documentHolder.pmiDeleteTable.menu.items[1].setDisabled(!formatTableInfo.asc_getIsDeleteColumn());
+                    documentHolder.pmiDeleteTable.menu.items[2].setDisabled(!formatTableInfo.asc_getIsDeleteTable());
+
+                }
+
                 var hyperinfo = cellinfo.asc_getHyperlink();
                 documentHolder.menuHyperlink.setVisible(iscellmenu && hyperinfo && !iscelledit);
                 documentHolder.menuAddHyperlink.setVisible(iscellmenu && !hyperinfo && !iscelledit);
@@ -1170,7 +1218,7 @@ define([
                 documentHolder.pmiFreezePanes.setCaption(this.api.asc_getSheetViewSettings().asc_getIsFreezePane() ? documentHolder.textUnFreezePanes : documentHolder.textFreezePanes);
 
                 /** coauthoring begin **/
-                documentHolder.ssMenu.items[10].setVisible(iscellmenu && !iscelledit && this.permissions.canCoAuthoring && this.permissions.canComments);
+                documentHolder.ssMenu.items[13].setVisible(iscellmenu && !iscelledit && this.permissions.canCoAuthoring && this.permissions.canComments);
                 documentHolder.pmiAddComment.setVisible(iscellmenu && !iscelledit && this.permissions.canCoAuthoring && this.permissions.canComments);
                 /** coauthoring end **/
                 documentHolder.pmiCellMenuSeparator.setVisible(iscellmenu || isrowmenu || iscolmenu || isallmenu || insfunc);
@@ -1188,7 +1236,8 @@ define([
                 documentHolder.pmiClear.menu.items[3].setVisible(!this.permissions.isEditDiagram);
                 documentHolder.pmiClear.menu.items[4].setVisible(!this.permissions.isEditDiagram);
 
-                var filterInfo = cellinfo.asc_getAutoFilterInfo() && cellinfo.asc_getAutoFilterInfo().asc_getIsApplyAutoFilter();
+                var filterInfo = cellinfo.asc_getAutoFilterInfo();
+                filterInfo = (filterInfo) ? filterInfo.asc_getIsApplyAutoFilter() : false;
                 documentHolder.pmiInsertCells.menu.items[0].setDisabled(filterInfo);
                 documentHolder.pmiDeleteCells.menu.items[0].setDisabled(filterInfo);
                 documentHolder.pmiInsertCells.menu.items[1].setDisabled(filterInfo);

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

@@ -77,7 +77,8 @@ define([
             this._settings[Common.Utils.documentSettingsType.Image] =     {panelId: "id-image-settings",      panel: rightMenu.imageSettings,    btn: rightMenu.btnImage,       hidden: 1, locked: false};
             this._settings[Common.Utils.documentSettingsType.Shape] =     {panelId: "id-shape-settings",      panel: rightMenu.shapeSettings,    btn: rightMenu.btnShape,       hidden: 1, locked: false};
             this._settings[Common.Utils.documentSettingsType.TextArt] =   {panelId: "id-textart-settings",    panel: rightMenu.textartSettings,  btn: rightMenu.btnTextArt,     hidden: 1, locked: false};
-            this._settings[Common.Utils.documentSettingsType.Chart] = {panelId: "id-chart-settings",          panel: rightMenu.chartSettings,    btn: rightMenu.btnChart,       hidden: 1, locked: false};
+            this._settings[Common.Utils.documentSettingsType.Chart] =     {panelId: "id-chart-settings",      panel: rightMenu.chartSettings,    btn: rightMenu.btnChart,       hidden: 1, locked: false};
+            this._settings[Common.Utils.documentSettingsType.Table] =     {panelId: "id-table-settings",      panel: rightMenu.tableSettings,    btn: rightMenu.btnTable,       hidden: 1, locked: false};
         },
 
         setApi: function(api) {
@@ -103,19 +104,20 @@ define([
 
         onSelectionChanged: function(info) {
             var SelectedObjects = [],
-                selectType = info.asc_getFlags().asc_getSelectionType();
+                selectType = info.asc_getFlags().asc_getSelectionType(),
+                formatTableInfo = info.asc_getFormatTableInfo();
 
             if (selectType == Asc.c_oAscSelectionType.RangeImage || selectType == Asc.c_oAscSelectionType.RangeShape ||
                 selectType == Asc.c_oAscSelectionType.RangeChart || selectType == Asc.c_oAscSelectionType.RangeChartText || selectType == Asc.c_oAscSelectionType.RangeShapeText) {
                 SelectedObjects = this.api.asc_getGraphicObjectProps();
             }
-
-            if (SelectedObjects.length<=0 && !this.rightmenu.minimizedMode) {
+            
+            if (SelectedObjects.length<=0 && !formatTableInfo && !this.rightmenu.minimizedMode) {
                 this.rightmenu.clearSelection();
                 this._openRightMenu = true;
             }
 
-            this.onFocusObject(SelectedObjects);
+            this.onFocusObject(SelectedObjects, formatTableInfo);
 
             var need_disable = info.asc_getLocked(),
                 me = this;
@@ -128,7 +130,7 @@ define([
             }
         },
 
-        onFocusObject: function(SelectedObjects) {
+        onFocusObject: function(SelectedObjects, formatTableInfo) {
             if (!this.editMode)
                 return;
 
@@ -166,6 +168,12 @@ define([
                 this._settings[settingsType].locked = value.asc_getLocked();
             }
 
+            if (formatTableInfo) {
+                settingsType = Common.Utils.documentSettingsType.Table;
+                this._settings[settingsType].props = formatTableInfo;
+                this._settings[settingsType].hidden = 0;
+            }
+            
             var lastactive = -1, currentactive, priorityactive = -1;
             for (i=0; i<this._settings.length; ++i) {
                 var pnl = this._settings[i];
@@ -256,6 +264,7 @@ define([
                 this.api.asc_registerCallback('asc_onFocusObject', _.bind(this.onFocusObject, this));
                 this.api.asc_registerCallback('asc_onSelectionChanged', _.bind(this.onSelectionChanged, this));
                 this.api.asc_registerCallback('asc_doubleClickOnObject', _.bind(this.onDoubleClickOnObject, this));
+                this.onSelectionChanged(this.api.asc_getCellInfo());
             }
         },
 

apps/spreadsheeteditor/main/app/controller/Toolbar.js

@@ -1182,9 +1182,7 @@ define([
                 shortcuts: {
                     'command+l,ctrl+l': function(e) {
                         if (me.editMode) {
-                            var cellinfo = me.api.asc_getCellInfo(),
-                                filterinfo = cellinfo.asc_getAutoFilterInfo();
-                            if (!filterinfo || filterinfo.asc_getTableName()===null)
+                            if (!me.api.asc_getCellInfo().asc_getFormatTableInfo())
                                 me._setTableFormat(me.toolbar.mnuTableTemplatePicker.store.at(23).get('name'));
                         }
 
@@ -1687,7 +1685,8 @@ define([
 //                (coauth_disable !== toolbar.btnClearStyle.isDisabled()) && toolbar.btnClearStyle.setDisabled(coauth_disable);
 //                (coauth_disable !== toolbar.btnCopyStyle.isDisabled()) && toolbar.btnCopyStyle.setDisabled(coauth_disable);
 
-                var filterInfo = info.asc_getAutoFilterInfo();
+                var filterInfo = info.asc_getAutoFilterInfo(),
+                    formatTableInfo = info.asc_getFormatTableInfo();
                 if (!toolbar.mode.isEditMailMerge) {
                     /* read cell horizontal align */
                     fontparam = info.asc_getHorAlign();
@@ -1764,7 +1763,7 @@ define([
                         }
                     }
 
-                    need_disable =  this._state.controlsdisabled.filters || filterInfo && (filterInfo.asc_getTableName()!==null || filterInfo.asc_getIsAutoFilter()===null);
+                    need_disable =  this._state.controlsdisabled.filters || formatTableInfo!==null || filterInfo && filterInfo.asc_getIsAutoFilter()===null;
 //                (need_disable !== toolbar.btnMerge.isDisabled()) && toolbar.btnMerge.setDisabled(need_disable);
                     toolbar.lockToolbar(SSE.enumLock.ruleMerge, need_disable, {array:[toolbar.btnMerge]});
 
@@ -1795,7 +1794,7 @@ define([
                             { array: [toolbar.btnSortDown, toolbar.btnSortUp, toolbar.mnuitemSortAZ, toolbar.mnuitemSortZA,
                                 toolbar.btnTableTemplate,toolbar.btnSetAutofilter,toolbar.mnuitemAutoFilter,toolbar.btnAutofilter] });
 
-                val = (filterInfo) ? filterInfo.asc_getTableStyleName() : null;
+                val = (formatTableInfo) ? formatTableInfo.asc_getTableStyleName() : null;
                 if (this._state.tablestylename !== val && this.toolbar.mnuTableTemplatePicker) {
                     val = this.toolbar.mnuTableTemplatePicker.store.findWhere({name: val});
                     if (val) {
@@ -1807,7 +1806,7 @@ define([
                     }
                 }
 
-                this._state.tablename = (filterInfo) ? filterInfo.asc_getTableName() : undefined;
+                this._state.tablename = (formatTableInfo) ? formatTableInfo.asc_getTableName() : undefined;
 
                 need_disable =  this._state.controlsdisabled.filters || !filterInfo || (filterInfo.asc_getIsApplyAutoFilter()!==true);
                 toolbar.lockToolbar(SSE.enumLock.ruleDelFilter, need_disable, {array:[toolbar.btnClearAutofilter,toolbar.mnuitemClearFilter]});

apps/spreadsheeteditor/main/app/template/RightMenu.template

 <div id="view-right-menu" class="tool-menu right">
     <div class="right-panel">
+        <div id="id-table-settings" class="settings-panel">
+        </div>
         <div id="id-shape-settings" class="settings-panel">
         </div>
         <div id="id-image-settings" class="settings-panel">
@@ -13,6 +15,7 @@
     </div>
     <div class="tool-menu-btns">
         <div class="ct-btn-category arrow-left" />
+        <button id="id-right-menu-table" class="btn btn-category arrow-left" content-target="id-table-settings"><span class="btn-icon img-toolbarmenu btn-menu-table">&nbsp;</span></button>
         <button id="id-right-menu-shape" class="btn btn-category arrow-left" content-target="id-shape-settings"><span class="btn-icon img-toolbarmenu btn-menu-shape">&nbsp;</span></button>
         <button id="id-right-menu-image" class="btn btn-category arrow-left" content-target="id-image-settings"><span class="btn-icon img-toolbarmenu btn-menu-image">&nbsp;</span></button>
         <button id="id-right-menu-chart" class="btn btn-category arrow-left" content-target="id-chart-settings"><span class="btn-icon img-toolbarmenu btn-menu-chart">&nbsp;</span></button>

apps/spreadsheeteditor/main/app/template/TableSettings.template

+<table cols="2">
+    <tr>
+        <td width="50%">
+            <label class="header"><%= scope.textRows %></label>
+        </td>
+        <td width="50%">
+            <label class="header"><%= scope.textColumns %></label>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small">
+            <div id="table-checkbox-header"></div>
+        </td>
+        <td class="padding-small">
+            <div id="table-checkbox-first"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small">
+            <div id="table-checkbox-total"></div>
+        </td>
+        <td class="padding-small">
+            <div id="table-checkbox-last"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small">
+            <div id="table-checkbox-banded"></div>
+        </td>
+        <td class="padding-small">
+            <div id="table-checkbox-col-banded"></div>
+        </td>
+    </tr>
+    <tr>
+        <td colspan=2 class="padding-small">
+            <div id="table-checkbox-filter"></div>
+        </td>
+    </tr>
+    <tr>
+        <td colspan=2>
+            <label class="header"><%= scope.textTemplate %></label>
+        </td>
+    </tr>
+    <tr>
+        <td colspan=2 class="padding-small">
+            <div class="" id="table-combo-template" style="width: 100%; height: 60px;"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div class="separator horizontal"></div>
+        </td>
+    </tr>
+    <tr class="hidden">
+        <td colspan=2>
+            <label class="header"><%= scope.textTableName %></label>
+        </td>
+    </tr>
+    <tr class="hidden">
+        <td colspan=2 class="padding-small">
+            <div id="table-txt-name" class="input-row"  style="width: 100%;"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <label class="header" style="margin-top: 3px;"><%= scope.textResize %></label>
+            <button type="button" class="btn btn-text-default" id="table-btn-select-data" style="display: inline-block; float:right; min-width: 100px;"><%= scope.textSelectData %></button>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div class="separator horizontal"></div>
+        </td>
+    </tr>
+    <tr>
+        <td colspan=2>
+            <label class="header" style="margin-top: 3px;"><%= scope.textEdit %></label>
+            <div id="table-btn-edit" style="display: inline-block; float:right;"></div>
+        </td>
+    </tr>
+    <tr class="finish-cell"></tr>
+</table>
\ No newline at end of file

apps/spreadsheeteditor/main/app/view/DocumentHolder.js

@@ -104,6 +104,19 @@ define([
                 value       : 'paste'
             });
 
+            me.pmiSelectTable = new Common.UI.MenuItem({
+                caption     : me.txtSelect,
+                menu        : new Common.UI.Menu({
+                    menuAlign   : 'tl-tr',
+                    items: [
+                        { caption: this.selectRowText,      value:  c_oAscChangeSelectionFormatTable.row},
+                        { caption: this.selectColumnText,   value: c_oAscChangeSelectionFormatTable.column},
+                        { caption: this.selectDataText,     value: c_oAscChangeSelectionFormatTable.data},
+                        { caption: this.selectTableText,    value: c_oAscChangeSelectionFormatTable.all}
+                    ]
+                })
+            });
+
             me.pmiInsertEntire = new Common.UI.MenuItem({
                 caption     : me.txtInsert
             });
@@ -129,6 +142,19 @@ define([
                     ]
                 })
             });
+            
+            me.pmiInsertTable = new Common.UI.MenuItem({
+                caption     : me.txtInsert,
+                menu        : new Common.UI.Menu({
+                    menuAlign   : 'tl-tr',
+                    items: [
+                        { caption: me.insertRowAboveText, value: c_oAscInsertOptions.InsertTableRowAbove},
+                        { caption: me.insertRowBelowText, value: c_oAscInsertOptions.InsertTableRowBelow},
+                        { caption: me.insertColumnLeftText,  value: c_oAscInsertOptions.InsertTableColLeft},
+                        { caption: me.insertColumnRightText, value: c_oAscInsertOptions.InsertTableColRight}
+                    ]
+                })
+            });
 
             me.pmiDeleteEntire = new Common.UI.MenuItem({
                 caption     : me.txtDelete
@@ -156,6 +182,18 @@ define([
                 })
             });
 
+            me.pmiDeleteTable = new Common.UI.MenuItem({
+                caption     : me.txtDelete,
+                menu        : new Common.UI.Menu({
+                    menuAlign   : 'tl-tr',
+                    items: [
+                        { caption: this.deleteRowText,      value: c_oAscDeleteOptions.DeleteRows},
+                        { caption: this.deleteColumnText,   value: c_oAscDeleteOptions.DeleteColumns},
+                        { caption: this.deleteTableText,    value: c_oAscDeleteOptions.DeleteTable}
+                    ]
+                })
+            });
+
             me.pmiClear = new Common.UI.MenuItem({
                 caption     : me.txtClear,
                 menu        : new Common.UI.Menu({
@@ -273,10 +311,13 @@ define([
                     me.pmiCopy,
                     me.pmiPaste,
                     {caption: '--'},
+                    me.pmiSelectTable,
                     me.pmiInsertEntire,
                     me.pmiInsertCells,
+                    me.pmiInsertTable,
                     me.pmiDeleteEntire,
                     me.pmiDeleteCells,
+                    me.pmiDeleteTable,
                     me.pmiClear,
                     me.pmiSortCells,
                     {caption: '--'},
@@ -576,7 +617,19 @@ define([
         direct270Text:          'Rotate at 270°',
         txtAddNamedRange:       'Define Name',
         textFreezePanes:        'Freeze Panes',
-        textUnFreezePanes:      'Unfreeze Panes'
+        textUnFreezePanes:      'Unfreeze Panes',
+        txtSelect:              'Select',
+        selectRowText           : 'Select Row',
+        selectColumnText        : 'Select Entire Column',
+        selectDataText          : 'Select Column Data',
+        selectTableText         : 'Select Table',
+        insertRowAboveText      : 'Insert Row Above',
+        insertRowBelowText      : 'Insert Row Below',
+        insertColumnLeftText    : 'Insert Column Left',
+        insertColumnRightText   : 'Insert Column Right',
+        deleteRowText           : 'Delete Row',
+        deleteColumnText        : 'Delete Column',
+        deleteTableText         : 'Delete Table'
 
     }, SSE.Views.DocumentHolder || {}));
 });
\ No newline at end of file

apps/spreadsheeteditor/main/app/view/RightMenu.js

@@ -54,6 +54,7 @@ define([
     'spreadsheeteditor/main/app/view/ChartSettings',
     'spreadsheeteditor/main/app/view/ShapeSettings',
     'spreadsheeteditor/main/app/view/TextArtSettings',
+    'spreadsheeteditor/main/app/view/TableSettings',
     'common/main/lib/component/Scroller'
 ], function (menuTemplate, $, _, Backbone) {
     'use strict';
@@ -108,12 +109,21 @@ define([
                 toggleGroup: 'tabpanelbtnsGroup'
             });
 
+            this.btnTable = new Common.UI.Button({
+                hint: this.txtTableSettings,
+                asctype: Common.Utils.documentSettingsType.Table,
+                enableToggle: true,
+                disabled: true,
+                toggleGroup: 'tabpanelbtnsGroup'
+            });
+
             this._settings = [];
             this._settings[Common.Utils.documentSettingsType.Paragraph]   = {panel: "id-paragraph-settings",  btn: this.btnText};
             this._settings[Common.Utils.documentSettingsType.Image]       = {panel: "id-image-settings",      btn: this.btnImage};
             this._settings[Common.Utils.documentSettingsType.Shape]       = {panel: "id-shape-settings",      btn: this.btnShape};
             this._settings[Common.Utils.documentSettingsType.Chart]       = {panel: "id-chart-settings",      btn: this.btnChart};
             this._settings[Common.Utils.documentSettingsType.TextArt]     = {panel: "id-textart-settings",    btn: this.btnTextArt};
+            this._settings[Common.Utils.documentSettingsType.Table]       = {panel: "id-table-settings",      btn: this.btnTable};
 
             return this;
         },
@@ -134,18 +144,21 @@ define([
             this.btnChart.el        = $('#id-right-menu-chart');    this.btnChart.render();
             this.btnShape.el        = $('#id-right-menu-shape');    this.btnShape.render();
             this.btnTextArt.el      = $('#id-right-menu-textart');  this.btnTextArt.render();
+            this.btnTable.el        = $('#id-right-menu-table');    this.btnTable.render();
 
             this.btnText.on('click',            _.bind(this.onBtnMenuClick, this));
             this.btnImage.on('click',           _.bind(this.onBtnMenuClick, this));
             this.btnChart.on('click',           _.bind(this.onBtnMenuClick, this));
             this.btnShape.on('click',           _.bind(this.onBtnMenuClick, this));
             this.btnTextArt.on('click',         _.bind(this.onBtnMenuClick, this));
+            this.btnTable.on('click',           _.bind(this.onBtnMenuClick, this));
 
             this.paragraphSettings = new SSE.Views.ParagraphSettings();
             this.imageSettings = new SSE.Views.ImageSettings();
             this.chartSettings = new SSE.Views.ChartSettings();
             this.shapeSettings = new SSE.Views.ShapeSettings();
             this.textartSettings = new SSE.Views.TextArtSettings();
+            this.tableSettings = new SSE.Views.TableSettings();
 
             if (_.isUndefined(this.scroller)) {
                 this.scroller = new Common.UI.Scroller({
@@ -167,6 +180,7 @@ define([
             this.chartSettings.setApi(api);
             this.shapeSettings.setApi(api);
             this.textartSettings.setApi(api);
+            this.tableSettings.setApi(api);
         },
 
         setMode: function(mode) {
@@ -229,6 +243,7 @@ define([
                 this.shapeSettings.disableControls(disabled);
                 this.imageSettings.disableControls(disabled);
                 this.chartSettings.disableControls(disabled);
+                this.tableSettings.disableControls(disabled);
             } else {
                 var cmp = $("#" + id);
                 if (disabled !== cmp.hasClass('disabled')) {
@@ -255,6 +270,7 @@ define([
         txtImageSettings:           'Image Settings',
         txtShapeSettings:           'Shape Settings',
         txtTextArtSettings:         'Text Art Settings',
-        txtChartSettings:           'Chart Settings'
+        txtChartSettings:           'Chart Settings',
+        txtTableSettings:           'Table Settings'
     }, SSE.Views.RightMenu || {}));
 });
\ No newline at end of file

apps/spreadsheeteditor/main/app/view/TableOptionsDialog.js

@@ -63,8 +63,8 @@ define([
 
             this.template = [
                 '<div class="box">',
-                    '<div id="id-dlg-tableoptions-range" class="input-row" style="margin-bottom: 10px;"></div>',
-                    '<div class="input-row" id="id-dlg-tableoptions-title"></div>',
+                    '<div id="id-dlg-tableoptions-range" class="input-row"  style="margin-bottom: 5px;"></div>',
+                    '<div class="input-row" id="id-dlg-tableoptions-title" style="margin-top: 5px;"></div>',
                 '</div>',
                 '<div class="footer right">',
                     '<button class="btn normal dlg-btn primary" result="ok" style="margin-right: 10px;">' + this.okButtonText + '</button>',
@@ -73,6 +73,7 @@ define([
             ].join('');
 
             this.options.tpl = _.template(this.template, this.options);
+            this.checkRangeType = Asc.c_oAscSelectionDialogType.FormatTable;
 
             Common.UI.Window.prototype.initialize.call(this, this.options);
         },
@@ -114,30 +115,39 @@ define([
             if (settings.api) {
                 me.api = settings.api;
 
-                var options = me.api.asc_getAddFormatTableOptions();
-
-                this.inputRange.setValue(options.asc_getRange());
-                this.cbTitle.setValue(options.asc_getIsTitle());
+                if (settings.range) {
+                    me.cbTitle.setVisible(false);
+                    me.setHeight(130);
+                    me.checkRangeType = Asc.c_oAscSelectionDialogType.FormatTableChangeRange;
+                    me.inputRange.setValue(settings.range);
+                    me.api.asc_setSelectionDialogMode(Asc.c_oAscSelectionDialogType.FormatTable, settings.range);
+                } else {
+                    var options = me.api.asc_getAddFormatTableOptions();
+                    me.inputRange.setValue(options.asc_getRange());
+                    me.cbTitle.setValue(options.asc_getIsTitle());
+                    me.api.asc_setSelectionDialogMode(Asc.c_oAscSelectionDialogType.FormatTable, options.asc_getRange());
+                }
+                if (settings.title)
+                    me.setTitle(settings.title);
 
-                me.api.asc_setSelectionDialogMode(Asc.c_oAscSelectionDialogType.FormatTable, options.asc_getRange());
                 me.api.asc_unregisterCallback('asc_onSelectionRangeChanged', _.bind(me.onApiRangeChanged, me));
                 me.api.asc_registerCallback('asc_onSelectionRangeChanged', _.bind(me.onApiRangeChanged, me));
                 Common.NotificationCenter.trigger('cells:range', Asc.c_oAscSelectionDialogType.FormatTable);
             }
 
             me.inputRange.validation = function(value) {
-                var isvalid = me.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.FormatTable, value, false);
+                var isvalid = me.api.asc_checkDataRange(me.checkRangeType, value, false);
                 return (isvalid==Asc.c_oAscError.ID.DataRangeError) ? me.txtInvalidRange : true;
             };
         },
 
         getSettings: function () {
-            var options = this.api.asc_getAddFormatTableOptions(this.inputRange.getValue());
-
-//            options.asc_setRange(this.inputRange.getValue());
-            options.asc_setIsTitle(this.cbTitle.checked);
-
-            return options;
+            if (this.checkRangeType == Asc.c_oAscSelectionDialogType.FormatTable) {
+                var options = this.api.asc_getAddFormatTableOptions(this.inputRange.getValue());
+                options.asc_setIsTitle(this.cbTitle.checked);
+                return options;
+            } else
+                return this.inputRange.getValue();
         },
 
         onApiRangeChanged: function(info) {
@@ -147,12 +157,16 @@ define([
         },
 
         isRangeValid: function() {
-            var isvalid = this.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.FormatTable, this.inputRange.getValue(), true);
+            var isvalid = this.api.asc_checkDataRange(this.checkRangeType, this.inputRange.getValue(), true);
             if (isvalid == Asc.c_oAscError.ID.No)
                 return true;
             else {
                 if (isvalid == Asc.c_oAscError.ID.AutoFilterDataRangeError) {
                     Common.UI.warning({msg: this.errorAutoFilterDataRange});
+                } else if (isvalid == Asc.c_oAscError.ID.FTChangeTableRangeError) {
+                    Common.UI.warning({msg: this.errorFTChangeTableRangeError});
+                } if (isvalid == Asc.c_oAscError.ID.FTRangeIncludedOtherTables) {
+                    Common.UI.warning({msg: this.errorFTRangeIncludedOtherTables});
                 }
             }
             return false;
@@ -198,10 +212,12 @@ define([
 //        },
 
         txtTitle    : 'Title',
-        txtFormat   : 'Format as table',
+        txtFormat   : 'Create table',
         textCancel  : 'Cancel',
         txtEmpty    : 'This field is required',
         txtInvalidRange: 'ERROR! Invalid cells range',
-        errorAutoFilterDataRange: 'The operation could not be done for the selected range of cells.<br>Select a uniform data range inside or outside the table and try again.'
+        errorAutoFilterDataRange: 'The operation could not be done for the selected range of cells.<br>Select a uniform data range inside or outside the table and try again.',
+        errorFTChangeTableRangeError: 'Operation could not be completed for the selected cell range.<br>Select a range so that the first table row was on the same row<br>and the resulting table overlapped the current one.',
+        errorFTRangeIncludedOtherTables: 'Operation could not be completed for the selected cell range.<br>Select a range which does not include other tables.'
     }, SSE.Views.TableOptionsDialog || {}))
 });
\ No newline at end of file

apps/spreadsheeteditor/main/locale/en.json

@@ -709,6 +709,7 @@
   "SSE.Views.RightMenu.txtParagraphSettings": "Text Settings",
   "SSE.Views.RightMenu.txtSettings": "Common Settings",
   "SSE.Views.RightMenu.txtShapeSettings": "Shape Settings",
+  "SSE.Views.RightMenu.txtTableSettings": "Table Settings",
   "SSE.Views.RightMenu.txtTextArtSettings": "Text Art Settings",
   "SSE.Views.SetValueDialog.cancelButtonText": "Cancel",
   "SSE.Views.SetValueDialog.okButtonText": "OK",
@@ -825,6 +826,8 @@
   "SSE.Views.TableOptionsDialog.txtFormat": "Create table",
   "SSE.Views.TableOptionsDialog.txtInvalidRange": "ERROR! Invalid cells range",
   "SSE.Views.TableOptionsDialog.txtTitle": "Title",
+  "SSE.Views.TableOptionsDialog.errorFTChangeTableRangeError": "Operation could not be completed for the selected cell range.<br>Select a range so that the first table row was on the same row<br>and the resulting table overlapped the current one.",
+  "SSE.Views.TableOptionsDialog.errorFTRangeIncludedOtherTables": "Operation could not be completed for the selected cell range.<br>Select a range which does not include other tables.",
   "SSE.Views.TextArtSettings.strBackground": "Background color",
   "SSE.Views.TextArtSettings.strColor": "Color",
   "SSE.Views.TextArtSettings.strFill": "Fill",

apps/spreadsheeteditor/main/resources/less/rightmenu.less

@@ -20,6 +20,9 @@
 
         /*menuTextArt*/
         .toolbar-btn-icon(btn-menu-textart, 66, @toolbar-icon-size);
+
+        /*menuTable*/
+        .toolbar-btn-icon(btn-menu-table,   80, @toolbar-icon-size);
     }
 }
 
@@ -79,12 +82,19 @@
     }
 }
 
+.btn-edit-table,
 .btn-change-shape {
     .background-ximage('@{app-image-path}/right-panels/rowscols_icon.png', '@{app-image-path}/right-panels/rowscols_icon@2x.png', 84px);
     margin-right: 2px !important;
     margin-bottom: 1px !important;
 }
 
+.btn-edit-table                  {background-position: 0      0;}
+button.over .btn-edit-table      {background-position: -28px  0;}
+.btn-group.open .btn-edit-table,
+button.active .btn-edit-table,
+button:active .btn-edit-table    {background-position: -56px  0;}
+
 .btn-change-shape                  {background-position: 0      -16px;}
 button.over .btn-change-shape      {background-position: -28px  -16px;}
 .btn-group.open .btn-change-shape,
@@ -283,4 +293,8 @@ button:active .btn-change-shape    {background-position: -56px  -16px;}
 
 .pie-doughnut{
     background-position: -200px 0;
+}
+
+#table-combo-template .combo-dataview{
+    .combo-template(60px);
 }
\ No newline at end of file