This commit is contained in:
syuilo 2018-04-08 19:27:53 +09:00
parent 282f685065
commit 2076ab876a
3 changed files with 33 additions and 52 deletions
src/client/app/mobile/views

View file

@ -3,7 +3,7 @@
<template v-if="notification.type == 'reaction'"> <template v-if="notification.type == 'reaction'">
<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/> <img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
<div class="text"> <div class="text">
<p><mk-reaction-icon :reaction="notification.reaction"/>{{ name }}</p> <p><mk-reaction-icon :reaction="notification.reaction"/>{{ getUserName(notification.user) }}</p>
<p class="note-ref">%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%</p> <p class="note-ref">%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%</p>
</div> </div>
</template> </template>
@ -11,7 +11,7 @@
<template v-if="notification.type == 'renote'"> <template v-if="notification.type == 'renote'">
<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/> <img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
<div class="text"> <div class="text">
<p>%fa:retweet%{{ noteerName }}</p> <p>%fa:retweet%{{ getUserName(notification.note.user) }}</p>
<p class="note-ref">%fa:quote-left%{{ getNoteSummary(notification.note.renote) }}%fa:quote-right%</p> <p class="note-ref">%fa:quote-left%{{ getNoteSummary(notification.note.renote) }}%fa:quote-right%</p>
</div> </div>
</template> </template>
@ -19,7 +19,7 @@
<template v-if="notification.type == 'quote'"> <template v-if="notification.type == 'quote'">
<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/> <img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
<div class="text"> <div class="text">
<p>%fa:quote-left%{{ noteerName }}</p> <p>%fa:quote-left%{{ getUserName(notification.note.user) }}</p>
<p class="note-preview">{{ getNoteSummary(notification.note) }}</p> <p class="note-preview">{{ getNoteSummary(notification.note) }}</p>
</div> </div>
</template> </template>
@ -27,14 +27,14 @@
<template v-if="notification.type == 'follow'"> <template v-if="notification.type == 'follow'">
<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/> <img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
<div class="text"> <div class="text">
<p>%fa:user-plus%{{ name }}</p> <p>%fa:user-plus%{{ getUserName(notification.user) }}</p>
</div> </div>
</template> </template>
<template v-if="notification.type == 'reply'"> <template v-if="notification.type == 'reply'">
<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/> <img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
<div class="text"> <div class="text">
<p>%fa:reply%{{ noteerName }}</p> <p>%fa:reply%{{ getUserName(notification.note.user) }}</p>
<p class="note-preview">{{ getNoteSummary(notification.note) }}</p> <p class="note-preview">{{ getNoteSummary(notification.note) }}</p>
</div> </div>
</template> </template>
@ -42,7 +42,7 @@
<template v-if="notification.type == 'mention'"> <template v-if="notification.type == 'mention'">
<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/> <img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
<div class="text"> <div class="text">
<p>%fa:at%{{ noteerName }}</p> <p>%fa:at%{{ getUserName(notification.note.user) }}</p>
<p class="note-preview">{{ getNoteSummary(notification.note) }}</p> <p class="note-preview">{{ getNoteSummary(notification.note) }}</p>
</div> </div>
</template> </template>
@ -50,7 +50,7 @@
<template v-if="notification.type == 'poll_vote'"> <template v-if="notification.type == 'poll_vote'">
<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/> <img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
<div class="text"> <div class="text">
<p>%fa:chart-pie%{{ name }}</p> <p>%fa:chart-pie%{{ getUserName(notification.user) }}</p>
<p class="note-ref">%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%</p> <p class="note-ref">%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%</p>
</div> </div>
</template> </template>
@ -64,17 +64,10 @@ import getUserName from '../../../../../renderers/get-user-name';
export default Vue.extend({ export default Vue.extend({
props: ['notification'], props: ['notification'],
computed: {
name() {
return getUserName(this.notification.user);
},
noteerName() {
return getUserName(this.notification.note.user);
}
},
data() { data() {
return { return {
getNoteSummary getNoteSummary,
getUserName
}; };
} }
}); });

