Added customization options for the Table widget toolbar button labels

modules/backend/lang/en/lang.php

@@ -199,6 +199,7 @@ return [
         'select_none' => 'none',
         'select_placeholder' => 'please select',
         'insert_row' => 'Insert Row',
+        'insert_row_below' => 'Insert Row Below',
         'delete_row' => 'Delete Row',
         'concurrency_file_changed_title' => 'File was changed',
         'concurrency_file_changed_description' => "The file you're editing has been changed on disk by another user. You can either reload the file and lose your changes or override the file on the disk."

modules/backend/widgets/Table.php

@@ -1,5 +1,6 @@
 <?php namespace Backend\Widgets;
 
+use Lang;
 use Input;
 use Request;
 use Backend\Classes\WidgetBase;
@@ -110,6 +111,10 @@ class Table extends WidgetBase
         $this->vars['height'] = $this->getConfig('height', false) ?: 'false';
         $this->vars['dynamicHeight'] = $this->getConfig('dynamicHeight', false) ?: 'false';
 
+        $this->vars['btnAddRowLabel'] = Lang::get($this->getConfig('btnAddRowLabel', 'backend::lang.form.insert_row'));
+        $this->vars['btnAddRowBelowLabel'] = Lang::get($this->getConfig('btnAddRowBelowLabel', 'backend::lang.form.insert_row_below'));
+        $this->vars['btnDeleteRowLabel'] = Lang::get($this->getConfig('btnDeleteRowLabel', 'backend::lang.form.delete_row'));
+
         $isClientDataSource = $this->isClientDataSource();
 
         $this->vars['clientDataSourceClass'] = $isClientDataSource ? 'client' : 'server';

modules/backend/widgets/table/assets/css/table.css

@@ -304,6 +304,19 @@
 .control-table td[data-column-type=dropdown] .content-container {
   outline: none;
 }
+/* Frameless control styles start */
+.widget-field.frameless .control-table .table-container {
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  border-radius: 0;
+}
+.widget-field.frameless .control-table .toolbar {
+  background: transparent;
+}
+/* Frameless control styles end */
 html.cssanimations .control-table td[data-column-type=dropdown] [data-view-container].loading:after {
   background-image: url('../../../../../../modules/system/assets/ui/images/loader-transparent.svg');
   background-size: 15px 15px;

modules/backend/widgets/table/assets/js/build-min.js

@@ -81,7 +81,7 @@ if(this.options.adding){var addBelowButton=document.createElement('a')
 addBelowButton.setAttribute('class','btn add-table-row-below')
 addBelowButton.setAttribute('data-cmd','record-add-below')
 this.toolbar.appendChild(addBelowButton)
-if(this.navigation.paginationEnabled()||!this.options.rowSorting){addBelowButton.textContent='Add row'}else{addBelowButton.textContent='Add row below'
+if(this.navigation.paginationEnabled()||!this.options.rowSorting){addBelowButton.textContent=this.options.btnAddRowLabel}else{addBelowButton.textContent=this.options.btnAddRowBelowLabel
 var addAboveButton=document.createElement('a')
 addAboveButton.setAttribute('class','btn add-table-row-above')
 addAboveButton.textContent='Add row above'
@@ -89,7 +89,7 @@ addAboveButton.setAttribute('data-cmd','record-add-above')
 this.toolbar.appendChild(addAboveButton)}}
 if(this.options.deleting){var deleteButton=document.createElement('a')
 deleteButton.setAttribute('class','btn delete-table-row')
-deleteButton.textContent='Delete row'
+deleteButton.textContent=this.options.btnDeleteRowLabel
 deleteButton.setAttribute('data-cmd','record-delete')
 this.toolbar.appendChild(deleteButton)}
 this.tableContainer.appendChild(this.toolbar)}
@@ -367,7 +367,7 @@ Table.prototype.setCellValue=function(cellElement,value){var dataContainer=cellE
 if(dataContainer.value!=value){dataContainer.value=value
 this.markCellRowDirty(cellElement)
 this.notifyRowProcessorsOnChange(cellElement)}}
-Table.DEFAULTS={clientDataSourceClass:'client',keyColumn:'id',recordsPerPage:false,data:null,postback:true,postbackHandlerName:'onSave',adding:true,deleting:true,toolbar:true,rowSorting:false,height:false,dynamicHeight:false}
+Table.DEFAULTS={clientDataSourceClass:'client',keyColumn:'id',recordsPerPage:false,data:null,postback:true,postbackHandlerName:'onSave',adding:true,deleting:true,toolbar:true,rowSorting:false,height:false,dynamicHeight:false,btnAddRowLabel:'Add row',btnAddRowBelowLabel:'Add row below',btnDeleteRowLabel:'Delete row'}
 var old=$.fn.table
 $.fn.table=function(option){var args=Array.prototype.slice.call(arguments,1),result=undefined
 this.each(function(){var $this=$(this)

modules/backend/widgets/table/assets/js/table.js

@@ -231,9 +231,9 @@
                 // When the pagination is enabled, or sorting is disabled,
                 // new records can only be added to the bottom of the
                 // table.
-                addBelowButton.textContent = 'Add row'
+                addBelowButton.textContent = this.options.btnAddRowLabel
             } else {
-                addBelowButton.textContent = 'Add row below'
+                addBelowButton.textContent = this.options.btnAddRowBelowLabel
 
                 var addAboveButton = document.createElement('a')
                 addAboveButton.setAttribute('class', 'btn add-table-row-above')
@@ -246,7 +246,7 @@
         if (this.options.deleting) {
             var deleteButton = document.createElement('a')
             deleteButton.setAttribute('class', 'btn delete-table-row')
-            deleteButton.textContent = 'Delete row'
+            deleteButton.textContent = this.options.btnDeleteRowLabel
             deleteButton.setAttribute('data-cmd', 'record-delete')
             this.toolbar.appendChild(deleteButton)
         }
@@ -998,7 +998,10 @@
         toolbar: true,
         rowSorting: false,
         height: false,
-        dynamicHeight: false
+        dynamicHeight: false,
+        btnAddRowLabel: 'Add row',
+        btnAddRowBelowLabel: 'Add row below',
+        btnDeleteRowLabel: 'Delete row'
     }
 
     // TABLE PLUGIN DEFINITION

modules/backend/widgets/table/assets/less/table.less

@@ -366,6 +366,23 @@
     }
 }
 
+/* Frameless control styles start */
+
+.widget-field.frameless .control-table {
+    .table-container {
+        border-top: none;
+        border-left: none;
+        border-right: none;
+        .border-radius(0);
+    }
+
+    .toolbar {
+        background: transparent;
+    }
+}
+
+/* Frameless control styles end */
+
 html.cssanimations {
     .control-table td[data-column-type=dropdown] {
         [data-view-container].loading:after {

modules/backend/widgets/table/partials/_table.htm

@@ -13,4 +13,8 @@
     data-key-column="<?= e($recordsKeyFrom) ?>"
     data-client-data-source-class="<?= e($clientDataSourceClass) ?>"
     data-dynamic-height="<?= e($dynamicHeight) ?>"
-    data-alias="<?= e($this->alias) ?>"></div>
+    data-alias="<?= e($this->alias) ?>"
+    data-btn-add-row-label="<?= e($btnAddRowLabel) ?>",
+    data-btn-add-row-below-label="<?= e($btnAddRowBelowLabel) ?>",
+    data-btn-delete-row-label="<?= e($btnDeleteRowLabel) ?>"
+></div>