Browse Source

HUE-9485 [frontend] Initial styling of the HueTable component

Johan Ahlen 5 years ago
parent
commit
da0a97a003

+ 1 - 4
desktop/core/src/desktop/js/components/HueTable.d.ts

@@ -14,13 +14,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component } from 'vue';
-
 export interface Column<T> {
   label: string;
   key: string;
-  cellComponent?: Component;
-  cellProps?: (key: string, row: T) => { [attr: string]: unknown };
+  small?: boolean;
   adapter?: (key: string, row: T) => string | number | boolean | undefined;
 }
 

+ 94 - 8
desktop/core/src/desktop/js/components/HueTable.vue

@@ -22,19 +22,23 @@
 -->
 
 <template>
-  <table>
+  <table class="hue-table">
     <thead>
-      <tr>
-        <th v-for="(column, colIndex) in columns" :key="colIndex">{{ column.label }}</th>
+      <tr class="header-row">
+        <th v-for="(column, colIndex) in columns" :key="colIndex">
+          <div class="cell-content">{{ column.label }}</div>
+        </th>
       </tr>
     </thead>
     <tbody>
       <tr v-for="(row, rowIndex) in rows" :key="rowIndex" @click="$emit('row-clicked', row)">
         <td v-for="(column, colIndex) in columns" :key="colIndex">
-          <slot v-if="hasCellSlot(column)" :name="cellSlotName(column)" v-bind="row" />
-          <template v-else>
-            {{ column.adapter ? column.adapter(column.key, row) : row[column.key] }}
-          </template>
+          <div class="cell-content" :class="{ small: column.small }">
+            <slot v-if="hasCellSlot(column)" :name="cellSlotName(column)" v-bind="row" />
+            <template v-else>
+              {{ column.adapter ? column.adapter(column.key, row) : row[column.key] }}
+            </template>
+          </div>
         </td>
       </tr>
     </tbody>
@@ -64,4 +68,86 @@
   }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+  @import './styles/colors';
