Updates on prompts logic and fix some bugs

Former-commit-id: 17ce92cdd1f156138d448102dcda9675a602d421 [formerly 7d28054d44850a88aa9bffd1737b698c857d5df2] [formerly ff0b8db379ecafeb7f2adbcb9704f7519d3288a7 [formerly ae28c3cfa9]]
Former-commit-id: 1557dd533c6ad86ff5e51c18e366b0a873ac1a17 [formerly b338497306c0309166cd650a5f316e0f494ea7eb]
Former-commit-id: 37cabc176211fd59d3800bb1e121f491d390c491

_assets/src/components/Main.vue

@@ -24,7 +24,11 @@
     <sidebar></sidebar>
 
     <main>
-      <div v-if="loading">Loading...</div>
+      <div v-if="loading">
+        <h2 class="message">
+          <span>Loading...</span>
+        </h2>
+      </div>
       <div v-else-if="error">
         <h2 class="message" v-if="error === 404">
           <i class="material-icons">gps_off</i>

_assets/src/components/buttons/InfoButton.vue

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

_assets/src/components/prompts/Prompts.vue

@@ -1,14 +1,15 @@
 <template>
   <div>
-    <help v-show="showHelp" :class="{ active: showHelp }"></help>
+    <help v-if="showHelp" ></help>
-    <download v-if="showDownload" :class="{ active: showDownload }"></download>
+    <download v-else-if="showDownload"></download>
-    <new-file v-if="showNewFile" :class="{ active: showNewFile }"></new-file>
+    <new-file v-else-if="showNewFile"></new-file>
-    <new-dir v-if="showNewDir" :class="{ active: showNewDir }"></new-dir>
+    <new-dir v-else-if="showNewDir"></new-dir>
-    <rename v-if="showRename" :class="{ active: showRename }"></rename>
+    <rename v-else-if="showRename"></rename>
-    <delete v-if="showDelete" :class="{ active: showDelete }"></delete>
+    <delete v-else-if="showDelete"></delete>
-    <info v-if="showInfo" :class="{ active: showInfo }"></info>
+    <info v-else-if="showInfo"></info>
-    <move v-if="showMove" :class="{ active: showMove }"></move>
+    <move v-else-if="showMove"></move>
-    <div v-show="showOverlay" @click="resetPrompts" class="overlay" :class="{ active: showOverlay }"></div>
+
+    <div v-show="showOverlay" @click="resetPrompts" class="overlay"></div>
   </div>
 </template>
 
@@ -21,7 +22,7 @@ import Download from './Download'
 import Move from './Move'
 import NewFile from './NewFile'
 import NewDir from './NewDir'
-import {mapGetters} from 'vuex'
+import {mapGetters, mapState} from 'vuex'
 
 export default {
   name: 'prompts',
@@ -36,6 +37,7 @@ export default {
     Help
   },
   computed: {
+    ...mapState(['prompt']),
     ...mapGetters([
       'showOverlay',
       'showInfo',

_assets/src/css/base.css

@@ -2,6 +2,7 @@ body {
     font-family: 'Roboto', sans-serif;
     padding-top: 4em;
     background-color: #f8f8f8;
+    user-select: none;
 }
 
 * {

_assets/src/css/prompts.css

@@ -11,6 +11,7 @@
     width: 90%;
     max-height: 95%;
     z-index: 99999;
+    animation: .1s show forwards;
 }
 
 .overlay {
@@ -21,11 +22,6 @@
     height: 100%;
     width: 100%;
     z-index: 9999;
-}
-
-.overlay.active,
-.prompt.active,
-.help.active {
     animation: .1s show forwards;
 }