BulmaButton "busy" animation
This commit is contained in:
parent
6012cec657
commit
5f2c031793
2 changed files with 14 additions and 4 deletions
|
@ -9,6 +9,7 @@
|
|||
class="button is-light"
|
||||
@click.left="on_click"
|
||||
:icon="'fa-solid fa-toggle-' + (modelValue ? 'on' : 'off')"
|
||||
:busy="is_busy"
|
||||
text="Admin"
|
||||
/>
|
||||
</template>
|
||||
|
@ -33,6 +34,7 @@ export default class extends Vue {
|
|||
// true, iff Benutzer Admin ist
|
||||
public modelValue!: boolean;
|
||||
public modal_visible = false;
|
||||
public is_busy = false;
|
||||
|
||||
public on_click() {
|
||||
if (this.modelValue) {
|
||||
|
@ -41,6 +43,7 @@ export default class extends Vue {
|
|||
this.$emit("update:modelValue", false);
|
||||
} else {
|
||||
// show login modal
|
||||
this.is_busy = true;
|
||||
this.modal_visible = true;
|
||||
}
|
||||
}
|
||||
|
@ -49,9 +52,10 @@ export default class extends Vue {
|
|||
this.modal_visible = false;
|
||||
this.$advent22.set_api_auth(username, password);
|
||||
|
||||
this.$advent22
|
||||
.api_get<boolean>("admin/is_admin")
|
||||
.then((is_admin) => this.$emit("update:modelValue", is_admin));
|
||||
this.$advent22.api_get<boolean>("admin/is_admin").then((is_admin) => {
|
||||
this.$emit("update:modelValue", is_admin);
|
||||
this.is_busy = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<button class="button">
|
||||
<span v-if="icon !== undefined" class="icon">
|
||||
<font-awesome-icon :icon="icon" />
|
||||
<font-awesome-icon :icon="icon" :beat-fade="busy" />
|
||||
</span>
|
||||
<span v-if="text !== ''">{{ text }}</span>
|
||||
</button>
|
||||
|
@ -21,10 +21,16 @@ import { Options, Vue } from "vue-class-component";
|
|||
required: false,
|
||||
default: "",
|
||||
},
|
||||
busy: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
})
|
||||
export default class extends Vue {
|
||||
public icon?: string;
|
||||
public text!: string;
|
||||
public busy!: boolean;
|
||||
}
|
||||
</script>
|
||||
|
|
Loading…
Reference in a new issue