Added groups for table in presentationeditor

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

@@ -707,28 +707,72 @@ define([
 
         onAddTableStylesPreview: function(Templates){
             var self = this;
-            var arr = [];
+            var templates = [];
+            var groups = [
+                {id: 'menu-table-group-custom',    caption: self.txtGroupTable_Custom,  templates: []},
+                {id: 'menu-table-group-optimal',   caption: self.txtGroupTable_Optimal, templates: []},
+                {id: 'menu-table-group-light',     caption: self.txtGroupTable_Light,   templates: []},
+                {id: 'menu-table-group-medium',    caption: self.txtGroupTable_Medium,  templates: []},
+                {id: 'menu-table-group-dark',      caption: self.txtGroupTable_Dark,    templates: []},
+                {id: 'menu-table-group-no-name',   caption: '&nbsp',                    templates: []},
+            ];
+
+            self.mnuTableTemplatePicker.store.models.forEach(function(template) {
+                groups.filter(function(item){ return item.id == template.attributes.group; })[0].templates.push(template);
+            });
             _.each(Templates, function(template){
                 var tip = template.asc_getDisplayName();
+                var groupItem = '';
+
                 if (template.asc_getType()==0) {
+                    var arr = tip.split(' ');
+                    
+                    if(new RegExp('No Style|Themed Style', 'i').test(tip)){
+                        groupItem = 'menu-table-group-optimal';
+                    }
+                    else{
+                        if(arr[0]){
+                            groupItem = 'menu-table-group-' + arr[0].toLowerCase();
+                        }
+                        if(groups.some(function(item) {return item.id === groupItem;}) == false) {
+                            groupItem = 'menu-table-group-no-name';
+                        }
+                    }
+
                     ['No Style', 'No Grid', 'Table Grid', 'Themed Style', 'Light Style', 'Medium Style', 'Dark Style', 'Accent'].forEach(function(item){
                         var str = 'txtTable_' + item.replace(' ', '');
                         if (self[str])
                             tip = tip.replace(new RegExp(item, 'g'), self[str]);
                     });
                 }
-                arr.push({
+                else {
+                    groupItem = 'menu-table-group-custom'
+                }   
+
+                groups.filter(function(item){ return item.id == groupItem; })[0].templates.push({
                     imageUrl: template.asc_getImage(),
                     id     : Common.UI.getId(),
                     templateId: template.asc_getId(),
+                    group  : groupItem,
                     tip    : tip
                 });
             });
+            
+            groups = groups.filter(function(item, index){
+                return item.templates.length > 0
+            });
+            
+            groups.forEach(function(item){
+                templates = templates.concat(item.templates);
+                delete item.templates;
+            });
+            
             if (this._state.beginPreviewStyles) {
                 this._state.beginPreviewStyles = false;
-                self.mnuTableTemplatePicker && self.mnuTableTemplatePicker.store.reset(arr);
+            } 
-            } else
+            
-                self.mnuTableTemplatePicker && self.mnuTableTemplatePicker.store.add(arr);
+            self.mnuTableTemplatePicker && self.mnuTableTemplatePicker.groups.reset(groups);
+            self.mnuTableTemplatePicker && self.mnuTableTemplatePicker.store.reset(templates);
             !this._state.currentStyleFound && this.selectCurrentTableStyle();
         },
 
@@ -878,7 +922,12 @@ define([
         txtTable_LightStyle: 'Light Style',
         txtTable_MediumStyle: 'Medium Style',
         txtTable_DarkStyle: 'Dark Style',
-        txtTable_Accent: 'Accent'
+        txtTable_Accent: 'Accent',
+        txtGroupTable_Custom: 'Custom',
+        txtGroupTable_Optimal: 'Best Match for Document',
+        txtGroupTable_Light: 'Light',
+        txtGroupTable_Medium: 'Medium',
+        txtGroupTable_Dark: 'Dark',
 
 }, PE.Views.TableSettings || {}));
 });

apps/presentationeditor/main/locale/en.json

@@ -2087,6 +2087,11 @@
   "PE.Views.TableSettings.txtTable_NoStyle": "No Style",
   "PE.Views.TableSettings.txtTable_TableGrid": "Table Grid",
   "PE.Views.TableSettings.txtTable_ThemedStyle": "Themed Style",
+  "PE.Views.TableSettings.txtGroupTable_Custom": "Custom",
+  "PE.Views.TableSettings.txtGroupTable_Optimal": "Best Match for Document",
+  "PE.Views.TableSettings.txtGroupTable_Light": "Light",
+  "PE.Views.TableSettings.txtGroupTable_Medium": "Medium",
+  "PE.Views.TableSettings.txtGroupTable_Dark": "Dark",
   "PE.Views.TableSettingsAdvanced.textAlt": "Alternative Text",
   "PE.Views.TableSettingsAdvanced.textAltDescription": "Description",
   "PE.Views.TableSettingsAdvanced.textAltTip": "The alternative text-based representation of the visual object information, which will be read to the people with vision or cognitive impairments to help them better understand what information there is in the image, autoshape, chart, or table.",

apps/presentationeditor/main/locale/ru.json

@@ -2078,6 +2078,11 @@
   "PE.Views.TableSettings.txtTable_NoStyle": "Нет стиля",
   "PE.Views.TableSettings.txtTable_TableGrid": "сетка таблицы",
   "PE.Views.TableSettings.txtTable_ThemedStyle": "Стиль из темы",
+  "PE.Views.TableSettings.txtGroupTable_Custom": "Пользовательский",
+  "PE.Views.TableSettings.txtGroupTable_Optimal": "Оптимальный для документа",
+  "PE.Views.TableSettings.txtGroupTable_Light": "Светлый",
+  "PE.Views.TableSettings.txtGroupTable_Medium": "Средний",
+  "PE.Views.TableSettings.txtGroupTable_Dark": "Темный",
   "PE.Views.TableSettingsAdvanced.textAlt": "Альтернативный текст",
   "PE.Views.TableSettingsAdvanced.textAltDescription": "Описание",
   "PE.Views.TableSettingsAdvanced.textAltTip": "Альтернативное текстовое представление информации о визуальном объекте, которое будет зачитываться для людей с нарушениями зрения или когнитивными нарушениями, чтобы помочь им лучше понять, какую информацию содержит изображение, автофигура, диаграмма или таблица.",

apps/presentationeditor/main/resources/less/rightmenu.less

@@ -101,4 +101,26 @@
             }
         }
     }
+}
+
+#id-table-menu-template {
+    .group-description {
+        padding: 3px 0 3px 10px;
+        .font-weight-bold();
+        
+    } 
+
+    .group-items-container {
+        .item {
+            &:hover {
+                .box-shadow(0 0 0 2px @border-preview-hover-ie) !important;
+                .box-shadow(0 0 0 @scaled-two-px-value @border-preview-hover) !important;
+            }
+      
+            &.selected {
+                .box-shadow(0 0 0 2px @border-preview-select-ie) !important;
+                .box-shadow(0 0 0 @scaled-two-px-value @border-preview-select) !important;
+            }
+        }
+    }
 }