sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve ui

Browse Source
This commit is contained in:
syuilo
2021-10-10 15:19:16 +09:00
parent 49b43eb3c8
commit c33e93c662
29 changed files with 609 additions and 552 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/client/pages/instance/database.vue
View File

@@ -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)),
}

3
src/client/pages/instance/email-settings.vue
View File

@@ -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,

3
src/client/pages/instance/files-settings.vue
View File

@@ -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,

97
src/client/pages/instance/index.link.vue
View File

@@ -1,97 +0,0 @@
<template>
<div class="qmfkfnzh">
<a class="main _button" :href="to" target="_blank" v-if="external">
<span class="icon"><slot name="icon"></slot></span>
<span class="text"><slot></slot></span>
</a>
<MkA class="main _button" :class="{ active }" :to="to" :behavior="behavior" v-else>
<span class="icon"><slot name="icon"></slot></span>
<span class="text"><slot></slot></span>
</MkA>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
props: {
to: {
type: String,
required: true
},
active: {
type: Boolean,
required: false
},
external: {
type: Boolean,
required: false
},
behavior: {
type: String,
required: false,
},
},
data() {
return {
};
}
});
</script>
<style lang="scss" scoped>
.qmfkfnzh {
> .main {
display: flex;
align-items: center;
width: 100%;
box-sizing: border-box;
padding: 10px 16px 10px 14px;
border-radius: 999px;
font-size: 0.9em;
&:hover {
text-decoration: none;
background: var(--panelHighlight);
}
&.active {
color: var(--accent);
background: var(--accentedBg);
}
> .icon {
width: 32px;
margin-right: 2px;
flex-shrink: 0;
text-align: center;
opacity: 0.8;
&:empty {
display: none;
& + .text {
padding-left: 4px;
}
}
}
> .text {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
padding-right: 12px;
}
> .right {
margin-left: auto;
opacity: 0.7;
> .text:not(:empty) {
margin-right: 0.75em;
}
}
}
}
</style>

225
src/client/pages/instance/index.vue
View File

