use flat dialog for albums
This commit is contained in:
Artem Anufrij
parent
96fe5f0505
commit
0f931e218a
@ -420,6 +420,7 @@ export default {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.dialog-window.fullscreen
|
||||
.dialog-body.flat-dialog-header {
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
|
||||
@ -1,72 +1,89 @@
|
||||
<template>
|
||||
<DialogBase ref="dialogWindow" :title="album_title" @canceled="closed" :showFooter="false" :disableXscroll="true" :disableYscroll="true">
|
||||
<DialogBase ref="dialogWindow" :title="album_title" @canceled="closed" :showFooter="false" :disableXscroll="true" :disableYscroll="true" :flatDialogHeader="true">
|
||||
<div id="albumViewer" class="flex-row">
|
||||
<div id="header" class="flex-column">
|
||||
<div id="header" class="flex-column grow">
|
||||
<div id="background" :style="coverBackground" />
|
||||
<div class="grow z1 center flex-column">
|
||||
<img class="glow ma24" :src="cover" @dblclick="dblclick" />
|
||||
</div>
|
||||
<awesome-icon icon="star" size="2x" class="favourite ma4" :class="{ active: isFavourite }" @click="toggleFavourite" title="Favourite" />
|
||||
<awesome-icon icon="play" size="2x" class="keepPlaying ma4 primary-text" @click="playProgress" v-if="selectedAlbum.progress" title="Keep playing" />
|
||||
<div id="stats" class="flex-row z1">
|
||||
<DropDown v-if="$store.getters['user/isAdministrator']">
|
||||
<button class="flat center" :title="visibility_text">
|
||||
<awesome-icon :icon="visibility_icon" />
|
||||
</button>
|
||||
<template v-slot:dropdown-content>
|
||||
<div>
|
||||
<button v-for="(item, i) in $store.state.system.lists.visibility" :key="i" @click="setVisibility(item)">
|
||||
<awesome-icon :icon="getVisibilityIcon(item)" />{{
|
||||
getVisibilityText(item)
|
||||
}}
|
||||
</button>
|
||||
<hr />
|
||||
<button v-if="!selectedAlbum.share._id" @click="shareEnable">
|
||||
<awesome-icon icon="share" />Share this album
|
||||
</button>
|
||||
<button v-if="selectedAlbum.share._id" @click="addShareUrlToClipboard">
|
||||
<awesome-icon icon="clipboard" />Copy url into clipboard
|
||||
</button>
|
||||
<button v-if="selectedAlbum.share._id" @click="shareDisable">
|
||||
<awesome-icon icon="share" />Remove share
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</DropDown>
|
||||
<div class="grow flex-column">
|
||||
<p class="ma4 center">
|
||||
<span class="grow center">
|
||||
by
|
||||
<b @click="gotoArtist" class="pointer">{{
|
||||
selectedAlbum.artist_name
|
||||
}}</b>
|
||||
<br />
|
||||
<span v-if="album_year">
|
||||
from year <b>{{ album_year }}</b> </span><br />
|
||||
<b>{{ album_tracks.length }}</b> Tracks with a duration of
|
||||
<b>{{ album_duration }}</b>
|
||||
</span>
|
||||
</p>
|
||||
<div it="title" class="flex-column pa grow z1">
|
||||
<img class="glow ma" :src="cover" />
|
||||
|
||||
<span id="stats" class="center">
|
||||
{{ selectedAlbum.title }}
|
||||
<br />
|
||||
by
|
||||
<b @click="gotoArtist" class="pointer">{{ selectedAlbum.artist_name }}</b>
|
||||
<br />
|
||||
<span v-if="album_year">
|
||||
from year <b>{{ album_year }}</b> </span><br />
|
||||
<b>{{ album_tracks.length }}</b> Tracks with a duration of
|
||||
<b>{{ album_duration }}</b>
|
||||
|
||||
</span>
|
||||
<div class=" grow">
|
||||
|
||||
</div>
|
||||
<DropDown v-if="$store.getters['user/isAdministrator']">
|
||||
<button class="flat center">
|
||||
<awesome-icon icon="ellipsis-v" />
|
||||
<div class="flex-row grow ma-top">
|
||||
|
||||
<button class="flat ma-right" title="Favourite" @click="toggleFavourite">
|
||||
<awesome-icon :icon="['fas', 'star']" size="2x" class="white-text favourite active" v-if="isFavourite" />
|
||||
<awesome-icon :icon="['far', 'star']" size="2x" class="white-text favourite" v-else />
|
||||
</button>
|
||||
<template v-slot:dropdown-content>
|
||||
<div>
|
||||
<button @click="uploadNewCover">
|
||||
<awesome-icon icon="image" />Set new Cover...
|
||||
</button>
|
||||
<button @click="resetCover">
|
||||
<awesome-icon icon="eraser" />Reset Cover
|
||||
</button>
|
||||
<hr />
|
||||
<button @click="mergeAlbum">
|
||||
<awesome-icon icon="compress-alt" />Merge Albums...
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</DropDown>
|
||||
<button class="flat ma-right" @click="playProgress" v-if="selectedAlbum.progress">
|
||||
<awesome-icon icon="play" size="2x" class="primary-text" title="Keep playing" />
|
||||
</button>
|
||||
<button class="flat ma-right" @click="playAlbum" v-else>
|
||||
<awesome-icon icon="play" size="2x" class="white-text" title="Play" />
|
||||
</button>
|
||||
<button @click="gotoPrevAlbum" class="flat ma-left ma-right" :title="prevAlbum.name" :disabled="!prevAlbum._id">
|
||||
<awesome-icon icon="angle-left" class="ma4 white-text" />
|
||||
</button>
|
||||
<button @click="gotoNextAlbum" class="flat" :title="nextAlbum.name" :disabled="!nextAlbum._id">
|
||||
<awesome-icon icon="angle-right" class="ma4 white-text" />
|
||||
</button>
|
||||
<div class="grow"></div>
|
||||
<DropDown v-if="$store.getters['user/isAdministrator']">
|
||||
<button class="flat center" :title="visibility_text">
|
||||
<awesome-icon :icon="visibility_icon" class="white-text" />
|
||||
</button>
|
||||
<template v-slot:dropdown-content>
|
||||
<div>
|
||||
<button v-for="(item, i) in $store.state.system.lists.visibility" :key="i" @click="setVisibility(item)">
|
||||
<awesome-icon :icon="getVisibilityIcon(item)" />{{
|
||||
getVisibilityText(item)
|
||||
}}
|
||||
</button>
|
||||
<hr />
|
||||
<button v-if="!selectedAlbum.share._id" @click="shareEnable">
|
||||
<awesome-icon icon="share" />Share this album
|
||||
</button>
|
||||
<button v-if="selectedAlbum.share._id" @click="addShareUrlToClipboard">
|
||||
<awesome-icon icon="clipboard" />Copy url into clipboard
|
||||
</button>
|
||||
<button v-if="selectedAlbum.share._id" @click="shareDisable">
|
||||
<awesome-icon icon="share" />Remove share
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</DropDown>
|
||||
<DropDown v-if="$store.getters['user/isAdministrator']">
|
||||
<button class="flat center">
|
||||
<awesome-icon icon="ellipsis-v" class="white-text" />
|
||||
</button>
|
||||
<template v-slot:dropdown-content>
|
||||
<div>
|
||||
<button @click="uploadNewCover">
|
||||
<awesome-icon icon="image" />Set new Cover...
|
||||
</button>
|
||||
<button @click="resetCover">
|
||||
<awesome-icon icon="eraser" />Reset Cover
|
||||
</button>
|
||||
<hr />
|
||||
<button @click="mergeAlbum">
|
||||
<awesome-icon icon="compress-alt" />Merge Albums...
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</DropDown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul id="trackList" class="tracks">
|
||||
@ -100,7 +117,7 @@ export default {
|
||||
window.location.origin + "/#/share?id=" + this.selectedAlbum.share._id;
|
||||
navigator.clipboard.writeText(url);
|
||||
},
|
||||
dblclick() {
|
||||
playAlbum() {
|
||||
this.$store.commit("tracks/resetSelectedTrack");
|
||||
this.$store.commit("radios/resetSelectedRadio");
|
||||
this.$store.dispatch("tracks/playContainer", this.selectedAlbum);
|
||||
@ -332,11 +349,13 @@ export default {
|
||||
|
||||
<style scoped>
|
||||
#albumViewer {
|
||||
height: 366px;
|
||||
height: 400px;
|
||||
width: 640px;
|
||||
}
|
||||
|
||||
#header {
|
||||
width: 304px;
|
||||
height: 400px;
|
||||
position: relative;
|
||||
background-color: black;
|
||||
}
|
||||
@ -348,13 +367,8 @@ export default {
|
||||
|
||||
#stats {
|
||||
z-index: 2;
|
||||
align-items: center;
|
||||
color: var(--white);
|
||||
text-shadow: 0 1px 2px black;
|
||||
line-height: 1.4;
|
||||
background-color: #ffffff40;
|
||||
border-top: 1px solid #ffffff20;
|
||||
border-bottom: 1px solid #00000020;
|
||||
}
|
||||
|
||||
.dropdown-activator button {
|
||||
|
||||
@ -17,11 +17,11 @@
|
||||
<awesome-icon :icon="['fas', 'star']" size="2x" class="white-text favourite active" v-if="isFavourite" />
|
||||
<awesome-icon :icon="['far', 'star']" size="2x" class="white-text favourite" v-else />
|
||||
</button>
|
||||
<button class="flat ma-right" v-if="selectedArtist.progress">
|
||||
<awesome-icon icon="play" size="2x" class="primary-text " @click="playProgress" title="Keep playing" />
|
||||
<button class="flat ma-right" @click="playProgress" title="Keep playing" v-if="selectedArtist.progress">
|
||||
<awesome-icon icon="play" size="2x" class="primary-text" />
|
||||
</button>
|
||||
<button class="flat ma-right" v-else>
|
||||
<awesome-icon icon="play" size="2x" class="white-text" @click="playArtist" title="Play" />
|
||||
<button class="flat ma-right" @click="playArtist" title="Play" v-else>
|
||||
<awesome-icon icon="play" size="2x" class="white-text" />
|
||||
</button>
|
||||
<button @click="gotoPrevArtist" class="flat ma-left ma-right" :title="prevArtist.name" :disabled="!prevArtist._id">
|
||||
<awesome-icon icon="angle-left" class="ma4 white-text" />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user