From c49eb98efb327d0f746cefdd1f047abc0d8b9e13 Mon Sep 17 00:00:00 2001
From: Thomas Amland <thomas.amland@gmail.com>
Date: Sun, 24 Jan 2021 11:51:45 +0100
Subject: [PATCH] refactor table style

---
 src/library/TrackList.vue | 156 +++++++++++++++++---------------------
 src/style/table.scss      |  52 ++++++++++++-
 2 files changed, 117 insertions(+), 91 deletions(-)

diff --git a/src/library/TrackList.vue b/src/library/TrackList.vue
index 2b60ef5..2873281 100644
--- a/src/library/TrackList.vue
+++ b/src/library/TrackList.vue
@@ -1,95 +1,75 @@
 <template>
-  <div>
-    <table class="table table-hover table-borderless">
-      <thead>
-        <tr>
-          <th class="pl-0 pr-0 text-center">
-            #
-          </th>
-          <th class="text-left">
-            Title
-          </th>
-          <th v-if="!noArtist" class="text-left d-none d-lg-table-cell">
-            Artist
-          </th>
-          <th v-if="!noAlbum" class="text-left d-none d-md-table-cell">
-            Album
-          </th>
-          <th v-if="!noDuration" class="text-right d-none d-md-table-cell">
-            Duration
-          </th>
-          <th class="text-right">
-            Actions
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr
-          v-for="(item, index) in tracks"
-          :key="index"
-          :class="{'active': item.id === playingTrackId}"
-          :draggable="true"
-          @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>
-          <td>
-            {{ item.title }}
-            <div class="d-lg-none text-muted">
-              <small>{{ item.artist }}</small>
-            </div>
-          </td>
-          <td v-if="!noArtist" class="d-none d-lg-table-cell">
-            <template v-if="item.artistId">
-              <router-link :to="{name: 'artist', params: {id: item.artistId}}" @click.native.stop>
-                {{ item.artist }}
-              </router-link>
-            </template>
-            <template v-else>
+  <table class="table table-hover table-borderless table-numbered">
+    <thead>
+      <tr>
+        <th>
+          #
+        </th>
+        <th class="text-left">
+          Title
+        </th>
+        <th v-if="!noArtist" class="text-left d-none d-lg-table-cell">
+          Artist
+        </th>
+        <th v-if="!noAlbum" class="text-left d-none d-md-table-cell">
+          Album
+        </th>
+        <th v-if="!noDuration" class="text-right d-none d-md-table-cell">
+          Duration
+        </th>
+        <th class="text-right">
+          Actions
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr
+        v-for="(item, index) in tracks"
+        :key="index"
+        :class="{'active': item.id === playingTrackId}"
+        :draggable="true"
+        @dragstart="dragstart(item.id, $event)"
+        @click="play(index)"
+      >
+        <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 }}
+          <div class="d-lg-none text-muted">
+            <small>{{ item.artist }}</small>
+          </div>
+        </td>
+        <td v-if="!noArtist" class="d-none d-lg-table-cell">
+          <template v-if="item.artistId">
+            <router-link :to="{name: 'artist', params: {id: item.artistId}}" @click.native.stop>
               {{ item.artist }}
-            </template>
-          </td>
-          <td v-if="!noAlbum" class="d-none d-md-table-cell">
-            <router-link :to="{name: 'album', params: {id: item.albumId}}" @click.native.stop>
-              {{ item.album }}
             </router-link>
-          </td>
-          <td v-if="!noDuration" class="text-right d-none d-md-table-cell">
-            {{ $formatDuration(item.duration) }}
-          </td>
-          <td class="text-right">
-            <TrackContextMenu :track="item">
-              <slot name="context-menu" :index="index" :item="item" />
-            </TrackContextMenu>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
+          </template>
+          <template v-else>
+            {{ item.artist }}
+          </template>
+        </td>
+        <td v-if="!noAlbum" class="d-none d-md-table-cell">
+          <router-link :to="{name: 'album', params: {id: item.albumId}}" @click.native.stop>
+            {{ item.album }}
+          </router-link>
+        </td>
+        <td v-if="!noDuration" class="text-right d-none d-md-table-cell">
+          {{ $formatDuration(item.duration) }}
+        </td>
+        <td class="text-right">
+          <TrackContextMenu :track="item">
+            <slot name="context-menu" :index="index" :item="item" />
+          </TrackContextMenu>
+        </td>
+      </tr>
+    </tbody>
+  </table>
 </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'
diff --git a/src/style/table.scss b/src/style/table.scss
index 8b5da5b..fe100a3 100644
--- a/src/style/table.scss
+++ b/src/style/table.scss
@@ -6,8 +6,54 @@ table thead tr {
   color: $theme-text-muted;
 }
 
-table tr.active {
-  td, td a, td svg {
-    color: var(--primary);
+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;}
   }
 }