[web-src] Add info buttons to album/artist/playlist/files pages

Adds a button to open the modal details dialog for 
album/artist/playlist/directory

web-src/src/pages/PageAlbum.vue

@@ -6,14 +6,12 @@
     </template>
     <template slot="heading-right">
       <div class="buttons is-centered">
+        <a class="button is-small is-light is-rounded" @click="show_album_details_modal = true">
+          <span class="icon"><i class="mdi mdi-dots-horizontal mdi-18px"></i></span>
+        </a>
         <a class="button is-small is-dark is-rounded" @click="play">
           <span class="icon"><i class="mdi mdi-shuffle"></i></span> <span>Shuffle</span>
         </a>
-        <!--
-        <a class="button is-small is-dark is-rounded" @click="play">
-          <span class="icon"><i class="mdi mdi-play"></i></span> <span>Play</span>
-        </a>
-        -->
       </div>
     </template>
     <template slot="content">
@@ -26,6 +24,7 @@
         </template>
       </list-item-track>
       <modal-dialog-track :show="show_details_modal" :track="selected_track" @close="show_details_modal = false" />
+      <modal-dialog-album :show="show_album_details_modal" :album="album" @close="show_album_details_modal = false" />
     </template>
   </content-with-heading>
 </template>
@@ -35,6 +34,7 @@ import { LoadDataBeforeEnterMixin } from './mixin'
 import ContentWithHeading from '@/templates/ContentWithHeading'
 import ListItemTrack from '@/components/ListItemTrack'
 import ModalDialogTrack from '@/components/ModalDialogTrack'
