Mercurial > gemma

changeset 2840:503a73e9a755

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: ui: implemented global SpinnerOverlay component to unify loading animations for boxes and other ui elements that need to be blocked while loading/refreshing data
author Markus Kottlaender <markus@intevation.de>
date Thu, 28 Mar 2019 10:22:30 +0100
parents 162804509c3e
children a702d9b652f7
files client/src/assets/application.scss client/src/components/fairway/Profiles.vue client/src/components/gauge/Gauges.vue client/src/components/importoverview/ImportOverview.vue client/src/components/splitscreen/Splitscreen.vue client/src/components/ui/SpinnerOverlay.vue client/src/main.js
diffstat 7 files changed, 32 insertions(+), 33 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/assets/application.scss	Wed Mar 27 19:22:39 2019 +0100
+++ b/client/src/assets/application.scss	Thu Mar 28 10:22:30 2019 +0100
@@ -214,16 +214,3 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-
-.loading {
-  background: rgba(255, 255, 255, 0.9);
-  position: absolute;
-  z-index: 99;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
--- a/client/src/components/fairway/Profiles.vue	Wed Mar 27 19:22:39 2019 +0100
+++ b/client/src/components/fairway/Profiles.vue	Thu Mar 28 10:22:30 2019 +0100
@@ -12,11 +12,7 @@
         :closeCallback="close"
       />
       <div class="box-body">
-        <transition name="fade">
-          <div class="loading" v-if="surveysLoading || profileLoading">
-            <font-awesome-icon icon="spinner" spin />
-          </div>
-        </transition>
+        <SpinnerOverlay v-if="surveysLoading || profileLoading" />
         <select
           @change="moveToBottleneck"
           v-model="selectedBottleneck"
--- a/client/src/components/gauge/Gauges.vue	Wed Mar 27 19:22:39 2019 +0100
+++ b/client/src/components/gauge/Gauges.vue	Thu Mar 28 10:22:30 2019 +0100
@@ -12,11 +12,7 @@
         :closeCallback="close"
       />
       <div class="box-body">
-        <transition name="fade">
-          <div class="loading" v-if="loading">
-            <font-awesome-icon icon="spinner" spin />
-          </div>
-        </transition>
+        <SpinnerOverlay v-if="loading" />
         <select
           @change="moveToGauge"
           v-model="selectedGaugeISRS"
--- a/client/src/components/importoverview/ImportOverview.vue	Wed Mar 27 19:22:39 2019 +0100
+++ b/client/src/components/importoverview/ImportOverview.vue	Thu Mar 28 10:22:30 2019 +0100
@@ -7,11 +7,7 @@
       :actions="[{ callback: loadUpdatedLogs, icon: 'redo' }]"
     />
     <div class="position-relative">
-      <transition name="fade">
-        <div class="loading" v-if="loading">
-          <font-awesome-icon icon="spinner" spin />
-        </div>
-      </transition>
+      <SpinnerOverlay v-if="loading" />
       <div class="p-2 mb-1 d-flex flex-row flex-fill justify-content-between">
         <Filters></Filters>
         <div>
--- a/client/src/components/splitscreen/Splitscreen.vue	Wed Mar 27 19:22:39 2019 +0100
+++ b/client/src/components/splitscreen/Splitscreen.vue	Thu Mar 28 10:22:30 2019 +0100
@@ -14,12 +14,13 @@
         v-if="activeSplitscreen"
       />
       <div class="d-flex flex-fill">
-        <transition name="fade">
-          <div class="loading" v-if="splitscreenLoading">
-            <font-awesome-icon icon="spinner" spin />
-          </div>
+        <SpinnerOverlay v-if="splitscreenLoading" />
+        <transition name="fade" mode="out-in">
+          <component
+            :is="activeSplitscreen.component"
+            v-if="activeSplitscreen"
+          />
         </transition>
-        <component :is="activeSplitscreen.component" v-if="activeSplitscreen" />
       </div>
     </div>
   </div>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/ui/SpinnerOverlay.vue	Thu Mar 28 10:22:30 2019 +0100
@@ -0,0 +1,21 @@
+<template>
+  <transition name="spinner">
+    <div class="spinner-overlay">
+      <font-awesome-icon icon="spinner" spin />
+    </div>
+  </transition>
+</template>
+
+<style lang="sass">
+.spinner-overlay
+  background: rgba(255, 255, 255, 0.9)
+  position: absolute
+  z-index: 99
+  top: 0
+  right: 0
+  bottom: 0
+  left: 0
+  display: flex
+  align-items: center
+  justify-content: center
+</style>
--- a/client/src/main.js	Wed Mar 27 19:22:39 2019 +0100
+++ b/client/src/main.js	Thu Mar 28 10:22:30 2019 +0100
@@ -33,6 +33,7 @@
 import UIBoxHeader from "@/components/ui/UIBoxHeader";
 import UITableHeader from "@/components/ui/UITableHeader";
 import UITableBody from "@/components/ui/UITableBody";
+import SpinnerOverlay from "@/components/ui/SpinnerOverlay";
 
 // styles
 import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
@@ -178,6 +179,7 @@
 Vue.component("UIBoxHeader", UIBoxHeader);
 Vue.component("UITableHeader", UITableHeader);
 Vue.component("UITableBody", UITableBody);
+Vue.component("SpinnerOverlay", SpinnerOverlay);
 
 // register global filters
 for (let name in filters) Vue.filter(name, filters[name]);