Mizah/Sharkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

🎨

Browse source
This commit is contained in:
syuilo 2022-12-20 11:00:05 +09:00
parent f90617ab07
commit 83c84efb34
9 changed files with 48 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

9
packages/client/src/components/MkChannelFollowButton.vue
View file

@ -1,5 +1,6 @@
<template>
<button class="hdcaacmi _button"
<button
class="hdcaacmi _button"
:class="{ wait, active: isFollowing, full }"
:disabled="wait"
@click="onClick"
@ -13,7 +14,7 @@
</template>
</template>
<template v-else>
<span v-if="full">{{ i18n.ts.processing }}</span><i class="fas fa-spinner fa-pulse ti-fw"></i>
<span v-if="full">{{ i18n.ts.processing }}</span><MkLoading :em="true"/>
</template>
</button>
</template>
@ -39,12 +40,12 @@ async function onClick() {
try {
if (isFollowing.value) {
await os.api('channels/unfollow', {
channelId: props.channel.id
channelId: props.channel.id,
});
isFollowing.value = false;
} else {
await os.api('channels/follow', {
channelId: props.channel.id
channelId: props.channel.id,
});
isFollowing.value = true;
}

2
packages/client/src/components/MkDialog.vue
View file

@ -10,7 +10,7 @@
<i v-else-if="type === 'warning'" class="ti ti-alert-triangle"></i>
<i v-else-if="type === 'info'" class="ti ti-info-circle"></i>
<i v-else-if="type === 'question'" class="ti ti-question-circle"></i>
<i v-else-if="type === 'waiting'" class="fas fa-spinner fa-pulse"></i>
<MkLoading v-else-if="type === 'waiting'" :em="true"/>
</div>
<header v-if="title"><Mfm :text="title"/></header>
<div v-if="text" class="body"><Mfm :text="text"/></div>

20
packages/client/src/components/MkFollowButton.vue
View file

@ -1,5 +1,6 @@
<template>
<button class="kpoogebi _button"
<button
class="kpoogebi _button"
:class="{ wait, active: isFollowing || hasPendingFollowRequestFromYou, full, large }"
:disabled="wait"
@click="onClick"
@ -8,8 +9,9 @@
<template v-if="hasPendingFollowRequestFromYou && user.isLocked">
<span v-if="full">{{ i18n.ts.followRequestPending }}</span><i class="fas fa-hourglass-half"></i>
</template>
<template v-else-if="hasPendingFollowRequestFromYou && !user.isLocked"> <!-- つまりリモートフォローの場合。 -->
<span v-if="full">{{ i18n.ts.processing }}</span><i class="fas fa-spinner fa-pulse"></i>
<template v-else-if="hasPendingFollowRequestFromYou && !user.isLocked">
<!-- つまりリモートフォローの場合。 -->
<span v-if="full">{{ i18n.ts.processing }}</span><MkLoading :em="true"/>
</template>
<template v-else-if="isFollowing">
<span v-if="full">{{ i18n.ts.unfollow }}</span><i class="ti ti-minus"></i>
@ -22,7 +24,7 @@
</template>
</template>
<template v-else>
<span v-if="full">{{ i18n.ts.processing }}</span><i class="fas fa-spinner fa-pulse ti-fw"></i>
<span v-if="full">{{ i18n.ts.processing }}</span><MkLoading :em="true"/>
</template>
</button>
</template>
@ -50,9 +52,9 @@ const connection = stream.useChannel('main');
if (props.user.isFollowing == null) {
os.api('users/show', {
userId: props.user.id
userId: props.user.id,
})
.then(onFollowChange);
.then(onFollowChange);
}
function onFollowChange(user: Misskey.entities.UserDetailed) {
@ -75,17 +77,17 @@ async function onClick() {
if (canceled) return;
await os.api('following/delete', {
userId: props.user.id
userId: props.user.id,
});
} else {
if (hasPendingFollowRequestFromYou) {
await os.api('following/requests/cancel', {
userId: props.user.id
userId: props.user.id,
});
hasPendingFollowRequestFromYou = false;
} else {
await os.api('following/create', {
userId: props.user.id
userId: props.user.id,
});
hasPendingFollowRequestFromYou = true;
}

4
packages/client/src/components/MkSignup.vue
View file

@ -9,7 +9,7 @@
<template #prefix>@</template>
<template #suffix>@{{ host }}</template>
<template #caption>
<span v-if="usernameState === 'wait'" style="color:#999"><i class="fas fa-spinner fa-pulse ti-fw"></i> {{ i18n.ts.checking }}</span>
<span v-if="usernameState === 'wait'" style="color:#999"><MkLoading :em="true"/> {{ i18n.ts.checking }}</span>
<span v-else-if="usernameState === 'ok'" style="color: var(--success)"><i class="ti ti-check ti-fw"></i> {{ i18n.ts.available }}</span>
<span v-else-if="usernameState === 'unavailable'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.unavailable }}</span>
<span v-else-if="usernameState === 'error'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.error }}</span>
@ -22,7 +22,7 @@
<template #label>{{ i18n.ts.emailAddress }} <div v-tooltip:dialog="i18n.ts._signup.emailAddressInfo" class="_button _help"><i class="far fa-question-circle"></i></div></template>
<template #prefix><i class="ti ti-mail"></i></template>
<template #caption>
<span v-if="emailState === 'wait'" style="color:#999"><i class="fas fa-spinner fa-pulse ti-fw"></i> {{ i18n.ts.checking }}</span>
<span v-if="emailState === 'wait'" style="color:#999"><MkLoading :em="true"/> {{ i18n.ts.checking }}</span>
<span v-else-if="emailState === 'ok'" style="color: var(--success)"><i class="ti ti-check ti-fw"></i> {{ i18n.ts.available }}</span>
<span v-else-if="emailState === 'unavailable:used'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts._emailUnavailable.used }}</span>
<span v-else-if="emailState === 'unavailable:format'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts._emailUnavailable.format }}</span>

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

@ -2,7 +2,7 @@
<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="ti ti-check icon success"></i>
<i v-else class="fas fa-spinner fa-pulse icon waiting"></i>
<MkLoading v-else class="icon waiting" :em="true"/>
<div v-if="text && !success" class="text">{{ text }}<MkEllipsis/></div>
</div>
</MkModal>

10
packages/client/src/components/global/MkLoading.vue
View file

@ -1,5 +1,5 @@
<template>
<div :class="[$style.root, { [$style.inline]: inline, [$style.colored]: colored, [$style.mini]: mini }]">
<div :class="[$style.root, { [$style.inline]: inline, [$style.colored]: colored, [$style.mini]: mini, [$style.em]: em }]">
<div :class="$style.container">
<svg :class="[$style.spinner, $style.bg]" viewBox="0 0 168 168" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1.125,0,0,1.125,12,12)">
@ -22,10 +22,12 @@ const props = withDefaults(defineProps<{
inline?: boolean;
colored?: boolean;
mini?: boolean;
em?: boolean;
}>(), {
inline: false,
colored: true,
mini: false,
em: false,
});
</script>
@ -60,6 +62,12 @@ const props = withDefaults(defineProps<{
padding: 16px;
--size: 32px;
}
&.em {
display: inline;
padding: 0;
--size: 1em;
}
}
.container {