From 716396a726329f0ba42fc34167dd07497c5bf47c 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 | 37 ++++++++++++++++-------
 frontend/src/css/styles.css               | 12 +++++++-
 3 files changed, 38 insertions(+), 13 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 1294fa5f..f0a7ef02 100644
--- a/frontend/src/components/files/Preview.vue
+++ b/frontend/src/components/files/Preview.vue
@@ -5,18 +5,33 @@
         <i class="material-icons">close</i>
       </button>
 
-      <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>
-      <info-button></info-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>
+        <info-button></info-button>
+      </template>
     </div>
 
-    <button class="action" @click="prev" v-show="hasPrevious" :aria-label="$t('buttons.previous')" :title="$t('buttons.previous')">
-      <i class="material-icons">chevron_left</i>
-    </button>
-    <button class="action" @click="next" v-show="hasNext" :aria-label="$t('buttons.next')" :title="$t('buttons.next')">
-      <i class="material-icons">chevron_right</i>
-    </button>
+    <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>
+      </button>
+      <button class="action" @click="next" v-show="hasNext" :aria-label="$t('buttons.next')" :title="$t('buttons.next')">
+        <i class="material-icons">chevron_right</i>
+      </button>
 
     <div class="preview">
       <ExtendedImage v-if="req.type == 'image'" :src="raw"></ExtendedImage>
@@ -76,7 +91,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);
 }