Improve waiting dialog

This commit is contained in:
syuilo 2020-10-18 10:11:34 +09:00
parent 85a0f696bc
commit 1df7abfbb9
8 changed files with 110 additions and 131 deletions

View file

@ -44,14 +44,7 @@ export default defineComponent({
}, },
methods: { methods: {
upload() { upload() {
return new Promise((ok) => { const promise = new Promise((ok) => {
const dialog = os.dialog({
type: 'waiting',
text: this.$t('uploading') + '...',
showOkButton: false,
showCancelButton: false,
cancelableByBgClick: false
});
const canvas = this.hpml.canvases[this.value.canvasId]; const canvas = this.hpml.canvases[this.value.canvasId];
canvas.toBlob(blob => { canvas.toBlob(blob => {
const data = new FormData(); const data = new FormData();
@ -67,11 +60,12 @@ export default defineComponent({
}) })
.then(response => response.json()) .then(response => response.json())
.then(f => { .then(f => {
dialog.close();
ok(f); ok(f);
}) })
}); });
}); });
os.promiseDialog(promise);
return promise;
}, },
async post() { async post() {
this.posting = true; this.posting = true;

View file

@ -1,8 +1,9 @@
<template> <template>
<MkModal ref="modal" @click="type === 'success' ? done() : () => {}" @closed="$emit('closed')"> <MkModal ref="modal" @click="success ? done() : () => {}" @closed="$emit('closed')">
<div class="iuyakobc" :class="type"> <div class="iuyakobc" :class="{ iconOnly: (text == null) || success }">
<Fa class="icon" v-if="type === 'success'" :icon="faCheck"/> <Fa class="icon success" v-if="success" :icon="faCheck"/>
<Fa class="icon" v-else-if="type === 'waiting'" :icon="faSpinner" pulse/> <Fa class="icon waiting" v-else :icon="faSpinner" pulse/>
<div class="text" v-if="text && !success">{{ text }}<MkEllipsis/></div>
</div> </div>
</MkModal> </MkModal>
</template> </template>
@ -18,12 +19,18 @@ export default defineComponent({
}, },
props: { props: {
type: { success: {
required: true type: Boolean,
required: true,
}, },
showing: { showing: {
required: true type: Boolean,
} required: true,
},
text: {
type: String,
required: false,
},
}, },
emits: ['done', 'closed'], emits: ['done', 'closed'],
@ -57,7 +64,19 @@ export default defineComponent({
text-align: center; text-align: center;
background: var(--panel); background: var(--panel);
border-radius: var(--radius); border-radius: var(--radius);
width: initial; width: 250px;
&.iconOnly {
padding: 0;
width: 96px;
height: 96px;
> .icon {
height: 100%;
}
}
> .icon {
font-size: 32px; font-size: 32px;
&.success { &.success {
@ -65,9 +84,12 @@ export default defineComponent({
} }
&.waiting { &.waiting {
> .icon {
opacity: 0.7; opacity: 0.7;
} }
} }
> .text {
margin-top: 16px;
}
} }
</style> </style>

View file

@ -62,17 +62,34 @@ export function api(endpoint: string, data: Record<string, any> = {}, token?: st
return promise; return promise;
} }
export function apiWithDialog(endpoint: string, data: Record<string, any> = {}, token?: string | null | undefined, onSuccess?: (res: any) => void, onFailure?: (e: Error) => void) { export function apiWithDialog(
const showing = ref(true); endpoint: string,
const state = ref('waiting'); data: Record<string, any> = {},
token?: string | null | undefined,
onSuccess?: (res: any) => void,
onFailure?: (e: Error) => void,
) {
const promise = api(endpoint, data, token); const promise = api(endpoint, data, token);
promiseDialog(promise, onSuccess, onFailure);
return promise;
}
export function promiseDialog<T extends Promise<any>>(
promise: T,
onSuccess?: (res: any) => void,
onFailure?: (e: Error) => void,
text?: string,
): T {
const showing = ref(true);
const success = ref(false);
promise.then(res => { promise.then(res => {
if (onSuccess) { if (onSuccess) {
showing.value = false; showing.value = false;
onSuccess(res); onSuccess(res);
} else { } else {
state.value = 'success'; success.value = true;
setTimeout(() => { setTimeout(() => {
showing.value = false; showing.value = false;
}, 1000); }, 1000);
@ -89,9 +106,10 @@ export function apiWithDialog(endpoint: string, data: Record<string, any> = {},
} }
}); });
popup(defineAsyncComponent(() => import('@/components/icon-dialog.vue')), { popup(defineAsyncComponent(() => import('@/components/waiting-dialog.vue')), {
type: state, success: success,
showing: showing showing: showing,
text: text,
}, {}, 'closed'); }, {}, 'closed');
return promise; return promise;
@ -161,8 +179,8 @@ export function success() {
setTimeout(() => { setTimeout(() => {
showing.value = false; showing.value = false;
}, 1000); }, 1000);
popup(defineAsyncComponent(() => import('@/components/icon-dialog.vue')), { popup(defineAsyncComponent(() => import('@/components/waiting-dialog.vue')), {
type: 'success', success: true,
showing: showing showing: showing
}, { }, {
done: () => resolve(), done: () => resolve(),
@ -173,8 +191,8 @@ export function success() {
export function waiting() { export function waiting() {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const showing = ref(true); const showing = ref(true);
popup(defineAsyncComponent(() => import('@/components/icon-dialog.vue')), { popup(defineAsyncComponent(() => import('@/components/waiting-dialog.vue')), {
type: 'waiting', success: false,
showing: showing showing: showing
}, { }, {
done: () => resolve(), done: () => resolve(),

View file

@ -6,26 +6,20 @@
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import * as os from '@/os'; import * as os from '@/os';
import parseAcct from '../../misc/acct/parse';
export default defineComponent({ export default defineComponent({
created() { created() {
const acct = new URL(location.href).searchParams.get('acct'); const acct = new URL(location.href).searchParams.get('acct');
if (acct == null) return; if (acct == null) return;
/* let promise;
const dialog = os.dialog({
type: 'waiting',
text: this.$t('fetchingAsApObject') + '...',
showOkButton: false,
showCancelButton: false,
cancelableByBgClick: false
});
*/
if (acct.startsWith('https://')) { if (acct.startsWith('https://')) {
os.api('ap/show', { promise = os.api('ap/show', {
uri: acct uri: acct
}).then(res => { });
promise.then(res => {
if (res.type == 'User') { if (res.type == 'User') {
this.follow(res.object); this.follow(res.object);
} else if (res.type === 'Note') { } else if (res.type === 'Note') {
@ -38,30 +32,15 @@ export default defineComponent({
window.close(); window.close();
}); });
} }
}).catch(e => {
os.dialog({
type: 'error',
text: e
}).then(() => {
window.close();
});
}).finally(() => {
//dialog.close();
}); });
} else { } else {
os.api('users/show', parseAcct(acct)).then(user => { promise = os.api('users/show', parseAcct(acct));
promise.then(user => {
this.follow(user); this.follow(user);
}).catch(e => {
os.dialog({
type: 'error',
text: e
}).then(() => {
window.close();
});
}).finally(() => {
//dialog.close();
}); });
} }
os.promiseDialog(promise, null, null, this.$t('fetchingAsApObject'));
}, },
methods: { methods: {
@ -77,19 +56,8 @@ export default defineComponent({
return; return;
} }
os.api('following/create', { os.apiWithDialog('following/create', {
userId: user.id userId: user.id
}).then(() => {
os.success().then(() => {
window.close();
});
}).catch(e => {
os.dialog({
type: 'error',
text: e
}).then(() => {
window.close();
});
}); });
} }
} }

View file

@ -106,24 +106,13 @@ export default defineComponent({
async add(e) { async add(e) {
const files = await selectFile(e.currentTarget || e.target, null, true); const files = await selectFile(e.currentTarget || e.target, null, true);
const dialog = os.dialog({ const promise = Promise.all(files.map(file => os.api('admin/emoji/add', {
type: 'waiting',
text: this.$t('doing') + '...',
showOkButton: false,
showCancelButton: false,
cancelableByBgClick: false
});
Promise.all(files.map(file => os.api('admin/emoji/add', {
fileId: file.id, fileId: file.id,
}))) })));
.then(() => { promise.then(() => {
this.$refs.emojis.reload(); this.$refs.emojis.reload();
os.success();
})
.finally(() => {
dialog.cancel();
}); });
os.promiseDialog(promise);
}, },
async edit(emoji) { async edit(emoji) {

View file

@ -69,31 +69,15 @@ export default defineComponent({
data.append('file', file); data.append('file', file);
data.append('i', this.$store.state.i.token); data.append('i', this.$store.state.i.token);
const dialog = os.dialog({ const promise = fetch(apiUrl + '/drive/files/create', {
type: 'waiting',
text: this.$t('uploading') + '...',
showOkButton: false,
showCancelButton: false,
cancelableByBgClick: false
});
fetch(apiUrl + '/drive/files/create', {
method: 'POST', method: 'POST',
body: data body: data
}) })
.then(response => response.json()) .then(response => response.json())
.then(f => { .then(f => {
this.reqImport(f); this.reqImport(f);
})
.catch(e => {
os.dialog({
type: 'error',
text: e
});
})
.finally(() => {
dialog.close();
}); });
os.promiseDialog(promise);
}, },
reqImport(file) { reqImport(file) {

View file

@ -106,6 +106,14 @@
</div> </div>
</div> </div>
<div class="_card _vMargin">
<div class="_title">Waiting dialog</div>
<div class="_content">
<MkButton inline @click="openWaitingDialog()">icon only</MkButton>
<MkButton inline @click="openWaitingDialog('Doing')">with text</MkButton>
</div>
</div>
<div class="_card _vMargin"> <div class="_card _vMargin">
<div class="_title">Messaging window</div> <div class="_title">Messaging window</div>
<div class="_content"> <div class="_content">
@ -224,6 +232,13 @@ export default defineComponent({
os.pageWindow('/my/messaging', defineAsyncComponent(() => import('@/pages/messaging/index.vue'))); os.pageWindow('/my/messaging', defineAsyncComponent(() => import('@/pages/messaging/index.vue')));
}, },
openWaitingDialog(text?) {
const promise = new Promise((resolve, reject) => {
setTimeout(resolve, 2000);
});
os.promiseDialog(promise, null, null, text);
},
resetTutorial() { resetTutorial() {
this.$store.dispatch('settings/set', { key: 'tutorial', value: 0 }); this.$store.dispatch('settings/set', { key: 'tutorial', value: 0 });
}, },

View file

@ -48,30 +48,19 @@ export async function search(q?: string | null | undefined) {
} }
if (q.startsWith('https://')) { if (q.startsWith('https://')) {
/* const promise = os.api('ap/show', {
const dialog = os.dialog({
type: 'waiting',
text: i18n.global.t('fetchingAsApObject') + '...',
showOkButton: false,
showCancelButton: false,
cancelableByBgClick: false
});
*/
try {
const res = await os.api('ap/show', {
uri: q uri: q
}); });
//dialog.cancel();
os.promiseDialog(promise, null, null, i18n.global.t('fetchingAsApObject'));
const res = await promise;
if (res.type === 'User') { if (res.type === 'User') {
router.push(`/@${res.object.username}@${res.object.host}`); router.push(`/@${res.object.username}@${res.object.host}`);
} else if (res.type === 'Note') { } else if (res.type === 'Note') {
router.push(`/notes/${res.object.id}`); router.push(`/notes/${res.object.id}`);
} }
} catch (e) {
//dialog.cancel();
// TODO: Show error
}
return; return;
} }