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> <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 <header
class="inline-flex" class="inline-flex"
:style="{ :style="{
@ -7,6 +7,8 @@
'linear-gradient(to bottom, transparent 0%, var(--main-background) 100%), url(\'' + image + '\')' 'linear-gradient(to bottom, transparent 0%, var(--main-background) 100%), url(\'' + image + '\')'
}" }"
> >
<BackButton />
<h1>{{ title }}</h1> <h1>{{ title }}</h1>
<div role="button" aria-label="download" @click.stop="addToQueue" :data-link="link" class="fab right"> <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> <i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
@ -67,21 +69,24 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<footer>
<button class="back-button" @click="$router.back()">{{ $t('globals.back') }}</button>
</footer>
</div> </div>
</template> </template>
<style lang="scss" scoped>
.main_tabcontent {
position: relative;
}
</style>
<script> <script>
import { isEmpty, orderBy } from 'lodash-es' import { isEmpty, orderBy } from 'lodash-es'
import { socket } from '@/utils/socket' import { socket } from '@/utils/socket'
import Downloads from '@/utils/downloads' import Downloads from '@/utils/downloads'
import EventBus from '@/utils/EventBus' import EventBus from '@/utils/EventBus'
import BackButton from '@components/globals/BackButton.vue'
export default { export default {
name: 'artist-tab',
data() { data() {
return { return {
currentTab: '', currentTab: '',
@ -95,6 +100,30 @@ export default {
body: null 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: { methods: {
reset() { reset() {
this.title = 'Loading...' this.title = 'Loading...'
@ -157,30 +186,7 @@ export default {
this.body = releases 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> </script>
<style>
</style>

View File

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

View File

@ -191,12 +191,14 @@ a {
.clickable { .clickable {
cursor: pointer !important; cursor: pointer !important;
} }
.table--tracklist .clickable:hover, .table--tracklist .clickable:hover,
.table--charts .clickable:hover { .table--charts .clickable:hover {
text-decoration: underline; text-decoration: underline;
} }
.fixed_footer footer { .fixed_footer {
footer {
position: sticky; position: sticky;
display: flex; display: flex;
align-items: center; align-items: center;
@ -208,6 +210,7 @@ a {
width: 100%; width: 100%;
margin-top: 24px; margin-top: 24px;
} }
}
.fab { .fab {
width: 56px; width: 56px;

View File

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