natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

vue3: filterの移行 (#6590) 

* bytes

* notePage

* number

* acct, userName, userPage

* Move methods property

* fix

* Delete unnecessary file
This commit is contained in:
fuyu 2020-07-25 23:20:14 +09:00 committed by GitHub
parent 66cc7a28ba
commit 098d960f10
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
28 changed files with 183 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/client/components/autocomplete.vue
View File

@ -6,7 +6,7 @@
<span class="name"> <span class="name">
<mk-user-name :user="user" :key="user.id"/> <mk-user-name :user="user" :key="user.id"/>
</span> </span>
<span class="username">@{{ user | acct }}</span> <span class="username">@{{ acct(user) }}</span>
</li> </li>
<li @click="chooseUser()" @keydown="onKeydown" tabindex="-1" class="choose">{{ $t('selectUser') }}</li> <li @click="chooseUser()" @keydown="onKeydown" tabindex="-1" class="choose">{{ $t('selectUser') }}</li>
</ol> </ol>
@ -34,6 +34,7 @@ import contains from '../scripts/contains';
import { twemojiSvgBase } from '../../misc/twemoji-base'; import { twemojiSvgBase } from '../../misc/twemoji-base';
import { getStaticImageUrl } from '../scripts/get-static-image-url'; import { getStaticImageUrl } from '../scripts/get-static-image-url';
import MkUserSelect from './user-select.vue'; import MkUserSelect from './user-select.vue';
import { acct } from '../filters/user';
type EmojiDef = { type EmojiDef = {
emoji: string; emoji: string;
@ -381,7 +382,9 @@ export default defineComponent({
vm.$once('closed', () => { vm.$once('closed', () => {
this.textarea.focus(); this.textarea.focus();
}); });
} },
acct
} }
}); });
</script> </script>

