[SSE] Table settings: change action buttons

apps/common/main/resources/less/buttons.less

@@ -309,7 +309,7 @@
 
     &:not(.icon-top)
     .caption:not(:empty) {
-        padding: 0 2px;
+        padding: 0 5px;
     }
 
     .icon {

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

@@ -75,22 +75,34 @@
     </tr>
     <tr>
         <td class="padding-small" colspan=2>
-            <button type="button" class="btn btn-text-default" id="table-btn-convert-range" style="width:100%;"><%= scope.textConvertRange %></button>
+            <div class="separator horizontal"></div>
+        </td>
+    </tr>
+</table>
+<table cols="2">
+    <tr>
+        <td class="padding-small" colspan=2>
+            <label class="header"><%= scope.textActions %></label>
         </td>
     </tr>
     <tr>
         <td class="padding-small" colspan=2>
-            <button type="button" class="btn btn-text-default" id="table-btn-rem-duplicates" style="width:100%;"><%= scope.textRemDuplicates %></button>
+            <div id="table-btn-rem-duplicates" style="width:100%;"></div>
         </td>
     </tr>
     <tr>
         <td class="padding-small" colspan=2>
-            <button type="button" class="btn btn-text-default" id="table-btn-slicer" style="width:100%;"><%= scope.textSlicer %></button>
+            <div id="table-btn-convert-range" style="width:100%;"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div id="table-btn-slicer" style="width:100%;"></div>
         </td>
     </tr>
     <tr class="pivot-only">
         <td class="padding-small" colspan=2>
-            <button type="button" class="btn btn-text-default" id="table-btn-pivot" style="width:100%;"><%= scope.textPivot %></button>
+            <div id="table-btn-pivot" style="width:100%;"></div>
         </td>
     </tr>
     <tr>

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

@@ -294,8 +294,13 @@ define([
             this.lockedControls.push(this.btnEdit);
 
             this.btnConvertRange = new Common.UI.Button({
-                el: $('#table-btn-convert-range')
+                parentEl: $('#table-btn-convert-range'),
+                cls         : 'btn-toolbar',
+                iconCls     : 'toolbar__icon btn-convert-to-range',
+                caption     : this.textConvertRange,
+                style       : 'width: 100%;text-align: left;'
             });
+
             this.btnConvertRange.on('click', _.bind(function(btn){
                 if (this.api) this.api.asc_convertTableToRange(this._state.TableName);
                 Common.NotificationCenter.trigger('edit:complete', this);
@@ -303,7 +308,11 @@ define([
             this.lockedControls.push(this.btnConvertRange);
 
             this.btnRemDuplicates = new Common.UI.Button({
-                el: $('#table-btn-rem-duplicates')
+                parentEl: $('#table-btn-rem-duplicates'),
+                cls         : 'btn-toolbar',
+                iconCls     : 'toolbar__icon btn-remove-duplicates',
+                caption     : this.textRemDuplicates,
+                style       : 'width: 100%;text-align: left;'
             });
             this.btnRemDuplicates.on('click', _.bind(function(btn){
                 Common.NotificationCenter.trigger('data:remduplicates', this);
@@ -311,13 +320,21 @@ define([
             this.lockedControls.push(this.btnRemDuplicates);
 
             this.btnSlicer = new Common.UI.Button({
-                el: $('#table-btn-slicer')
+                parentEl: $('#table-btn-slicer'),
+                cls         : 'btn-toolbar',
+                iconCls     : 'toolbar__icon btn-slicer',
+                caption     : this.textSlicer,
+                style       : 'width: 100%;text-align: left;'
             });
             this.btnSlicer.on('click', _.bind(this.onInsertSlicerClick, this));
             this.lockedControls.push(this.btnSlicer);
 
             this.btnPivot = new Common.UI.Button({
-                el: $('#table-btn-pivot')
+                parentEl: $('#table-btn-pivot'),
+                cls         : 'btn-toolbar',
+                iconCls     : 'toolbar__icon btn-pivot-sum',
+                caption     : this.textPivot,
+                style       : 'width: 100%;text-align: left;'
             });
             this.btnPivot.on('click', _.bind(this.onInsertPivotClick, this));
             this.lockedControls.push(this.btnPivot);
@@ -626,7 +643,8 @@ define([
         warnLongOperation: 'The operation you are about to perform might take rather much time to complete.<br>Are you sure you want to continue?',
         textRemDuplicates: 'Remove duplicates',
         textSlicer: 'Insert slicer',
-        textPivot: 'Insert pivot table'
+        textPivot: 'Insert pivot table',
+        textActions: 'Table actions'
         
     }, SSE.Views.TableSettings || {}));
 });

apps/spreadsheeteditor/main/locale/en.json

@@ -2532,6 +2532,7 @@
   "SSE.Views.TableSettings.warnLongOperation": "The operation you are about to perform might take rather much time to complete.<br>Are you sure you want to continue?",
   "SSE.Views.TableSettings.textSlicer": "Insert slicer",
   "SSE.Views.TableSettings.textPivot": "Insert pivot table",
+  "SSE.Views.TableSettings.textActions": "Table actions",
   "SSE.Views.TableSettingsAdvanced.textAlt": "Alternative Text",
   "SSE.Views.TableSettingsAdvanced.textAltDescription": "Description",
   "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.",