Improve client
This commit is contained in:
parent
d61a74fb88
commit
70a8dd30e0
7 changed files with 187 additions and 13 deletions
|
@ -138,7 +138,7 @@ flagAsBotDescription: "このアカウントがプログラムによって運用
|
|||
flagAsCat: "Catとして設定"
|
||||
flagAsCatDescription: "このアカウントが猫であることを示す場合は、このフラグをオンにします。"
|
||||
autoAcceptFollowed: "フォロー中ユーザーからのフォロリクを自動承認"
|
||||
addAcount: "アカウント追加"
|
||||
addAccount: "アカウントを追加"
|
||||
loginFailed: "ログインに失敗しました"
|
||||
showOnRemote: "リモートで表示"
|
||||
general: "全般"
|
||||
|
@ -452,7 +452,7 @@ category: "カテゴリ"
|
|||
tags: "タグ"
|
||||
docSource: "このドキュメントのソース"
|
||||
createAccount: "アカウントを作成"
|
||||
existingAcount: "既存のアカウント"
|
||||
existingAccount: "既存のアカウント"
|
||||
regenerate: "再生成"
|
||||
fontSize: "フォントサイズ"
|
||||
noFollowRequests: "フォロー申請はありません"
|
||||
|
@ -735,6 +735,8 @@ enabled: "有効"
|
|||
disabled: "無効"
|
||||
quickAction: "クイックアクション"
|
||||
user: "ユーザー"
|
||||
administration: "管理"
|
||||
accounts: "アカウント"
|
||||
|
||||
_email:
|
||||
_follow:
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "misskey",
|
||||
"author": "syuilo <syuilotan@yahoo.co.jp>",
|
||||
"version": "12.78.0-beta.4",
|
||||
"version": "12.78.0-beta.5",
|
||||
"codename": "indigo",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
|
|
@ -16,13 +16,13 @@
|
|||
<FormButton v-if="$instance.disableRegistration" @click="invite"><i class="fas fa-user"></i> {{ $ts.invite }}</FormButton>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<template #label>{{ $ts.administration }}</template>
|
||||
<FormLink :active="page === 'users'" replace to="/instance/users"><template #icon><i class="fas fa-users"></i></template>{{ $ts.users }}</FormLink>
|
||||
<FormLink :active="page === 'emojis'" replace to="/instance/emojis"><template #icon><i class="fas fa-laugh"></i></template>{{ $ts.customEmojis }}</FormLink>
|
||||
<FormLink :active="page === 'federation'" replace to="/instance/federation"><template #icon><i class="fas fa-globe"></i></template>{{ $ts.federation }}</FormLink>
|
||||
<FormLink :active="page === 'queue'" replace to="/instance/queue"><template #icon><i class="fas fa-clipboard-list"></i></template>{{ $ts.jobQueue }}</FormLink>
|
||||
<FormLink :active="page === 'files'" replace to="/instance/files"><template #icon><i class="fas fa-cloud"></i></template>{{ $ts.files }}</FormLink>
|
||||
<FormLink :active="page === 'announcements'" replace to="/instance/announcements"><template #icon><i class="fas fa-broadcast-tower"></i></template>{{ $ts.announcements }}</FormLink>
|
||||
<FormLink :active="page === 'database'" replace to="/instance/database"><template #icon><i class="fas fa-database"></i></template>{{ $ts.database }}</FormLink>
|
||||
<FormLink :active="page === 'abuses'" replace to="/instance/abuses"><template #icon><i class="fas fa-exclamation-circle"></i></template>{{ $ts.abuseReports }}</FormLink>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
|
@ -39,6 +39,10 @@
|
|||
<FormLink :active="page === 'proxy-account'" replace to="/instance/proxy-account"><template #icon><i class="fas fa-ghost"></i></template>{{ $ts.proxyAccount }}</FormLink>
|
||||
<FormLink :active="page === 'other-settings'" replace to="/instance/other-settings"><template #icon><i class="fas fa-cogs"></i></template>{{ $ts.other }}</FormLink>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<template #label>{{ $ts.info }}</template>
|
||||
<FormLink :active="page === 'database'" replace to="/instance/database"><template #icon><i class="fas fa-database"></i></template>{{ $ts.database }}</FormLink>
|
||||
</FormGroup>
|
||||
</FormBase>
|
||||
</div>
|
||||
<div class="main">
|
||||
|
@ -229,7 +233,7 @@ export default defineComponent({
|
|||
.lxpfedzu {
|
||||
padding: 16px;
|
||||
|
||||
> img {
|
||||
> .icon {
|
||||
display: block;
|
||||
margin: auto;
|
||||
height: 42px;
|
||||
|
|
148
src/client/pages/settings/accounts.vue
Normal file
148
src/client/pages/settings/accounts.vue
Normal file
|
@ -0,0 +1,148 @@
|
|||
<template>
|
||||
<FormBase>
|
||||
<FormSuspense :p="init">
|
||||
<FormButton @click="addAccount" primary><i class="fas fa-plus"></i> {{ $ts.addAccount }}</FormButton>
|
||||
|
||||
<div class="_formItem _button" v-for="account in accounts" :key="account.id" @click="menu(account, $event)">
|
||||
<div class="_formPanel lcjjdxlm">
|
||||
<div class="avatar">
|
||||
<MkAvatar :user="account" class="avatar"/>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="name">
|
||||
<MkUserName :user="account"/>
|
||||
</div>
|
||||
<div class="acct">
|
||||
<MkAcct :user="account"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</FormSuspense>
|
||||
</FormBase>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import FormSuspense from '@client/components/form/suspense.vue';
|
||||
import FormLink from '@client/components/form/link.vue';
|
||||
import FormBase from '@client/components/form/base.vue';
|
||||
import FormGroup from '@client/components/form/group.vue';
|
||||
import FormButton from '@client/components/form/button.vue';
|
||||
import * as os from '@client/os';
|
||||
import * as symbols from '@client/symbols';
|
||||
import { getAccounts, addAccount, login } from '@client/account';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
FormBase,
|
||||
FormSuspense,
|
||||
FormButton,
|
||||
},
|
||||
|
||||
emits: ['info'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
[symbols.PAGE_INFO]: {
|
||||
title: this.$ts.accounts,
|
||||
icon: 'fas fa-users',
|
||||
},
|
||||
storedAccounts: getAccounts().filter(x => x.id !== this.$i.id),
|
||||
accounts: null,
|
||||
init: () => os.api('users/show', {
|
||||
userIds: this.storedAccounts.map(x => x.id)
|
||||
}).then(accounts => {
|
||||
this.accounts = accounts;
|
||||
}),
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.$emit('info', this[symbols.PAGE_INFO]);
|
||||
},
|
||||
|
||||
methods: {
|
||||
menu(account, ev) {
|
||||
os.modalMenu([{
|
||||
text: this.$ts.switch,
|
||||
icon: 'fas fa-exchange-alt',
|
||||
action: () => this.switchAccount(account),
|
||||
}, {
|
||||
text: this.$ts.remove,
|
||||
icon: 'fas fa-trash-alt',
|
||||
danger: true,
|
||||
action: () => this.removeAccount(account),
|
||||
}], ev.currentTarget || ev.target);
|
||||
},
|
||||
|
||||
addAccount(ev) {
|
||||
os.modalMenu([{
|
||||
text: this.$ts.existingAccount,
|
||||
action: () => { this.addExistingAccount(); },
|
||||
}, {
|
||||
text: this.$ts.createAccount,
|
||||
action: () => { this.createAccount(); },
|
||||
}], ev.currentTarget || ev.target);
|
||||
},
|
||||
|
||||
addExistingAccount() {
|
||||
os.popup(import('@client/components/signin-dialog.vue'), {}, {
|
||||
done: res => {
|
||||
addAccount(res.id, res.i);
|
||||
os.success();
|
||||
},
|
||||
}, 'closed');
|
||||
},
|
||||
|
||||
createAccount() {
|
||||
os.popup(import('@client/components/signup-dialog.vue'), {}, {
|
||||
done: res => {
|
||||
addAccount(res.id, res.i);
|
||||
this.switchAccountWithToken(res.i);
|
||||
},
|
||||
}, 'closed');
|
||||
},
|
||||
|
||||
switchAccount(account: any) {
|
||||
const storedAccounts = getAccounts();
|
||||
const token = storedAccounts.find(x => x.id === account.id).token;
|
||||
this.switchAccountWithToken(token);
|
||||
},
|
||||
|
||||
switchAccountWithToken(token: string) {
|
||||
login(token);
|
||||
},
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.lcjjdxlm {
|
||||
display: flex;
|
||||
padding: 16px;
|
||||
|
||||
> .avatar {
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
margin: 0 12px 0 0;
|
||||
|
||||
> .avatar {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
> .body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: calc(100% - 62px);
|
||||
position: relative;
|
||||
|
||||
> .name {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -2,6 +2,14 @@
|
|||
<div class="vvcocwet" :class="{ wide: !narrow }" ref="el">
|
||||
<div class="nav" v-if="!narrow || page == null">
|
||||
<FormBase>
|
||||
<FormGroup>
|
||||
<div class="_formItem">
|
||||
<div class="_formPanel lwjxoukj">
|
||||
<MkAvatar :user="$i" class="avatar"/>
|
||||
</div>
|
||||
</div>
|
||||
<FormLink :active="page === 'accounts'" replace to="/settings/accounts"><template #icon><i class="fas fa-users"></i></template>{{ $ts.accounts }}</FormLink>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<template #label>{{ $ts.basicSettings }}</template>
|
||||
<FormLink :active="page === 'profile'" replace to="/settings/profile"><template #icon><i class="fas fa-user"></i></template>{{ $ts.profile }}</FormLink>
|
||||
|
@ -87,6 +95,7 @@ export default defineComponent({
|
|||
const component = computed(() => {
|
||||
if (page.value == null) return null;
|
||||
switch (page.value) {
|
||||
case 'accounts': return defineAsyncComponent(() => import('./accounts.vue'));
|
||||
case 'profile': return defineAsyncComponent(() => import('./profile.vue'));
|
||||
case 'privacy': return defineAsyncComponent(() => import('./privacy.vue'));
|
||||
case 'reaction': return defineAsyncComponent(() => import('./reaction.vue'));
|
||||
|
@ -209,4 +218,15 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lwjxoukj {
|
||||
padding: 16px;
|
||||
|
||||
> .avatar {
|
||||
display: block;
|
||||
margin: auto;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -157,11 +157,11 @@ export default defineComponent({
|
|||
avatar: this.$i,
|
||||
}, null, ...accountItemPromises, {
|
||||
icon: 'fas fa-plus',
|
||||
text: this.$ts.addAcount,
|
||||
text: this.$ts.addAccount,
|
||||
action: () => {
|
||||
os.modalMenu([{
|
||||
text: this.$ts.existingAcount,
|
||||
action: () => { this.addAcount(); },
|
||||
text: this.$ts.existingAccount,
|
||||
action: () => { this.addAccount(); },
|
||||
}, {
|
||||
text: this.$ts.createAccount,
|
||||
action: () => { this.createAccount(); },
|
||||
|
@ -177,7 +177,7 @@ export default defineComponent({
|
|||
}, 'closed');
|
||||
},
|
||||
|
||||
addAcount() {
|
||||
addAccount() {
|
||||
os.popup(import('@client/components/signin-dialog.vue'), {}, {
|
||||
done: res => {
|
||||
addAccount(res.id, res.i);
|
||||
|
|
|
@ -141,11 +141,11 @@ export default defineComponent({
|
|||
avatar: this.$i,
|
||||
}, null, ...accountItemPromises, {
|
||||
icon: 'fas fa-plus',
|
||||
text: this.$ts.addAcount,
|
||||
text: this.$ts.addAccount,
|
||||
action: () => {
|
||||
os.modalMenu([{
|
||||
text: this.$ts.existingAcount,
|
||||
action: () => { this.addAcount(); },
|
||||
text: this.$ts.existingAccount,
|
||||
action: () => { this.addAccount(); },
|
||||
}, {
|
||||
text: this.$ts.createAccount,
|
||||
action: () => { this.createAccount(); },
|
||||
|
@ -161,7 +161,7 @@ export default defineComponent({
|
|||
}, 'closed');
|
||||
},
|
||||
|
||||
addAcount() {
|
||||
addAccount() {
|
||||
os.popup(import('@client/components/signin-dialog.vue'), {}, {
|
||||
done: res => {
|
||||
addAccount(res.id, res.i);
|
||||
|
|
Loading…
Reference in a new issue