View file

@ -2,15 +2,15 @@
<div class="mk-notification"> <div class="mk-notification">
<div class="notification reaction" v-if="notification.type == 'reaction'"> <div class="notification reaction" v-if="notification.type == 'reaction'">
<mk-time :time="notification.createdAt"/> <mk-time :time="notification.createdAt"/>
<router-link class="avatar-anchor" :to="`/@${acct}`"> <router-link class="avatar-anchor" :to="`/@${getAcct(notification.user)}`">
<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/> <img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
</router-link> </router-link>
<div class="text"> <div class="text">
<p> <p>
<mk-reaction-icon :reaction="notification.reaction"/> <mk-reaction-icon :reaction="notification.reaction"/>
<router-link :to="`/@${acct}`">{{ getUserName(notification.user) }}</router-link> <router-link :to="`/@${getAcct(notification.user)}`">{{ getUserName(notification.user) }}</router-link>
</p> </p>
<router-link class="note-ref" :to="`/@${acct}/${notification.note.id}`"> <router-link class="note-ref" :to="`/@${getAcct(notification.note.user)}/${notification.note.id}`">
%fa:quote-left%{{ getNoteSummary(notification.note) }} %fa:quote-left%{{ getNoteSummary(notification.note) }}
%fa:quote-right% %fa:quote-right%
</router-link> </router-link>
@ -19,15 +19,15 @@
<div class="notification renote" v-if="notification.type == 'renote'"> <div class="notification renote" v-if="notification.type == 'renote'">
<mk-time :time="notification.createdAt"/> <mk-time :time="notification.createdAt"/>
<router-link class="avatar-anchor" :to="`/@${acct}`"> <router-link class="avatar-anchor" :to="`/@${getAcct(notification.user)}`">
<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/> <img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
</router-link> </router-link>
<div class="text"> <div class="text">
<p> <p>
%fa:retweet% %fa:retweet%
<router-link :to="`/@${acct}`">{{ getUserName(notification.note.user) }}</router-link> <router-link :to="`/@${getAcct(notification.user)}`">{{ getUserName(notification.user) }}</router-link>
</p> </p>
<router-link class="note-ref" :to="`/@${acct}/${notification.note.id}`"> <router-link class="note-ref" :to="`/@${getAcct(notification.note.user)}/${notification.note.id}`">
%fa:quote-left%{{ getNoteSummary(notification.note.renote) }}%fa:quote-right% %fa:quote-left%{{ getNoteSummary(notification.note.renote) }}%fa:quote-right%
</router-link> </router-link>
</div> </div>
@ -39,13 +39,13 @@
<div class="notification follow" v-if="notification.type == 'follow'"> <div class="notification follow" v-if="notification.type == 'follow'">
<mk-time :time="notification.createdAt"/> <mk-time :time="notification.createdAt"/>
<router-link class="avatar-anchor" :to="`/@${acct}`"> <router-link class="avatar-anchor" :to="`/@${getAcct(notification.user)}`">
<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/> <img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
</router-link> </router-link>
<div class="text"> <div class="text">
<p> <p>
%fa:user-plus% %fa:user-plus%
<router-link :to="`/@${acct}`">{{ getUserName(notification.user) }}</router-link> <router-link :to="`/@${getAcct(notification.user)}`">{{ getUserName(notification.user) }}</router-link>
</p> </p>
</div> </div>
</div> </div>
@ -60,15 +60,15 @@
<div class="notification poll_vote" v-if="notification.type == 'poll_vote'"> <div class="notification poll_vote" v-if="notification.type == 'poll_vote'">
<mk-time :time="notification.createdAt"/> <mk-time :time="notification.createdAt"/>
<router-link class="avatar-anchor" :to="`/@${acct}`"> <router-link class="avatar-anchor" :to="`/@${getAcct(notification.user)}`">
<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/> <img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
</router-link> </router-link>
<div class="text"> <div class="text">
<p> <p>
%fa:chart-pie% %fa:chart-pie%
<router-link :to="`/@${acct}`">{{ getUserName(notification.user) }}</router-link> <router-link :to="`/@${getAcct(notification.user)}`">{{ getUserName(notification.user) }}</router-link>
</p> </p>
<router-link class="note-ref" :to="`/@${acct}/${notification.note.id}`"> <router-link class="note-ref" :to="`/@${getAcct(notification.note.user)}/${notification.note.id}`">
%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right% %fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%
</router-link> </router-link>
</div> </div>
@ -84,20 +84,11 @@ import getUserName from '../../../../../renderers/get-user-name';
export default Vue.extend({ export default Vue.extend({
props: ['notification'], props: ['notification'],
computed: {
acct() {
return getAcct(this.notification.user);
},
name() {
return getUserName(this.notification.user);
},
noteerName() {
return getUserName(this.notification.note.user);
}
},
data() { data() {
return { return {
getNoteSummary getNoteSummary,
getAcct,
getUserName
}; };
} }
}); });

