From d51f9b0722e399811b8b1cc5bf45ee645892b65f Mon Sep 17 00:00:00 2001
From: chme <christian.meffert@googlemail.com>
Date: Sun, 17 Feb 2019 11:24:30 +0100
Subject: [PATCH] [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     | 16 +++++++++-------
 web-src/src/pages/PageArtist.vue    | 19 ++++++++++++++-----
 web-src/src/pages/PageAudiobook.vue | 25 +++++++++++++++++--------
 web-src/src/pages/PageFiles.vue     | 11 ++++++++---
 web-src/src/pages/PagePlaylist.vue  | 19 ++++++++++++++-----
 web-src/src/pages/PagePodcast.vue   | 25 +++++++++++++++++--------
 6 files changed, 79 insertions(+), 36 deletions(-)

diff --git a/web-src/src/pages/PageAlbum.vue b/web-src/src/pages/PageAlbum.vue
index 825fdb60..4d8f917a 100644
--- a/web-src/src/pages/PageAlbum.vue
+++ b/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
     }
   },
 
diff --git a/web-src/src/pages/PageArtist.vue b/web-src/src/pages/PageArtist.vue
index 65050083..8a8892d5 100644
--- a/web-src/src/pages/PageArtist.vue
+++ b/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">
-        <span class="icon"><i class="mdi mdi-shuffle"></i></span> <span>Shuffle</span>
-      </a>
+      <div class="buttons is-centered">
+        <a class="button is-small is-light is-rounded" @click="show_artist_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>
+      </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
     }
   },
 
diff --git a/web-src/src/pages/PageAudiobook.vue b/web-src/src/pages/PageAudiobook.vue
index e01ed2e2..84788625 100644
--- a/web-src/src/pages/PageAudiobook.vue
+++ b/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">
-        <span class="icon">
-          <i class="mdi mdi-play"></i>
-        </span>
-        <span>Play</span>
-      </a>
+      <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-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
     }
   },
 
diff --git a/web-src/src/pages/PageFiles.vue b/web-src/src/pages/PageFiles.vue
index b05d6978..2cc737e8 100644
--- a/web-src/src/pages/PageFiles.vue
+++ b/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">
-          <span class="icon"><i class="mdi mdi-play"></i></span> <span>Play</span>
-        </a>
+        <div class="buttons is-centered">
+          <a class="button is-small is-light is-rounded" @click="open_directory_dialog({ 'path': current_directory })">
+            <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()">
diff --git a/web-src/src/pages/PagePlaylist.vue b/web-src/src/pages/PagePlaylist.vue
index dae0a5ff..62ea02a8 100644
--- a/web-src/src/pages/PagePlaylist.vue
+++ b/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">
-        <span class="icon"><i class="mdi mdi-shuffle"></i></span> <span>Shuffle</span>
-      </a>
+      <div class="buttons is-centered">
+        <a class="button is-small is-light is-rounded" @click="show_playlist_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>
+      </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
     }
   },
 
diff --git a/web-src/src/pages/PagePodcast.vue b/web-src/src/pages/PagePodcast.vue
index d86b6332..9cf74963 100644
--- a/web-src/src/pages/PagePodcast.vue
+++ b/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">
-        <span class="icon">
-          <i class="mdi mdi-play"></i>
-        </span>
-        <span>Play</span>
-      </a>
+      <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-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
     }
   },