Lenaisten/advent22
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

BulmaButton "busy" animation

Browse source
This commit is contained in:
Jörn-Michael Miehe 2023-09-12 22:35:57 +00:00
parent 6012cec657
commit 5f2c031793
2 changed files with 14 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
ui/src/components/AdminButton.vue
View file

@ -9,6 +9,7 @@
class="button is-light" class="button is-light"
@click.left="on_click" @click.left="on_click"
:icon="'fa-solid fa-toggle-' + (modelValue ? 'on' : 'off')" :icon="'fa-solid fa-toggle-' + (modelValue ? 'on' : 'off')"
:busy="is_busy"
text="Admin" text="Admin"
/> />
</template> </template>
@ -33,6 +34,7 @@ export default class extends Vue {
// true, iff Benutzer Admin ist // true, iff Benutzer Admin ist
public modelValue!: boolean; public modelValue!: boolean;
public modal_visible = false; public modal_visible = false;
public is_busy = false;
public on_click() { public on_click() {
if (this.modelValue) { if (this.modelValue) {
@ -41,6 +43,7 @@ export default class extends Vue {
this.$emit("update:modelValue", false); this.$emit("update:modelValue", false);
} else { } else {
// show login modal // show login modal
this.is_busy = true;
this.modal_visible = true; this.modal_visible = true;
} }
} }
@ -49,9 +52,10 @@ export default class extends Vue {
this.modal_visible = false; this.modal_visible = false;
this.$advent22.set_api_auth(username, password); this.$advent22.set_api_auth(username, password);
this.$advent22 this.$advent22.api_get<boolean>("admin/is_admin").then((is_admin) => {
.api_get<boolean>("admin/is_admin") this.$emit("update:modelValue", is_admin);
.then((is_admin) => this.$emit("update:modelValue", is_admin)); this.is_busy = false;
});
} }
} }
</script> </script>

8
ui/src/components/bulma/Button.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<button class="button"> <button class="button">
<span v-if="icon !== undefined" class="icon"> <span v-if="icon !== undefined" class="icon">
<font-awesome-icon :icon="icon" /> <font-awesome-icon :icon="icon" :beat-fade="busy" />
</span> </span>
<span v-if="text !== ''">{{ text }}</span> <span v-if="text !== ''">{{ text }}</span>
</button> </button>
@ -21,10 +21,16 @@ import { Options, Vue } from "vue-class-component";
required: false, required: false,
default: "", default: "",
}, },
busy: {
type: Boolean,
required: false,
default: false,
},
}, },
}) })
export default class extends Vue { export default class extends Vue {
public icon?: string; public icon?: string;
public text!: string; public text!: string;
public busy!: boolean;
} }
</script> </script>