LoadingIndicator Improvements

diff --git a/flatnotes/src/colours.scss b/flatnotes/src/colours.scss
index bf70512eec8580355e0ea83891e95d7f19d9e40f..1cc3862f8ffaff6c6c66f301455974ac713915b0 100644 (file)
--- a/flatnotes/src/colours.scss
+++ b/flatnotes/src/colours.scss
@@ -5,3 +5,4 @@ $muted-text: #6c757d;
 $text: #222222;
 $button-background: #00000010;
 $input-highlight: #bbcdff;
+$logo-key-colour: #f9a76b;

diff --git a/flatnotes/src/components/App.js b/flatnotes/src/components/App.js
index 27d9d427fbbaf742c988dc887bd4a19f19746e47..8aabe52baa8944c3218f3f000d7bde0e2c96c3e3 100644 (file)
--- a/flatnotes/src/components/App.js
+++ b/flatnotes/src/components/App.js
@@ -105,16 +105,22 @@ export default {
         .get("/api/search", { params: { term: this.searchTerm } })
         .then(function(response) {
           parent.searchResults = [];
-          response.data.forEach(function(result) {
-            parent.searchResults.push(
-              new SearchResult(
-                result.title,
-                result.lastModified,
-                result.titleHighlights,
-                result.contentHighlights
-              )
-            );
-          });
+          if (response.data.length == 0) {
+            parent.searchFailedIcon = "search";
+            parent.searchFailedMessage = "No Results";
+            parent.searchFailed = true;
+          } else {
+            response.data.forEach(function(result) {
+              parent.searchResults.push(
+                new SearchResult(
+                  result.title,
+                  result.lastModified,
+                  result.titleHighlights,
+                  result.contentHighlights
+                )
+              );
+            });
+          }
         })
         .catch(function(error) {
           if (!error.handled) {

diff --git a/flatnotes/src/components/App.vue b/flatnotes/src/components/App.vue
index 47d9a0aa4fc8e6691d5d2372e2e53074f31dc6b3..ed23a86f832d0f0bc6a0435d9d5f41671173f0dd 100644 (file)
--- a/flatnotes/src/components/App.vue
+++ b/flatnotes/src/components/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container d-flex flex-column align-items-center h-100">
+  <div class="container d-flex flex-column h-100">
     <!-- Search Modal -->
     <b-modal id="search-modal" centered hide-footer hide-header>
       <div class="d-flex flex-column align-items-center">
@@ -20,13 +20,14 @@
     ></NavBar>
 
     <!-- Login -->
-    <Login v-if="currentView == views.login"></Login>
+    <Login v-if="currentView == views.login" class="flex-grow-1"></Login>
 
     <!-- Home -->
     <div
       v-if="currentView == views.home"
       class="
         home-view
+        align-self-center
         d-flex
         flex-column
         justify-content-center
@@ -41,21 +42,19 @@
     </div>
 
     <!-- Search Results -->
-    <div v-if="currentView == views.search" class="w-100 pt-5">
+    <div v-if="currentView == views.search" class="w-100 pt-5 flex-grow-1">
       <!-- Searching -->
-      <div v-if="searchResults == null">
-        <loading-indicator
-          loading-message="Searching..."
-          failure-message="Search failed 😞"
+      <div
+        v-if="searchResults == null || searchResults.length == 0"
+        class="h-100 d-flex flex-column justify-content-center"
+      >
+        <LoadingIndicator
           :failed="searchFailed"
+          :failedBootstrapIcon="searchFailedIcon"
+          :failedMessage="searchFailedMessage"
         />
       </div>
 
-      <!-- No Results -->
-      <div v-else-if="searchResults.length == 0">
-        <p class="text-center">No Results</p>
-      </div>
-
       <!-- Search Results Loaded -->
       <div v-else>
         <div v-for="result in searchResults" :key="result.title" class="mb-5">

diff --git a/flatnotes/src/components/LoadingIndicator.vue b/flatnotes/src/components/LoadingIndicator.vue
index e2d2c7f560303914bf26b2ca6926d647af20bd79..00ac052145fb17c74da1c1cd745433125bf6892a 100644 (file)
--- a/flatnotes/src/components/LoadingIndicator.vue
+++ b/flatnotes/src/components/LoadingIndicator.vue
@@ -1,16 +1,89 @@
 <template>
   <div>
-    <p v-if="!failed" class="text-center">{{ loadingMessage }}</p>
-    <p v-else class="text-center">{{ failureMessage }}</p>
+    <div v-if="showLoader && !failed" class="loader"></div>
+    <div v-else-if="failed" class="d-flex flex-column align-items-center">
+      <b-icon class="failed-icon mb-3" :icon="failedBootstrapIcon"></b-icon>
+      <p>{{ failedMessage }}</p>
+    </div>
   </div>
 </template>
 
+<style lang="scss" scoped>
+@import "../colours";
+
+.failed-icon {
+  color: $logo-key-colour;
+  font-size: 60px;
+}
+
+.loader,
+.loader:before,
+.loader:after {
+  background: $logo-key-colour;
+  -webkit-animation: load1 1s infinite ease-in-out;
+  animation: load1 1s infinite ease-in-out;
+  width: 1em;
+  height: 4em;
+}
+.loader {
+  color: $logo-key-colour;
+  text-indent: -9999em;
+  margin: 33% auto;
+  position: relative;
+  font-size: 11px;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-animation-delay: -0.16s;
+  animation-delay: -0.16s;
+}
+.loader:before,
+.loader:after {
+  position: absolute;
+  top: 0;
+  content: "";
+}
+.loader:before {
+  left: -1.5em;
+  -webkit-animation-delay: -0.32s;
+  animation-delay: -0.32s;
+}
+.loader:after {
+  left: 1.5em;
+}
+@-webkit-keyframes load1 {
+  0%,
+  80%,
+  100% {
+    box-shadow: 0 0;
+    height: 4em;
+  }
+  40% {
+    box-shadow: 0 -2em;
+    height: 5em;
+  }
+}
+@keyframes load1 {
+  0%,
+  80%,
+  100% {
+    box-shadow: 0 0;
+    height: 4em;
+  }
+  40% {
+    box-shadow: 0 -2em;
+    height: 5em;
+  }
+}
+</style>
+
 <script>
 export default {
   props: {
-    loadingMessage: { type: String, default: "Loading..." },
-    failureMessage: { type: String, default: "Loading failed 😞" },
-    failed: Boolean,
+    showLoader: { type: Boolean, default: true },
+    failed: { type: Boolean },
+    failedBootstrapIcon: { type: String, default: "cloud-slash" },
+    failedMessage: { type: String, default: "Loading Failed" },
   },
 };
 </script>

diff --git a/flatnotes/src/components/Login.vue b/flatnotes/src/components/Login.vue
index 20201c693fa7c8dae60f128db5d294eeb267d210..5d89c799ada08e3b89076e0a5e5036dcf226ed19 100644 (file)
--- a/flatnotes/src/components/Login.vue
+++ b/flatnotes/src/components/Login.vue
@@ -5,7 +5,6 @@
       flex-column
       justify-content-center
       align-items-center
-      flex-grow-1
     "
   >
     <!-- Logo -->

diff --git a/flatnotes/src/components/NoteViewerEditor.vue b/flatnotes/src/components/NoteViewerEditor.vue
index 98cdeae93eafed14fb89060f484f235da524c63e..bceeedb37cde059af3cbe40beeaf3cb30e9f1c6d 100644 (file)
--- a/flatnotes/src/components/NoteViewerEditor.vue
+++ b/flatnotes/src/components/NoteViewerEditor.vue
@@ -1,12 +1,15 @@
 <template>
   <!-- Note -->
-  <div class="w-100">
+  <div class="w-100 h-100">
     <!-- Loading -->
-    <div v-if="currentNote == null">
-      <loading-indicator
-        v-if="currentNote == null"
-        :failure-message="noteLoadFailedMessage"
+    <div
+      v-if="currentNote == null"
+      class="h-100 d-flex flex-column justify-content-center"
+    >
+      <LoadingIndicator
         :failed="noteLoadFailed"
+        :failedBootstrapIcon="noteLoadFailedIcon"
+        :failedMessage="noteLoadFailedMessage"
       />
     </div>
 
@@ -192,7 +195,8 @@ export default {
       titleInput: null,
       initialContent: null,
       noteLoadFailed: false,
-      noteLoadFailedMessage: "Loading failed 😞",
+      noteLoadFailedIcon: null,
+      noteLoadFailedMessage: "Failed to load Note",
       viewerOptions: { plugins: [codeSyntaxHighlight] },
       editorOptions: { plugins: [codeSyntaxHighlight] },
     };
@@ -225,7 +229,8 @@ export default {
             typeof error.response !== "undefined" &&
             error.response.status == 404
           ) {
-            parent.noteLoadFailedMessage = "Note not found 😞";
+            parent.noteLoadFailedIcon = "file-earmark-x";
+            parent.noteLoadFailedMessage = "Note not found";
             parent.noteLoadFailed = true;
           } else {
             EventBus.$emit("unhandledServerError");

diff --git a/flatnotes/src/components/RecentlyModified.vue b/flatnotes/src/components/RecentlyModified.vue
index a57b946b336f2277b85c620375fbe727dd1eccf0..794a108dc06021705f05c66bdd36b8ea2b69e9a3 100644 (file)
--- a/flatnotes/src/components/RecentlyModified.vue
+++ b/flatnotes/src/components/RecentlyModified.vue
@@ -1,8 +1,12 @@
 <template>
   <div>
     <!-- Loading -->
-    <div v-if="notes == null">
-      <LoadingIndicator loadingMessage="" :failed="loadingFailed" />
+    <div v-if="notes == null" class="h-100 d-flex flex-column justify-content-center">
+      <LoadingIndicator
+        :showLoader="false"
+        :failed="loadingFailed"
+        failedMessage="Failed to load Recently Modified"
+      />
     </div>
 
     <!-- Notes Loaded -->

diff --git a/flatnotes/src/constants.js b/flatnotes/src/constants.js
index 69abf2ec3714fb37318c0023e39d8dfd7cdbdbaa..93e2596ddf738a3c652f09714ffd80205d007993 100644 (file)
--- a/flatnotes/src/constants.js
+++ b/flatnotes/src/constants.js
@@ -28,6 +28,8 @@ export const dataDefaults = function() {
 
     // Search Result Data
     searchFailed: false,
+    searchFailedMessage: "Failed to load Search Results",
+    searchFailedIcon: null,
     searchTerm: null,
     searchResults: null,
   };