feat: moved back button to top left of Artist and Tracklist

This commit is contained in:
Roberto Tonino 2020-10-07 18:44:33 +02:00
parent 83d09d2425
commit 1646f6b0e5
7 changed files with 128 additions and 60 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

@ -0,0 +1,34 @@
<template>
<button class="top-back-button" @click="$router.back()">
<i class="material-icons mirrored md-36">forward</i>
</button>
</template>
<style lang="scss" scoped>
$button-dimension: 4rem;
$button-separator: 10px;
.top-back-button {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: $button-separator;
left: $button-separator;
min-width: unset;
width: $button-dimension;
height: $button-dimension;
background: var(--secondary-background);
border-radius: 50%;
padding: 0.25rem;
margin: 0;
transition: background 200ms ease-in-out;
&:hover {
background: var(--accent-color);
}
}
</style>

View File

@ -1,5 +1,5 @@
<template>
<div id="artist_tab" class="main_tabcontent fixed_footer image_header" ref="root">
<div id="artist_tab" class="main_tabcontent image_header" ref="root">
<header
class="inline-flex"
:style="{
@ -7,6 +7,8 @@
'linear-gradient(to bottom, transparent 0%, var(--main-background) 100%), url(\'' + image + '\')'
}"
>
<BackButton />
<h1>{{ title }}</h1>
<div role="button" aria-label="download" @click.stop="addToQueue" :data-link="link" class="fab right">
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
@ -67,21 +69,24 @@
</tr>
</tbody>
</table>
<footer>
<button class="back-button" @click="$router.back()">{{ $t('globals.back') }}</button>
</footer>
</div>
</template>
<style lang="scss" scoped>
.main_tabcontent {
position: relative;
}
</style>
<script>
import { isEmpty, orderBy } from 'lodash-es'
import { socket } from '@/utils/socket'
import Downloads from '@/utils/downloads'
import EventBus from '@/utils/EventBus'
import BackButton from '@components/globals/BackButton.vue'
export default {
name: 'artist-tab',
data() {
return {
currentTab: '',
@ -95,6 +100,30 @@ export default {
body: null
}
},
computed: {
showTable() {
if (this.body) {
if (this.sortKey == 'nb_song')
return orderBy(
this.body[this.currentTab],
function (o) {
return new Number(o.nb_song)
},
this.sortOrder
)
else return orderBy(this.body[this.currentTab], this.sortKey, this.sortOrder)
} else return []
}
},
components: {
BackButton
},
mounted() {
socket.on('show_artist', this.showArtist)
EventBus.$on('artistTab:updateSelected', this.updateSelected)
EventBus.$on('artistTab:changeTab', this.changeTab)
},
methods: {
reset() {
this.title = 'Loading...'
@ -157,30 +186,7 @@ export default {
this.body = releases
}
}
},
computed: {
showTable() {
if (this.body) {
if (this.sortKey == 'nb_song')
return orderBy(
this.body[this.currentTab],
function (o) {
return new Number(o.nb_song)
},
this.sortOrder
)
else return orderBy(this.body[this.currentTab], this.sortKey, this.sortOrder)
} else return []
}
},
mounted() {
socket.on('show_artist', this.showArtist)
EventBus.$on('artistTab:updateSelected', this.updateSelected)
EventBus.$on('artistTab:changeTab', this.changeTab)
}
}
</script>
<style>
</style>

View File

@ -1,17 +1,20 @@
<template>
<div id="tracklist_tab" class="main_tabcontent fixed_footer image_header" ref="root">
<div class="main_tabcontent fixed_footer image_header" ref="root">
<header
:style="{
'background-image':
'linear-gradient(to bottom, transparent 0%, var(--main-background) 100%), url(\'' + image + '\')'
}"
>
<BackButton />
<h1 class="inline-flex">
{{ title }} <i v-if="explicit" class="material-icons explicit_icon explicit_icon--right">explicit</i>
</h1>
<h2 class="inline-flex">
<span v-if="metadata">{{ metadata }}</span>
<span class="right" v-if="release_date">{{ release_date }}</span>
<h2>
<p v-if="metadata">{{ metadata }}</p>
<p v-if="release_date">{{ release_date }}</p>
</h2>
</header>
@ -137,11 +140,16 @@
<button class="with_icon" @click.stop="addToQueue" :data-link="selectedLinks()">
{{ $t('tracklist.downloadSelection') }}<i class="material-icons">file_download</i>
</button>
<button class="back-button" @click="$router.back()">{{ $t('globals.back') }}</button>
</footer>
</div>
</template>
<style lang="scss" scoped>
.main_tabcontent {
position: relative;
}
</style>
<script>
import { isEmpty } from 'lodash-es'
import { socket } from '@/utils/socket'
@ -149,6 +157,8 @@ import Downloads from '@/utils/downloads'
import Utils from '@/utils/utils'
import EventBus from '@/utils/EventBus'
import BackButton from '@components/globals/BackButton.vue'
export default {
data() {
return {
@ -163,6 +173,16 @@ export default {
body: []
}
},
components: {
BackButton
},
mounted() {
EventBus.$on('tracklistTab:selectRow', this.selectRow)
socket.on('show_album', this.showAlbum)
socket.on('show_playlist', this.showPlaylist)
socket.on('show_spotifyplaylist', this.showSpotifyPlaylist)
},
methods: {
playPausePreview(e) {
EventBus.$emit('trackPreview:playPausePreview', e)
@ -291,16 +311,7 @@ export default {
selectRow(index, track) {
track.selected = !track.selected
}
},
mounted() {
EventBus.$on('tracklistTab:selectRow', this.selectRow)
socket.on('show_album', this.showAlbum)
socket.on('show_playlist', this.showPlaylist)
socket.on('show_spotifyplaylist', this.showSpotifyPlaylist)
}
}
</script>
<style>
</style>

View File

@ -191,22 +191,25 @@ a {
.clickable {
cursor: pointer !important;
}
.table--tracklist .clickable:hover,
.table--charts .clickable:hover {
text-decoration: underline;
}
.fixed_footer footer {
position: sticky;
display: flex;
align-items: center;
flex-direction: row;
justify-content: flex-end;
background-color: var(--main-background);
bottom: 0px;
height: 64px;
width: 100%;
margin-top: 24px;
.fixed_footer {
footer {
position: sticky;
display: flex;
align-items: center;
flex-direction: row;
justify-content: flex-end;
background-color: var(--main-background);
bottom: 0px;
height: 64px;
width: 100%;
margin-top: 24px;
}
}
.fab {

View File

@ -15,3 +15,17 @@
font-size: 1.75rem;
margin-bottom: 25px;
}
.material-icons {
$sizes: 18, 24, 36, 48;
@each $size in $sizes {
&.md-#{$size} {
font-size: $size * 1px;
}
}
&.mirrored {
transform: scaleX(-1);
}
}