JS design

Former-commit-id: 46ef678067f79997b35a86931a324e8404d4db98 [formerly 16e52ff387b32d4dcbec9bfe6132ea71192f331a] [formerly 985b6e3050f66c3131f1c62aab9a5dbe025437f2 [formerly fc71509dd032eb5cdbbfeb8de9a25d836bb2d61c]]
Former-commit-id: acffffe9de1e64b90cc0cc0eb2dff9e367c70d88 [formerly af4f7056c6fb45b96e115b182e7ab2303fc39159]
Former-commit-id: 17d369064f83ebf81d7374b92245c9003f86efbe

_assets/src/components/Main.vue

@@ -34,6 +34,10 @@
           <i class="material-icons">error</i>
           <span>You're not welcome here.</span>
         </h2>
+        <h2 class="message" v-else>
+          <i class="material-icons">error_outline</i>
+          <span>Something really went wrong.</span>
+        </h2>
       </div>
       <editor v-else-if="isEditor"></editor>
       <listing v-else-if="isListing"></listing>
@@ -132,7 +136,7 @@ export default {
     window.addEventListener('keydown', (event) => {
       // Esc!
       if (event.keyCode === 27) {
-        this.$store.commit('resetPrompts')
+        this.$store.commit('closePrompts')
 
         // Unselect all files and folders.
         if (this.req.kind === 'listing') {
@@ -150,20 +154,20 @@ export default {
       // Del!
       if (event.keyCode === 46) {
         if (this.showDeleteButton()) {
-          this.$store.commit('showDelete', true)
+          this.$store.commit('showPrompt', 'delete')
         }
       }
 
       // F1!
       if (event.keyCode === 112) {
         event.preventDefault()
-        this.$store.commit('showHelp', true)
+        this.$store.commit('showPrompt', 'help')
       }
 
       // F2!
       if (event.keyCode === 113) {
         if (this.showRenameButton()) {
-          this.$store.commit('showRename', true)
+          this.$store.commit('showPrompt', 'rename')
         }
       }
 
@@ -185,11 +189,14 @@ export default {
   },
   methods: {
     fetchData () {
+      // Set loading to true and reset the error.
       this.loading = true
       this.error = null
+
       // Reset selected items and multiple selection.
       this.$store.commit('resetSelected')
       this.$store.commit('multiple', false)
+      this.$store.commit('closePrompts')
 
       let url = this.$route.path
       if (url === '') url = '/'

_assets/src/components/Sidebar.vue

@@ -6,12 +6,12 @@
     </router-link>
 
     <div v-if="user.allowNew">
-      <button @click="$store.commit('showNewDir', true)" aria-label="New directory" title="New directory" class="action">
+      <button @click="$store.commit('showPrompt', 'newDir')" aria-label="New directory" title="New directory" class="action">
         <i class="material-icons">create_new_folder</i>
         <span>New folder</span>
       </button>
 
-      <button @click="$store.commit('showNewFile', true)" aria-label="New file" title="New file" class="action">
+      <button @click="$store.commit('showPrompt', 'newFile')" aria-label="New file" title="New file" class="action">
         <i class="material-icons">note_add</i>
         <span>New file</span>
       </button>

_assets/src/components/buttons/DeleteButton.vue

@@ -10,7 +10,7 @@ export default {
   name: 'delete-button',
   methods: {
     show: function (event) {
-      this.$store.commit('showDelete', true)
+      this.$store.commit('showPrompt', 'delete')
     }
   }
 }

_assets/src/components/buttons/DownloadButton.vue

@@ -25,7 +25,7 @@ export default {
         return
       }
 
-      this.$store.commit('showDownload', true)
+      this.$store.commit('showPrompt', 'download')
     }
   }
 }

_assets/src/components/buttons/InfoButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <button title="Info" aria-label="Info" class="action" @click="$store.commit('showInfo', true)">
+  <button title="Info" aria-label="Info" class="action" @click="this.$store.commit('showPrompt', 'info')">
     <i class="material-icons">info</i>
     <span>Info</span>
   </button>

_assets/src/components/buttons/MoveButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <button @click="$store.commit('showMove', true)" aria-label="Move" title="Move" class="action">
+  <button @click="this.$store.commit('showPrompt', 'move')" aria-label="Move" title="Move" class="action">
     <i class="material-icons">forward</i>
     <span>Move file</span>
   </button>

_assets/src/components/buttons/RenameButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <button @click="$store.commit('showRename', true)" aria-label="Rename" title="Rename" class="action">
+  <button @click="this.$store.commit('showPrompt', 'rename')" aria-label="Rename" title="Rename" class="action">
     <i class="material-icons">mode_edit</i>
     <span>Rename</span>
   </button>

_assets/src/components/prompts/Delete.vue

@@ -22,9 +22,9 @@ export default {
     ...mapState(['req', 'selected'])
   },
   methods: {
-    ...mapMutations(['showDelete']),
+    ...mapMutations(['closePrompts']),
     submit: function (event) {
-      this.showDelete(false)
+      this.closePrompts()
       // buttons.setLoading('delete')
 
       if (this.req.kind !== 'listing') {

_assets/src/components/prompts/Download.vue

@@ -39,6 +39,7 @@ export default {
       }
 
       window.open(uri)
+      this.$store.commit('closePrompts')
     }
   }
 }

_assets/src/components/prompts/Help.vue

@@ -20,7 +20,7 @@
     </ul>
 
     <div>
-      <button type="submit" @click="$store.commit('showHelp', false)" class="ok">OK</button>
+      <button type="submit" @click="$store.commit('closePrompts')" class="ok">OK</button>
     </div>
   </div>
 </template>

_assets/src/components/prompts/Info.vue

@@ -21,7 +21,7 @@
     </section>
 
     <div>
-      <button type="submit" @click="$store.commit('showInfo', false)" class="ok">OK</button>
+      <button type="submit" @click="$store.commit('closePrompts')" class="ok">OK</button>
     </div>
   </div>
 </template>

_assets/src/components/prompts/Move.vue

@@ -11,7 +11,7 @@
 
     <div>
       <button class="ok" @click="move">Move</button>
-      <button class="cancel" @click="$store.commit('showMove', false)">Cancel</button>
+      <button class="cancel" @click="$store.commit('closePrompts')">Cancel</button>
     </div>
   </div>
 </template>

_assets/src/components/prompts/NewDir.vue

@@ -5,7 +5,7 @@
     <input autofocus type="text" @keyup.enter="submit" v-model.trim="name">
     <div>
       <button class="ok" @click="submit">Create</button>
-      <button class="cancel" @click="$store.commit('showNewDir', false)">Cancel</button>
+      <button class="cancel" @click="$store.commit('closePrompts')">Cancel</button>
     </div>
   </div>
 </template>
@@ -45,7 +45,7 @@ export default {
           console.log(error)
         })
 
-      this.$store.commit('showNewDir', false)
+      this.$store.commit('closePrompts')
     }
   }
 }

_assets/src/components/prompts/NewFile.vue

@@ -5,7 +5,7 @@
     <input autofocus type="text" @keyup.enter="submit" v-model.trim="name">
     <div>
       <button class="ok" @click="submit">Create</button>
-      <button class="cancel" @click="$store.commit('showNewFile', false)">Cancel</button>
+      <button class="cancel" @click="$store.commit('closePrompts')">Cancel</button>
     </div>
   </div>
 </template>
@@ -45,7 +45,7 @@ export default {
           console.log(error)
         })
 
