refactor(smartTables): change table order, fix editable buttons

src/app/pages/tables/TablesPageCtrl.js

@@ -625,9 +625,39 @@
       },
       {
         "id": 5,
-        "name": "Cheryl Schwartz",
+        "name": "Buckley Schwartz",
+        "status": 1,
+        "group": 1
+      },
+      {
+        "id": 6,
+        "name": "Mathews Hopkins",
         "status": 4,
         "group": 2
+      },
+      {
+        "id": 7,
+        "name": "Leah Vang",
+        "status": 4,
+        "group": 1
+      },
+      {
+        "id": 8,
+        "name": "Vang Schwartz",
+        "status": 4,
+        "group": 2
+      },
+      {
+        "id": 9,
+        "name": "Hopkin Esther",
+        "status": 1,
+        "group": 2
+      },
+      {
+        "id": 10,
+        "name": "Mathews Schwartz",
+        "status": 1,
+        "group": 3
       }
     ];
 

src/app/pages/tables/smart/tables.html

@@ -2,8 +2,8 @@
 
   <div class="row">
     <div class="col-md-12">
-      <div ba-panel ba-panel-title="Smart Table With Filtering, Sorting And Pagination" ba-panel-class="with-scroll">
+      <div ba-panel ba-panel-title="Editable Rows" ba-panel-class="with-scroll">
-        <div include-with-scope="app/pages/tables/widgets/smartTable.html"></div>
+        <div include-with-scope="app/pages/tables/widgets/editableRowTable.html"></div>
       </div>
     </div>
   </div>
@@ -18,8 +18,8 @@
 
   <div class="row">
     <div class="col-md-12">
-      <div ba-panel ba-panel-title="Editable Rows" ba-panel-class="with-scroll">
+      <div ba-panel ba-panel-title="Smart Table With Filtering, Sorting And Pagination" ba-panel-class="with-scroll">
-        <div include-with-scope="app/pages/tables/widgets/editableRowTable.html"></div>
+        <div include-with-scope="app/pages/tables/widgets/smartTable.html"></div>
       </div>
     </div>
   </div>

src/app/theme/theme.run.js

@@ -9,7 +9,7 @@
       .run(themeRun);
 
   /** @ngInject */
-  function themeRun($timeout, $rootScope, layoutSizes, editableOptions) {
+  function themeRun($timeout, $rootScope, layoutSizes, editableOptions, editableThemes) {
     $timeout(function () {
       $rootScope.$pageFinishedLoading = true;
     }, 1000);
@@ -21,6 +21,8 @@
     $rootScope.$isMenuCollapsed = window.innerWidth <= layoutSizes.resWidthCollapseSidebar;
 
     editableOptions.theme = 'bs3';
+    editableThemes['bs3'].submitTpl = '<button type="submit" class="btn btn-primary btn-with-icon"><i class="ion-checkmark-round"></i></button>';
+    editableThemes['bs3'].cancelTpl = '<button type="button" ng-click="$form.$cancel()" class="btn btn-default btn-with-icon"><i class="ion-close-round"></i></button>';
   }
 
 })();

src/sass/theme/_table.scss

@@ -277,3 +277,43 @@ th {
 .table-striped > tbody > tr > td {
   border: none;
 }
+.pagination > li > a,
+.pagination > li > span{
+  color: $default;
+  border-color: $default;
+}
+
+
+.pagination > li:first-of-type > a,
+.pagination > li:first-of-type > span{
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+
+.pagination > li:last-of-type > a,
+.pagination > li:last-of-type > span{
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+
+.pagination > .active > a,
+.pagination > .active > span,
+.pagination > .active > a:hover,
+.pagination > .active > span:hover,
+.pagination > .active > a:focus,
+.pagination > .active > span:focus {
+  background-color: $primary;
+  border-color: $default;
+}
+
+.pagination > li > a:hover,
+.pagination > li > span:hover,
+.pagination > li > a:focus,
+.pagination > li > span:focus{
+  background-color: rgba(0,0,0,.2);
+  color: $default;
+}
+
+.editable-buttons .btn-with-icon i {
+   margin-right: 0;
+}