From 2e1d4d7a4b623e4e03017c4aa9d6ab87baa02cdd Mon Sep 17 00:00:00 2001
From: Ramires Viana <59319979+ramiresviana@users.noreply.github.com>
Date: Tue, 14 Jul 2020 01:19:48 +0000
Subject: [PATCH] feat: add previewer title and loading indicator

---
 frontend/public/themes/dark.css           |  2 +-
 frontend/src/components/files/Preview.vue | 14 +++++++++++++-
 frontend/src/css/styles.css               | 12 +++++++++++-
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/frontend/public/themes/dark.css b/frontend/public/themes/dark.css
index e916457a..1ee5f1ac 100644
--- a/frontend/public/themes/dark.css
+++ b/frontend/public/themes/dark.css
@@ -16,7 +16,7 @@ body {
 #loading {
   background: var(--background);
 }
-#loading .spinner div {
+#loading .spinner div, #previewer .loading .spinner div {
   background: var(--icon);
 }
 
diff --git a/frontend/src/components/files/Preview.vue b/frontend/src/components/files/Preview.vue
index 32b13398..b2fc13a4 100644
--- a/frontend/src/components/files/Preview.vue
+++ b/frontend/src/components/files/Preview.vue
@@ -6,6 +6,10 @@
       </button>
 
       <template v-if="!loading">
+        <div class="title">
+          <span>{{ req.name }}</span>
+        </div>
+
         <rename-button v-if="user.perm.rename"></rename-button>
         <delete-button v-if="user.perm.delete"></delete-button>
         <download-button v-if="user.perm.download"></download-button>
@@ -13,6 +17,14 @@
       </template>
     </div>
 
+    <div class="loading" v-if="loading">
+      <div class="spinner">
+        <div class="bounce1"></div>
+        <div class="bounce2"></div>
+        <div class="bounce3"></div>
+      </div>
+    </div>
+    
     <template v-if="!loading">
       <button class="action" @click="prev" v-show="hasPrevious" :aria-label="$t('buttons.previous')" :title="$t('buttons.previous')">
         <i class="material-icons">chevron_left</i>
@@ -80,7 +92,7 @@ export default {
     }
   },
   computed: {
-    ...mapState(['req', 'user', 'oldReq', 'jwt']),
+    ...mapState(['req', 'user', 'oldReq', 'jwt', 'loading']),
     hasPrevious () {
       return (this.previousLink !== '')
     },
diff --git a/frontend/src/css/styles.css b/frontend/src/css/styles.css
index 2da1d242..8d486c0d 100644
--- a/frontend/src/css/styles.css
+++ b/frontend/src/css/styles.css
@@ -125,8 +125,13 @@
   height: 3.7em;
 }
 
-#previewer .action:first-of-type {
+#previewer .bar .title {
   margin-right: auto;
+  padding: 0 1em;
+  line-height: 2.7em;
+  overflow: hidden;
+  word-break: break-word;
+  color: #fff;
 }
 
 #previewer .action i {
@@ -219,6 +224,11 @@
   font-size: 1.2em;
 }
 
+#previewer .loading {
+  height: 100%;
+  width: 100%;
+}
+
 #editor-container #editor {
   height: calc(100vh - 8.2em);
 }