Added groups for table templates

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

@@ -2102,6 +2102,7 @@ define([
                     el: element,
                     parentMenu  : menu,
                     restoreHeight: 300,
+                    groups: new Common.UI.DataViewGroupStore(),
                     style: 'max-height: 300px;',
                     store: me.getCollection('TableTemplates'),
                     itemTemplate: _.template('<div class="item-template"><img src="<%= imageUrl %>" id="<%= id %>" style="width:60px;height:44px;"></div>'),
@@ -2158,30 +2159,65 @@ define([
         onApiInitTableTemplates: function(images) {
             var me = this;
             var store = this.getCollection('TableTemplates');
+            var hasCustomGroup = false;
+            var hasNoNameGroup = false;
+            this.fillTableTemplates();
+
             if (store) {
                 var templates = [];
+                var groups = [
+                    {id: 'menu-table-group-custom',    caption: me.txtGroupTable_Custom},
+                    {id: 'menu-table-group-light',     caption: me.txtGroupTable_Light},
+                    {id: 'menu-table-group-medium',    caption: me.txtGroupTable_Medium},
+                    {id: 'menu-table-group-dark',      caption: me.txtGroupTable_Dark},
+                    {id: 'menu-table-group-no-name',   caption: '&nbsp'},
+                ];
                 _.each(images, function(item) {
                     var tip = item.asc_getDisplayName();
+                    var groupItem = '';
                     if (item.asc_getType()==0) {
                         var arr = tip.split(' '),
                             last = arr.pop();
+                        if(arr.length > 0){
+                            groupItem = 'menu-table-group-' + arr[arr.length - 1].toLowerCase();
+                        }
+                        if(groups.some(function(item) {return item.id === groupItem;}) == false) {
+                            groupItem = 'menu-table-group-no-name';
+                            hasNoNameGroup = true;
+                        }
                         arr = 'txtTable_' + arr.join('');
                         tip = me[arr] ? me[arr] + ' ' + last : tip;
                     }
+                    else {
+                        groupItem = 'menu-table-group-custom'
+                        hasCustomGroup = true;
+                    }
                     templates.push({
                         name        : item.asc_getName(),
                         caption     : item.asc_getDisplayName(),
                         type        : item.asc_getType(),
                         imageUrl    : item.asc_getImage(),
+                        group       : groupItem,  
                         allowSelected : true,
                         selected    : false,
                         tip         : tip
                     });
                 });
 
+                if(hasCustomGroup === false){
+                    groups = groups.filter(function(item) {
+                        return item.id != 'menu-table-group-custom';
+                    });
+                }
+                if(hasNoNameGroup === false){
+                    groups = groups.filter(function(item) {
+                        return item.id != 'menu-table-group-no-name';
+                    });
+                }
+                
+                me.toolbar.mnuTableTemplatePicker.groups.reset(groups);
                 store.reset(templates);
             }
-            this.fillTableTemplates();
         },
 
         onApiInitEditorStyles: function(styles){
@@ -5105,6 +5141,10 @@ define([
         txtTable_TableStyleMedium: 'Table Style Medium',
         txtTable_TableStyleDark: 'Table Style Dark',
         txtTable_TableStyleLight: 'Table Style Light',
+        txtGroupTable_Custom: 'Custom',
+        txtGroupTable_Light: 'Light',
+        txtGroupTable_Medium: 'Medium',
+        txtGroupTable_Dark: 'Dark',
         textInsert: 'Insert',
         txtInsertCells: 'Insert Cells',
         txtDeleteCells: 'Delete Cells',

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

@@ -560,21 +560,62 @@ define([
                     data[index].model.set('imageUrl', img, {silent: true});
                     $(data[index].el).find('img').attr('src', img);
                 });
-            } else {
+            } else {            
-                var arr = [];
+                var arrStyles = [];
-                _.each(Templates, function(template){
+                var groups = [
-                    arr.push({
+                    {id: 'menu-table-group-custom',    caption: self.txtGroupTable_Custom},
+                    {id: 'menu-table-group-light',     caption: self.txtGroupTable_Light},
+                    {id: 'menu-table-group-medium',    caption: self.txtGroupTable_Medium},
+                    {id: 'menu-table-group-dark',      caption: self.txtGroupTable_Dark},
+                    {id: 'menu-table-group-no-name',   caption: '&nbsp'},
+                ];
+                var hasCustomGroup = false;
+                var hasNoNameGroup = false;
+                _.each(Templates, function(item){
+                    var tip = item.asc_getDisplayName();
+                    var groupItem = '';
+                    if (item.asc_getType()==0) {
+                        var arr = tip.split(' '),
+                            last = arr.pop();
+                        if(arr.length > 0){
+                            groupItem = 'menu-table-group-' + arr[arr.length - 1].toLowerCase();
+                        }
+                        if(groups.some(function(item) {return item.id === groupItem;}) == false) {
+                            groupItem = 'menu-table-group-no-name';
+                            hasNoNameGroup = true;
+                        }
+                        arr = 'txtTable_' + arr.join('');
+                        tip = self[arr] ? self[arr] + ' ' + last : tip;
+                    }
+                    else {
+                        groupItem = 'menu-table-group-custom'
+                        hasCustomGroup = true;
+                    }                        
+                    arrStyles.push({
                         id          : Common.UI.getId(),
-                        name        : template.asc_getName(),
+                        name        : item.asc_getName(),
-                        caption     : template.asc_getDisplayName(),
+                        caption     : item.asc_getDisplayName(),
-                        type        : template.asc_getType(),
+                        type        : item.asc_getType(),
-                        imageUrl    : template.asc_getImage(),
+                        imageUrl    : item.asc_getImage(),
+                        group       : groupItem, 
                         allowSelected : true,
                         selected    : false,
-                        tip         : template.asc_getDisplayName()
+                        tip         : tip
                     });
                 });
-                self.mnuTableTemplatePicker.store.reset(arr);
+                if(hasCustomGroup === false){
+                    groups = groups.filter(function(item) {
+                        return item.id != 'menu-table-group-custom';
+                    });
+                }
+                if(hasNoNameGroup === false){
+                    groups = groups.filter(function(item) {
+                        return item.id != 'menu-table-group-no-name';
+                    });
+                }
+
+                self.mnuTableTemplatePicker.groups.reset(groups);
+                self.mnuTableTemplatePicker.store.reset(arrStyles);
             }
         },
 
@@ -700,7 +741,15 @@ define([
         textRemDuplicates: 'Remove duplicates',
         textSlicer: 'Insert slicer',
         textPivot: 'Insert pivot table',
-        textActions: 'Table actions'
+        textActions: 'Table actions',
+        txtTable_TableStyleMedium: 'Table Style Medium',
+        txtTable_TableStyleDark: 'Table Style Dark',
+        txtTable_TableStyleLight: 'Table Style Light',
+        txtGroupTable_Custom: 'Custom',
+        txtGroupTable_Light: 'Light',
+        txtGroupTable_Medium: 'Medium',
+        txtGroupTable_Dark: 'Dark',
+        
         
     }, SSE.Views.TableSettings || {}));
 });

apps/spreadsheeteditor/main/locale/en.json

@@ -1482,6 +1482,10 @@
   "SSE.Controllers.Toolbar.txtTable_TableStyleDark": "Table Style Dark",
   "SSE.Controllers.Toolbar.txtTable_TableStyleLight": "Table Style Light",
   "SSE.Controllers.Toolbar.txtTable_TableStyleMedium": "Table Style Medium",
+  "SSE.Controllers.Toolbar.txtGroupTable_Custom": "Custom",
+  "SSE.Controllers.Toolbar.txtGroupTable_Light": "Light",
+  "SSE.Controllers.Toolbar.txtGroupTable_Medium": "Medium",
+  "SSE.Controllers.Toolbar.txtGroupTable_Dark": "Dark",
   "SSE.Controllers.Toolbar.warnLongOperation": "The operation you are about to perform might take rather much time to complete.<br>Are you sure you want to continue?",
   "SSE.Controllers.Toolbar.warnMergeLostData": "Only the data from the upper-left cell will remain in the merged cell. <br>Are you sure you want to continue?",
   "SSE.Controllers.Viewport.textFreezePanes": "Freeze Panes",
@@ -3286,6 +3290,13 @@
   "SSE.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.",
   "SSE.Views.TableSettingsAdvanced.textAltTitle": "Title",
   "SSE.Views.TableSettingsAdvanced.textTitle": "Table - Advanced Settings",
+  "SSE.Views.TableSettingsAdvanced.txtTable_TableStyleDark": "Table Style Dark",
+  "SSE.Views.TableSettingsAdvanced.txtTable_TableStyleLight": "Table Style Light",
+  "SSE.Views.TableSettingsAdvanced.txtTable_TableStyleMedium": "Table Style Medium",
+  "SSE.Views.TableSettingsAdvanced.txtGroupTable_Custom": "Custom",
+  "SSE.Views.TableSettingsAdvanced.txtGroupTable_Light": "Light",
+  "SSE.Views.TableSettingsAdvanced.txtGroupTable_Medium": "Medium",
+  "SSE.Views.TableSettingsAdvanced.txtGroupTable_Dark": "Dark",
   "SSE.Views.TextArtSettings.strBackground": "Background color",
   "SSE.Views.TextArtSettings.strColor": "Color",
   "SSE.Views.TextArtSettings.strFill": "Fill",

apps/spreadsheeteditor/main/locale/ru.json

@@ -1481,6 +1481,10 @@
   "SSE.Controllers.Toolbar.txtTable_TableStyleDark": "Стиль таблицы: темный",
   "SSE.Controllers.Toolbar.txtTable_TableStyleLight": "Стиль таблицы: светлый",
   "SSE.Controllers.Toolbar.txtTable_TableStyleMedium": "Стиль таблицы: средний",
+  "SSE.Controllers.Toolbar.txtGroupTable_Custom": "Пользовательский",
+  "SSE.Controllers.Toolbar.txtGroupTable_Light": "Светлый",
+  "SSE.Controllers.Toolbar.txtGroupTable_Medium": "Средний",
+  "SSE.Controllers.Toolbar.txtGroupTable_Dark": "Тёмный",
   "SSE.Controllers.Toolbar.warnLongOperation": "Для завершения операции, которую вы собираетесь выполнить, может потребоваться довольно много времени.<br>Вы действительно хотите продолжить?",
   "SSE.Controllers.Toolbar.warnMergeLostData": "В объединенной ячейке останутся только данные из левой верхней ячейки.<br>Вы действительно хотите продолжить?",
   "SSE.Controllers.Viewport.textFreezePanes": "Закрепить области",
@@ -3279,6 +3283,13 @@
   "SSE.Views.TableSettings.textTemplate": "По шаблону",
   "SSE.Views.TableSettings.textTotal": "Итоговая",
   "SSE.Views.TableSettings.warnLongOperation": "Для завершения операции, которую вы собираетесь выполнить, может потребоваться довольно много времени.<br>Вы действительно хотите продолжить?",
+  "SSE.Views.TableSettings.txtTable_TableStyleDark": "Стиль таблицы: темный",
+  "SSE.Views.TableSettings.txtTable_TableStyleLight": "Стиль таблицы: светлый",
+  "SSE.Views.TableSettings.txtTable_TableStyleMedium": "Стиль таблицы: средний",
+  "SSE.Views.TableSettings.txtGroupTable_Custom": "Пользовательский",
+  "SSE.Views.TableSettings.txtGroupTable_Light": "Светлый",
+  "SSE.Views.TableSettings.txtGroupTable_Medium": "Средний",
+  "SSE.Views.TableSettings.txtGroupTable_Dark": "Тёмный",
   "SSE.Views.TableSettingsAdvanced.textAlt": "Альтернативный текст",
   "SSE.Views.TableSettingsAdvanced.textAltDescription": "Описание",
   "SSE.Views.TableSettingsAdvanced.textAltTip": "Альтернативное текстовое представление информации о визуальном объекте, которое будет зачитываться для людей с нарушениями зрения или когнитивными нарушениями, чтобы помочь им лучше понять, какую информацию содержит изображение, автофигура, диаграмма или таблица.",

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

@@ -221,3 +221,10 @@
         .box-shadow(none);
     }
 }
+
+#id-table-menu-template {
+    .group-description {
+        padding: 3px 0 3px 10px;
+        .font-weight-bold();
+    } 
+}

apps/spreadsheeteditor/main/resources/less/toolbar.less

@@ -147,6 +147,13 @@
     }
 }
 
+#id-toolbar-menu-table-templates {
+    .group-description {
+        padding: 3px 0 3px 10px;
+        .font-weight-bold();
+    } 
+}
+
 .combo-styles {
     .menu-picker-container .dataview {
       padding: 10px 15px 0 5px;