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
|
<template>
<div>
<mk-notes ref="timeline" :make-promise="makePromise" @inited="() => $emit('loaded')">
<template #header>
<header class="oh5y2r7l5lx8j6jj791ykeiwgihheguk">
<span :data-active="mode == 'default'" @click="mode = 'default'"><fa :icon="['far', 'comment-alt']"/> {{ $t('default') }}</span>
<span :data-active="mode == 'with-replies'" @click="mode = 'with-replies'"><fa icon="comments"/> {{ $t('with-replies') }}</span>
<span :data-active="mode == 'with-media'" @click="mode = 'with-media'"><fa :icon="['far', 'images']"/> {{ $t('with-media') }}</span>
<span :data-active="mode == 'my-posts'" @click="mode = 'my-posts'"><fa icon="user"/> {{ $t('my-posts') }}</span>
</header>
</template>
</mk-notes>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../../i18n';
const fetchLimit = 10;
export default Vue.extend({
i18n: i18n('desktop/views/pages/user/user.timeline.vue'),
props: ['user'],
data() {
return {
fetching: true,
mode: 'default',
unreadCount: 0,
date: null,
makePromise: cursor => this.$root.api('users/notes', {
userId: this.user.id,
limit: fetchLimit + 1,
includeReplies: this.mode == 'with-replies',
includeMyRenotes: this.mode != 'my-posts',
withFiles: this.mode == 'with-media',
untilId: cursor ? cursor : undefined
}).then(notes => {
if (notes.length == fetchLimit + 1) {
notes.pop();
return {
notes: notes,
cursor: notes[notes.length - 1].id
};
} else {
return {
notes: notes,
cursor: null
};
}
})
};
},
watch: {
mode() {
(this.$refs.timeline as any).reload();
}
},
mounted() {
document.addEventListener('keydown', this.onDocumentKeydown);
},
beforeDestroy() {
document.removeEventListener('keydown', this.onDocumentKeydown);
},
methods: {
onDocumentKeydown(e) {
if (e.target.tagName !== 'INPUT' && e.target.tagName !== 'TEXTAREA') {
if (e.which == 84) { // [t]
(this.$refs.timeline as any).focus();
}
}
},
warp(date) {
this.date = date;
(this.$refs.timeline as any).reload();
}
}
});
</script>
<style lang="stylus" scoped>
.oh5y2r7l5lx8j6jj791ykeiwgihheguk
padding 0 8px
z-index 10
background var(--faceHeader)
box-shadow 0 1px var(--desktopTimelineHeaderShadow)
> span
display inline-block
padding 0 10px
line-height 42px
font-size 12px
user-select none
&[data-active]
color var(--primary)
cursor default
font-weight bold
&:before
content ""
display block
position absolute
bottom 0
left -8px
width calc(100% + 16px)
height 2px
background var(--primary)
&:not([data-active])
color var(--desktopTimelineSrc)
cursor pointer
&:hover
color var(--desktopTimelineSrcHover)
</style>
|