11
src/client/components/avatar.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<span class="eiwwqkts" :class="{ cat }" :title="user | acct" v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" @click="onClick"> <span class="eiwwqkts" :class="{ cat }" :title="acct(user)" v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" @click="onClick">
<img class="inner" :src="url"/> <img class="inner" :src="url"/>
</span> </span>
<router-link class="eiwwqkts" :class="{ cat }" :to="user | userPage" :title="user | acct" :target="target" v-else v-user-preview="disablePreview ? undefined : user.id"> <router-link class="eiwwqkts" :class="{ cat }" :to="userPage(user)" :title="acct(user)" :target="target" v-else v-user-preview="disablePreview ? undefined : user.id">
<img class="inner" :src="url"/> <img class="inner" :src="url"/>
</router-link> </router-link>
</template> </template>
@ -10,6 +10,7 @@
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import { getStaticImageUrl } from '../scripts/get-static-image-url'; import { getStaticImageUrl } from '../scripts/get-static-image-url';
import { acct, userPage } from '../filters/user';
export default defineComponent({ export default defineComponent({
props: { props: {
@ -60,7 +61,9 @@ export default defineComponent({
}, },
onClick(e) { onClick(e) {
this.$emit('click', e); this.$emit('click', e);
} },
acct,
userPage
} }
}); });
</script> </script>
@ -95,7 +98,7 @@ export default defineComponent({
transform: rotate(-37.5deg) skew(-30deg); transform: rotate(-37.5deg) skew(-30deg);
} }
} }
.inner { .inner {
position: absolute; position: absolute;
bottom: 0; bottom: 0;

9
src/client/components/drive-window.vue
View File

@ -2,7 +2,7 @@
<x-window ref="window" :width="800" :height="500" @closed="() => { $emit('closed'); destroyDom(); }" :with-ok-button="true" :ok-button-disabled="(type === 'file') && (selected.length === 0)" @ok="ok()"> <x-window ref="window" :width="800" :height="500" @closed="() => { $emit('closed'); destroyDom(); }" :with-ok-button="true" :ok-button-disabled="(type === 'file') && (selected.length === 0)" @ok="ok()">
<template #header> <template #header>
{{ multiple ? ((type === 'file') ? $t('selectFiles') : $t('selectFolders')) : ((type === 'file') ? $t('selectFile') : $t('selectFolder')) }} {{ multiple ? ((type === 'file') ? $t('selectFiles') : $t('selectFolders')) : ((type === 'file') ? $t('selectFile') : $t('selectFolder')) }}
<span v-if="selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ selected.length | number }})</span> <span v-if="selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ number(number) }})</span>
</template> </template>
<div> <div>
<x-drive :multiple="multiple" @change-selection="onChangeSelection" :select="type"/> <x-drive :multiple="multiple" @change-selection="onChangeSelection" :select="type"/>
@ -14,6 +14,7 @@
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import XDrive from './drive.vue'; import XDrive from './drive.vue';
import XWindow from './window.vue'; import XWindow from './window.vue';
import number from '../filters/number';
export default defineComponent({ export default defineComponent({
components: { components: {
@ -25,7 +26,7 @@ export default defineComponent({
type: { type: {
type: String, type: String,
required: false, required: false,
default: 'file' default: 'file'
}, },
multiple: { multiple: {
type: Boolean, type: Boolean,
@ -47,7 +48,9 @@ export default defineComponent({
onChangeSelection(xs) { onChangeSelection(xs) {
this.selected = xs; this.selected = xs;
} },
number
} }
}); });
</script> </script>

7
src/client/components/drive.file.vue
View File

@ -37,6 +37,7 @@ import copyToClipboard from '../scripts/copy-to-clipboard';
//import updateBanner from '../api/update-banner'; //import updateBanner from '../api/update-banner';
import XFileThumbnail from './drive-file-thumbnail.vue'; import XFileThumbnail from './drive-file-thumbnail.vue';
import { faDownload, faLink, faICursor, faTrashAlt } from '@fortawesome/free-solid-svg-icons'; import { faDownload, faLink, faICursor, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
import bytes from '../filters/bytes';
export default defineComponent({ export default defineComponent({
components: { components: {
@ -72,7 +73,7 @@ export default defineComponent({
return this.$parent; return this.$parent;
}, },
title(): string { title(): string {
return `${this.file.name}\n${this.file.type} ${Vue.filter('bytes')(this.file.size)}`; return `${this.file.name}\n${this.file.type} ${bytes(this.file.size)}`;
} }
}, },
@ -181,7 +182,9 @@ export default defineComponent({
this.$root.api('drive/files/delete', { this.$root.api('drive/files/delete', {
fileId: this.file.id fileId: this.file.id
}); });
} },
bytes
} }
}); });
</script> </script>

27
src/client/components/instance-stats.vue
View File

@ -9,15 +9,15 @@
<div> <div>
<dl class="total"> <dl class="total">
<dt>{{ $t('total') }}</dt> <dt>{{ $t('total') }}</dt>
<dd>{{ info.originalUsersCount | number }}</dd> <dd>{{ number(info.originalUsersCount) }}</dd>
</dl> </dl>
<dl class="diff" :class="{ inc: usersLocalDoD > 0 }"> <dl class="diff" :class="{ inc: usersLocalDoD > 0 }">
<dt>{{ $t('dayOverDayChanges') }}</dt> <dt>{{ $t('dayOverDayChanges') }}</dt>
<dd>{{ usersLocalDoD | number }}</dd> <dd>{{ number(usersLocalDoD) }}</dd>
</dl> </dl>
<dl class="diff" :class="{ inc: usersLocalWoW > 0 }"> <dl class="diff" :class="{ inc: usersLocalWoW > 0 }">
<dt>{{ $t('weekOverWeekChanges') }}</dt> <dt>{{ $t('weekOverWeekChanges') }}</dt>
<dd>{{ usersLocalWoW | number }}</dd> <dd>{{ number(usersLocalWoW) }}</dd>
</dl> </dl>
</div> </div>
</div> </div>
@ -29,15 +29,15 @@
<div> <div>
<dl class="total"> <dl class="total">
<dt>{{ $t('total') }}</dt> <dt>{{ $t('total') }}</dt>
<dd>{{ (info.usersCount - info.originalUsersCount) | number }}</dd> <dd>{{ number((info.usersCount - info.originalUsersCount)) }}</dd>
</dl> </dl>
<dl class="diff" :class="{ inc: usersRemoteDoD > 0 }"> <dl class="diff" :class="{ inc: usersRemoteDoD > 0 }">
<dt>{{ $t('dayOverDayChanges') }}</dt> <dt>{{ $t('dayOverDayChanges') }}</dt>
<dd>{{ usersRemoteDoD | number }}</dd> <dd>{{ number(usersRemoteDoD) }}</dd>
</dl> </dl>
<dl class="diff" :class="{ inc: usersRemoteWoW > 0 }"> <dl class="diff" :class="{ inc: usersRemoteWoW > 0 }">
<dt>{{ $t('weekOverWeekChanges') }}</dt> <dt>{{ $t('weekOverWeekChanges') }}</dt>
<dd>{{ usersRemoteWoW | number }}</dd> <dd>{{ number(usersRemoteWoW) }}</dd>
</dl> </dl>
</div> </div>
</div> </div>
@ -49,15 +49,15 @@
<div> <div>
<dl class="total"> <dl class="total">
<dt>{{ $t('total') }}</dt> <dt>{{ $t('total') }}</dt>
<dd>{{ info.originalNotesCount | number }}</dd> <dd>{{ number(info.originalNotesCount) }}</dd>
</dl> </dl>
<dl class="diff" :class="{ inc: notesLocalDoD > 0 }"> <dl class="diff" :class="{ inc: notesLocalDoD > 0 }">
<dt>{{ $t('dayOverDayChanges') }}</dt> <dt>{{ $t('dayOverDayChanges') }}</dt>
<dd>{{ notesLocalDoD | number }}</dd> <dd>{{ number(notesLocalDoD) }}</dd>
</dl> </dl>
<dl class="diff" :class="{ inc: notesLocalWoW > 0 }"> <dl class="diff" :class="{ inc: notesLocalWoW > 0 }">
<dt>{{ $t('weekOverWeekChanges') }}</dt> <dt>{{ $t('weekOverWeekChanges') }}</dt>
<dd>{{ notesLocalWoW | number }}</dd> <dd>{{ number(notesLocalWoW) }}</dd>
</dl> </dl>
</div> </div>
</div> </div>
@ -69,15 +69,15 @@
<div> <div>
<dl class="total"> <dl class="total">
<dt>{{ $t('total') }}</dt> <dt>{{ $t('total') }}</dt>
<dd>{{ (info.notesCount - info.originalNotesCount) | number }}</dd> <dd>{{ number((info.notesCount - info.originalNotesCount)) }}</dd>
</dl> </dl>
<dl class="diff" :class="{ inc: notesRemoteDoD > 0 }"> <dl class="diff" :class="{ inc: notesRemoteDoD > 0 }">
<dt>{{ $t('dayOverDayChanges') }}</dt> <dt>{{ $t('dayOverDayChanges') }}</dt>
<dd>{{ notesRemoteDoD | number }}</dd> <dd>{{ number(notesRemoteDoD) }}</dd>
</dl> </dl>
<dl class="diff" :class="{ inc: notesRemoteWoW > 0 }"> <dl class="diff" :class="{ inc: notesRemoteWoW > 0 }">
<dt>{{ $t('weekOverWeekChanges') }}</dt> <dt>{{ $t('weekOverWeekChanges') }}</dt>
<dd>{{ notesRemoteWoW | number }}</dd> <dd>{{ number(notesRemoteWoW) }}</dd>
</dl> </dl>
</div> </div>
</div> </div>
@ -126,6 +126,7 @@ import { defineComponent } from 'vue';
import { faChartBar, faUser, faPencilAlt } from '@fortawesome/free-solid-svg-icons'; import { faChartBar, faUser, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
import Chart from 'chart.js'; import Chart from 'chart.js';
import MkSelect from './ui/select.vue'; import MkSelect from './ui/select.vue';
import number from '../filters/number';
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));
@ -580,6 +581,8 @@ export default defineComponent({
}] }]
}; };
}, },
number
} }
}); });
</script> </script>

