refactor table style

src/library/TrackList.vue

@@ -1,9 +1,8 @@
 <template>
-  <div>
-    <table class="table table-hover table-borderless">
+  <table class="table table-hover table-borderless table-numbered">
     <thead>
       <tr>
-          <th class="pl-0 pr-0 text-center">
+        <th>
           #
         </th>
         <th class="text-left">
@@ -32,16 +31,11 @@
         @dragstart="dragstart(item.id, $event)"
         @click="play(index)"
       >
-          <td class="pl-0 pr-0 text-center text-muted"
-              style="min-width: 20px; max-width: 20px;"
-          >
-            <template v-if="item.id === playingTrackId">
-              <Icon :icon="isPlaying ? 'pause-fill' : 'play-fill'" />
-            </template>
-            <template v-else>
-              <span class="track-number">{{ item.track || 1 }}</span>
-              <Icon class="track-number-hover" icon="play-fill" />
-            </template>
+        <td>
+          <button>
+            <Icon class="icon" :icon="isPlaying && item.id === playingTrackId ? 'pause-fill' :'play-fill'" />
+            <span class="number">{{ item.track || 1 }}</span>
+          </button>
         </td>
         <td>
           {{ item.title }}
@@ -75,21 +69,7 @@
       </tr>
     </tbody>
   </table>
-  </div>
 </template>
-<style lang="scss" scoped>
-  .track-number-hover {
-    display: none;
-  }
-  tr:hover {
-    .track-number-hover {
-      display: inline;
-    }
-    .track-number {
-      display: none;
-    }
-  }
-</style>
 <script lang="ts">
   import Vue from 'vue'
   import { mapActions, mapGetters, mapState } from 'vuex'

src/style/table.scss

@@ -6,8 +6,54 @@ table thead tr {
   color: $theme-text-muted;
 }
 
-table tr.active {
+table.table {
+  tr {
+    cursor: pointer;
+  }
+  tr.active {
     td, td a, td svg {
       color: var(--primary);
     }
+  }
+  tr.disabled {
+    cursor: default;
+    td, td a, td svg {
+      color: var(--text-muted);
+    }
+    button {
+      cursor: default;
+    }
+  }
+}
+
+table.table-numbered {
+  th:first-child, td:first-child {
+    padding-left: 0;
+    padding-right: 0;
+    width: 26px;
+    max-width: 26px;
+    text-align: center;
+    color: var(--text-muted);
+  }
+  tr td:first-child button {
+    border: none;
+    background: none;
+    color: inherit;
+    font: inherit;
+    outline: inherit;
+    .number { display: inline; }
+    .icon { display: none; }
+  }
+  tr.active td:first-child button {
+    .number { display: none;}
+    .icon { display: inline;}
+  }
+  tr:hover td:first-child button {
+    .number { display: none; }
+    .icon { display: inline; }
+  }
+  tr.disabled:hover td:first-child button {
+    .number { display: inline;}
+    .icon { display: none;}
+  }
 }