View file

@ -12,8 +12,8 @@
<mk-follow-button v-if="os.isSignedIn && os.i.id != user.id" :user="user"/> <mk-follow-button v-if="os.isSignedIn && os.i.id != user.id" :user="user"/>
</div> </div>
<div class="title"> <div class="title">
<h1>{{ user }}</h1> <h1>{{ getUserName(user) }}</h1>
<span class="username">@{{ acct }}</span> <span class="username">@{{ getAcct(user) }}</span>
<span class="followed" v-if="user.isFollowed">%i18n:mobile.tags.mk-user.follows-you%</span> <span class="followed" v-if="user.isFollowed">%i18n:mobile.tags.mk-user.follows-you%</span>
</div> </div>
<div class="description">{{ user.description }}</div> <div class="description">{{ user.description }}</div>
@ -30,11 +30,11 @@
<b>{{ user.notesCount | number }}</b> <b>{{ user.notesCount | number }}</b>
<i>%i18n:mobile.tags.mk-user.notes%</i> <i>%i18n:mobile.tags.mk-user.notes%</i>
</a> </a>
<a :href="`@${acct}/following`"> <a :href="`@${getAcct(user)}/following`">
<b>{{ user.followingCount | number }}</b> <b>{{ user.followingCount | number }}</b>
<i>%i18n:mobile.tags.mk-user.following%</i> <i>%i18n:mobile.tags.mk-user.following%</i>
</a> </a>
<a :href="`@${acct}/followers`"> <a :href="`@${getAcct(user)}/followers`">
<b>{{ user.followersCount | number }}</b> <b>{{ user.followersCount | number }}</b>
<i>%i18n:mobile.tags.mk-user.followers%</i> <i>%i18n:mobile.tags.mk-user.followers%</i>
</a> </a>
@ -60,6 +60,7 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import * as age from 's-age'; import * as age from 's-age';
import parseAcct from '../../../../../acct/parse';
import getAcct from '../../../../../acct/render'; import getAcct from '../../../../../acct/render';
import getUserName from '../../../../../renderers/get-user-name'; import getUserName from '../../../../../renderers/get-user-name';
import Progress from '../../../common/scripts/loading'; import Progress from '../../../common/scripts/loading';
@ -73,18 +74,14 @@ export default Vue.extend({
return { return {
fetching: true, fetching: true,
user: null, user: null,
page: 'home' page: 'home',
getAcct,
getUserName
}; };
}, },
computed: { computed: {
acct() {
return this.getAcct(this.user);
},
age(): number { age(): number {
return age(this.user.profile.birthday); return age(this.user.profile.birthday);
},
name() {
return getUserName(this.user);
} }
}, },
watch: { watch: {
@ -105,7 +102,7 @@ export default Vue.extend({
this.fetching = false; this.fetching = false;
Progress.done(); Progress.done();
document.title = this.name + ' | Misskey'; document.title = this.getUserName(this.user) + ' | Misskey';
}); });
} }
} }