From ae28c3cfa910314a1df124e07f35b33a5c913b88 Mon Sep 17 00:00:00 2001
From: Henrique Dias <hacdias@gmail.com>
Date: Mon, 3 Jul 2017 22:02:28 +0100
Subject: [PATCH] Updates on prompts logic and fix some bugs

---
 _assets/src/components/Main.vue               |  6 ++++-
 _assets/src/components/buttons/InfoButton.vue |  2 +-
 _assets/src/components/prompts/Prompts.vue    | 22 ++++++++++---------
 _assets/src/css/base.css                      |  1 +
 _assets/src/css/prompts.css                   |  6 +----
 5 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/_assets/src/components/Main.vue b/_assets/src/components/Main.vue
index ed802fe1..db264983 100644
--- a/_assets/src/components/Main.vue
+++ b/_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>
diff --git a/_assets/src/components/buttons/InfoButton.vue b/_assets/src/components/buttons/InfoButton.vue
index a6756618..ee617fb0 100644
--- a/_assets/src/components/buttons/InfoButton.vue
+++ b/_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>
diff --git a/_assets/src/components/prompts/Prompts.vue b/_assets/src/components/prompts/Prompts.vue
index 468ddf08..4d56ce9b 100644
--- a/_assets/src/components/prompts/Prompts.vue
+++ b/_assets/src/components/prompts/Prompts.vue
@@ -1,14 +1,15 @@
 <template>
   <div>
-    <help v-show="showHelp" :class="{ active: showHelp }"></help>
-    <download v-if="showDownload" :class="{ active: showDownload }"></download>
-    <new-file v-if="showNewFile" :class="{ active: showNewFile }"></new-file>
-    <new-dir v-if="showNewDir" :class="{ active: showNewDir }"></new-dir>
-    <rename v-if="showRename" :class="{ active: showRename }"></rename>
-    <delete v-if="showDelete" :class="{ active: showDelete }"></delete>
-    <info v-if="showInfo" :class="{ active: showInfo }"></info>
-    <move v-if="showMove" :class="{ active: showMove }"></move>
-    <div v-show="showOverlay" @click="resetPrompts" class="overlay" :class="{ active: showOverlay }"></div>
+    <help v-if="showHelp" ></help>
+    <download v-else-if="showDownload"></download>
+    <new-file v-else-if="showNewFile"></new-file>
+    <new-dir v-else-if="showNewDir"></new-dir>
+    <rename v-else-if="showRename"></rename>
+    <delete v-else-if="showDelete"></delete>
+    <info v-else-if="showInfo"></info>
+    <move v-else-if="showMove"></move>
+
+    <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',
diff --git a/_assets/src/css/base.css b/_assets/src/css/base.css
index c1add425..ce62355e 100644
--- a/_assets/src/css/base.css
+++ b/_assets/src/css/base.css
@@ -2,6 +2,7 @@ body {
     font-family: 'Roboto', sans-serif;
     padding-top: 4em;
     background-color: #f8f8f8;
+    user-select: none;
 }
 
 * {
diff --git a/_assets/src/css/prompts.css b/_assets/src/css/prompts.css
index 6b954285..d6eefc54 100644
--- a/_assets/src/css/prompts.css
+++ b/_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;
 }