natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix

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