wip
This commit is contained in:
parent
013851749f
commit
bb204b2ef7
2 changed files with 46 additions and 11 deletions
|
@ -19,6 +19,7 @@
|
|||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
|
||||
export default Vue.extend({
|
||||
props: {
|
||||
user: {
|
||||
|
@ -30,6 +31,7 @@ export default Vue.extend({
|
|||
default: 'compact'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
wait: false,
|
||||
|
@ -37,6 +39,7 @@ export default Vue.extend({
|
|||
connectionId: null
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.connection = (this as any).os.stream.getConnection();
|
||||
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('unfollow', this.onUnfollow);
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
this.connection.off('follow', this.onFollow);
|
||||
this.connection.off('unfollow', this.onUnfollow);
|
||||
(this as any).os.stream.dispose(this.connectionId);
|
||||
},
|
||||
methods: {
|
||||
|
||||
methods: {
|
||||
onFollow(user) {
|
||||
if (user.id == this.user.id) {
|
||||
this.user.isFollowing = user.isFollowing;
|
||||
|
|
|
@ -3,15 +3,18 @@
|
|||
<div class="friend-form" v-if="os.isSignedIn && os.i.id != user.id">
|
||||
<mk-follow-button :user="user" size="big"/>
|
||||
<p class="followed" v-if="user.isFollowed">%i18n:@follows-you%</p>
|
||||
<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 class="stalk" v-if="user.isFollowing">
|
||||
<span v-if="user.isStalking">%i18n:@stalking% <a @click="unstalk">%fa:meh% %i18n:@unstalk%</a></span>
|
||||
<span v-if="!user.isStalking"><a @click="stalk">%fa:user-secret% %i18n:@stalk%</a></span>
|
||||
</p>
|
||||
</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="birthday" v-if="user.host === null && user.profile.birthday">
|
||||
<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 MkFollowingWindow from '../../components/following-window.vue';
|
||||
import MkFollowersWindow from '../../components/followers-window.vue';
|
||||
import MkUserListsWindow from '../../components/user-lists-window.vue';
|
||||
|
||||
export default Vue.extend({
|
||||
props: ['user'],
|
||||
|
@ -91,6 +95,21 @@ export default Vue.extend({
|
|||
}, () => {
|
||||
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
|
||||
padding 16px
|
||||
text-align center
|
||||
border-top solid 1px #eee
|
||||
|
||||
> .mk-big-follow-button
|
||||
width 100%
|
||||
|
||||
> .followed
|
||||
margin 12px 0 0 0
|
||||
padding 0
|
||||
|
@ -122,6 +139,20 @@ export default Vue.extend({
|
|||
background #eefaff
|
||||
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
|
||||
padding 16px
|
||||
color #555
|
||||
|
|
Loading…
Reference in a new issue