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> <template>
<div> <table class="table table-hover table-borderless table-numbered">
<table class="table table-hover table-borderless"> <thead>
<thead> <tr>
<tr> <th>
<th class="pl-0 pr-0 text-center"> #
# </th>
</th> <th class="text-left">
<th class="text-left"> Title
Title </th>
</th> <th v-if="!noArtist" class="text-left d-none d-lg-table-cell">
<th v-if="!noArtist" class="text-left d-none d-lg-table-cell"> Artist
Artist </th>
</th> <th v-if="!noAlbum" class="text-left d-none d-md-table-cell">
<th v-if="!noAlbum" class="text-left d-none d-md-table-cell"> Album
Album </th>
</th> <th v-if="!noDuration" class="text-right d-none d-md-table-cell">
<th v-if="!noDuration" class="text-right d-none d-md-table-cell"> Duration
Duration </th>
</th> <th class="text-right">
<th class="text-right"> Actions
Actions </th>
</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> <tr
<tr v-for="(item, index) in tracks"
v-for="(item, index) in tracks" :key="index"
:key="index" :class="{'active': item.id === playingTrackId}"
:class="{'active': item.id === playingTrackId}" :draggable="true"
:draggable="true" @dragstart="dragstart(item.id, $event)"
@dragstart="dragstart(item.id, $event)" @click="play(index)"
@click="play(index)" >
> <td>
<td class="pl-0 pr-0 text-center text-muted" <button>
style="min-width: 20px; max-width: 20px;" <Icon class="icon" :icon="isPlaying && item.id === playingTrackId ? 'pause-fill' :'play-fill'" />
> <span class="number">{{ item.track || 1 }}</span>
<template v-if="item.id === playingTrackId"> </button>
<Icon :icon="isPlaying ? 'pause-fill' : 'play-fill'" /> </td>
</template> <td>
<template v-else> {{ item.title }}
<span class="track-number">{{ item.track || 1 }}</span> <div class="d-lg-none text-muted">
<Icon class="track-number-hover" icon="play-fill" /> <small>{{ item.artist }}</small>
</template> </div>
</td> </td>
<td> <td v-if="!noArtist" class="d-none d-lg-table-cell">
{{ item.title }} <template v-if="item.artistId">
<div class="d-lg-none text-muted"> <router-link :to="{name: 'artist', params: {id: item.artistId}}" @click.native.stop>
<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>
{{ item.artist }} {{ 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> </router-link>
</td> </template>
<td v-if="!noDuration" class="text-right d-none d-md-table-cell"> <template v-else>
{{ $formatDuration(item.duration) }} {{ item.artist }}
</td> </template>
<td class="text-right"> </td>
<TrackContextMenu :track="item"> <td v-if="!noAlbum" class="d-none d-md-table-cell">
<slot name="context-menu" :index="index" :item="item" /> <router-link :to="{name: 'album', params: {id: item.albumId}}" @click.native.stop>
</TrackContextMenu> {{ item.album }}
</td> </router-link>
</tr> </td>
</tbody> <td v-if="!noDuration" class="text-right d-none d-md-table-cell">
</table> {{ $formatDuration(item.duration) }}
</div> </td>
<td class="text-right">
<TrackContextMenu :track="item">
<slot name="context-menu" :index="index" :item="item" />
</TrackContextMenu>
</td>
</tr>
</tbody>
</table>
</template> </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"> <script lang="ts">
import Vue from 'vue' import Vue from 'vue'
import { mapActions, mapGetters, mapState } from 'vuex' import { mapActions, mapGetters, mapState } from 'vuex'

52
src/style/table.scss
View File

@ -6,8 +6,54 @@ table thead tr {
color: $theme-text-muted; color: $theme-text-muted;
} }
table tr.active { table.table {
td, td a, td svg { tr {
color: var(--primary); 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;}
} }
} }