This commit is contained in:
syuilo 2018-04-26 16:10:01 +09:00
parent 013851749f
commit bb204b2ef7
2 changed files with 46 additions and 11 deletions

View file

@ -19,6 +19,7 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
export default Vue.extend({ export default Vue.extend({
props: { props: {
user: { user: {
@ -30,6 +31,7 @@ export default Vue.extend({
default: 'compact' default: 'compact'
} }
}, },
data() { data() {
return { return {
wait: false, wait: false,
@ -37,6 +39,7 @@ export default Vue.extend({
connectionId: null connectionId: null
}; };
}, },
mounted() { mounted() {
this.connection = (this as any).os.stream.getConnection(); this.connection = (this as any).os.stream.getConnection();
this.connectionId = (this as any).os.stream.use(); this.connectionId = (this as any).os.stream.use();
@ -44,13 +47,14 @@ export default Vue.extend({
this.connection.on('follow', this.onFollow); this.connection.on('follow', this.onFollow);
this.connection.on('unfollow', this.onUnfollow); this.connection.on('unfollow', this.onUnfollow);
}, },
beforeDestroy() { beforeDestroy() {
this.connection.off('follow', this.onFollow); this.connection.off('follow', this.onFollow);
this.connection.off('unfollow', this.onUnfollow); this.connection.off('unfollow', this.onUnfollow);
(this as any).os.stream.dispose(this.connectionId); (this as any).os.stream.dispose(this.connectionId);
}, },
methods: {
methods: {
onFollow(user) { onFollow(user) {
if (user.id == this.user.id) { if (user.id == this.user.id) {
this.user.isFollowing = user.isFollowing; this.user.isFollowing = user.isFollowing;

View file

@ -3,15 +3,18 @@
<div class="friend-form" v-if="os.isSignedIn && os.i.id != user.id"> <div class="friend-form" v-if="os.isSignedIn && os.i.id != user.id">
<mk-follow-button :user="user" size="big"/> <mk-follow-button :user="user" size="big"/>
<p class="followed" v-if="user.isFollowed">%i18n:@follows-you%</p> <p class="followed" v-if="user.isFollowed">%i18n:@follows-you%</p>
<p class="stalk"> <p class="stalk" v-if="user.isFollowing">
<span v-if="user.isStalking">%i18n:@stalking% <a @click="unstalk">%i18n:@unstalk%</a></span> <span v-if="user.isStalking">%i18n:@stalking% <a @click="unstalk">%fa:meh% %i18n:@unstalk%</a></span>
<span v-if="!user.isStalking"><a @click="stalk">%i18n:@stalk%</a></span> <span v-if="!user.isStalking"><a @click="stalk">%fa:user-secret% %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> </p>
</div> </div>
<div class="action-form">
<button class="mute ui" @click="user.isMuted ? unmute() : mute()">
<span v-if="user.isMuted">%fa:eye% %i18n:@unmute%</span>
<span v-if="!user.isMuted">%fa:eye-slash% %i18n:@mute%</span>
</button>
<button class="mute ui" @click="list">%fa:list% リストに追加</button>
</div>
<div class="description" v-if="user.description">{{ user.description }}</div> <div class="description" v-if="user.description">{{ user.description }}</div>
<div class="birthday" v-if="user.host === null && user.profile.birthday"> <div class="birthday" v-if="user.host === null && user.profile.birthday">
<p>%fa:birthday-cake%{{ user.profile.birthday.replace('-', '年').replace('-', '月') + '日' }} ({{ age }})</p> <p>%fa:birthday-cake%{{ user.profile.birthday.replace('-', '年').replace('-', '月') + '日' }} ({{ age }})</p>
@ -32,6 +35,7 @@ import Vue from 'vue';
import * as age from 's-age'; import * as age from 's-age';
import MkFollowingWindow from '../../components/following-window.vue'; import MkFollowingWindow from '../../components/following-window.vue';
import MkFollowersWindow from '../../components/followers-window.vue'; import MkFollowersWindow from '../../components/followers-window.vue';
import MkUserListsWindow from '../../components/user-lists-window.vue';
export default Vue.extend({ export default Vue.extend({
props: ['user'], props: ['user'],
@ -91,6 +95,21 @@ export default Vue.extend({
}, () => { }, () => {
alert('error'); alert('error');
}); });
},
list() {
const w = (this as any).os.new(MkUserListsWindow);
w.$once('choosen', async list => {
w.close();
await (this as any).api('users/lists/push', {
listId: list.id,
userId: this.user.id
});
(this as any).apis.dialog({
title: 'Done!',
text: `${this.user.name}${list.title}に追加しました。`
});
});
} }
} }
}); });
@ -107,11 +126,9 @@ export default Vue.extend({
> .friend-form > .friend-form
padding 16px padding 16px
text-align center
border-top solid 1px #eee border-top solid 1px #eee
> .mk-big-follow-button
width 100%
> .followed > .followed
margin 12px 0 0 0 margin 12px 0 0 0
padding 0 padding 0
@ -122,6 +139,20 @@ export default Vue.extend({
background #eefaff background #eefaff
border-radius 4px border-radius 4px
> .stalk
margin 12px 0 0 0
> .action-form
padding 16px
text-align center
border-top solid 1px #eee
> *
width 100%
&:not(:last-child)
margin-bottom 12px
> .description > .description
padding 16px padding 16px
color #555 color #555