+  @import './styles/mixins';
+
+  .hue-table {
+    background: none;
+    margin: 0 0 15px 0;
+    border-radius: $hue-panel-border-radius;
+    border-spacing: 0;
+    width: 100%;
+    line-height: 14px;
+    vertical-align: baseline;
+
+    * {
+      box-sizing: border-box;
+    }
+
+    thead,
+    tbody {
+      tr {
+        height: auto;
+        background: none;
+
+        th,
+        td {
+          padding: 0;
+          border: none;
+          text-align: left;
+          vertical-align: middle;
+
+          .cell-content {
+            min-height: 41px;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            padding: 5px;
+            text-align: left;
+
+            &.small {
+              font-size: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    thead {
+      tr {
+        border-bottom: 1px solid $fluid-gray-300;
+
+        th {
+          color: $fluid-gray-700;
+          font-size: 12px;
+          font-weight: 400;
+          white-space: nowrap;
+
+          .sort-header {
+            display: flex;
+            cursor: pointer;
+            align-items: center;
+            letter-spacing: normal;
+            outline: 0;
+          }
+        }
+      }
+    }
+
+    tbody {
+      tr {
+        border-bottom: 1px solid $fluid-gray-200;
+
+        td {
+          color: $fluid-gray-900;
+          font-size: 14px;
+
+          &:last-of-type {
+            padding-right: 8px;
+          }
+        }
+      }
+    }
+  }
+</style>

+ 248 - 92
desktop/core/src/desktop/js/components/__snapshots__/HueTable.test.ts.snap

@@ -1,20 +1,40 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`HueTable.vue should render a table 1`] = `
-<table>
+<table
+  class="hue-table"
+>
   <thead>
-    <tr>
+    <tr
+      class="header-row"
+    >
       <th>
-        A
+        <div
+          class="cell-content"
+        >
+          A
+        </div>
       </th>
       <th>
-        D
+        <div
+          class="cell-content"
+        >
+          D
+        </div>
       </th>
       <th>
-        C
+        <div
+          class="cell-content"
+        >
+          C
+        </div>
       </th>
       <th>
-        B
+        <div
+          class="cell-content"
+        >
+          B
+        </div>
       </th>
     </tr>
   </thead>
@@ -22,90 +42,154 @@ exports[`HueTable.vue should render a table 1`] = `
   <tbody>
     <tr>
       <td>
-        
-          1
-        
+        <div
+          class="cell-content"
+        >
+          
+            1
+          
+        </div>
       </td>
       <td>
-        
+        <div
+          class="cell-content"
+        >
+          
+            
           
-        
+        </div>
       </td>
       <td>
-        
-          false
-        
+        <div
+          class="cell-content"
+        >
+          
+            false
+          
+        </div>
       </td>
       <td>
-        
-          5
-        
+        <div
+          class="cell-content"
+        >
+          
+            5
+          
+        </div>
       </td>
     </tr>
     <tr>
       <td>
-        
-          2
-        
+        <div
+          class="cell-content"
+        >
+          
+            2
+          
+        </div>
       </td>
       <td>
-        
+        <div
+          class="cell-content"
+        >
+          
+            
           
-        
+        </div>
       </td>
       <td>
-        
-          true
-        
+        <div
+          class="cell-content"
+        >
+          
+            true
+          
+        </div>
       </td>
       <td>
-        
-          6
-        
+        <div
+          class="cell-content"
+        >
+          
+            6
+          
+        </div>
       </td>
     </tr>
     <tr>
       <td>
-        
-          3
-        
+        <div
+          class="cell-content"
+        >
+          
+            3
+          
+        </div>
       </td>
       <td>
-        
+        <div
+          class="cell-content"
+        >
+          
+            
           
-        
+        </div>
       </td>
       <td>
-        
-          false
-        
+        <div
+          class="cell-content"
+        >
+          
+            false
+          
+        </div>
       </td>
       <td>
-        
-          7
-        
+        <div
+          class="cell-content"
+        >
+          
+            7
+          
+        </div>
       </td>
     </tr>
     <tr>
       <td>
-        
-          4
-        
+        <div
+          class="cell-content"
+        >
+          
+            4
+          
+        </div>
       </td>
       <td>
-        
+        <div
+          class="cell-content"
+        >
           
-        
+            
+          
+        </div>
       </td>
       <td>
-        
-          true
-        
+        <div
+          class="cell-content"
+        >
+          
+            true
+          
+        </div>
       </td>
       <td>
-        
-          8
-        
+        <div
+          class="cell-content"
+        >
+          
+            8
+          
+        </div>
       </td>
     </tr>
   </tbody>
@@ -113,14 +197,26 @@ exports[`HueTable.vue should render a table 1`] = `
 `;
 
 exports[`HueTable.vue should render a table with a custom component for a cell 1`] = `
-<table>
+<table
+  class="hue-table"
+>
   <thead>
-    <tr>
+    <tr
+      class="header-row"
+    >
       <th>
-        A
+        <div
+          class="cell-content"
+        >
+          A
+        </div>
       </th>
       <th>
-        B
+        <div
+          class="cell-content"
+        >
+          B
+        </div>
       </th>
     </tr>
   </thead>
@@ -128,26 +224,42 @@ exports[`HueTable.vue should render a table with a custom component for a cell 1
   <tbody>
     <tr>
       <td>
-        <div>
-          3
+        <div
+          class="cell-content"
+        >
+          <div>
+            3
+          </div>
         </div>
       </td>
       <td>
-        
-          2
-        
+        <div
+          class="cell-content"
+        >
+          
+            2
+          
+        </div>
       </td>
     </tr>
     <tr>
       <td>
-        <div>
-          9
+        <div
+          class="cell-content"
+        >
+          <div>
+            9
+          </div>
         </div>
       </td>
       <td>
-        
-          5
-        
+        <div
+          class="cell-content"
+        >
+          
+            5
+          
+        </div>
       </td>
     </tr>
   </tbody>
@@ -155,14 +267,26 @@ exports[`HueTable.vue should render a table with a custom component for a cell 1
 `;
 
 exports[`HueTable.vue should render a table with adapter 1`] = `
-<table>
+<table
+  class="hue-table"
+>
   <thead>
-    <tr>
+    <tr
+      class="header-row"
+    >
       <th>
-        A
+        <div
+          class="cell-content"
+        >
+          A
+        </div>
       </th>
       <th>
-        B + C
+        <div
+          class="cell-content"
+        >
+          B + C
+        </div>
       </th>
     </tr>
   </thead>
@@ -170,50 +294,82 @@ exports[`HueTable.vue should render a table with adapter 1`] = `
   <tbody>
     <tr>
       <td>
-        
-          1
-        
+        <div
+          class="cell-content"
+        >
+          
+            1
+          
+        </div>
       </td>
       <td>
-        
-          14
-        
+        <div
+          class="cell-content"
+        >
+          
+            14
+          
+        </div>
       </td>
     </tr>
     <tr>
       <td>
-        
-          2
-        
+        <div
+          class="cell-content"
+        >
+          
+            2
+          
+        </div>
       </td>
       <td>
-        
-          16
-        
+        <div
+          class="cell-content"
+        >
+          
+            16
+          
+        </div>
       </td>
     </tr>
     <tr>
       <td>
-        
-          3
-        
+        <div
+          class="cell-content"
+        >
+          
+            3
+          
+        </div>
       </td>
       <td>
-        
-          18
-        
+        <div
+          class="cell-content"
+        >
+          
+            18
+          
+        </div>
       </td>
     </tr>
     <tr>
       <td>
-        
-          4
-        
+        <div
+          class="cell-content"
+        >
+          
+            4
+          
+        </div>
       </td>
       <td>
-        
-          20
-        
+        <div
+          class="cell-content"
+        >
+          
+            20
+          
+        </div>
       </td>
     </tr>
   </tbody>

+ 2 - 0
desktop/core/src/desktop/js/components/styles/colors.scss

@@ -106,6 +106,8 @@ $hue-primary-color-dark:          #0b7fad;
 $hue-primary-color-light:         #dbe8f1;
 $hue-trunk:                       $fluid-purple-300;
 
+$hue-action-primary:              $fluid-blue-500;
+$hue-action-primary-hover:        #00609b;
 $hue-border-color:                $fluid-gray-300;
 $hue-disabled-color:              $fluid-gray-100;
 $hue-error-color:                 $fluid-red-500;