+import ModalDialogAlbum from '@/components/ModalDialogAlbum'
 import webapi from '@/webapi'
 
 const albumData = {
@@ -54,7 +54,7 @@ const albumData = {
 export default {
   name: 'PageAlbum',
   mixins: [ LoadDataBeforeEnterMixin(albumData) ],
-  components: { ContentWithHeading, ListItemTrack, ModalDialogTrack },
+  components: { ContentWithHeading, ListItemTrack, ModalDialogTrack, ModalDialogAlbum },
 
   data () {
     return {
@@ -62,7 +62,9 @@ export default {
       tracks: [],
 
       show_details_modal: false,
-      selected_track: {}
+      selected_track: {},
+
+      show_album_details_modal: false
     }
   },
 

web-src/src/pages/PageArtist.vue

@@ -4,9 +4,14 @@
       <p class="title is-4">{{ artist.name }}</p>
     </template>
     <template slot="heading-right">
-      <a class="button is-small is-dark is-rounded" @click="play">
+      <div class="buttons is-centered">
-        <span class="icon"><i class="mdi mdi-shuffle"></i></span> <span>Shuffle</span>
+        <a class="button is-small is-light is-rounded" @click="show_artist_details_modal = true">
-      </a>
+          <span class="icon"><i class="mdi mdi-dots-horizontal mdi-18px"></i></span>
+        </a>
+        <a class="button is-small is-dark is-rounded" @click="play">
+          <span class="icon"><i class="mdi mdi-shuffle"></i></span> <span>Shuffle</span>
+        </a>
+      </div>
     </template>
     <template slot="content">
       <p class="heading has-text-centered-mobile">{{ artist.album_count }} albums | <a class="has-text-link" @click="open_tracks">{{ artist.track_count }} tracks</a></p>
@@ -18,6 +23,7 @@
         </template>
       </list-item-album>
       <modal-dialog-album :show="show_details_modal" :album="selected_album" @close="show_details_modal = false" />
+      <modal-dialog-artist :show="show_artist_details_modal" :artist="artist" @close="show_artist_details_modal = false" />
     </template>
   </content-with-heading>
 </template>
@@ -27,6 +33,7 @@ import { LoadDataBeforeEnterMixin } from './mixin'
 import ContentWithHeading from '@/templates/ContentWithHeading'
 import ListItemAlbum from '@/components/ListItemAlbum'
 import ModalDialogAlbum from '@/components/ModalDialogAlbum'
+import ModalDialogArtist from '@/components/ModalDialogArtist'
 import webapi from '@/webapi'
 
 const artistData = {
@@ -46,7 +53,7 @@ const artistData = {
 export default {
   name: 'PageArtist',
   mixins: [ LoadDataBeforeEnterMixin(artistData) ],
-  components: { ContentWithHeading, ListItemAlbum, ModalDialogAlbum },
+  components: { ContentWithHeading, ListItemAlbum, ModalDialogAlbum, ModalDialogArtist },
 
   data () {
     return {
@@ -54,7 +61,9 @@ export default {
       albums: {},
 
       show_details_modal: false,
-      selected_album: {}
+      selected_album: {},
+
+      show_artist_details_modal: false
     }
   },
 

web-src/src/pages/PageAudiobook.vue

@@ -5,12 +5,17 @@
       <div class="title is-4 has-text-grey has-text-weight-normal">{{ album.artist }}</div>
     </template>
     <template slot="heading-right">
-      <a class="button is-small is-dark is-rounded" @click="play">
+      <div class="buttons is-centered">
-        <span class="icon">
+        <a class="button is-small is-light is-rounded" @click="show_album_details_modal = true">
-          <i class="mdi mdi-play"></i>
+          <span class="icon"><i class="mdi mdi-dots-horizontal mdi-18px"></i></span>
-        </span>
+        </a>
-        <span>Play</span>
+        <a class="button is-small is-dark is-rounded" @click="play">
-      </a>
+          <span class="icon">
+            <i class="mdi mdi-play"></i>
+          </span>
+          <span>Play</span>
+        </a>
+      </div>
     </template>
     <template slot="content">
       <p class="heading has-text-centered-mobile">{{ album.track_count }} tracks</p>
@@ -22,6 +27,7 @@
         </template>
       </list-item-track>
       <modal-dialog-track :show="show_details_modal" :track="selected_track" @close="show_details_modal = false" />
+      <modal-dialog-album :show="show_album_details_modal" :album="album" :media_kind="'audiobook'" @close="show_album_details_modal = false" />
     </template>
   </content-with-heading>
 </template>
@@ -31,6 +37,7 @@ import { LoadDataBeforeEnterMixin } from './mixin'
 import ContentWithHeading from '@/templates/ContentWithHeading'
 import ListItemTrack from '@/components/ListItemTrack'
 import ModalDialogTrack from '@/components/ModalDialogTrack'
+import ModalDialogAlbum from '@/components/ModalDialogAlbum'
 import webapi from '@/webapi'
 
 const albumData = {
@@ -50,7 +57,7 @@ const albumData = {
 export default {
   name: 'PageAudiobook',
   mixins: [ LoadDataBeforeEnterMixin(albumData) ],
-  components: { ContentWithHeading, ListItemTrack, ModalDialogTrack },
+  components: { ContentWithHeading, ListItemTrack, ModalDialogTrack, ModalDialogAlbum },
 
   data () {
     return {
@@ -58,7 +65,9 @@ export default {
       tracks: [],
 
       show_details_modal: false,
-      selected_track: {}
+      selected_track: {},
+
+      show_album_details_modal: false
     }
   },
 

web-src/src/pages/PageFiles.vue

@@ -6,9 +6,14 @@
         <p class="title is-7 has-text-grey">{{ current_directory }}</p>
       </template>
       <template slot="heading-right">
-        <a class="button is-small is-dark is-rounded" @click="play">
+        <div class="buttons is-centered">
-          <span class="icon"><i class="mdi mdi-play"></i></span> <span>Play</span>
+          <a class="button is-small is-light is-rounded" @click="open_directory_dialog({ 'path': current_directory })">
-        </a>
+            <span class="icon"><i class="mdi mdi-dots-horizontal mdi-18px"></i></span>
+          </a>
+          <a class="button is-small is-dark is-rounded" @click="play">
+            <span class="icon"><i class="mdi mdi-play"></i></span> <span>Play</span>
+          </a>
+        </div>
       </template>
       <template slot="content">
         <div class="media" v-if="$route.query.directory" @click="open_parent_directory()">

web-src/src/pages/PagePlaylist.vue

@@ -4,9 +4,14 @@
       <div class="title is-4">{{ playlist.name }}</div>
     </template>
     <template slot="heading-right">
-      <a class="button is-small is-dark is-rounded" @click="play">
+      <div class="buttons is-centered">
-        <span class="icon"><i class="mdi mdi-shuffle"></i></span> <span>Shuffle</span>
+        <a class="button is-small is-light is-rounded" @click="show_playlist_details_modal = true">
-      </a>
+          <span class="icon"><i class="mdi mdi-dots-horizontal mdi-18px"></i></span>
+        </a>
+        <a class="button is-small is-dark is-rounded" @click="play">
+          <span class="icon"><i class="mdi mdi-shuffle"></i></span> <span>Shuffle</span>
+        </a>
+      </div>
     </template>
     <template slot="content">
       <p class="heading has-text-centered-mobile">{{ tracks.length }} tracks</p>
@@ -18,6 +23,7 @@
         </template>
       </list-item-track>
       <modal-dialog-track :show="show_details_modal" :track="selected_track" @close="show_details_modal = false" />
+      <modal-dialog-playlist :show="show_playlist_details_modal" :playlist="playlist" @close="show_playlist_details_modal = false" />
     </template>
   </content-with-heading>
 </template>
@@ -27,6 +33,7 @@ import { LoadDataBeforeEnterMixin } from './mixin'
 import ContentWithHeading from '@/templates/ContentWithHeading'
 import ListItemTrack from '@/components/ListItemTrack'
 import ModalDialogTrack from '@/components/ModalDialogTrack'
+import ModalDialogPlaylist from '@/components/ModalDialogPlaylist'
 import webapi from '@/webapi'
 
 const playlistData = {
@@ -46,7 +53,7 @@ const playlistData = {
 export default {
   name: 'PagePlaylist',
   mixins: [ LoadDataBeforeEnterMixin(playlistData) ],
-  components: { ContentWithHeading, ListItemTrack, ModalDialogTrack },
+  components: { ContentWithHeading, ListItemTrack, ModalDialogTrack, ModalDialogPlaylist },
 
   data () {
     return {
@@ -54,7 +61,9 @@ export default {
       tracks: [],
 
       show_details_modal: false,
-      selected_track: {}
+      selected_track: {},
+
+      show_playlist_details_modal: false
     }
   },
 

web-src/src/pages/PagePodcast.vue

@@ -4,12 +4,17 @@
       <div class="title is-4">{{ album.name }}</div>
     </template>
     <template slot="heading-right">
-      <a class="button is-small is-dark is-rounded" @click="play">
+      <div class="buttons is-centered">
-        <span class="icon">
+        <a class="button is-small is-light is-rounded" @click="show_album_details_modal = true">
-          <i class="mdi mdi-play"></i>
+          <span class="icon"><i class="mdi mdi-dots-horizontal mdi-18px"></i></span>
-        </span>
+        </a>
-        <span>Play</span>
+        <a class="button is-small is-dark is-rounded" @click="play">
-      </a>
+          <span class="icon">
+            <i class="mdi mdi-play"></i>
+          </span>
+          <span>Play</span>
+        </a>
+      </div>
     </template>
     <template slot="content">
       <p class="heading has-text-centered-mobile">{{ album.track_count }} tracks</p>
@@ -31,6 +36,7 @@
         </template>
       </list-item-track>
       <modal-dialog-track :show="show_details_modal" :track="selected_track" @close="show_details_modal = false" @play_count_changed="reload_tracks" />
+      <modal-dialog-album :show="show_album_details_modal" :album="album" :media_kind="'podcast'" @close="show_album_details_modal = false" />
     </template>
   </content-with-heading>
 </template>
@@ -40,6 +46,7 @@ import { LoadDataBeforeEnterMixin } from './mixin'
 import ContentWithHeading from '@/templates/ContentWithHeading'
 import ListItemTrack from '@/components/ListItemTrack'
 import ModalDialogTrack from '@/components/ModalDialogTrack'
+import ModalDialogAlbum from '@/components/ModalDialogAlbum'
 import RangeSlider from 'vue-range-slider'
 import webapi from '@/webapi'
 
@@ -60,7 +67,7 @@ const albumData = {
 export default {
   name: 'PagePodcast',
   mixins: [ LoadDataBeforeEnterMixin(albumData) ],
-  components: { ContentWithHeading, ListItemTrack, ModalDialogTrack, RangeSlider },
+  components: { ContentWithHeading, ListItemTrack, ModalDialogTrack, RangeSlider, ModalDialogAlbum },
 
   data () {
     return {
@@ -68,7 +75,9 @@ export default {
       tracks: [],
 
       show_details_modal: false,
-      selected_track: {}
+      selected_track: {},
+
+      show_album_details_modal: false
     }
   },