refactor(tables): apply new design

src/app/pages/tables/TablesPageCtrl.js

@@ -505,7 +505,8 @@
         lastName: 'Otto',
         username: '@mdo',
         email: 'mdo@gmail.com',
-        age: '28'
+        age: '28',
+        status: 'info'
       },
       {
         id: 2,
@@ -513,7 +514,8 @@
         lastName: 'Thornton',
         username: '@fat',
         email: 'fat@yandex.ru',
-        age: '45'
+        age: '45',
+        status: 'primary'
       },
       {
         id: 3,
@@ -521,7 +523,8 @@
         lastName: 'Bird',
         username: '@twitter',
         email: 'twitter@outlook.com',
-        age: '18'
+        age: '18',
+        status: 'success'
       },
       {
         id: 4,
@@ -529,7 +532,8 @@
         lastName: 'Snow',
         username: '@snow',
         email: 'snow@gmail.com',
-        age: '20'
+        age: '20',
+        status: 'danger'
       },
       {
         id: 5,
@@ -537,7 +541,8 @@
         lastName: 'Sparrow',
         username: '@jack',
         email: 'jack@yandex.ru',
-        age: '30'
+        age: '30',
+        status: 'warning'
       }
     ];
 

src/app/pages/tables/widgets/condensedTable.html

@@ -17,7 +17,7 @@
       <td>{{item.lastName}}</td>
       <td>{{item.username}}</td>
       <td><a class="email-link" ng-href="mailto:{{item.email}}">{{item.email}}</a></td>
-      <td>{{item.age}}</td>
+      <td><button class="status-button btn btn-xs btn-{{item.status}}">{{item.status}}</button></td>
     </tr>
     </tbody>
   </table>

src/app/pages/tables/widgets/contextualTable.html

@@ -1,4 +1,4 @@
-<table class="table table-bordered">
+<table class="table">
   <tr>
     <th>#</th>
     <th>First Name</th>
@@ -7,7 +7,7 @@
     <th>Email</th>
     <th>Age</th>
   </tr>
-  <tr class="active">
+  <tr class="primary">
     <td>1</td>
     <td>Mark</td>
     <td>Otto</td>

src/app/pages/tables/widgets/hoverRows.html

@@ -1,7 +1,7 @@
 <div class="horizontal-scroll">
   <table class="table table-hover">
     <thead>
-    <tr>
+    <tr class="black-muted-bg">
       <th class="browser-icons"></th>
       <th>Browser</th>
       <th class="align-right">Visits</th>
@@ -13,7 +13,7 @@
     </tr>
     </thead>
     <tbody>
-    <tr ng-repeat="item in metricsTableData">
+    <tr ng-repeat="item in metricsTableData" class="no-top-border">
       <td><img ng-src="{{::( item.image | appImage )}}" width="20" height="20"></td>
       <td ng-class="nowrap">{{item.browser}}</td>
       <td class="align-right">{{item.visits}}</td>

src/sass/theme/_table.scss

@@ -138,7 +138,7 @@ tr.editable-row {
 }
 
 a.email-link {
-  color: $default-text;
+  color: $default;
   &:hover {
     color: $danger;
   }
@@ -173,3 +173,55 @@ input.search-input {
   border-top-right-radius: 0px;
   border-bottom-right-radius: 0px;
 }
+
+.status-button{
+  width: 60px;
+}
+
+body.badmin-transparent {
+  .table {
+    & > thead {
+      & > tr {
+        & > th {
+          border-bottom: none;
+        }
+      }
+    }
+    & > tbody {
+      & > tr.no-top-border {
+        &:first-child > td {
+          border-top: none;
+        }
+      }
+    }
+  }
+
+  .black-muted-bg{
+    background-color: rgba(0, 0, 0, 0.25);
+  }
+
+  .table-hover{
+    tr:hover {
+      background-color: rgba(0, 0, 0, 0.25);
+    }
+  }
+
+  .table-striped > tbody > tr:nth-of-type(odd){
+    background-color: rgba(0, 0, 0, 0.25);
+  }
+  .table > tbody > tr.primary > td{
+    background-color: $primary-btn;
+  }
+  .table > tbody > tr.success > td{
+    background-color: $success-btn;
+  }
+  .table > tbody > tr.warning > td{
+    background-color: $warning-btn;
+  }
+  .table > tbody > tr.danger > td{
+    background-color: $danger-btn;
+  }
+  .table > tbody > tr.info > td{
+    background-color: $info-btn;
+  }
+}