9
src/client/components/note-header.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<header class="kkwtjztg"> <header class="kkwtjztg">
<router-link class="name" :to="note.user | userPage" v-user-preview="note.user.id"> <router-link class="name" :to="userPage(note.user)" v-user-preview="note.user.id">
<mk-user-name :user="note.user"/> <mk-user-name :user="note.user"/>
</router-link> </router-link>
<span class="is-bot" v-if="note.user.isBot">bot</span> <span class="is-bot" v-if="note.user.isBot">bot</span>
@ -26,6 +26,8 @@
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import { faHome, faUnlock, faEnvelope, faMobileAlt, faBookmark, faBiohazard } from '@fortawesome/free-solid-svg-icons'; import { faHome, faUnlock, faEnvelope, faMobileAlt, faBookmark, faBiohazard } from '@fortawesome/free-solid-svg-icons';
import { faBookmark as farBookmark } from '@fortawesome/free-regular-svg-icons'; import { faBookmark as farBookmark } from '@fortawesome/free-regular-svg-icons';
import notePage from '../filters/note';
import { userPage } from '../filters/user';
export default defineComponent({ export default defineComponent({
props: { props: {
@ -39,6 +41,11 @@ export default defineComponent({
return { return {
faHome, faUnlock, faEnvelope, faMobileAlt, faBookmark, farBookmark, faBiohazard faHome, faUnlock, faEnvelope, faMobileAlt, faBookmark, farBookmark, faBiohazard
}; };
},
methods: {
notePage,
userPage
} }
}); });
</script> </script>

7
src/client/components/note.vue
View File

@ -16,7 +16,7 @@
<mk-avatar class="avatar" :user="note.user"/> <mk-avatar class="avatar" :user="note.user"/>
<fa :icon="faRetweet"/> <fa :icon="faRetweet"/>
<i18n-t path="renotedBy" tag="span"> <i18n-t path="renotedBy" tag="span">
<router-link class="name" :to="note.user | userPage" v-user-preview="note.userId" place="user"> <router-link class="name" :to="userPage(note.user)" v-user-preview="note.userId" place="user">
<mk-user-name :user="note.user"/> <mk-user-name :user="note.user"/>
</router-link> </router-link>
</i18n-t> </i18n-t>
@ -106,6 +106,7 @@ import pleaseLogin from '../scripts/please-login';
import { focusPrev, focusNext } from '../scripts/focus'; import { focusPrev, focusNext } from '../scripts/focus';
import { url } from '../config'; import { url } from '../config';
import copyToClipboard from '../scripts/copy-to-clipboard'; import copyToClipboard from '../scripts/copy-to-clipboard';
import { userPage } from '../filters/user';
export default defineComponent({ export default defineComponent({
components: { components: {
@ -722,7 +723,9 @@ export default defineComponent({
focusAfter() { focusAfter() {
focusNext(this.$el); focusNext(this.$el);
} },
userPage
} }
}); });
</script> </script>

18
src/client/components/notification.vue
View File

@ -18,30 +18,30 @@
</div> </div>
<div class="tail"> <div class="tail">
<header> <header>
<router-link v-if="notification.user" class="name" :to="notification.user | userPage" v-user-preview="notification.user.id"><mk-user-name :user="notification.user"/></router-link> <router-link v-if="notification.user" class="name" :to="userPage(notification.user)" v-user-preview="notification.user.id"><mk-user-name :user="notification.user"/></router-link>
<span v-else>{{ notification.header }}</span> <span v-else>{{ notification.header }}</span>
<mk-time :time="notification.createdAt" v-if="withTime"/> <mk-time :time="notification.createdAt" v-if="withTime"/>
</header> </header>
<router-link v-if="notification.type === 'reaction'" class="text" :to="notification.note | notePage" :title="getNoteSummary(notification.note)"> <router-link v-if="notification.type === 'reaction'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
<fa :icon="faQuoteLeft"/> <fa :icon="faQuoteLeft"/>
<mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/> <mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
<fa :icon="faQuoteRight"/> <fa :icon="faQuoteRight"/>
</router-link> </router-link>
<router-link v-if="notification.type === 'renote'" class="text" :to="notification.note | notePage" :title="getNoteSummary(notification.note.renote)"> <router-link v-if="notification.type === 'renote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note.renote)">
<fa :icon="faQuoteLeft"/> <fa :icon="faQuoteLeft"/>
<mfm :text="getNoteSummary(notification.note.renote)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.renote.emojis"/> <mfm :text="getNoteSummary(notification.note.renote)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.renote.emojis"/>
<fa :icon="faQuoteRight"/> <fa :icon="faQuoteRight"/>
</router-link> </router-link>
<router-link v-if="notification.type === 'reply'" class="text" :to="notification.note | notePage" :title="getNoteSummary(notification.note)"> <router-link v-if="notification.type === 'reply'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
<mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/> <mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
</router-link> </router-link>
<router-link v-if="notification.type === 'mention'" class="text" :to="notification.note | notePage" :title="getNoteSummary(notification.note)"> <router-link v-if="notification.type === 'mention'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
<mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/> <mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
</router-link> </router-link>
<router-link v-if="notification.type === 'quote'" class="text" :to="notification.note | notePage" :title="getNoteSummary(notification.note)"> <router-link v-if="notification.type === 'quote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
<mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/> <mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
</router-link> </router-link>
<router-link v-if="notification.type === 'pollVote'" class="text" :to="notification.note | notePage" :title="getNoteSummary(notification.note)"> <router-link v-if="notification.type === 'pollVote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
<fa :icon="faQuoteLeft"/> <fa :icon="faQuoteLeft"/>
<mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/> <mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
<fa :icon="faQuoteRight"/> <fa :icon="faQuoteRight"/>
@ -64,6 +64,8 @@ import { faClock } from '@fortawesome/free-regular-svg-icons';
import noteSummary from '../../misc/get-note-summary'; import noteSummary from '../../misc/get-note-summary';
import XReactionIcon from './reaction-icon.vue'; import XReactionIcon from './reaction-icon.vue';
import MkFollowButton from './follow-button.vue'; import MkFollowButton from './follow-button.vue';
import notePage from '../filters/note';
import { userPage } from '../filters/user';
export default defineComponent({ export default defineComponent({
components: { components: {
@ -141,6 +143,8 @@ export default defineComponent({
this.groupInviteDone = true; this.groupInviteDone = true;
this.$root.api('users/groups/invitations/reject', { invitationId: this.notification.invitation.id }); this.$root.api('users/groups/invitations/reject', { invitationId: this.notification.invitation.id });
}, },
notePage,
userPage
} }
}); });
</script> </script>

6
src/client/components/page-preview.vue
View File

@ -8,7 +8,7 @@
<p v-if="page.summary" :title="page.summary">{{ page.summary.length > 85 ? page.summary.slice(0, 85) + '…' : page.summary }}</p> <p v-if="page.summary" :title="page.summary">{{ page.summary.length > 85 ? page.summary.slice(0, 85) + '…' : page.summary }}</p>
<footer> <footer>
<img class="icon" :src="page.user.avatarUrl"/> <img class="icon" :src="page.user.avatarUrl"/>
<p>{{ page.user | userName }}</p> <p>{{ userName(page.user) }}</p>
</footer> </footer>
</article> </article>
</router-link> </router-link>
@ -16,6 +16,7 @@
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import { userName } from '../filters/user';
export default defineComponent({ export default defineComponent({
props: { props: {
@ -24,6 +25,9 @@ export default defineComponent({
required: true required: true
}, },
}, },
methods: {
userName
}
}); });
</script> </script>

9
src/client/components/user-list.vue
View File

@ -12,7 +12,7 @@
<mk-avatar class="avatar" :user="user"/> <mk-avatar class="avatar" :user="user"/>
<div class="body"> <div class="body">
<div class="name"> <div class="name">
<router-link class="name" :to="user | userPage" v-user-preview="user.id"><mk-user-name :user="user"/></router-link> <router-link class="name" :to="userPage(user)" v-user-preview="user.id"><mk-user-name :user="user"/></router-link>
<span class="username"><mk-acct :user="user"/></span> <span class="username"><mk-acct :user="user"/></span>
</div> </div>
<div class="description"> <div class="description">
@ -34,6 +34,7 @@ import { defineComponent } from 'vue';
import paging from '../scripts/paging'; import paging from '../scripts/paging';
import MkContainer from './ui/container.vue'; import MkContainer from './ui/container.vue';
import MkFollowButton from './follow-button.vue'; import MkFollowButton from './follow-button.vue';
import { userPage } from '../filters/user';
export default defineComponent({ export default defineComponent({
components: { components: {
@ -62,6 +63,10 @@ export default defineComponent({
users() { users() {
return this.extract ? this.extract(this.items) : this.items; return this.extract ? this.extract(this.items) : this.items;
} }
},
methods: {
userPage
} }
}); });
</script> </script>
@ -96,7 +101,7 @@ export default defineComponent({
> .name { > .name {
font-weight: bold; font-weight: bold;
> .name { > .name {
margin-right: 8px; margin-right: 8px;
} }

6
src/client/components/user-preview.vue
View File

@ -4,7 +4,7 @@
<div class="banner" :style="u.bannerUrl ? `background-image: url(${u.bannerUrl})` : ''"></div> <div class="banner" :style="u.bannerUrl ? `background-image: url(${u.bannerUrl})` : ''"></div>
<mk-avatar class="avatar" :user="u" :disable-preview="true"/> <mk-avatar class="avatar" :user="u" :disable-preview="true"/>
<div class="title"> <div class="title">
<router-link class="name" :to="u | userPage"><mk-user-name :user="u" :nowrap="false"/></router-link> <router-link class="name" :to="userPage(u)"><mk-user-name :user="u" :nowrap="false"/></router-link>
<p class="username"><mk-acct :user="u"/></p> <p class="username"><mk-acct :user="u"/></p>
</div> </div>
<div class="description"> <div class="description">
@ -30,6 +30,7 @@
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import parseAcct from '../../misc/acct/parse'; import parseAcct from '../../misc/acct/parse';
import MkFollowButton from './follow-button.vue'; import MkFollowButton from './follow-button.vue';
import { userPage } from '../filters/user';
export default defineComponent({ export default defineComponent({
components: { components: {
@ -85,7 +86,8 @@ export default defineComponent({
this.closed = true; this.closed = true;
this.show = false; this.show = false;
if (this.$refs.content) (this.$refs.content as any).style.pointerEvents = 'none'; if (this.$refs.content) (this.$refs.content as any).style.pointerEvents = 'none';
} },
userPage
} }
}); });
</script> </script>

4
src/client/components/users-dialog.vue
View File

@ -7,7 +7,7 @@
</div> </div>
<div class="users"> <div class="users">
<router-link v-for="item in items" class="user" :key="item.id" :to="extract ? extract(item) : item | userPage"> <router-link v-for="item in items" class="user" :key="item.id" :to="userPage(extract ? extract(item) : item)">
<mk-avatar :user="extract ? extract(item) : item" class="avatar" :disable-link="true"/> <mk-avatar :user="extract ? extract(item) : item" class="avatar" :disable-link="true"/>
<div class="body"> <div class="body">
<mk-user-name :user="extract ? extract(item) : item" class="name"/> <mk-user-name :user="extract ? extract(item) : item" class="name"/>
@ -32,6 +32,7 @@ import { defineComponent } from 'vue';
import { faTimes } from '@fortawesome/free-solid-svg-icons'; import { faTimes } from '@fortawesome/free-solid-svg-icons';
import paging from '../scripts/paging'; import paging from '../scripts/paging';
import XModal from './modal.vue'; import XModal from './modal.vue';
import { userPage } from '../filters/user';
export default defineComponent({ export default defineComponent({
components: { components: {
@ -64,6 +65,7 @@ export default defineComponent({
close() { close() {
this.$refs.modal.close(); this.$refs.modal.close();
}, },
userPage
} }
}); });
</script> </script>

6
src/client/filters/bytes.ts
View File

@ -1,6 +1,4 @@
import Vue from 'vue'; export default (v, digits = 0) => {
Vue.filter('bytes', (v, digits = 0) => {
if (v == null) return '?'; if (v == null) return '?';
const sizes = ['B', 'KB', 'MB', 'GB', 'TB']; const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
if (v == 0) return '0'; if (v == 0) return '0';
@ -8,4 +6,4 @@ Vue.filter('bytes', (v, digits = 0) => {
if (isMinus) v = -v; if (isMinus) v = -v;
const i = Math.floor(Math.log(v) / Math.log(1024)); const i = Math.floor(Math.log(v) / Math.log(1024));
return (isMinus ? '-' : '') + (v / Math.pow(1024, i)).toFixed(digits).replace(/\.0+$/, '') + sizes[i]; return (isMinus ? '-' : '') + (v / Math.pow(1024, i)).toFixed(digits).replace(/\.0+$/, '') + sizes[i];
}); };

6
src/client/filters/note.ts
View File

@ -1,5 +1,3 @@
import Vue from 'vue'; export default note => {
Vue.filter('notePage', note => {
return `/notes/${note.id}`; return `/notes/${note.id}`;
}); };

4
src/client/filters/number.ts
View File

@ -1,3 +1 @@
import Vue from 'vue'; export default n => n == null ? 'N/A' : n.toLocaleString()
Vue.filter('number', n => n == null ? 'N/A' : n.toLocaleString());

15
src/client/filters/user.ts
View File

@ -1,16 +1,15 @@
import Vue from 'vue';
import getAcct from '../../misc/acct/render'; import getAcct from '../../misc/acct/render';
import getUserName from '../../misc/get-user-name'; import getUserName from '../../misc/get-user-name';
import { url } from '../config'; import { url } from '../config';
Vue.filter('acct', user => { export const acct = user => {
return getAcct(user); return getAcct(user);
}); }
Vue.filter('userName', user => { export const userName = user => {
return getUserName(user); return getUserName(user);
}); }
Vue.filter('userPage', (user, path?, absolute = false) => { export const userPage = (user, path?, absolute = false) => {
return `${absolute ? url : ''}/@${Vue.filter('acct')(user)}${(path ? `/${path}` : '')}`; return `${absolute ? url : ''}/@${acct(user)}${(path ? `/${path}` : '')}`;
}); }

3
src/client/pages/explore.vue
View File

@ -59,6 +59,7 @@ import { faChartLine, faPlus, faHashtag, faRocket } from '@fortawesome/free-soli
import { faBookmark, faCommentAlt } from '@fortawesome/free-regular-svg-icons'; import { faBookmark, faCommentAlt } from '@fortawesome/free-regular-svg-icons';
import XUserList from '../components/user-list.vue'; import XUserList from '../components/user-list.vue';
import MkContainer from '../components/ui/container.vue'; import MkContainer from '../components/ui/container.vue';
import number from '../filters/number';
export default defineComponent({ export default defineComponent({
metaInfo() { metaInfo() {
@ -112,7 +113,7 @@ export default defineComponent({
tagsLocal: [], tagsLocal: [],
tagsRemote: [], tagsRemote: [],
stats: null, stats: null,
num: Vue.filter('number'), num: number,
faBookmark, faChartLine, faCommentAlt, faPlus, faHashtag, faRocket faBookmark, faChartLine, faCommentAlt, faPlus, faHashtag, faRocket
}; };
}, },

9
src/client/pages/follow-requests.vue
View File

@ -15,8 +15,8 @@
<mk-avatar class="avatar" :user="req.follower"/> <mk-avatar class="avatar" :user="req.follower"/>
<div class="body"> <div class="body">
<div class="name"> <div class="name">
<router-link class="name" :to="req.follower | userPage" v-user-preview="req.follower.id"><mk-user-name :user="req.follower"/></router-link> <router-link class="name" :to="userPage(req.follower)" v-user-preview="req.follower.id"><mk-user-name :user="req.follower"/></router-link>
<p class="acct">@{{ req.follower | acct }}</p> <p class="acct">@{{ acct(req.follower) }}</p>
</div> </div>
<div class="description" v-if="req.follower.description" :title="req.follower.description"> <div class="description" v-if="req.follower.description" :title="req.follower.description">
<mfm :text="req.follower.description" :is-note="false" :author="req.follower" :i="$store.state.i" :custom-emojis="req.follower.emojis" :plain="true" :nowrap="true"/> <mfm :text="req.follower.description" :is-note="false" :author="req.follower" :i="$store.state.i" :custom-emojis="req.follower.emojis" :plain="true" :nowrap="true"/>
@ -36,6 +36,7 @@
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import { faUserClock, faCheck, faTimes } from '@fortawesome/free-solid-svg-icons'; import { faUserClock, faCheck, faTimes } from '@fortawesome/free-solid-svg-icons';
import MkPagination from '../components/ui/pagination.vue'; import MkPagination from '../components/ui/pagination.vue';
import { userPage, acct } from '../filters/user';
export default defineComponent({ export default defineComponent({
metaInfo() { metaInfo() {
@ -68,7 +69,9 @@ export default defineComponent({
this.$root.api('following/requests/reject', { userId: user.id }).then(() => { this.$root.api('following/requests/reject', { userId: user.id }).then(() => {
this.$refs.list.reload(); this.$refs.list.reload();
}); });
} },
userPage,
acct
} }
}); });
</script> </script>

22
src/client/pages/instance/federation.instance.vue
View File

@ -24,31 +24,31 @@
<div class="row"> <div class="row">
<div class="cell"> <div class="cell">
<div class="label"><fa :icon="faCloudDownloadAlt" fixed-width class="icon"/>{{ $t('following') }}</div> <div class="label"><fa :icon="faCloudDownloadAlt" fixed-width class="icon"/>{{ $t('following') }}</div>
<div class="data clickable" @click="showFollowing()">{{ instance.followingCount | number }}</div> <div class="data clickable" @click="showFollowing()">{{ number(instance.followingCount) }}</div>
</div> </div>
<div class="cell"> <div class="cell">
<div class="label"><fa :icon="faCloudUploadAlt" fixed-width class="icon"/>{{ $t('followers') }}</div> <div class="label"><fa :icon="faCloudUploadAlt" fixed-width class="icon"/>{{ $t('followers') }}</div>
<div class="data clickable" @click="showFollowers()">{{ instance.followersCount | number }}</div> <div class="data clickable" @click="showFollowers()">{{ number(instance.followersCount) }}</div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="cell"> <div class="cell">
<div class="label"><fa :icon="faUsers" fixed-width class="icon"/>{{ $t('users') }}</div> <div class="label"><fa :icon="faUsers" fixed-width class="icon"/>{{ $t('users') }}</div>
<div class="data clickable" @click="showUsers()">{{ instance.usersCount | number }}</div> <div class="data clickable" @click="showUsers()">{{ number(instance.usersCount) }}</div>
</div> </div>
<div class="cell"> <div class="cell">
<div class="label"><fa :icon="faPencilAlt" fixed-width class="icon"/>{{ $t('notes') }}</div> <div class="label"><fa :icon="faPencilAlt" fixed-width class="icon"/>{{ $t('notes') }}</div>
<div class="data">{{ instance.notesCount | number }}</div> <div class="data">{{ number(instance.notesCount) }}</div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="cell"> <div class="cell">
<div class="label"><fa :icon="faFileImage" fixed-width class="icon"/>{{ $t('files') }}</div> <div class="label"><fa :icon="faFileImage" fixed-width class="icon"/>{{ $t('files') }}</div>
<div class="data">{{ instance.driveFiles | number }}</div> <div class="data">{{ number(instance.driveFiles) }}</div>
</div> </div>
<div class="cell"> <div class="cell">
<div class="label"><fa :icon="faDatabase" fixed-width class="icon"/>{{ $t('storageUsage') }}</div> <div class="label"><fa :icon="faDatabase" fixed-width class="icon"/>{{ $t('storageUsage') }}</div>
<div class="data">{{ instance.driveUsage | bytes }}</div> <div class="data">{{ bytes(instance.driveUsage) }}</div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
@ -127,6 +127,8 @@ import MkSelect from '../../components/ui/select.vue';
import MkButton from '../../components/ui/button.vue'; import MkButton from '../../components/ui/button.vue';
import MkSwitch from '../../components/ui/switch.vue'; import MkSwitch from '../../components/ui/switch.vue';
import MkInfo from '../../components/ui/info.vue'; import MkInfo from '../../components/ui/info.vue';
import bytes from '../../filters/bytes';
import number from '../../filters/number';
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));
@ -220,7 +222,7 @@ export default defineComponent({
} }
}, },
async created() { async created() {
this.now = new Date(); this.now = new Date();
const [perHour, perDay] = await Promise.all([ const [perHour, perDay] = await Promise.all([
@ -474,7 +476,11 @@ export default defineComponent({
} }
} }
}); });
} },
bytes,
number
} }
}); });
</script> </script>

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

@ -48,9 +48,9 @@
<div class="cell"><div class="label">CPU</div>{{ serverInfo.cpu.model }}</div> <div class="cell"><div class="label">CPU</div>{{ serverInfo.cpu.model }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="cell"><div class="label">MEM total</div>{{ serverInfo.mem.total | bytes }}</div> <div class="cell"><div class="label">MEM total</div>{{ bytes(serverInfo.mem.total) }}</div>
<div class="cell"><div class="label">MEM used</div>{{ memUsage | bytes }} ({{ (memUsage / serverInfo.mem.total * 100).toFixed(0) }}%)</div> <div class="cell"><div class="label">MEM used</div>{{ bytes(memUsage) }} ({{ (memUsage / serverInfo.mem.total * 100).toFixed(0) }}%)</div>
<div class="cell"><div class="label">MEM free</div>{{ serverInfo.mem.total - memUsage | bytes }} ({{ ((serverInfo.mem.total - memUsage) / serverInfo.mem.total * 100).toFixed(0) }}%)</div> <div class="cell"><div class="label">MEM free</div>{{ bytes(serverInfo.mem.total - memUsage) }} ({{ ((serverInfo.mem.total - memUsage) / serverInfo.mem.total * 100).toFixed(0) }}%)</div>
</div> </div>
</div> </div>
</div> </div>
@ -63,9 +63,9 @@
<div class="_content" v-if="serverInfo"> <div class="_content" v-if="serverInfo">
<div class="table"> <div class="table">
<div class="row"> <div class="row">
<div class="cell"><div class="label">Disk total</div>{{ serverInfo.fs.total | bytes }}</div> <div class="cell"><div class="label">Disk total</div>{{ bytes(serverInfo.fs.total) }}</div>
<div class="cell"><div class="label">Disk used</div>{{ serverInfo.fs.used | bytes }} ({{ (serverInfo.fs.used / serverInfo.fs.total * 100).toFixed(0) }}%)</div> <div class="cell"><div class="label">Disk used</div>{{ bytes(serverInfo.fs.used) }} ({{ (serverInfo.fs.used / serverInfo.fs.total * 100).toFixed(0) }}%)</div>
<div class="cell"><div class="label">Disk free</div>{{ serverInfo.fs.total - serverInfo.fs.used | bytes }} ({{ ((serverInfo.fs.total - serverInfo.fs.used) / serverInfo.fs.total * 100).toFixed(0) }}%)</div> <div class="cell"><div class="label">Disk free</div>{{ bytes(serverInfo.fs.total - serverInfo.fs.used) }} ({{ ((serverInfo.fs.total - serverInfo.fs.used) / serverInfo.fs.total * 100).toFixed(0) }}%)</div>
</div> </div>
</div> </div>
</div> </div>
@ -107,6 +107,7 @@ import MkButton from '../../components/ui/button.vue';
import MkSelect from '../../components/ui/select.vue'; import MkSelect from '../../components/ui/select.vue';
import MkInput from '../../components/ui/input.vue'; import MkInput from '../../components/ui/input.vue';
import { version, url } from '../../config'; import { version, url } from '../../config';
import bytes from '../../filters/bytes';
const alpha = (hex, a) => { const alpha = (hex, a) => {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)!; const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)!;
@ -167,7 +168,7 @@ export default defineComponent({
mounted() { mounted() {
this.fetchLogs(); this.fetchLogs();
Chart.defaults.global.defaultFontColor = getComputedStyle(document.documentElement).getPropertyValue('--fg'); Chart.defaults.global.defaultFontColor = getComputedStyle(document.documentElement).getPropertyValue('--fg');
this.chartCpuMem = new Chart(this.$refs.cpumem, { this.chartCpuMem = new Chart(this.$refs.cpumem, {
@ -439,7 +440,9 @@ export default defineComponent({
for (const stats of statsLog.reverse()) { for (const stats of statsLog.reverse()) {
this.onStats(stats); this.onStats(stats);
} }
} },
bytes
} }
}); });
</script> </script>

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

@ -2,10 +2,10 @@
<section class="_card mk-queue-queue"> <section class="_card mk-queue-queue">
<div class="_title"><slot name="title"></slot></div> <div class="_title"><slot name="title"></slot></div>
<div class="_content status"> <div class="_content status">
<div class="cell"><div class="label">Process</div>{{ activeSincePrevTick | number }}</div> <div class="cell"><div class="label">Process</div>{{ number(activeSincePrevTick) }}</div>
<div class="cell"><div class="label">Active</div>{{ active | number }}</div> <div class="cell"><div class="label">Active</div>{{ number(active) }}</div>
<div class="cell"><div class="label">Waiting</div>{{ waiting | number }}</div> <div class="cell"><div class="label">Waiting</div>{{ number(waiting) }}</div>
<div class="cell"><div class="label">Delayed</div>{{ delayed | number }}</div> <div class="cell"><div class="label">Delayed</div>{{ number(delayed) }}</div>
</div> </div>
<div class="_content" style="margin-bottom: -8px;"> <div class="_content" style="margin-bottom: -8px;">
<canvas ref="chart"></canvas> <canvas ref="chart"></canvas>
@ -14,7 +14,7 @@
<div v-if="jobs.length > 0"> <div v-if="jobs.length > 0">
<div v-for="job in jobs" :key="job[0]"> <div v-for="job in jobs" :key="job[0]">
<span>{{ job[0] }}</span> <span>{{ job[0] }}</span>
<span style="margin-left: 8px; opacity: 0.7;">({{ job[1] | number }} jobs)</span> <span style="margin-left: 8px; opacity: 0.7;">({{ number(job[1]) }} jobs)</span>
</div> </div>
</div> </div>
<span v-else style="opacity: 0.5;">{{ $t('noJobs') }}</span> <span v-else style="opacity: 0.5;">{{ $t('noJobs') }}</span>
@ -25,6 +25,7 @@
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import Chart from 'chart.js'; import Chart from 'chart.js';
import number from '../../filters/number';
const alpha = (hex, a) => { const alpha = (hex, a) => {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)!; const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)!;
@ -179,6 +180,8 @@ export default defineComponent({
this.jobs = jobs; this.jobs = jobs;
}); });
}, },
number
} }
}); });
</script> </script>