-      this.$store.commit('showNewFile', false)
+      this.$store.commit('closePrompts')
     }
   }
 }

_assets/src/components/prompts/Prompts.vue

@@ -21,7 +21,7 @@ import Download from './Download'
 import Move from './Move'
 import NewFile from './NewFile'
 import NewDir from './NewDir'
-import {mapGetters, mapState} from 'vuex'
+import {mapGetters} from 'vuex'
 
 export default {
   name: 'prompts',
@@ -37,9 +37,7 @@ export default {
   },
   computed: {
     ...mapGetters([
-      'showOverlay'
-    ]),
-    ...mapState([
+      'showOverlay',
       'showInfo',
       'showHelp',
       'showDelete',
@@ -52,7 +50,7 @@ export default {
   },
   methods: {
     resetPrompts () {
-      this.$store.commit('resetPrompts')
+      this.$store.commit('closePrompts')
     }
   }
 }

_assets/src/components/prompts/Rename.vue

@@ -25,7 +25,7 @@ export default {
   computed: mapState(['req', 'selected', 'selectedCount']),
   methods: {
     cancel: function (event) {
-      this.$store.commit('showRename', false)
+      this.$store.commit('closePrompts')
     },
     oldName: function () {
       if (this.req.kind !== 'listing') {
@@ -68,7 +68,7 @@ export default {
           console.log(error)
         })
 
-      this.$store.commit('showRename', false)
+      this.$store.commit('closePrompts')
       return
     }
   }