From c33e93c66282839c3e721d651720a7573da41b25 Mon Sep 17 00:00:00 2001 From: syuilo Date: Sun, 10 Oct 2021 15:19:16 +0900 Subject: [PATCH 01/11] improve ui --- locales/ja-JP.yml | 2 + src/client/account.ts | 74 +++++- src/client/components/ui/folder.vue | 23 +- src/client/components/ui/super-menu.vue | 151 +++++++++++++ src/client/pages/emojis.category.vue | 1 - src/client/pages/explore.vue | 48 ++-- src/client/pages/instance/database.vue | 3 +- src/client/pages/instance/email-settings.vue | 3 +- src/client/pages/instance/files-settings.vue | 3 +- src/client/pages/instance/index.link.vue | 97 -------- src/client/pages/instance/index.vue | 225 ++++++++++++++----- src/client/pages/instance/instance-block.vue | 3 +- src/client/pages/instance/integrations.vue | 3 +- src/client/pages/instance/object-storage.vue | 3 +- src/client/pages/instance/other-settings.vue | 3 +- src/client/pages/instance/overview.vue | 10 - src/client/pages/instance/proxy-account.vue | 3 +- src/client/pages/instance/queue.vue | 1 + src/client/pages/instance/relays.vue | 1 + src/client/pages/instance/security.vue | 3 +- src/client/pages/instance/service-worker.vue | 3 +- src/client/pages/instance/settings.vue | 3 +- src/client/pages/instance/users.vue | 2 + src/client/pages/settings/index.link.vue | 105 --------- src/client/pages/settings/index.vue | 181 ++++++++++----- src/client/ui/_common_/sidebar.vue | 68 +----- src/client/ui/chat/index.vue | 3 + src/client/ui/default.header.vue | 68 +----- src/client/ui/default.sidebar.vue | 68 +----- 29 files changed, 609 insertions(+), 552 deletions(-) create mode 100644 src/client/components/ui/super-menu.vue delete mode 100644 src/client/pages/instance/index.link.vue delete mode 100644 src/client/pages/settings/index.link.vue diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 9a5ec30787..5798ce7ec2 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -794,6 +794,8 @@ itsOff: "オフになっています" emailRequiredForSignup: "アカウント登録にメールアドレスを必須にする" unread: "未読" filter: "フィルタ" +controllPanel: "コントロールパネル" +manageAccounts: "アカウントを管理" _signup: almostThere: "ほとんど完了です" diff --git a/src/client/account.ts b/src/client/account.ts index 6e26ac1f7d..a3fe082a22 100644 --- a/src/client/account.ts +++ b/src/client/account.ts @@ -1,9 +1,10 @@ import { del, get, set } from '@client/scripts/idb-proxy'; import { reactive } from 'vue'; import { apiUrl } from '@client/config'; -import { waiting } from '@client/os'; +import { waiting, api, popup, popupMenu, success } from '@client/os'; import { unisonReload, reloadChannel } from '@client/scripts/unison-reload'; import { showSuspendedDialog } from './scripts/show-suspended-dialog'; +import { i18n } from './i18n'; // TODO: 他のタブと永続化されたstateを同期 @@ -129,6 +130,77 @@ export async function login(token: Account['token'], redirect?: string) { unisonReload(); } +export async function openAccountMenu(ev: MouseEvent) { + function showSigninDialog() { + popup(import('@client/components/signin-dialog.vue'), {}, { + done: res => { + addAccount(res.id, res.i); + success(); + }, + }, 'closed'); + } + + function createAccount() { + popup(import('@client/components/signup-dialog.vue'), {}, { + done: res => { + addAccount(res.id, res.i); + switchAccountWithToken(res.i); + }, + }, 'closed'); + } + + async function switchAccount(account: any) { + const storedAccounts = await getAccounts(); + const token = storedAccounts.find(x => x.id === account.id).token; + switchAccountWithToken(token); + } + + function switchAccountWithToken(token: string) { + login(token); + } + + const storedAccounts = await getAccounts().then(accounts => accounts.filter(x => x.id !== $i.id)); + const accountsPromise = api('users/show', { userIds: storedAccounts.map(x => x.id) }); + + const accountItemPromises = storedAccounts.map(a => new Promise(res => { + accountsPromise.then(accounts => { + const account = accounts.find(x => x.id === a.id); + if (account == null) return res(null); + res({ + type: 'user', + user: account, + action: () => { switchAccount(account); } + }); + }); + })); + + popupMenu([...[{ + type: 'link', + text: i18n.locale.profile, + to: `/@${ $i.username }`, + avatar: $i, + }, null, ...accountItemPromises, { + icon: 'fas fa-plus', + text: i18n.locale.addAccount, + action: () => { + popupMenu([{ + text: i18n.locale.existingAccount, + action: () => { showSigninDialog(); }, + }, { + text: i18n.locale.createAccount, + action: () => { createAccount(); }, + }], ev.currentTarget || ev.target); + }, + }, { + type: 'link', + icon: 'fas fa-users', + text: i18n.locale.manageAccounts, + to: `/settings/accounts`, + }]], ev.currentTarget || ev.target, { + align: 'left' + }); +} + // このファイルに書きたくないけどここに書かないと何故かVeturが認識しない declare module '@vue/runtime-core' { interface ComponentCustomProperties { diff --git a/src/client/components/ui/folder.vue b/src/client/components/ui/folder.vue index eecf1d8be1..cc3da083c5 100644 --- a/src/client/components/ui/folder.vue +++ b/src/client/components/ui/folder.vue @@ -1,6 +1,6 @@ -
+
{{ $ts.exploreFediverse }}
@@ -71,6 +62,16 @@
+
+
+ + + + +
+ + +
@@ -102,12 +103,28 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.explore, - icon: 'fas fa-hashtag' + icon: 'fas fa-hashtag', + bg: 'var(--bg)', }, - header: { + tab: 'local', + header: computed(() => ({ title: this.$ts.explore, - icon: 'fas fa-hashtag' - }, + icon: 'fas fa-hashtag', + bg: 'var(--bg)', + tabs: [{ + active: this.tab === 'local', + title: this.$ts.local, + onClick: () => { this.tab = 'local'; }, + }, { + active: this.tab === 'remote', + title: this.$ts.remote, + onClick: () => { this.tab = 'remote'; }, + }, { + active: this.tab === 'search', + title: this.$ts.search, + onClick: () => { this.tab = 'search'; }, + },] + })), pinnedUsers: { endpoint: 'pinned-users' }, popularUsers: { endpoint: 'users', limit: 10, noPaging: true, params: { state: 'alive', @@ -200,6 +217,7 @@ export default defineComponent({ .lznhrdub { max-width: 1400px; margin: 0 auto; + padding: 16px; } .localfedi7 { diff --git a/src/client/pages/instance/database.vue b/src/client/pages/instance/database.vue index a8a1e9a54a..ffbeed8b30 100644 --- a/src/client/pages/instance/database.vue +++ b/src/client/pages/instance/database.vue @@ -43,7 +43,8 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.database, - icon: 'fas fa-database' + icon: 'fas fa-database', + bg: 'var(--bg)', }, databasePromiseFactory: () => os.api('admin/get-table-stats', {}).then(res => Object.entries(res).sort((a, b) => b[1].size - a[1].size)), } diff --git a/src/client/pages/instance/email-settings.vue b/src/client/pages/instance/email-settings.vue index 251354a43a..ebf724fcdd 100644 --- a/src/client/pages/instance/email-settings.vue +++ b/src/client/pages/instance/email-settings.vue @@ -66,7 +66,8 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.emailServer, - icon: 'fas fa-envelope' + icon: 'fas fa-envelope', + bg: 'var(--bg)', }, enableEmail: false, email: null, diff --git a/src/client/pages/instance/files-settings.vue b/src/client/pages/instance/files-settings.vue index 8bf4613a76..8aefa9e90d 100644 --- a/src/client/pages/instance/files-settings.vue +++ b/src/client/pages/instance/files-settings.vue @@ -56,7 +56,8 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.files, - icon: 'fas fa-cloud' + icon: 'fas fa-cloud', + bg: 'var(--bg)', }, cacheRemoteFiles: false, proxyRemoteFiles: false, diff --git a/src/client/pages/instance/index.link.vue b/src/client/pages/instance/index.link.vue deleted file mode 100644 index e1f4773800..0000000000 --- a/src/client/pages/instance/index.link.vue +++ /dev/null @@ -1,97 +0,0 @@ - - - - - diff --git a/src/client/pages/instance/index.vue b/src/client/pages/instance/index.vue index 959c4be6cd..e2cb5b8f58 100644 --- a/src/client/pages/instance/index.vue +++ b/src/client/pages/instance/index.vue @@ -1,47 +1,15 @@