0
0
switched/src/client/app/common/views/components/welcome-timeline.vue

163 lines
3.2 KiB
Vue
Raw Normal View History

2018-03-17 03:33:36 +09:00
<template>
<div class="mk-welcome-timeline">
2018-09-08 04:54:11 +09:00
<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">{{ note.user | userName }}</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.text"/>
2018-03-17 03:33:36 +09:00
</div>
</div>
</div>
2018-09-08 04:54:11 +09:00
</transition-group>
2018-03-17 03:33:36 +09:00
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: {
max: {
type: Number,
required: false,
default: undefined
}
},
2018-03-17 03:33:36 +09:00
data() {
return {
fetching: true,
notes: [],
connection: null,
connectionId: null
2018-03-17 03:33:36 +09:00
};
},
2018-03-17 03:33:36 +09:00
mounted() {
this.fetch();
this.connection = (this as any).os.streams.localTimelineStream.getConnection();
this.connectionId = (this as any).os.streams.localTimelineStream.use();
this.connection.on('note', this.onNote);
},
beforeDestroy() {
this.connection.off('note', this.onNote);
(this as any).os.streams.localTimelineStream.dispose(this.connectionId);
2018-03-17 03:33:36 +09:00
},
2018-03-17 03:33:36 +09:00
methods: {
fetch(cb?) {
this.fetching = true;
2018-04-08 02:30:37 +09:00
(this as any).api('notes', {
limit: this.max,
local: true,
2018-03-17 03:33:36 +09:00
reply: false,
2018-04-08 02:30:37 +09:00
renote: false,
2018-09-05 19:32:46 +09:00
file: false,
poll: false
2018-04-08 02:30:37 +09:00
}).then(notes => {
this.notes = notes;
2018-03-17 03:33:36 +09:00
this.fetching = false;
});
},
onNote(note) {
if (note.replyId != null) return;
if (note.renoteId != null) return;
if (note.poll != null) return;
this.notes.unshift(note);
},
2018-03-17 03:33:36 +09:00
}
});
</script>
<style lang="stylus" scoped>
2018-09-08 04:54:11 +09:00
.ldzpakcixzickvggyixyrhqwjaefknon-enter
.ldzpakcixzickvggyixyrhqwjaefknon-leave-to
opacity 0
transform translateY(-30px)
2018-05-23 15:58:53 +09:00
root(isDark)
2018-09-26 20:28:13 +09:00
background var(--face)
2018-03-17 03:33:36 +09:00
> div
2018-09-08 04:54:11 +09:00
> *
transition transform .3s ease, opacity .3s ease
> div
padding 16px
overflow-wrap break-word
font-size .9em
color isDark ? #fff : #4C4C4C
border-bottom 1px solid isDark ? rgba(#000, 0.1) : rgba(#000, 0.05)
&: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
2018-09-27 11:55:17 +09:00
color var(--noteHeaderName)
2018-09-08 04:54:11 +09:00
> .username
margin 0 .5em 0 0
color isDark ? #606984 : #ccc
> .info
margin-left auto
font-size 0.9em
> .created-at
color isDark ? #606984 : #c0c0c0
> .text
text-align left
2018-06-15 13:08:56 +09:00
2018-05-23 15:58:53 +09:00
.mk-welcome-timeline[data-darkmode]
root(true)
.mk-welcome-timeline:not([data-darkmode])
root(false)
2018-03-17 03:33:36 +09:00
</style>