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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
|
<template>
<div class="mk-welcome-timeline">
<transition-group name="ldzpakcixzickvggyixyrhqwjaefknon" tag="div">
<div v-for="note in notes" :key="note.id">
<mk-avatar class="avatar" :user="note.user" target="_blank"/>
<div class="body">
<header>
<router-link class="name" :to="note.user | userPage" v-user-preview="note.user.id">
<mk-user-name :user="note.user"/>
</router-link>
<span class="username">@{{ note.user | acct }}</span>
<div class="info">
<router-link class="created-at" :to="note | notePage">
<mk-time :time="note.createdAt"/>
</router-link>
</div>
</header>
<div class="text">
<misskey-flavored-markdown v-if="note.text" :text="note.cw != null ? note.cw : note.text" :author="note.user" :custom-emojis="note.emojis"/>
</div>
</div>
</div>
</transition-group>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: {
max: {
type: Number,
required: false,
default: undefined
}
},
data() {
return {
fetching: true,
notes: [],
connection: null
};
},
mounted() {
this.fetch();
this.connection = this.$root.stream.useSharedConnection('localTimeline');
this.connection.on('note', this.onNote);
},
beforeDestroy() {
this.connection.dispose();
},
methods: {
fetch(cb?) {
this.fetching = true;
this.$root.api('notes', {
limit: this.max,
local: true,
reply: false,
renote: false,
file: false,
poll: false
}).then(notes => {
this.notes = notes;
this.fetching = false;
});
},
onNote(note) {
if (note.replyId != null) return;
if (note.renoteId != null) return;
if (note.poll != null) return;
this.notes.unshift(note);
},
}
});
</script>
<style lang="stylus" scoped>
.ldzpakcixzickvggyixyrhqwjaefknon-enter
.ldzpakcixzickvggyixyrhqwjaefknon-leave-to
opacity 0
transform translateY(-30px)
.mk-welcome-timeline
background var(--face)
> div
> *
transition transform .3s ease, opacity .3s ease
> div
padding 16px
overflow-wrap break-word
font-size .9em
color var(--noteText)
border-bottom 1px solid var(--faceDivider)
&:after
content ""
display block
clear both
> .avatar
display block
float left
position -webkit-sticky
position sticky
top 16px
width 42px
height 42px
border-radius 6px
> .body
float right
width calc(100% - 42px)
padding-left 12px
> header
display flex
align-items center
margin-bottom 4px
white-space nowrap
> .name
display block
margin 0 .5em 0 0
padding 0
overflow hidden
font-weight bold
text-overflow ellipsis
color var(--noteHeaderName)
> .username
margin 0 .5em 0 0
color var(--noteHeaderAcct)
> .info
margin-left auto
font-size 0.9em
> .created-at
color var(--noteHeaderInfo)
> .text
text-align left
</style>
|
