From 5be30b3e9a50e2c4cac3c06d422372a81ef91599 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Thu, 27 Oct 2016 04:35:25 -0200
Subject: [PATCH] Add numeric style to table head and add tooltip

---
 docs/src/pages/components/Table.vue    |  2 +-
 src/components/mdTable/mdTable.scss    | 13 +++++++++----
 src/components/mdTable/mdTableHead.vue |  8 ++++++--
 src/components/mdTooltip/mdTooltip.vue |  8 --------
 4 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/docs/src/pages/components/Table.vue b/docs/src/pages/components/Table.vue
index f9f18cb..1d667fd 100644
--- a/docs/src/pages/components/Table.vue
+++ b/docs/src/pages/components/Table.vue
@@ -18,7 +18,7 @@
             <thead>
               <md-table-row>
                 <md-table-head md-sort-by="dessert">Dessert (100g serving)</md-table-head>
-                <md-table-head md-sort-by="calories" md-numeric>Calories (g)</md-table-head>
+                <md-table-head md-sort-by="calories" md-numeric md-tooltip="The total amount of food energy and the given serving size">Calories (g)</md-table-head>
                 <md-table-head md-sort-by="fat" md-numeric>Fat (g)</md-table-head>
                 <md-table-head md-sort-by="carbs" md-numeric>Carbs (g)</md-table-head>
                 <md-table-head md-sort-by="protein" md-numeric>Protein (g)</md-table-head>
diff --git a/src/components/mdTable/mdTable.scss b/src/components/mdTable/mdTable.scss
index b46fade..dbe1031 100644
--- a/src/components/mdTable/mdTable.scss
+++ b/src/components/mdTable/mdTable.scss
@@ -3,6 +3,7 @@
 .md-table {
   display: flex;
   flex-flow: column wrap;
+  overflow: auto;
 
   &.md-transition-off {
     tr,
@@ -51,9 +52,13 @@
     height: 100%;
     padding-right: 32px;
     padding-left: 24px;
-    display: flex;
-    align-items: center;
     transition: $swift-ease-out;
+    line-height: 56px;
+  }
+
+  .md-table-head-text {
+    height: 28px;
+    line-height: 28px;
   }
 
   .md-sortable {
@@ -121,7 +126,7 @@
     }
 
     .md-table-cell-container {
-      padding: 0 24px 0 32px;
+      padding: 0 32px 0 24px;
     }
 
     &.md-numeric {
@@ -130,7 +135,7 @@
   }
 
   .md-table-selection {
-    width: 20px;
+    width: 60px;
     position: relative;
     vertical-align: middle;
 
diff --git a/src/components/mdTable/mdTableHead.vue b/src/components/mdTable/mdTableHead.vue
index 9b41c46..4deb3ae 100644
--- a/src/components/mdTable/mdTableHead.vue
+++ b/src/components/mdTable/mdTableHead.vue
@@ -3,8 +3,10 @@
     <div class="md-table-head-container" v-md-ink-ripple="!mdSortBy">
       <md-icon v-if="mdSortBy">arrow_downward</md-icon>
 
-      <span>
+      <span class="md-table-head-text md-test">
         <slot></slot>
+
+        <md-tooltip v-if="mdTooltip">{{ mdTooltip }}</md-tooltip>
       </span>
     </div>
   </th>
@@ -14,7 +16,8 @@
   export default {
     props: {
       mdNumeric: Boolean,
-      mdSortBy: String
+      mdSortBy: String,
+      mdTooltip: String
     },
     data() {
       return {
@@ -31,6 +34,7 @@
         }
 
         return {
+          'md-numeric': this.mdNumeric,
           'md-sortable': this.mdSortBy,
           'md-sorted': matchSort && this.sorted,
           'md-sorted-descending': matchSort && this.sortType === 'desc'
diff --git a/src/components/mdTooltip/mdTooltip.vue b/src/components/mdTooltip/mdTooltip.vue
index 68d381f..80b0fe2 100644
--- a/src/components/mdTooltip/mdTooltip.vue
+++ b/src/components/mdTooltip/mdTooltip.vue
@@ -107,14 +107,6 @@
         tooltipElement.addEventListener('transitionend', onTransitionEnd);
       };
 
-      if (this.$parent.$el.classList === targetElement.classList) {
-        [].slice.call(targetElement.classList).forEach((cssClass) => {
-          if (cssClass.indexOf('md-') >= 0 && cssClass !== 'md-active') {
-            tooltipElement.classList.add(cssClass + '-tooltip');
-          }
-        });
-      }
-
       this.$el.parentNode.removeChild(this.$el);
 
       targetElement.addEventListener('mouseenter', onMouseEnter);