From 709290d2da334ee5db66392d6d5b54215277e00a Mon Sep 17 00:00:00 2001 From: syuilo Date: Wed, 12 Dec 2018 13:06:05 +0900 Subject: [PATCH] Improve mention display --- locales/ja-JP.yml | 1 + .../app/common/views/components/mention.vue | 70 +++++++++++++++++++ src/client/app/common/views/components/mfm.ts | 23 +++--- 3 files changed, 79 insertions(+), 15 deletions(-) create mode 100644 src/client/app/common/views/components/mention.vue diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index a98d055f83..ade4e68873 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -179,6 +179,7 @@ common: dev: "アプリの作成に失敗しました。再度お試しください。" ai-chan-kawaii: "藍ちゃかわいい" + you: "あなた" auth/views/form.vue: share-access: "{name}があなたのアカウントにアクセスすることを許可しますか?" diff --git a/src/client/app/common/views/components/mention.vue b/src/client/app/common/views/components/mention.vue new file mode 100644 index 0000000000..45c033743e --- /dev/null +++ b/src/client/app/common/views/components/mention.vue @@ -0,0 +1,70 @@ + + + + + diff --git a/src/client/app/common/views/components/mfm.ts b/src/client/app/common/views/components/mfm.ts index a6487aa4fb..399e8e884b 100644 --- a/src/client/app/common/views/components/mfm.ts +++ b/src/client/app/common/views/components/mfm.ts @@ -3,11 +3,12 @@ import { length } from 'stringz'; import { Node } from '../../../../../mfm/parser'; import parse from '../../../../../mfm/parse'; import MkUrl from './url.vue'; +import MkMention from './mention.vue'; import { concat, sum } from '../../../../../prelude/array'; import MkFormula from './formula.vue'; import MkGoogle from './google.vue'; -import { toUnicode } from 'punycode'; import syntaxHighlight from '../../../../../mfm/syntax-highlight'; +import { host } from '../../../config'; function getTextCount(tokens: Node[]): number { const rootCount = sum(tokens.filter(x => x.name === 'text').map(x => length(x.props.text))); @@ -158,21 +159,13 @@ export default Vue.component('misskey-flavored-markdown', { } case 'mention': { - const host = token.props.host == null && this.author && this.author.host != null ? this.author.host : token.props.host; - const canonical = host != null ? `@${token.props.username}@${toUnicode(host)}` : `@${token.props.username}`; - return (createElement as any)('router-link', { + return [createElement(MkMention, { key: Math.random(), - attrs: { - to: `/${canonical}`, - // TODO - //dataIsMe: (this as any).i && getAcct((this as any).i) == getAcct(token), - style: 'color:var(--mfmMention);' - }, - directives: [{ - name: 'user-preview', - value: canonical - }] - }, canonical); + props: { + host: (token.props.host == null && this.author && this.author.host != null ? this.author.host : token.props.host) || host, + username: token.props.username + } + })]; } case 'hashtag': {