[SSE] В правую панель добавлены настройки для форматированных таблиц.

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

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

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

@@ -46,6 +46,7 @@ define([
             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.Table] =     {panelId: "id-table-settings",      panel: rightMenu.tableSettings,    btn: rightMenu.btnTable,       hidden: 1, locked: false};
         },
 
         setApi: function(api) {
@@ -71,18 +72,19 @@ define([
 
         onSelectionChanged: function(info) {
             var SelectedObjects = [],
-                selectType = info.asc_getFlags().asc_getSelectionType();
+                selectType = info.asc_getFlags().asc_getSelectionType(),
+                filterInfo = info.asc_getAutoFilterInfo();
 
             if (selectType == c_oAscSelectionType.RangeImage || selectType == c_oAscSelectionType.RangeShape ||
                 selectType == c_oAscSelectionType.RangeChart || selectType == c_oAscSelectionType.RangeChartText || selectType == c_oAscSelectionType.RangeShapeText) {
                 SelectedObjects = this.api.asc_getGraphicObjectProps();
             }
             
-            if (SelectedObjects.length<=0 && !this.rightmenu.minimizedMode) {
+            if (SelectedObjects.length<=0 && !(filterInfo && filterInfo.asc_getTableName()!==null) && !this.rightmenu.minimizedMode) {
                 this.rightmenu.clearSelection();
             }
 
-            this.onFocusObject(SelectedObjects);
+            this.onFocusObject(SelectedObjects, filterInfo);
 
             var need_disable = info.asc_getLocked(),
                 me = this;
@@ -95,7 +97,7 @@ define([
             }
         },
 
-        onFocusObject: function(SelectedObjects) {
+        onFocusObject: function(SelectedObjects, filterInfo) {
             if (!this.editMode)
                 return;
 
@@ -133,6 +135,12 @@ define([
                 this._settings[settingsType].locked = value.asc_getLocked();
             }
 
+            if (filterInfo && filterInfo.asc_getTableName()!==null) {
+                settingsType = Common.Utils.documentSettingsType.Table;
+                this._settings[settingsType].props = filterInfo;
+                this._settings[settingsType].hidden = 0;
+            }
+            
             var lastactive = -1, currentactive, priorityactive = -1;
             for (i=0; i<this._settings.length; ++i) {
                 var pnl = this._settings[i];

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: 64px;"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div class="separator horizontal"></div>
+        </td>
+    </tr>
+    <tr>
+        <td colspan=2>
+            <label class="header"><%= scope.textTableName %></label>
+        </td>
+    </tr>
+    <tr>
+        <td colspan=2 class="padding-small">
+            <div id="table-txt-name" class="input-row"  style="width: 100%;"/>
+        </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 class="padding-small" 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/RightMenu.js

@@ -22,6 +22,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';
@@ -76,12 +77,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;
         },
@@ -102,18 +112,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({
@@ -135,6 +148,7 @@ define([
             this.chartSettings.setApi(api);
             this.shapeSettings.setApi(api);
             this.textartSettings.setApi(api);
+            this.tableSettings.setApi(api);
         },
 
         setMode: function(mode) {
@@ -197,6 +211,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')) {
@@ -224,6 +239,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/locale/en.json

@@ -696,6 +696,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",

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,   34, @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,