7
src/client/pages/instance/users.user.vue
View File

@ -7,7 +7,7 @@
<div class="_title"> <div class="_title">
<mk-avatar class="avatar" :user="user"/> <mk-avatar class="avatar" :user="user"/>
<mk-user-name class="name" :user="user"/> <mk-user-name class="name" :user="user"/>
<span class="acct">@{{ user | acct }}</span> <span class="acct">@{{ acct(user) }}</span>
<span class="staff" v-if="user.isAdmin"><fa :icon="faBookmark"/></span> <span class="staff" v-if="user.isAdmin"><fa :icon="faBookmark"/></span>
<span class="staff" v-if="user.isModerator"><fa :icon="farBookmark"/></span> <span class="staff" v-if="user.isModerator"><fa :icon="farBookmark"/></span>
<span class="punished" v-if="user.isSilenced"><fa :icon="faMicrophoneSlash"/></span> <span class="punished" v-if="user.isSilenced"><fa :icon="faMicrophoneSlash"/></span>
@ -40,6 +40,7 @@ import { faSnowflake, faTrashAlt, faBookmark as farBookmark } from '@fortawesom
import MkButton from '../../components/ui/button.vue'; import MkButton from '../../components/ui/button.vue';
import MkSwitch from '../../components/ui/switch.vue'; import MkSwitch from '../../components/ui/switch.vue';
import Progress from '../../scripts/loading'; import Progress from '../../scripts/loading';
import { acct, userPage } from '../../filters/user';
export default defineComponent({ export default defineComponent({
components: { components: {
@ -84,7 +85,7 @@ export default defineComponent({
}, },
openProfile() { openProfile() {
window.open(Vue.filter('userPage')(this.user, null, true), '_blank'); window.open(userPage(this.user, null, true), '_blank');
}, },
async updateRemoteUser() { async updateRemoteUser() {
@ -175,6 +176,8 @@ export default defineComponent({
}); });
await this.refreshUser(); await this.refreshUser();
}, },
acct
} }
}); });
</script> </script>

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

