Improve client

This commit is contained in:
syuilo 2021-04-23 13:01:52 +09:00
parent d61a74fb88
commit 70a8dd30e0
7 changed files with 187 additions and 13 deletions

View file

@ -138,7 +138,7 @@ flagAsBotDescription: "このアカウントがプログラムによって運用
flagAsCat: "Catとして設定" flagAsCat: "Catとして設定"
flagAsCatDescription: "このアカウントが猫であることを示す場合は、このフラグをオンにします。" flagAsCatDescription: "このアカウントが猫であることを示す場合は、このフラグをオンにします。"
autoAcceptFollowed: "フォロー中ユーザーからのフォロリクを自動承認" autoAcceptFollowed: "フォロー中ユーザーからのフォロリクを自動承認"
addAcount: "アカウント追加" addAccount: "アカウント追加"
loginFailed: "ログインに失敗しました" loginFailed: "ログインに失敗しました"
showOnRemote: "リモートで表示" showOnRemote: "リモートで表示"
general: "全般" general: "全般"
@ -452,7 +452,7 @@ category: "カテゴリ"
tags: "タグ" tags: "タグ"
docSource: "このドキュメントのソース" docSource: "このドキュメントのソース"
createAccount: "アカウントを作成" createAccount: "アカウントを作成"
existingAcount: "既存のアカウント" existingAccount: "既存のアカウント"
regenerate: "再生成" regenerate: "再生成"
fontSize: "フォントサイズ" fontSize: "フォントサイズ"
noFollowRequests: "フォロー申請はありません" noFollowRequests: "フォロー申請はありません"
@ -735,6 +735,8 @@ enabled: "有効"
disabled: "無効" disabled: "無効"
quickAction: "クイックアクション" quickAction: "クイックアクション"
user: "ユーザー" user: "ユーザー"
administration: "管理"
accounts: "アカウント"
_email: _email:
_follow: _follow:

View file

@ -1,7 +1,7 @@
{ {
"name": "misskey", "name": "misskey",
"author": "syuilo <syuilotan@yahoo.co.jp>", "author": "syuilo <syuilotan@yahoo.co.jp>",
"version": "12.78.0-beta.4", "version": "12.78.0-beta.5",
"codename": "indigo", "codename": "indigo",
"repository": { "repository": {
"type": "git", "type": "git",

View file

@ -16,13 +16,13 @@
<FormButton v-if="$instance.disableRegistration" @click="invite"><i class="fas fa-user"></i> {{ $ts.invite }}</FormButton> <FormButton v-if="$instance.disableRegistration" @click="invite"><i class="fas fa-user"></i> {{ $ts.invite }}</FormButton>
</FormGroup> </FormGroup>
<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 === '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 === '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 === '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 === '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 === '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 === '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> <FormLink :active="page === 'abuses'" replace to="/instance/abuses"><template #icon><i class="fas fa-exclamation-circle"></i></template>{{ $ts.abuseReports }}</FormLink>
</FormGroup> </FormGroup>
<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 === '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> <FormLink :active="page === 'other-settings'" replace to="/instance/other-settings"><template #icon><i class="fas fa-cogs"></i></template>{{ $ts.other }}</FormLink>
</FormGroup> </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> </FormBase>
</div> </div>
<div class="main"> <div class="main">
@ -229,7 +233,7 @@ export default defineComponent({
.lxpfedzu { .lxpfedzu {
padding: 16px; padding: 16px;
> img { > .icon {
display: block; display: block;
margin: auto; margin: auto;
height: 42px; height: 42px;

View 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>

View file

@ -2,6 +2,14 @@
<div class="vvcocwet" :class="{ wide: !narrow }" ref="el"> <div class="vvcocwet" :class="{ wide: !narrow }" ref="el">
<div class="nav" v-if="!narrow || page == null"> <div class="nav" v-if="!narrow || page == null">
<FormBase> <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> <FormGroup>
<template #label>{{ $ts.basicSettings }}</template> <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> <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(() => { const component = computed(() => {
if (page.value == null) return null; if (page.value == null) return null;
switch (page.value) { switch (page.value) {
case 'accounts': return defineAsyncComponent(() => import('./accounts.vue'));
case 'profile': return defineAsyncComponent(() => import('./profile.vue')); case 'profile': return defineAsyncComponent(() => import('./profile.vue'));
case 'privacy': return defineAsyncComponent(() => import('./privacy.vue')); case 'privacy': return defineAsyncComponent(() => import('./privacy.vue'));
case 'reaction': return defineAsyncComponent(() => import('./reaction.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> </style>

View file

@ -157,11 +157,11 @@ export default defineComponent({
avatar: this.$i, avatar: this.$i,
}, null, ...accountItemPromises, { }, null, ...accountItemPromises, {
icon: 'fas fa-plus', icon: 'fas fa-plus',
text: this.$ts.addAcount, text: this.$ts.addAccount,
action: () => { action: () => {
os.modalMenu([{ os.modalMenu([{
text: this.$ts.existingAcount, text: this.$ts.existingAccount,
action: () => { this.addAcount(); }, action: () => { this.addAccount(); },
}, { }, {
text: this.$ts.createAccount, text: this.$ts.createAccount,
action: () => { this.createAccount(); }, action: () => { this.createAccount(); },
@ -177,7 +177,7 @@ export default defineComponent({
}, 'closed'); }, 'closed');
}, },
addAcount() { addAccount() {
os.popup(import('@client/components/signin-dialog.vue'), {}, { os.popup(import('@client/components/signin-dialog.vue'), {}, {
done: res => { done: res => {
addAccount(res.id, res.i); addAccount(res.id, res.i);

View file

@ -141,11 +141,11 @@ export default defineComponent({
avatar: this.$i, avatar: this.$i,
}, null, ...accountItemPromises, { }, null, ...accountItemPromises, {
icon: 'fas fa-plus', icon: 'fas fa-plus',
text: this.$ts.addAcount, text: this.$ts.addAccount,
action: () => { action: () => {
os.modalMenu([{ os.modalMenu([{
text: this.$ts.existingAcount, text: this.$ts.existingAccount,
action: () => { this.addAcount(); }, action: () => { this.addAccount(); },
}, { }, {
text: this.$ts.createAccount, text: this.$ts.createAccount,
action: () => { this.createAccount(); }, action: () => { this.createAccount(); },
@ -161,7 +161,7 @@ export default defineComponent({
}, 'closed'); }, 'closed');
}, },
addAcount() { addAccount() {
os.popup(import('@client/components/signin-dialog.vue'), {}, { os.popup(import('@client/components/signin-dialog.vue'), {}, {
done: res => { done: res => {
addAccount(res.id, res.i); addAccount(res.id, res.i);