mirror/cherrypick
1
1
Fork 0
mirror of https://github.com/kokonect-link/cherrypick synced 2024-12-11 13:18:54 +09:00
Code

Improve client

Browse Source
This commit is contained in:
syuilo 2021-04-25 12:31:11 +09:00
parent c384c4ca6c
commit 23821d6fad
4 changed files with 78 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/client/components/launch-pad.vue
View File

@ -25,7 +25,7 @@
<div class="text">{{ $t('aboutX', { x: instanceName }) }}</div> <div class="text">{{ $t('aboutX', { x: instanceName }) }}</div>
</MkA> </MkA>
<MkA to="/about-misskey" @click.passive="close()" v-click-anime> <MkA to="/about-misskey" @click.passive="close()" v-click-anime>
<i class="fas fa-info-circle icon"></i> <img src="/static-assets/favicon.png" class="icon"/>
<div class="text">{{ $ts.aboutMisskey }}</div> <div class="text">{{ $ts.aboutMisskey }}</div>
</MkA> </MkA>
</div> </div>
@ -101,6 +101,7 @@ export default defineComponent({
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
vertical-align: bottom;
width: 128px; width: 128px;
height: 128px; height: 128px;
border-radius: var(--radius); border-radius: var(--radius);
@ -117,6 +118,7 @@ export default defineComponent({
> .icon { > .icon {
font-size: 26px; font-size: 26px;
height: 32px;
} }
> .text { > .text {

96
src/client/pages/about.vue
View File

@ -1,39 +1,57 @@
<template> <template>
<FormBase class="mmnnbwxb" v-if="meta"> <FormBase>
<div class="_formItem logo"> <div class="_formItem">
<img v-if="meta.logoImageUrl" :src="meta.logoImageUrl"> <div class="_formPanel fwhjspax">
<span v-else class="text">{{ instanceName }}</span> <img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
<span class="name">{{ $instance.name || host }}</span>
</div>
</div> </div>
<FormTextarea readonly :value="$instance.description">
</FormTextarea>
<FormGroup> <FormGroup>
<FormKeyValueView> <FormKeyValueView>
<template #key>Misskey</template> <template #key>Misskey</template>
<template #value>v{{ version }}</template> <template #value>v{{ version }}</template>
</FormKeyValueView> </FormKeyValueView>
<FormLink to="/about-misskey">{{ $ts.aboutMisskey }}</FormLink>
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
<FormKeyValueView> <FormKeyValueView>
<template #key>{{ $ts.administrator }}</template> <template #key>{{ $ts.administrator }}</template>
<template #value>{{ meta.maintainerName }}</template> <template #value>{{ $instance.maintainerName }}</template>
</FormKeyValueView> </FormKeyValueView>
<FormKeyValueView> <FormKeyValueView>
<template #key>{{ $ts.contact }}</template> <template #key>{{ $ts.contact }}</template>
<template #value>{{ meta.maintainerEmail }}</template> <template #value>{{ $instance.maintainerEmail }}</template>
</FormKeyValueView> </FormKeyValueView>
</FormGroup> </FormGroup>
<FormLink v-if="meta.tosUrl" :to="meta.tosUrl" external>{{ $ts.tos }}</FormLink> <FormLink v-if="$instance.tosUrl" :to="$instance.tosUrl" external>{{ $ts.tos }}</FormLink>
<FormGroup v-if="stats"> <FormSuspense :p="initStats">
<template #label>{{ $ts.statistics }}</template> <FormGroup>
<FormKeyValueView> <template #label>{{ $ts.statistics }}</template>
<template #key>{{ $ts.users }}</template> <FormKeyValueView>
<template #value>{{ number(stats.originalUsersCount) }}</template> <template #key>{{ $ts.users }}</template>
</FormKeyValueView> <template #value>{{ number(stats.originalUsersCount) }}</template>
<FormKeyValueView> </FormKeyValueView>
<template #key>{{ $ts.notes }}</template> <FormKeyValueView>
<template #value>{{ number(stats.originalNotesCount) }}</template> <template #key>{{ $ts.notes }}</template>
</FormKeyValueView> <template #value>{{ number(stats.originalNotesCount) }}</template>
</FormKeyValueView>
</FormGroup>
</FormSuspense>
<FormGroup>
<template #label>Well-known resources</template>
<FormLink :to="`/.well-known/host-meta`" external>host-meta</FormLink>
<FormLink :to="`/.well-known/host-meta.json`" external>host-meta.json</FormLink>
<FormLink :to="`/.well-known/nodeinfo`" external>nodeinfo</FormLink>
<FormLink :to="`/robots.txt`" external>robots.txt</FormLink>
<FormLink :to="`/manifest.json`" external>manifest.json</FormLink>
</FormGroup> </FormGroup>
</FormBase> </FormBase>
</template> </template>
@ -45,9 +63,12 @@ import FormLink from '@client/components/form/link.vue';
import FormBase from '@client/components/form/base.vue'; import FormBase from '@client/components/form/base.vue';
import FormGroup from '@client/components/form/group.vue'; import FormGroup from '@client/components/form/group.vue';
import FormKeyValueView from '@client/components/form/key-value-view.vue'; import FormKeyValueView from '@client/components/form/key-value-view.vue';
import FormTextarea from '@client/components/form/textarea.vue';
import FormSuspense from '@client/components/form/suspense.vue';
import * as os from '@client/os'; import * as os from '@client/os';
import number from '@client/filters/number'; import number from '@client/filters/number';
import * as symbols from '@client/symbols'; import * as symbols from '@client/symbols';
import { host } from '@client/config';
export default defineComponent({ export default defineComponent({
components: { components: {
@ -55,6 +76,8 @@ export default defineComponent({
FormGroup, FormGroup,
FormLink, FormLink,
FormKeyValueView, FormKeyValueView,
FormTextarea,
FormSuspense,
}, },
data() { data() {
@ -63,24 +86,17 @@ export default defineComponent({
title: this.$ts.instanceInfo, title: this.$ts.instanceInfo,
icon: 'fas fa-info-circle' icon: 'fas fa-info-circle'
}, },
host,
version, version,
instanceName, instanceName,
stats: null, stats: null,
initStats: () => os.api('stats', {
}).then((stats) => {
this.stats = stats;
})
} }
}, },
computed: {
meta() {
return this.$instance;
},
},
created() {
os.api('stats').then(stats => {
this.stats = stats;
});
},
methods: { methods: {
number number
} }
@ -88,18 +104,20 @@ export default defineComponent({
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.mmnnbwxb { .fwhjspax {
max-width: 800px; padding: 16px;
box-sizing: border-box; text-align: center;
margin: 0 auto;
> .logo { > .icon {
text-align: center; display: block;
margin: auto;
height: 64px;
border-radius: 8px;
}
> img { > .name {
vertical-align: bottom; display: block;
max-height: 100px; margin-top: 12px;
}
} }
} }
</style> </style>

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

@ -147,7 +147,6 @@ import * as os from '@client/os';
import number from '@client/filters/number'; import number from '@client/filters/number';
import bytes from '@client/filters/bytes'; import bytes from '@client/filters/bytes';
import * as symbols from '@client/symbols'; import * as symbols from '@client/symbols';
import { url } from '@client/config';
const chartLimit = 90; const chartLimit = 90;
const sum = (...arr) => arr.reduce((r, a) => r.map((b, i) => a[i] + b)); const sum = (...arr) => arr.reduce((r, a) => r.map((b, i) => a[i] + b));
@ -449,7 +448,7 @@ export default defineComponent({
.fnfelxur { .fnfelxur {
padding: 16px; padding: 16px;
> img { > .icon {
display: block; display: block;
margin: auto; margin: auto;
height: 64px; height: 64px;

25
src/client/ui/default.sidebar.vue
View File

@ -31,8 +31,10 @@
<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span> <i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
</MkA> </MkA>
<div class="divider"></div> <div class="divider"></div>
<div class="foo"> <div class="about">
<MkEmoji :normal="true" :no-style="true" emoji="🍮"/> <MkA class="link" to="/about" v-click-anime>
<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" class="_ghost"/>
</MkA>
</div> </div>
<!--<MisskeyLogo class="misskey"/>--> <!--<MisskeyLogo class="misskey"/>-->
</div> </div>
@ -260,14 +262,21 @@ export default defineComponent({
} }
} }
> .misskey { > .about {
fill: currentColor; fill: currentColor;
}
> .foo {
text-align: center;
padding: 8px 0 16px 0; padding: 8px 0 16px 0;
opacity: 0.5; text-align: center;
> .link {
display: block;
width: 32px;
margin: 0 auto;
img {
display: block;
width: 100%;
}
}
} }
> .item { > .item {