@@ -1,47 +1,15 @@
<template>
<div class="hiyeyicy" :class="{ wide: !narrow }" ref="el">
<div class="nav" v-if="!narrow || page == null">
<div class="group">
<div class="lxpfedzu">
<img :src="$instance.iconUrl || '/favicon.ico'" alt="" class="icon"/>
</div>
<XLink :active="page === 'overview'" replace to="/instance/overview"><template #icon><i class="fas fa-tachometer-alt"></i></template>{{ $ts.overview }}</XLink>
</div>
<div class="group">
<div class="label">{{ $ts.quickAction }}</div>
<FormButton @click="lookup"><i class="fas fa-search"></i> {{ $ts.lookup }}</FormButton>
<FormButton v-if="$instance.disableRegistration" @click="invite"><i class="fas fa-user"></i> {{ $ts.invite }}</FormButton>
</div>
<div class="group">
<div class="label">{{ $ts.administration }}</div>
<XLink :active="page === 'users'" replace to="/instance/users"><template #icon><i class="fas fa-users"></i></template>{{ $ts.users }}</XLink>
<XLink :active="page === 'emojis'" replace to="/instance/emojis"><template #icon><i class="fas fa-laugh"></i></template>{{ $ts.customEmojis }}</XLink>
<XLink :active="page === 'federation'" replace to="/instance/federation"><template #icon><i class="fas fa-globe"></i></template>{{ $ts.federation }}</XLink>
<XLink :active="page === 'queue'" replace to="/instance/queue"><template #icon><i class="fas fa-clipboard-list"></i></template>{{ $ts.jobQueue }}</XLink>
<XLink :active="page === 'files'" replace to="/instance/files"><template #icon><i class="fas fa-cloud"></i></template>{{ $ts.files }}</XLink>
<XLink :active="page === 'announcements'" replace to="/instance/announcements"><template #icon><i class="fas fa-broadcast-tower"></i></template>{{ $ts.announcements }}</XLink>
<XLink :active="page === 'ads'" replace to="/instance/ads"><template #icon><i class="fas fa-audio-description"></i></template>{{ $ts.ads }}</XLink>
<XLink :active="page === 'abuses'" replace to="/instance/abuses"><template #icon><i class="fas fa-exclamation-circle"></i></template>{{ $ts.abuseReports }}</XLink>
</div>
<div class="group">
<div class="label">{{ $ts.settings }}</div>
<XLink :active="page === 'settings'" replace to="/instance/settings"><template #icon><i class="fas fa-cog"></i></template>{{ $ts.general }}</XLink>
<XLink :active="page === 'files-settings'" replace to="/instance/files-settings"><template #icon><i class="fas fa-cloud"></i></template>{{ $ts.files }}</XLink>
<XLink :active="page === 'email-settings'" replace to="/instance/email-settings"><template #icon><i class="fas fa-envelope"></i></template>{{ $ts.emailServer }}</XLink>
<XLink :active="page === 'object-storage'" replace to="/instance/object-storage"><template #icon><i class="fas fa-cloud"></i></template>{{ $ts.objectStorage }}</XLink>
<XLink :active="page === 'security'" replace to="/instance/security"><template #icon><i class="fas fa-lock"></i></template>{{ $ts.security }}</XLink>
<XLink :active="page === 'service-worker'" replace to="/instance/service-worker"><template #icon><i class="fas fa-bolt"></i></template>ServiceWorker</XLink>
<XLink :active="page === 'relays'" replace to="/instance/relays"><template #icon><i class="fas fa-globe"></i></template>{{ $ts.relays }}</XLink>
<XLink :active="page === 'integrations'" replace to="/instance/integrations"><template #icon><i class="fas fa-share-alt"></i></template>{{ $ts.integration }}</XLink>
<XLink :active="page === 'instance-block'" replace to="/instance/instance-block"><template #icon><i class="fas fa-ban"></i></template>{{ $ts.instanceBlocking }}</XLink>
<XLink :active="page === 'proxy-account'" replace to="/instance/proxy-account"><template #icon><i class="fas fa-ghost"></i></template>{{ $ts.proxyAccount }}</XLink>
<XLink :active="page === 'other-settings'" replace to="/instance/other-settings"><template #icon><i class="fas fa-cogs"></i></template>{{ $ts.other }}</XLink>
</div>
<div class="group">
<div class="label">{{ $ts.info }}</div>
<XLink :active="page === 'database'" replace to="/instance/database"><template #icon><i class="fas fa-database"></i></template>{{ $ts.database }}</XLink>
<XLink :active="page === 'logs'" replace to="/instance/logs"><template #icon><i class="fas fa-stream"></i></template>{{ $ts.logs }}</XLink>
<MkHeader :info="header"></MkHeader>
<MkInfo v-if="noMaintainerInformation" warn class="info">{{ $ts.noMaintainerInformationWarning }} <MkA to="/instance/settings" class="_link">{{ $ts.configure }}</MkA></MkInfo>
<MkInfo v-if="noBotProtection" warn class="info">{{ $ts.noBotProtectionWarning }} <MkA to="/instance/bot-protection" class="_link">{{ $ts.configure }}</MkA></MkInfo>
<div class="lxpfedzu">
<img :src="$instance.iconUrl || '/favicon.ico'" alt="" class="icon"/>
</div>
<MkSuperMenu :def="menuDef" :grid="page == null"></MkSuperMenu>
</div>
<div class="main">
<component :is="component" :key="page" @info="onInfo" v-bind="pageProps"/>
@@ -52,11 +20,13 @@
<script lang="ts">
import { computed, defineAsyncComponent, defineComponent, nextTick, onMounted, reactive, ref, watch } from 'vue';
import { i18n } from '@client/i18n';
import XLink from './index.link.vue';
import MkSuperMenu from '@client/components/ui/super-menu.vue';
import FormGroup from '@client/components/debobigego/group.vue';
import FormBase from '@client/components/debobigego/base.vue';
import FormButton from '@client/components/debobigego/button.vue';
import MkInfo from '@client/components/ui/info.vue';
import { scroll } from '@client/scripts/scroll';
import { instance } from '@client/instance';
import * as symbols from '@client/symbols';
import * as os from '@client/os';
import { lookupUser } from '@client/scripts/lookup-user';
@@ -64,9 +34,10 @@ import { lookupUser } from '@client/scripts/lookup-user';
export default defineComponent({
components: {
FormBase,
XLink,
MkSuperMenu,
FormGroup,
FormButton,
MkInfo,
},
props: {
@@ -91,6 +62,151 @@ export default defineComponent({
INFO.value = viewInfo;
};
const pageProps = ref({});
const isEmpty = (x: any) => x == null || x == '';
const noMaintainerInformation = ref(false);
const noBotProtection = ref(false);
os.api('meta', { detail: true }).then(meta => {
// TODO: 設定が完了しても残ったままになるので、ストリーミングでmeta更新イベントを受け取ってよしなに更新する
noMaintainerInformation.value = isEmpty(meta.maintainerName) || isEmpty(meta.maintainerEmail);
noBotProtection.value = !meta.enableHcaptcha && !meta.enableRecaptcha;
});
const menuDef = computed(() => [{
title: i18n.locale.quickAction,
items: [{
type: 'button',
icon: 'fas fa-search',
text: i18n.locale.lookup,
action: lookup,
}, ...(instance.disableRegistration ? [{
type: 'button',
icon: 'fas fa-user',
text: i18n.locale.invite,
action: invite,
}] : [])],
}, {
title: i18n.locale.administration,
items: [{
icon: 'fas fa-tachometer-alt',
text: i18n.locale.dashboard,
to: '/instance/overview',
active: page.value === 'overview',
}, {
icon: 'fas fa-users',
text: i18n.locale.users,
to: '/instance/users',
active: page.value === 'users',
}, {
icon: 'fas fa-laugh',
text: i18n.locale.customEmojis,
to: '/instance/emojis',
active: page.value === 'emojis',
}, {
icon: 'fas fa-globe',
text: i18n.locale.federation,
to: '/instance/federation',
active: page.value === 'federation',
}, {
icon: 'fas fa-clipboard-list',
text: i18n.locale.jobQueue,
to: '/instance/queue',
active: page.value === 'queue',
}, {
icon: 'fas fa-cloud',
text: i18n.locale.files,
to: '/instance/files',
active: page.value === 'files',
}, {
icon: 'fas fa-broadcast-tower',
text: i18n.locale.announcements,
to: '/instance/announcements',
active: page.value === 'announcements',
}, {
icon: 'fas fa-audio-description',
text: i18n.locale.ads,
to: '/instance/ads',
active: page.value === 'ads',
}, {
icon: 'fas fa-exclamation-circle',
text: i18n.locale.abuseReports,
to: '/instance/abuses',
active: page.value === 'abuses',
}],
}, {
title: i18n.locale.settings,
items: [{
icon: 'fas fa-cog',
text: i18n.locale.general,
to: '/instance/settings',
active: page.value === 'settings',
}, {
icon: 'fas fa-cloud',
text: i18n.locale.files,
to: '/instance/files-settings',
active: page.value === 'files-settings',
}, {
icon: 'fas fa-envelope',
text: i18n.locale.emailServer,
to: '/instance/email-settings',
active: page.value === 'email-settings',
}, {
icon: 'fas fa-cloud',
text: i18n.locale.objectStorage,
to: '/instance/object-storage',
active: page.value === 'object-storage',
}, {
icon: 'fas fa-lock',
text: i18n.locale.security,
to: '/instance/security',
active: page.value === 'security',
}, {
icon: 'fas fa-bolt',
text: 'ServiceWorker',
to: '/instance/service-worker',
active: page.value === 'service-worker',
}, {
icon: 'fas fa-globe',
text: i18n.locale.relays,
to: '/instance/relays',
active: page.value === 'relays',
}, {
icon: 'fas fa-share-alt',
text: i18n.locale.integration,
to: '/instance/integrations',
active: page.value === 'integrations',
}, {
icon: 'fas fa-ban',
text: i18n.locale.instanceBlocking,
to: '/instance/instance-block',
active: page.value === 'instance-block',
}, {
icon: 'fas fa-ghost',
text: i18n.locale.proxyAccount,
to: '/instance/proxy-account',
active: page.value === 'proxy-account',
}, {
icon: 'fas fa-cogs',
text: i18n.locale.other,
to: '/instance/other-settings',
active: page.value === 'other-settings',
}],
}, {
title: i18n.locale.info,
items: [{
icon: 'fas fa-database',
text: i18n.locale.database,
to: '/instance/database',
active: page.value === 'database',
}, {
icon: 'fas fa-stream',
text: i18n.locale.logs,
to: '/instance/logs',
active: page.value === 'logs',
}],
}]);
const component = computed(() => {
if (page.value == null) return null;
switch (page.value) {
@@ -193,6 +309,12 @@ export default defineComponent({
return {
[symbols.PAGE_INFO]: INFO,
menuDef,
header: {
title: i18n.locale.controllPanel,
},
noMaintainerInformation,
noBotProtection,
page,
narrow,
view,
@@ -216,20 +338,11 @@ export default defineComponent({
> .nav {
width: 32%;
max-width: 320px;
max-width: 280px;
box-sizing: border-box;
border-right: solid 0.5px var(--divider);
overflow: auto;
> .group {
padding: 16px;
> .label {
font-size: 0.9em;
opacity: 0.7;
margin: 0 0 8px 12px;
}
}
height: 100%;
}
> .main {
@@ -238,6 +351,12 @@ export default defineComponent({
--baseContentWidth: 100%;
}
}
> .nav {
> .info {
margin: 16px;
}
}
}
.lxpfedzu {

3
src/client/pages/instance/instance-block.vue
View File

@@ -43,7 +43,8 @@ export default defineComponent({
return {
[symbols.PAGE_INFO]: {
title: this.$ts.instanceBlocking,
icon: 'fas fa-ban'
icon: 'fas fa-ban',
bg: 'var(--bg)',
},
blockedHosts: '',
}

3
src/client/pages/instance/integrations.vue
View File

@@ -49,7 +49,8 @@ export default defineComponent({
return {
[symbols.PAGE_INFO]: {
title: this.$ts.integration,
icon: 'fas fa-share-alt'
icon: 'fas fa-share-alt',
bg: 'var(--bg)',
},
enableTwitterIntegration: false,
enableGithubIntegration: false,

3
src/client/pages/instance/object-storage.vue
View File

@@ -91,7 +91,8 @@ export default defineComponent({
return {
[symbols.PAGE_INFO]: {
title: this.$ts.objectStorage,
icon: 'fas fa-cloud'
icon: 'fas fa-cloud',
bg: 'var(--bg)',
},
useObjectStorage: false,
objectStorageBaseUrl: null,

3
src/client/pages/instance/other-settings.vue
View File

@@ -49,7 +49,8 @@ export default defineComponent({
return {
[symbols.PAGE_INFO]: {
title: this.$ts.other,
icon: 'fas fa-cogs'
icon: 'fas fa-cogs',
bg: 'var(--bg)',
},
summalyProxy: '',
deeplAuthKey: '',

10
src/client/pages/instance/overview.vue
View File

@@ -1,9 +1,6 @@
<template>
<FormBase>
<FormSuspense :p="init">
<FormInfo v-if="noMaintainerInformation" warn>{{ $ts.noMaintainerInformationWarning }} <MkA to="/instance/settings" class="_link">{{ $ts.configure }}</MkA></FormInfo>
<FormInfo v-if="noBotProtection" warn>{{ $ts.noBotProtectionWarning }} <MkA to="/instance/bot-protection" class="_link">{{ $ts.configure }}</MkA></FormInfo>
<FormSuspense :p="fetchStats" v-slot="{ result: stats }">
<FormGroup>
<FormKeyValueView>
@@ -98,8 +95,6 @@ export default defineComponent({
fetchServerInfo: () => os.api('admin/server-info', {}),
fetchJobs: () => os.api('admin/queue/deliver-delayed', {}),
fetchModLogs: () => os.api('admin/show-moderation-logs', {}),
noMaintainerInformation: false,
noBotProtection: false,
}
},
@@ -110,11 +105,6 @@ export default defineComponent({
methods: {
async init() {
this.meta = await os.api('meta', { detail: true });
const isEmpty = (x: any) => x == null || x == '';
this.noMaintainerInformation = isEmpty(this.meta.maintainerName) || isEmpty(this.meta.maintainerEmail);
this.noBotProtection = !this.meta.enableHcaptcha && !this.meta.enableRecaptcha;
},
async showInstanceInfo(q) {

3
src/client/pages/instance/proxy-account.vue
View File

@@ -46,7 +46,8 @@ export default defineComponent({
return {
[symbols.PAGE_INFO]: {
title: this.$ts.proxyAccount,
icon: 'fas fa-ghost'
icon: 'fas fa-ghost',
bg: 'var(--bg)',
},
proxyAccount: null,
proxyAccountId: null,

1
src/client/pages/instance/queue.vue
View File

@@ -34,6 +34,7 @@ export default defineComponent({
[symbols.PAGE_INFO]: {
title: this.$ts.jobQueue,
icon: 'fas fa-clipboard-list',
bg: 'var(--bg)',
},
connection: markRaw(os.stream.useChannel('queueStats')),
}

1
src/client/pages/instance/relays.vue
View File

@@ -36,6 +36,7 @@ export default defineComponent({
[symbols.PAGE_INFO]: {
title: this.$ts.relays,
icon: 'fas fa-globe',
bg: 'var(--bg)',
},
relays: [],
inbox: '',

3
src/client/pages/instance/security.vue
View File

@@ -47,7 +47,8 @@ export default defineComponent({
return {
[symbols.PAGE_INFO]: {
title: this.$ts.security,
icon: 'fas fa-lock'
icon: 'fas fa-lock',
bg: 'var(--bg)',
},
enableHcaptcha: false,
enableRecaptcha: false,

3
src/client/pages/instance/service-worker.vue
View File

@@ -51,7 +51,8 @@ export default defineComponent({
return {
[symbols.PAGE_INFO]: {
title: 'ServiceWorker',
icon: 'fas fa-bolt'
icon: 'fas fa-bolt',
bg: 'var(--bg)',
},
enableServiceWorker: false,
swPublicKey: null,

3
src/client/pages/instance/settings.vue
View File

@@ -84,7 +84,8 @@ export default defineComponent({
return {
[symbols.PAGE_INFO]: {
title: this.$ts.general,
icon: 'fas fa-cog'
icon: 'fas fa-cog',
bg: 'var(--bg)',
},
name: null,
description: null,

2
src/client/pages/instance/users.vue
View File

@@ -29,9 +29,11 @@
</div>
<div class="inputs">
<MkInput v-model="searchUsername" style="flex: 1;" type="text" spellcheck="false" @update:modelValue="$refs.users.reload()">
<template #prefix>@</template>
<template #label>{{ $ts.username }}</template>
</MkInput>
<MkInput v-model="searchHost" style="flex: 1;" type="text" spellcheck="false" @update:modelValue="$refs.users.reload()" :disabled="pagination.params().origin === 'local'">
<template #prefix>@</template>
<template #label>{{ $ts.host }}</template>
</MkInput>
</div>