Sharkey/src/client/app/desktop/views/pages/user/user.profile.vue

165 lines
3.6 KiB
Vue
Raw Normal View History

2018-02-14 17:32:13 +02:00
<template>
2018-02-20 18:39:51 +02:00
<div class="profile">
2018-02-18 05:35:18 +02:00
<div class="friend-form" v-if="os.isSignedIn && os.i.id != user.id">
2018-02-14 17:32:13 +02:00
<mk-follow-button :user="user" size="big"/>
2018-04-14 19:04:40 +03:00
<p class="followed" v-if="user.isFollowed">%i18n:@follows-you%</p>
2018-04-19 06:43:25 +03:00
<p class="stalk">
<span v-if="user.isStalking">%i18n:@stalking% <a @click="unstalk">%i18n:@unstalk%</a></span>
<span v-if="!user.isStalking"><a @click="stalk">%i18n:@stalk%</a></span>
</p>
<p class="mute">
<span v-if="user.isMuted">%i18n:@muted% <a @click="unmute">%i18n:@unmute%</a></span>
<span v-if="!user.isMuted"><a @click="mute">%i18n:@mute%</a></span>
</p>
2018-02-14 17:32:13 +02:00
</div>
<div class="description" v-if="user.description">{{ user.description }}</div>
2018-04-07 21:58:11 +03:00
<div class="birthday" v-if="user.host === null && user.profile.birthday">
<p>%fa:birthday-cake%{{ user.profile.birthday.replace('-', '年').replace('-', '月') + '日' }} ({{ age }})</p>
2018-02-14 17:32:13 +02:00
</div>
2018-04-07 21:58:11 +03:00
<div class="twitter" v-if="user.host === null && user.twitter">
<p>%fa:B twitter%<a :href="`https://twitter.com/${user.twitter.screenName}`" target="_blank">@{{ user.twitter.screenName }}</a></p>
2018-02-14 17:32:13 +02:00
</div>
<div class="status">
2018-04-07 20:30:37 +03:00
<p class="notes-count">%fa:angle-right%<a>{{ user.notesCount }}</a><b>投稿</b></p>
2018-03-29 08:48:47 +03:00
<p class="following">%fa:angle-right%<a @click="showFollowing">{{ user.followingCount }}</a>人を<b>フォロー</b></p>
<p class="followers">%fa:angle-right%<a @click="showFollowers">{{ user.followersCount }}</a>人の<b>フォロワー</b></p>
2018-02-14 17:32:13 +02:00
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
2018-02-22 16:05:05 +02:00
import * as age from 's-age';
2018-02-19 16:37:09 +02:00
import MkFollowingWindow from '../../components/following-window.vue';
import MkFollowersWindow from '../../components/followers-window.vue';
2018-02-14 17:32:13 +02:00
export default Vue.extend({
props: ['user'],
computed: {
age(): number {
2018-04-07 21:58:11 +03:00
return age(this.user.profile.birthday);
2018-02-14 17:32:13 +02:00
}
},
methods: {
showFollowing() {
2018-02-22 16:53:07 +02:00
(this as any).os.new(MkFollowingWindow, {
user: this.user
});
2018-02-14 17:32:13 +02:00
},
showFollowers() {
2018-02-22 16:53:07 +02:00
(this as any).os.new(MkFollowersWindow, {
user: this.user
});
2018-02-14 17:32:13 +02:00
},
2018-04-19 06:43:25 +03:00
stalk() {
(this as any).api('following/stalk', {
userId: this.user.id
}).then(() => {
this.user.isStalking = true;
}, () => {
alert('error');
});
},
unstalk() {
(this as any).api('following/unstalk', {
userId: this.user.id
}).then(() => {
this.user.isStalking = false;
}, () => {
alert('error');
});
},
2018-02-14 17:32:13 +02:00
mute() {
2018-02-18 05:35:18 +02:00
(this as any).api('mute/create', {
2018-03-29 08:48:47 +03:00
userId: this.user.id
2018-02-14 17:32:13 +02:00
}).then(() => {
2018-03-29 08:48:47 +03:00
this.user.isMuted = true;
2018-02-19 16:37:09 +02:00
}, () => {
2018-02-14 17:32:13 +02:00
alert('error');
});
},
unmute() {
2018-02-18 05:35:18 +02:00
(this as any).api('mute/delete', {
2018-03-29 08:48:47 +03:00
userId: this.user.id
2018-02-14 17:32:13 +02:00
}).then(() => {
2018-03-29 08:48:47 +03:00
this.user.isMuted = false;
2018-02-19 16:37:09 +02:00
}, () => {
2018-02-14 17:32:13 +02:00
alert('error');
});
}
}
});
</script>
<style lang="stylus" scoped>
2018-02-20 18:39:51 +02:00
.profile
2018-02-14 17:32:13 +02:00
background #fff
border solid 1px rgba(0, 0, 0, 0.075)
border-radius 6px
> *:first-child
border-top none !important
> .friend-form
padding 16px
border-top solid 1px #eee
2018-02-16 20:01:00 +02:00
> .mk-big-follow-button
2018-02-14 17:32:13 +02:00
width 100%
> .followed
margin 12px 0 0 0
padding 0
text-align center
line-height 24px
font-size 0.8em
color #71afc7
background #eefaff
border-radius 4px
> .description
padding 16px
color #555
border-top solid 1px #eee
> .birthday
padding 16px
color #555
border-top solid 1px #eee
> p
margin 0
> i
margin-right 8px
> .twitter
padding 16px
color #555
border-top solid 1px #eee
> p
margin 0
> i
margin-right 8px
> .status
padding 16px
color #555
border-top solid 1px #eee
> p
margin 8px 0
> i
margin-left 8px
margin-right 8px
</style>