HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

fix

Browse source
This commit is contained in:
ThatOneCalculator 2023-02-18 19:55:18 -08:00
parent 302e452572
commit cc7be70bdf
No known key found for this signature in database
GPG key ID: 8703CACD01000000
1 changed files with 21 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
packages/client/src/components/MkWaitingDialog.vue
View file

@ -1,18 +1,18 @@
<template>
<MkModal ref="modal" :prefer-type="'dialog'" :z-priority="'high'" @click="success ? done() : () => {}" @closed="emit('closed')">
<div class="iuyakobc" :class="{ iconOnly: (text == null) || success }">
<i v-if="success" class="ph-check-bold ph-lg icon success"></i>
<i v-else class="ph-circle-notch-bold ph-lg fa-pulse icon waiting"></i>
<div v-if="text && !success" class="text">{{ text }}<MkEllipsis/></div>
<div :class="[$style.root, { [$style.iconOnly]: (text == null) || success }]">
<i v-if="success" :class="[$style.icon, $style.success]" class="ph-check-bold ph-lg"></i>
<MkLoading v-else :class="[$style.icon, $style.waiting]" :em="true"/>
<div v-if="text && !success" :class="$style.text">{{ text }}<MkEllipsis/></div>
</div>
</MkModal>
</template>
<script lang="ts" setup>
import { watch, ref } from 'vue';
import { watch, shallowRef } from 'vue';
import MkModal from '@/components/MkModal.vue';
const modal = ref<InstanceType<typeof MkModal>>();
const modal = shallowRef<InstanceType<typeof MkModal>>();
const props = defineProps<{
success: boolean;
@ -27,7 +27,7 @@ const emit = defineEmits<{
function done() {
emit('done');
modal.value.close();
modal.value?.close();
}
watch(() => props.showing, () => {
@ -35,8 +35,9 @@ watch(() => props.showing, () => {
});
</script>
<style lang="scss" scoped>
.iuyakobc {
<style lang="scss" module>
.root {
margin: auto;
position: relative;
padding: 32px;
box-sizing: border-box;
@ -53,21 +54,21 @@ watch(() => props.showing, () => {
align-items: center;
justify-content: center;
}
}
> .icon {
font-size: 32px;
.icon {
font-size: 32px;
&.success {
color: var(--accent);
}
&.waiting {
opacity: 0.7;
}
&.success {
color: var(--accent);
}
> .text {
margin-top: 16px;
&.waiting {
opacity: 0.7;
}
}
.text {
margin-top: 16px;
}
</style>