@ -59,7 +59,7 @@
<div class="body"> <div class="body">
<header> <header>
<mk-user-name class="name" :user="user"/> <mk-user-name class="name" :user="user"/>
<span class="acct">@{{ user | acct }}</span> <span class="acct">@{{ acct(user) }}</span>
<span class="staff" v-if="user.isAdmin"><fa :icon="faBookmark"/></span> <span class="staff" v-if="user.isAdmin"><fa :icon="faBookmark"/></span>
<span class="staff" v-if="user.isModerator"><fa :icon="farBookmark"/></span> <span class="staff" v-if="user.isModerator"><fa :icon="farBookmark"/></span>
<span class="punished" v-if="user.isSilenced"><fa :icon="faMicrophoneSlash"/></span> <span class="punished" v-if="user.isSilenced"><fa :icon="faMicrophoneSlash"/></span>
@ -92,6 +92,7 @@ import MkInput from '../../components/ui/input.vue';
import MkSelect from '../../components/ui/select.vue'; import MkSelect from '../../components/ui/select.vue';
import MkPagination from '../../components/ui/pagination.vue'; import MkPagination from '../../components/ui/pagination.vue';
import MkUserSelect from '../../components/user-select.vue'; import MkUserSelect from '../../components/user-select.vue';
import { acct } from '../../filters/user';
export default defineComponent({ export default defineComponent({
metaInfo() { metaInfo() {
@ -223,7 +224,9 @@ export default defineComponent({
async show(user) { async show(user) {
this.$router.push('./users/' + user.id); this.$router.push('./users/' + user.id);
} },
acct
} }
}); });
</script> </script>
@ -234,7 +237,7 @@ export default defineComponent({
> ._content { > ._content {
max-height: 300px; max-height: 300px;
overflow: auto; overflow: auto;
> .users { > .users {
> .user { > .user {
display: flex; display: flex;

7
src/client/pages/messaging/index.vue
View File

@ -22,7 +22,7 @@
</header> </header>
<header v-else> <header v-else>
<span class="name"><mk-user-name :user="isMe(message) ? message.recipient : message.user"/></span> <span class="name"><mk-user-name :user="isMe(message) ? message.recipient : message.user"/></span>
<span class="username">@{{ isMe(message) ? message.recipient : message.user | acct }}</span> <span class="username">@{{ acct(isMe(message) ? message.recipient : message.user) }}</span>
<mk-time :time="message.createdAt"/> <mk-time :time="message.createdAt"/>
</header> </header>
<div class="body"> <div class="body">
@ -45,6 +45,7 @@ import { faUser, faUsers, faComments, faPlus } from '@fortawesome/free-solid-svg
import getAcct from '../../../misc/acct/render'; import getAcct from '../../../misc/acct/render';
import MkButton from '../../components/ui/button.vue'; import MkButton from '../../components/ui/button.vue';
import MkUserSelect from '../../components/user-select.vue'; import MkUserSelect from '../../components/user-select.vue';
import { acct } from '../../filters/user';
export default defineComponent({ export default defineComponent({
components: { components: {
@ -159,7 +160,9 @@ export default defineComponent({
}); });
if (canceled) return; if (canceled) return;
this.$router.push(`/my/messaging/group/${group.id}`); this.$router.push(`/my/messaging/group/${group.id}`);
} },
acct
} }
}); });
</script> </script>

9
src/client/pages/my-settings/mute-block.vue
View File

@ -7,7 +7,7 @@
<template #empty><span>{{ $t('noUsers') }}</span></template> <template #empty><span>{{ $t('noUsers') }}</span></template>
<template #default="{items}"> <template #default="{items}">
<div class="user" v-for="(mute, i) in items" :key="mute.id"> <div class="user" v-for="(mute, i) in items" :key="mute.id">
<router-link class="name" :to="mute.mutee | userPage"> <router-link class="name" :to="userPage(mute.mutee)">
<mk-acct :user="mute.mutee"/> <mk-acct :user="mute.mutee"/>
</router-link> </router-link>
</div> </div>
@ -20,7 +20,7 @@
<template #empty><span>{{ $t('noUsers') }}</span></template> <template #empty><span>{{ $t('noUsers') }}</span></template>
<template #default="{items}"> <template #default="{items}">
<div class="user" v-for="(block, i) in items" :key="block.id"> <div class="user" v-for="(block, i) in items" :key="block.id">
<router-link class="name" :to="block.blockee | userPage"> <router-link class="name" :to="userPage(block.blockee)">
<mk-acct :user="block.blockee"/> <mk-acct :user="block.blockee"/>
</router-link> </router-link>
</div> </div>
@ -34,6 +34,7 @@
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import { faBan } from '@fortawesome/free-solid-svg-icons'; import { faBan } from '@fortawesome/free-solid-svg-icons';
import MkPagination from '../../components/ui/pagination.vue'; import MkPagination from '../../components/ui/pagination.vue';
import { userPage } from '../../filters/user';
export default defineComponent({ export default defineComponent({
components: { components: {
@ -53,6 +54,10 @@ export default defineComponent({
faBan faBan
} }
}, },
methods: {
userPage
}
}); });
</script> </script>

11
src/client/pages/user/follow-list.vue
View File

@ -4,8 +4,8 @@
<mk-avatar class="avatar" :user="user"/> <mk-avatar class="avatar" :user="user"/>
<div class="body"> <div class="body">
<div class="name"> <div class="name">
<router-link class="name" :to="user | userPage" v-user-preview="user.id"><mk-user-name :user="user"/></router-link> <router-link class="name" :to="userPage(user)" v-user-preview="user.id"><mk-user-name :user="user"/></router-link>
<p class="acct">@{{ user | acct }}</p> <p class="acct">@{{ acct(user) }}</p>
</div> </div>
<div class="description" v-if="user.description" :title="user.description"> <div class="description" v-if="user.description" :title="user.description">
<mfm :text="user.description" :is-note="false" :author="user" :i="$store.state.i" :custom-emojis="user.emojis" :plain="true" :nowrap="true"/> <mfm :text="user.description" :is-note="false" :author="user" :i="$store.state.i" :custom-emojis="user.emojis" :plain="true" :nowrap="true"/>
@ -21,6 +21,7 @@ import { defineComponent } from 'vue';
import parseAcct from '../../../misc/acct/parse'; import parseAcct from '../../../misc/acct/parse';
import MkFollowButton from '../../components/follow-button.vue'; import MkFollowButton from '../../components/follow-button.vue';
import MkPagination from '../../components/ui/pagination.vue'; import MkPagination from '../../components/ui/pagination.vue';
import { userPage, acct } from '../../filters/user';
export default defineComponent({ export default defineComponent({
components: { components: {
@ -55,6 +56,12 @@ export default defineComponent({
'$route'() { '$route'() {
this.$refs.list.reload(); this.$refs.list.reload();
} }
},
methods: {
userPage,
acct
} }
}); });
</script> </script>

4
src/client/pages/user/index.photos.vue
View File

@ -5,7 +5,7 @@
<router-link v-for="(image, i) in images" :key="i" <router-link v-for="(image, i) in images" :key="i"
class="img" class="img"
:style="`background-image: url(${thumbnail(image.file)})`" :style="`background-image: url(${thumbnail(image.file)})`"
:to="image.note | notePage" :to="notePage(image.note)"
></router-link> ></router-link>
</div> </div>
<p class="empty" v-if="!fetching && images.length == 0">{{ $t('nothing') }}</p> <p class="empty" v-if="!fetching && images.length == 0">{{ $t('nothing') }}</p>
@ -15,6 +15,7 @@
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import { getStaticImageUrl } from '../../scripts/get-static-image-url'; import { getStaticImageUrl } from '../../scripts/get-static-image-url';
import notePage from '../../filters/note';
export default defineComponent({ export default defineComponent({
props: ['user'], props: ['user'],
@ -57,6 +58,7 @@ export default defineComponent({
? getStaticImageUrl(image.thumbnailUrl) ? getStaticImageUrl(image.thumbnailUrl)
: image.thumbnailUrl; : image.thumbnailUrl;
}, },
notePage
}, },
}); });
</script> </script>

22
src/client/pages/user/index.vue
View File

@ -66,16 +66,16 @@
</dl> </dl>
</div> </div>
<div class="status"> <div class="status">
<router-link :to="user | userPage()" :class="{ active: $route.name === 'user' }"> <router-link :to="userPage(user)" :class="{ active: $route.name === 'user' }">
<b>{{ user.notesCount | number }}</b> <b>{{ number(user.notesCount) }}</b>
<span>{{ $t('notes') }}</span> <span>{{ $t('notes') }}</span>
</router-link> </router-link>
<router-link :to="user | userPage('following')" :class="{ active: $route.name === 'userFollowing' }"> <router-link :to="userPage(user, 'following')" :class="{ active: $route.name === 'userFollowing' }">
<b>{{ user.followingCount | number }}</b> <b>{{ number(user.followingCount) }}</b>
<span>{{ $t('following') }}</span> <span>{{ $t('following') }}</span>
</router-link> </router-link>
<router-link :to="user | userPage('followers')" :class="{ active: $route.name === 'userFollowers' }"> <router-link :to="userPage(user, 'followers')" :class="{ active: $route.name === 'userFollowers' }">
<b>{{ user.followersCount | number }}</b> <b>{{ number(user.followersCount) }}</b>
<span>{{ $t('followers') }}</span> <span>{{ $t('followers') }}</span>
</router-link> </router-link>
</div> </div>
@ -119,6 +119,8 @@ import MkRemoteCaution from '../../components/remote-caution.vue';
import Progress from '../../scripts/loading'; import Progress from '../../scripts/loading';
import parseAcct from '../../../misc/acct/parse'; import parseAcct from '../../../misc/acct/parse';
import { getScrollPosition } from '../../scripts/scroll'; import { getScrollPosition } from '../../scripts/scroll';
import number from '../../filters/number';
import { userPage, acct } from '../../filters/user';
export default defineComponent({ export default defineComponent({
components: { components: {
@ -133,7 +135,7 @@ export default defineComponent({
metaInfo() { metaInfo() {
return { return {
title: (this.user ? '@' + Vue.filter('acct')(this.user).replace('@', ' | ') : null) as string title: (this.user ? '@' + acct(this.user).replace('@', ' | ') : null) as string
}; };
}, },
@ -210,6 +212,10 @@ export default defineComponent({
const pos = -(top / z); const pos = -(top / z);
banner.style.backgroundPosition = `center calc(50% - ${pos}px)`; banner.style.backgroundPosition = `center calc(50% - ${pos}px)`;
}, },
number,
userPage
} }
}); });
</script> </script>
@ -271,7 +277,7 @@ export default defineComponent({
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
padding: 8px; padding: 8px;
border-radius: 24px; border-radius: 24px;
> .menu { > .menu {
vertical-align: bottom; vertical-align: bottom;
height: 31px; height: 31px;