1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
<template>
<div class="profile" v-if="$store.getters.isSignedIn">
<div class="friend-form" v-if="$store.state.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" 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()" v-if="$store.state.i.id != user.id">
<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% %i18n:@push-to-a-list%</button>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import MkUserListsWindow from '../../components/user-lists-window.vue';
export default Vue.extend({
props: ['user'],
methods: {
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');
});
},
mute() {
(this as any).api('mute/create', {
userId: this.user.id
}).then(() => {
this.user.isMuted = true;
}, () => {
alert('error');
});
},
unmute() {
(this as any).api('mute/delete', {
userId: this.user.id
}).then(() => {
this.user.isMuted = false;
}, () => {
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: '%i18n:@list-pushed%'.replace('{user}', this.user.name).replace('{list}', list.title)
});
});
}
}
});
</script>
<style lang="stylus" scoped>
root(isDark)
background var(--face)
box-shadow var(--shadow)
border-radius var(--round)
> *:first-child
border-top none !important
> .friend-form
padding 16px
text-align center
border-bottom solid 1px isDark ? #21242f : #eee
> .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
> .stalk
margin 12px 0 0 0
> .action-form
padding 16px
text-align center
border-bottom solid 1px isDark ? #21242f : #eee
> *
width 100%
&:not(:last-child)
margin-bottom 12px
.profile[data-darkmode]
root(true)
.profile:not([data-darkmode])
root(false)
</style>
|
