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

34
src/library/TrackList.vue
View File

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

48
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 {
tr {
cursor: pointer;
}
tr.active {
td, td a, td svg { td, td a, td svg {
color: var(--primary); 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;}
}
}