laoxong/misskey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨

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
Show Stats 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> <template>
<button class="hdcaacmi _button" <button
class="hdcaacmi _button"
:class="{ wait, active: isFollowing, full }" :class="{ wait, active: isFollowing, full }"
:disabled="wait" :disabled="wait"
@click="onClick" @click="onClick"
@ -13,7 +14,7 @@
</template> </template>
</template> </template>
<template v-else> <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> </template>
</button> </button>
</template> </template>
@ -39,12 +40,12 @@ async function onClick() {
try { try {
if (isFollowing.value) { if (isFollowing.value) {
await os.api('channels/unfollow', { await os.api('channels/unfollow', {
channelId: props.channel.id channelId: props.channel.id,
}); });
isFollowing.value = false; isFollowing.value = false;
} else { } else {
await os.api('channels/follow', { await os.api('channels/follow', {
channelId: props.channel.id channelId: props.channel.id,
}); });
isFollowing.value = true; 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 === 'warning'" class="ti ti-alert-triangle"></i>
<i v-else-if="type === 'info'" class="ti ti-info-circle"></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 === '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> </div>
<header v-if="title"><Mfm :text="title"/></header> <header v-if="title"><Mfm :text="title"/></header>
<div v-if="text" class="body"><Mfm :text="text"/></div> <div v-if="text" class="body"><Mfm :text="text"/></div>

18
packages/client/src/components/MkFollowButton.vue
View File

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

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

@ -9,7 +9,7 @@
<template #prefix>@</template> <template #prefix>@</template>
<template #suffix>@{{ host }}</template> <template #suffix>@{{ host }}</template>
<template #caption> <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 === '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 === '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> <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 #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 #prefix><i class="ti ti-mail"></i></template>
<template #caption> <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 === '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: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> <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')"> <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="iuyakobc" :class="{ iconOnly: (text == null) || success }">
<i v-if="success" class="ti ti-check icon success"></i> <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 v-if="text && !success" class="text">{{ text }}<MkEllipsis/></div>
</div> </div>
</MkModal> </MkModal>

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

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

2
packages/client/src/pages/messaging/messaging-room.form.vue
View File

@ -18,7 +18,7 @@
<button class="_button" @click="chooseFile"><i class="ti ti-photo-plus"></i></button> <button class="_button" @click="chooseFile"><i class="ti ti-photo-plus"></i></button>
<button class="_button" @click="insertEmoji"><i class="ti ti-mood-happy"></i></button> <button class="_button" @click="insertEmoji"><i class="ti ti-mood-happy"></i></button>
<button class="send _button" :disabled="!canSend || sending" :title="i18n.ts.send" @click="send"> <button class="send _button" :disabled="!canSend || sending" :title="i18n.ts.send" @click="send">
<template v-if="!sending"><i class="ti ti-send"></i></template><template v-if="sending"><i class="fas fa-spinner fa-pulse ti-fw"></i></template> <template v-if="!sending"><i class="ti ti-send"></i></template><template v-if="sending"><MkLoading :em="true"/></template>
</button> </button>
</div> </div>
</footer> </footer>

34
packages/client/src/pages/settings/2fa.vue
View File

@ -26,7 +26,7 @@
<ol v-if="registration && !registration.error"> <ol v-if="registration && !registration.error">
<li v-if="registration.stage >= 0"> <li v-if="registration.stage >= 0">
{{ i18n.ts.tapSecurityKey }} {{ i18n.ts.tapSecurityKey }}
<i v-if="registration.saving && registration.stage == 0" class="fas fa-spinner fa-pulse ti-fw"></i> <MkLoading v-if="registration.saving && registration.stage == 0" :em="true"/>
</li> </li>
<li v-if="registration.stage >= 1"> <li v-if="registration.stage >= 1">
<MkForm :disabled="registration.stage != 1 || registration.saving"> <MkForm :disabled="registration.stage != 1 || registration.saving">
@ -34,7 +34,7 @@
<template #label>{{ i18n.ts.securityKeyName }}</template> <template #label>{{ i18n.ts.securityKeyName }}</template>
</MkInput> </MkInput>
<MkButton :disabled="keyName.length == 0" @click="registerKey">{{ i18n.ts.registerSecurityKey }}</MkButton> <MkButton :disabled="keyName.length == 0" @click="registerKey">{{ i18n.ts.registerSecurityKey }}</MkButton>
<i v-if="registration.saving && registration.stage == 1" class="fas fa-spinner fa-pulse ti-fw"></i> <MkLoading v-if="registration.saving && registration.stage == 1" :em="true"/>
</MkForm> </MkForm>
</li> </li>
</ol> </ol>
@ -86,11 +86,11 @@ const token = ref(null);
function register() { function register() {
os.inputText({ os.inputText({
title: i18n.ts.password, title: i18n.ts.password,
type: 'password' type: 'password',
}).then(({ canceled, result: password }) => { }).then(({ canceled, result: password }) => {
if (canceled) return; if (canceled) return;
os.api('i/2fa/register', { os.api('i/2fa/register', {
password: password password: password,
}).then(data => { }).then(data => {
twoFactorData.value = data; twoFactorData.value = data;
}); });
@ -100,11 +100,11 @@ function register() {
function unregister() { function unregister() {
os.inputText({ os.inputText({
title: i18n.ts.password, title: i18n.ts.password,
type: 'password' type: 'password',
}).then(({ canceled, result: password }) => { }).then(({ canceled, result: password }) => {
if (canceled) return; if (canceled) return;
os.api('i/2fa/unregister', { os.api('i/2fa/unregister', {
password: password password: password,
}).then(() => { }).then(() => {
usePasswordLessLogin.value = false; usePasswordLessLogin.value = false;
updatePasswordLessLogin(); updatePasswordLessLogin();
@ -117,7 +117,7 @@ function unregister() {
function submit() { function submit() {
os.api('i/2fa/done', { os.api('i/2fa/done', {
token: token.value token: token.value,
}).then(() => { }).then(() => {
os.success(); os.success();
$i!.twoFactorEnabled = true; $i!.twoFactorEnabled = true;
@ -137,7 +137,7 @@ function registerKey() {
challengeId: registration.value.challengeId, challengeId: registration.value.challengeId,
// we convert each 16 bits to a string to serialise // we convert each 16 bits to a string to serialise
clientDataJSON: stringify(registration.value.credential.response.clientDataJSON), clientDataJSON: stringify(registration.value.credential.response.clientDataJSON),
attestationObject: hexify(registration.value.credential.response.attestationObject) attestationObject: hexify(registration.value.credential.response.attestationObject),
}).then(key => { }).then(key => {
registration.value = null; registration.value = null;
key.lastUsed = new Date(); key.lastUsed = new Date();
@ -148,12 +148,12 @@ function registerKey() {
function unregisterKey(key) { function unregisterKey(key) {
os.inputText({ os.inputText({
title: i18n.ts.password, title: i18n.ts.password,
type: 'password' type: 'password',
}).then(({ canceled, result: password }) => { }).then(({ canceled, result: password }) => {
if (canceled) return; if (canceled) return;
return os.api('i/2fa/remove-key', { return os.api('i/2fa/remove-key', {
password, password,
credentialId: key.id credentialId: key.id,
}).then(() => { }).then(() => {
usePasswordLessLogin.value = false; usePasswordLessLogin.value = false;
updatePasswordLessLogin(); updatePasswordLessLogin();
@ -166,11 +166,11 @@ function unregisterKey(key) {
function addSecurityKey() { function addSecurityKey() {
os.inputText({ os.inputText({
title: i18n.ts.password, title: i18n.ts.password,
type: 'password' type: 'password',
}).then(({ canceled, result: password }) => { }).then(({ canceled, result: password }) => {
if (canceled) return; if (canceled) return;
os.api('i/2fa/register-key', { os.api('i/2fa/register-key', {
password password,
}).then(reg => { }).then(reg => {
registration.value = { registration.value = {
password, password,
@ -180,7 +180,7 @@ function addSecurityKey() {
challenge: byteify(reg!.challenge, 'base64'), challenge: byteify(reg!.challenge, 'base64'),
rp: { rp: {
id: hostname, id: hostname,
name: 'Misskey' name: 'Misskey',
}, },
user: { user: {
id: byteify($i!.id, 'ascii'), id: byteify($i!.id, 'ascii'),
@ -189,12 +189,12 @@ function addSecurityKey() {
}, },
pubKeyCredParams: [{ alg: -7, type: 'public-key' }], pubKeyCredParams: [{ alg: -7, type: 'public-key' }],
timeout: 60000, timeout: 60000,
attestation: 'direct' attestation: 'direct',
}, },
saving: true saving: true,
}; };
return navigator.credentials.create({ return navigator.credentials.create({
publicKey: registration.value.publicKeyOptions publicKey: registration.value.publicKeyOptions,
}); });
}).then(credential => { }).then(credential => {
registration.value.credential = credential; registration.value.credential = credential;
@ -210,7 +210,7 @@ function addSecurityKey() {
async function updatePasswordLessLogin() { async function updatePasswordLessLogin() {
await os.api('i/2fa/password-less', { await os.api('i/2fa/password-less', {
value: !!usePasswordLessLogin.value value: !!usePasswordLessLogin.value,
}); });
} }
</script> </script>

2
packages/client/src/ui/_common_/upload.vue
View File

@ -4,7 +4,7 @@
<li v-for="ctx in uploads" :key="ctx.id"> <li v-for="ctx in uploads" :key="ctx.id">
<div class="img" :style="{ backgroundImage: `url(${ ctx.img })` }"></div> <div class="img" :style="{ backgroundImage: `url(${ ctx.img })` }"></div>
<div class="top"> <div class="top">
<p class="name"><i class="fas fa-spinner fa-pulse"></i>{{ ctx.name }}</p> <p class="name"><MkLoading :em="true"/>{{ ctx.name }}</p>
<p class="status"> <p class="status">
<span v-if="ctx.progressValue === undefined" class="initing">{{ i18n.ts.waiting }}<MkEllipsis/></span> <span v-if="ctx.progressValue === undefined" class="initing">{{ i18n.ts.waiting }}<MkEllipsis/></span>
<span v-if="ctx.progressValue !== undefined" class="kb">{{ String(Math.floor(ctx.progressValue / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i> / {{ String(Math.floor(ctx.progressMax / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i></span> <span v-if="ctx.progressValue !== undefined" class="kb">{{ String(Math.floor(ctx.progressValue / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i> / {{ String(Math.floor(ctx.progressMax / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i></span>