[web-src] Restyling of queue save modal dialog

web-src/src/components/ModalDialogPlaylistSave.vue

@@ -3,23 +3,37 @@
     <transition name="fade">
       <div class="modal is-active" v-if="show">
         <div class="modal-background" @click="$emit('close')"></div>
-        <div class="modal-card">
-          <section class="modal-card-body">
-            <form v-on:submit.prevent="save">
-              <div class="field">
-                <p class="control is-expanded has-icons-left">
-                  <input class="input is-rounded is-shadowless" type="text" placeholder="playlist name" v-model="pls_name" ref="pls_name_field">
-                  <span class="icon is-left">
-                    <i class="mdi mdi-file-music"></i>
-                  </span>
-                </p>
-              </div>
-            </form>
-          </section>
-          <footer class="modal-card-foot">
-            <button class="button is-success" @click="save" :disabled="pls_name.length < 3">Save</button>
-            <button class="button" @click="$emit('close')">Cancel</button>
-          </footer>
+        <div class="modal-content fd-modal-card">
+          <div class="card">
+            <div class="card-content">
+              <p class="title is-4">
+                Save queue to playlist
+              </p>
+              <form v-on:submit.prevent="save" class="fd-has-margin-bottom">
+                <div class="field">
+                  <p class="control is-expanded has-icons-left">
+                    <input class="input is-shadowless" type="text" placeholder="Playlist name" v-model="playlist_name" :disabled="loading" ref="playlist_name_field">
+                    <span class="icon is-left">
+                      <i class="mdi mdi-file-music"></i>
+                    </span>
+                  </p>
+                </div>
+              </form>
+            </div>
+            <footer class="card-footer" v-if="loading">
+              <a class="card-footer-item has-text-dark">
+                <span class="icon"><i class="mdi mdi-web"></i></span> <span class="is-size-7">Saving ...</span>
+              </a>
+            </footer>
+            <footer class="card-footer" v-else>
+              <a class="card-footer-item has-text-danger" @click="$emit('close')">
+                <span class="icon"><i class="mdi mdi-cancel"></i></span> <span class="is-size-7">Cancel</span>
+              </a>
+              <a class="card-footer-item has-background-info has-text-white has-text-weight-bold" @click="save">
+                <span class="icon"><i class="mdi mdi-content-save"></i></span> <span class="is-size-7">Save</span>
+              </a>
+            </footer>
+          </div>
         </div>
         <button class="modal-close is-large" aria-label="close" @click="$emit('close')"></button>
       </div>
@@ -36,14 +50,37 @@ export default {
 
   data () {
     return {
-      pls_name: ''
+      playlist_name: '',
+      loading: false
     }
   },
 
   methods: {
     save: function () {
-      this.$emit('close')
-      webapi.queue_save_playlist(this.pls_name)
+      if (this.playlist_name.length < 1) {
+        return
+      }
+
+      this.loading = true
+      webapi.queue_save_playlist(this.playlist_name).then(() => {
+        this.$emit('close')
+        this.playlist_name = ''
+      }).catch(() => {
+        this.loading = false
+      })
+    }
+  },
+
+  watch: {
+    'show' () {
+      if (this.show) {
+        this.loading = false
+
+        // We need to delay setting the focus to the input field until the field is part of the dom and visible
+        setTimeout(() => {
+          this.$refs.playlist_name_field.focus()
+        }, 10)
+      }
     }
   }
 }

web-src/src/pages/PageQueue.vue

@@ -38,7 +38,7 @@
           </span>
           <span>Clear</span>
         </a>
-        <a class="button is-small" v-show="queue_items.length > 1" @click="save_dialog">
+        <a class="button is-small" v-if="is_queue_save_allowed" :disabled="queue_items.length === 0" @click="save_dialog">
           <span class="icon">
             <i class="mdi mdi-content-save"></i>
           </span>
@@ -65,7 +65,7 @@
       </draggable>
       <modal-dialog-queue-item :show="show_details_modal" :item="selected_item" @close="show_details_modal = false" />
       <modal-dialog-add-url-stream :show="show_url_modal" @close="show_url_modal = false" />
-      <modal-dialog-playlist-save :show="show_pls_save_modal" @close="show_pls_save_modal = false" />
+      <modal-dialog-playlist-save v-if="is_queue_save_allowed" :show="show_pls_save_modal" @close="show_pls_save_modal = false" />
     </template>
   </content-with-heading>
 </template>
@@ -99,6 +99,9 @@ export default {
     state () {
       return this.$store.state.player
     },
+    is_queue_save_allowed () {
+      return this.$store.state.config.allow_modifying_stored_playlists && this.$store.state.config.default_playlist_directory
+    },
     queue () {
       return this.$store.state.queue
     },

web-src/src/webapi/index.js

@@ -85,7 +85,7 @@ export default {
 
   queue_save_playlist (name) {
     return axios.post('/api/queue/save', undefined, { params: { 'name': name } }).then((response) => {
-      store.dispatch('add_notification', { text: 'playlist saved', type: 'info', timeout: 2000 })
+      store.dispatch('add_notification', { text: 'Queue saved to playlist "' + name + '"', type: 'info', timeout: 2000 })
       return Promise.resolve(response)
     })
   },