Lenaisten/advent22
1
0
Fork 0
mirror of https://code.lenaisten.de/Lenaisten/advent22.git synced 2024-11-22 15:53:01 +00:00
Code Issues 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"
@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>

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

@ -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>