Mercurial > gemma
changeset 2840:503a73e9a755
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]);