Mercurial > gemma
changeset 2898:d57c951aec65
client: added spinner button component
for buttons that toggle an expandable content that might need to be loaded asynchronously,
thus requiring some sort of loading animation
| author | Markus Kottlaender <markus@intevation.de> |
|---|---|
| date | Tue, 02 Apr 2019 14:33:09 +0200 |
| parents | b7cfbb21f252 |
| children | eb9651074b88 |
| files | client/src/components/ui/UISpinnerButton.vue client/src/main.js |
| diffstat | 2 files changed, 60 insertions(+), 0 deletions(-) [+] |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/components/ui/UISpinnerButton.vue Tue Apr 02 14:33:09 2019 +0200 @@ -0,0 +1,58 @@ +<template> + <transition name="fade"> + <div :class="classesString" @click="$emit('click')"> + <font-awesome-icon :icon="iconString" :spin="loading" fixed-width /> + <slot /> + </div> + </transition> +</template> + +<script> +/* This is Free Software under GNU Affero General Public License v >= 3.0 + * without warranty, see README.md and license for details. + * + * SPDX-License-Identifier: AGPL-3.0-or-later + * License-Filename: LICENSES/AGPL-3.0.txt + * + * Copyright (C) 2018 by via donau + * – Österreichische Wasserstraßen-Gesellschaft mbH + * Software engineering by Intevation GmbH + * + * Author(s): + * Markus Kottländer <markus.kottlaender@intevation.de> + */ +export default { + props: { + loading: { + type: Boolean, + default: false + }, + state: [Number, Boolean], + icons: { + type: [String, Array], + default: () => ["angle-down", "angle-up"] + }, + classes: { + type: [String, Array], + default: () => ["text-info", "text-white"] + } + }, + computed: { + classesString() { + return ( + "pointer " + + (Array.isArray(this.classes) + ? this.classes[Number(this.state)] + : this.classes) + ); + }, + iconString() { + return this.loading + ? "spinner" + : Array.isArray(this.icons) + ? this.icons[Number(this.state)] + : this.icons; + } + } +}; +</script>
--- a/client/src/main.js Tue Apr 02 14:14:32 2019 +0200 +++ b/client/src/main.js Tue Apr 02 14:33:09 2019 +0200 @@ -34,6 +34,7 @@ import UITableHeader from "@/components/ui/UITableHeader"; import UITableBody from "@/components/ui/UITableBody"; import UISpinnerOverlay from "@/components/ui/UISpinnerOverlay"; +import UISpinnerButton from "@/components/ui/UISpinnerButton"; // styles import "../node_modules/bootstrap/dist/css/bootstrap.min.css"; @@ -180,6 +181,7 @@ Vue.component("UITableHeader", UITableHeader); Vue.component("UITableBody", UITableBody); Vue.component("UISpinnerOverlay", UISpinnerOverlay); +Vue.component("UISpinnerButton", UISpinnerButton); // register global filters for (let name in filters) Vue.filter(name, filters[name]);