- track selection on row click (js)

- left margin alignment for 'explicit' icon (css)
- softer alt colors in table (light theme) (css)
- more visible download icon hover color (css)
This commit is contained in:
mortalis 2020-07-25 15:22:16 +02:00
parent d70d90548c
commit eb483b813f
6 changed files with 21 additions and 9 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -35,8 +35,8 @@
</thead>
<tbody>
<template v-if="type !== 'spotifyPlaylist'">
<template v-for="track in body">
<tr v-if="track.type == 'track'">
<template v-for="(track, index) in body">
<tr v-if="track.type == 'track'" @click="selectRow(index, track)">
<td class="table__cell--x-small table__cell--center">
<div class="table__cell-content table__cell-content--vertical-center">
<i
@ -285,10 +285,14 @@ export default {
} else {
this.body = playlistTracks
}
},
selectRow(index, track) {
track.selected = !track.selected;
}
},
mounted() {
EventBus.$on('tracklistTab:reset', this.reset)
EventBus.$on('tracklistTab:selectRow', this.selectRow)
socket.on('show_album', this.showAlbum)
socket.on('show_playlist', this.showPlaylist)

View File

@ -21,10 +21,12 @@ html[data-theme='light'] {
--sidebar-link-bg: hsl(0, 0%, 24%);
--sidebar-link-bg-20: hsla(0, 0%, 24%, 0.2);
--icon-hover: var(--accent-color);
--table-bg: hsl(0, 0%, 100%);
--table-zebra: hsl(0, 0%, 79%);
--table-highlight: hsl(0, 0%, 56%);
--table-zebra: hsl(0, 0%, 90%);
--table-highlight: hsl(0, 0%, 84%);
}
html[data-theme='dark'] {
@ -40,6 +42,8 @@ html[data-theme='dark'] {
--sidebar-link-bg: hsl(0, 0%, 24%);
--sidebar-link-bg-20: hsla(0, 0%, 24%, 0.2);
--icon-hover: var(--accent-color);
--table-bg: hsl(0, 0%, 8%);
--table-zebra: hsl(0, 0%, 14%);
--table-highlight: hsl(0, 0%, 20%);
@ -58,6 +62,8 @@ html[data-theme='purple'] {
--sidebar-link-bg: hsl(257, 70%, 17%);
--sidebar-link-bg-20: hsla(257, 70%, 17%, 0.2);
--icon-hover: hsl(186, 44%, 54%);
--table-bg: hsl(261, 74%, 6%);
--table-zebra: hsl(257, 61%, 10%);
--table-highlight: hsl(257, 66%, 27%);

View File

@ -142,6 +142,7 @@ i {
&.explicit_icon {
color: hsl(3, 100%, 59%);
margin-right: $explicit-separator;
margin-left: -3px;
&.explicit_icon--right {
margin-left: $explicit-separator;

View File

@ -9,6 +9,7 @@ $table-border-radius: 3px;
tbody {
tr:not(.table__row-no-highlight):hover {
background: var(--table-highlight);
cursor: default;
}
}
@ -199,7 +200,7 @@ $table-border-radius: 3px;
&:hover {
i.material-icons {
color: var(--table-bg);
color: var(--icon-hover);
}
}
}