jean/airsonic-refix
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactor table style

Browse Source
This commit is contained in:
Thomas Amland 2021-01-24 11:51:45 +01:00
parent 1e7d87671c
commit c49eb98efb
2 changed files with 117 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

156
src/library/TrackList.vue
View File

@ -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'

52
src/style/table.scss
View File

@ -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;}
}
}