Added theme support for data table (#1216)

vuetifyjs · Aug 3, 2017 · 785dcfe · 785dcfe
1 parent 06a4b6c
commit 785dcfe
Show file tree

Hide file tree

Showing 8 changed files with 91 additions and 34 deletions.
diff --git a/src/components/tables/VDataTable.js b/src/components/tables/VDataTable.js
@@ -3,6 +3,7 @@ import Body from './mixins/body'
 import Foot from './mixins/foot'
 import Progress from './mixins/progress'
 import Filterable from '~mixins/filterable'
+import Themeable from '~mixins/themeable'
 
 import VBtn from '~components/buttons/VBtn'
 import VIcon from '~components/icons/VIcon'
@@ -17,7 +18,7 @@ import {
 export default {
   name: 'v-datatable',
 
-  mixins: [Head, Body, Filterable, Foot, Progress],
+  mixins: [Head, Body, Filterable, Foot, Progress, Themeable],
 
   components: {
     VBtn,
@@ -144,6 +145,14 @@ export default {
   },
 
   computed: {
+    classes () {
+      return {
+        'datatable table': true,
+        'datatable--select-all': this.selectAll !== false,
+        'theme--dark': this.dark,
+        'theme--light': this.light
+      }
+    },
     computedPagination () {
       return this.pagination || this.defaultPagination
     },
@@ -290,10 +299,7 @@ export default {
   render (h) {
     return h('v-table-overflow', {}, [
       h('table', {
-        'class': {
-          'datatable table': true,
-          'datatable--select-all': this.selectAll !== false
-        }
+        'class': this.classes
       }, [
         this.genTHead(),
         this.genTProgress(),

diff --git a/src/components/tables/mixins/foot.js b/src/components/tables/mixins/foot.js
@@ -5,7 +5,9 @@ export default {
         props: {
           disabled: this.computedPagination.page === 1,
           icon: true,
-          flat: true
+          flat: true,
+          dark: this.dark,
+          light: this.light
         },
         nativeOn: { click: () => (this.computedPagination.page--) }
       }, [this.$createElement('v-icon', 'chevron_left')])
@@ -20,7 +22,9 @@ export default {
         props: {
           disabled,
           icon: true,
-          flat: true
+          flat: true,
+          dark: this.dark,
+          light: this.light
         },
         nativeOn: { click: () => (this.computedPagination.page++) }
       }, [this.$createElement('v-icon', 'chevron_right')])

diff --git a/src/stylus/components/_datatables.styl → src/stylus/components/_data-table.styl b/src/stylus/components/_datatables.styl → src/stylus/components/_data-table.styl
@@ -4,25 +4,20 @@
       cursor: pointer
 
       i
-        color: rgba($material-theme.fg-color, $material-theme.disabledORhints-text-percent)
         font-size: 16px
         vertical-align: sub
         display: inline-block
         opacity: 0
         transition: .3s $transition.swing
 
       &:hover
-        color: rgba($material-theme.fg-color, $material-theme.primary-text-percent)
-
         i
           opacity: .6
 
       &.active
         transform: none
-        color: rgba($material-theme.fg-color, $material-theme.primary-text-percent)
 
         i
-          color: rgba($material-theme.fg-color, $material-theme.primary-text-percent)
           opacity: 1
 
         &.desc
@@ -36,7 +31,6 @@
 
 /** Actions */
 .datatable__actions
-  color: rgba($material-theme.fg-color, $material-theme.secondary-text-percent)
   display: flex
   justify-content: flex-end
   align-items: center
@@ -63,12 +57,8 @@
       position: initial
 
       .input-group__selections__comma
-        color: rgba($material-theme.fg-color, $material-theme.secondary-text-percent) !important
         font-size: 12px
 
-      .input-group__append-icon
-        color: rgba($material-theme.fg-color, $material-theme.secondary-text-percent) !important
-
 .datatable__progress
   tr
     height: auto !important

diff --git a/src/stylus/components/_tables.styl b/src/stylus/components/_tables.styl
@@ -11,9 +11,6 @@ table.table
   width: 100%
   max-width: 100%
 
-  tr:not(:last-child)
-    border-bottom: 1px solid rgba($material-theme.fg-color, $material-theme.divider-percent)
-
   thead, tbody
     td, th
       &:not(:nth-child(1)), &:first-child
@@ -24,7 +21,6 @@ table.table
       height: 56px
 
     th
-      color: rgba($material-theme.text-color, $material-theme.secondary-text-percent)
       font-weight: 500
       font-size: 12px
       transition: .3s $transition.swing
@@ -37,20 +33,11 @@ table.table
       > div
         width: 100%
 
-    &:last-of-type
-      border-bottom: 1px solid rgba($material-theme.fg-color, $material-theme.divider-percent)
-
   tbody
     tr
       transition: background $primary-transition
       will-change: background
 
-      &[active]
-        background: $grey.lighten-4
-
-      &:hover
-        background: $grey.lighten-3
-
     td, th
       height: 48px
 
@@ -82,4 +69,3 @@ table.table
 
     tr
       height: 56px
-      border-top: 1px solid rgba($material-theme.fg-color, $material-theme.divider-percent)
diff --git a/src/stylus/settings/_theme.styl b/src/stylus/settings/_theme.styl
@@ -69,6 +69,10 @@ $material-light := {
     completed: rgba(#000, 0.87),
     hover: rgba(#000, 0.54)
   },
+  table: {
+    active: $grey.lighten-4
+    hover: $grey.lighten-3
+  },
 
 
   bg-color: #fff
@@ -134,6 +138,10 @@ $material-dark := {
     completed: rgba(#fff, 0.87),
     hover: rgba(#fff, 0.75)
   },
+  table: {
+    active: $grey.darken-1
+    hover: $grey.darken-2
+  },
 
   bg-color: #303030
   fg-color: #fff

diff --git a/src/stylus/tools/_application.styl b/src/stylus/tools/_application.styl
@@ -13,7 +13,7 @@ application($material)
 
   .btn
     button($material)
-    
+
   .btn-toggle .btn
     button-toggle($material)
 
@@ -50,10 +50,16 @@ application($material)
 
   .stepper
     stepper($material)
-    
+
   .subheader
     subheader($material)
 
+  .table
+    table($material)
+
+  .datatable
+    datatable($material)
+
 text($main, $alt)
   &.card
     card($main)
@@ -69,7 +75,7 @@ text($main, $alt)
 
   &.btn
     button($main)
-    
+
   &.btn-toggle .btn
     button-toggle($main)
 
@@ -103,3 +109,9 @@ text($main, $alt)
 
   &.subheader
     subheader($main)
+
+  &.table
+    table($main)
+
+  &.datatable
+    datatable($main)
diff --git a/src/stylus/tools/_data-tables.styl b/src/stylus/tools/_data-tables.styl
@@ -0,0 +1,26 @@
+datatable($material)
+  thead
+    th.column.sortable
+      i
+        color: rgba($material.fg-color, $material.disabledORhints-text-percent)
+
+      &:hover
+        color: rgba($material.fg-color, $material.primary-text-percent)
+
+      &.active
+        color: rgba($material.fg-color, $material.primary-text-percent)
+
+        i
+          color: rgba($material.fg-color, $material.primary-text-percent)
+
+  .datatable__actions
+    color: rgba($material.fg-color, $material.secondary-text-percent)
+
+    &__select
+      .input-group--select
+        .input-group__selections__comma
+          color: rgba($material.fg-color, $material.secondary-text-percent) !important
+          font-size: 12px
+
+        .input-group__append-icon
+          color: rgba($material.fg-color, $material.secondary-text-percent) !important
diff --git a/src/stylus/tools/_tables.styl b/src/stylus/tools/_tables.styl
@@ -0,0 +1,25 @@
+table($material)
+  background-color: $material.cards
+  color: $material.text.primary
+
+  tr:not(:last-child)
+    border-bottom: 1px solid rgba($material.fg-color, $material.divider-percent)
+
+  thead
+    th
+      color: rgba($material.text-color, $material.secondary-text-percent)
+
+    &:last-of-type
+      border-bottom: 1px solid rgba($material.fg-color, $material.divider-percent)
+
+  tbody
+    tr
+      &[active]
+        background: $material.table.active
+
+      &:hover
+        background: $material.table.hover
+
+  tfoot
+    tr
+      border-top: 1px solid rgba($material.fg-color, $material.divider-percent)