rudeshark.net/src/client/app/common/views/components/welcome-timeline.vue

156 lines
2.9 KiB
Vue
Raw Normal View History

2018-03-16 19:33:36 +01:00
<template>
<div class="mk-welcome-timeline">
2018-09-07 21:54:11 +02: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">
2018-12-06 08:09:33 +01:00
<mk-user-name :user="note.user"/>
</router-link>
2018-09-07 21:54:11 +02:00
<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"/>
2018-03-16 19:33:36 +01:00
</div>
</div>
</div>
2018-09-07 21:54:11 +02:00
</transition-group>
2018-03-16 19:33:36 +01:00
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: {
max: {
type: Number,
required: false,
default: undefined
}
},
2018-03-16 19:33:36 +01:00
data() {
return {
fetching: true,
notes: [],
connection: null
2018-03-16 19:33:36 +01:00
};
},
2018-03-16 19:33:36 +01:00
mounted() {
this.fetch();
2018-11-09 00:13:34 +01:00
this.connection = this.$root.stream.useSharedConnection('localTimeline');
this.connection.on('note', this.onNote);
},
beforeDestroy() {
this.connection.dispose();
2018-03-16 19:33:36 +01:00
},
2018-03-16 19:33:36 +01:00
methods: {
fetch(cb?) {
this.fetching = true;
2018-11-09 00:13:34 +01:00
this.$root.api('notes', {
limit: this.max,
local: true,
2018-03-16 19:33:36 +01:00
reply: false,
2018-04-07 19:30:37 +02:00
renote: false,
2018-09-05 12:32:46 +02:00
file: false,
poll: false
2018-04-07 19:30:37 +02:00
}).then(notes => {
this.notes = notes;
2018-03-16 19:33:36 +01: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-16 19:33:36 +01:00
}
});
</script>
<style lang="stylus" scoped>
2018-09-07 21:54:11 +02:00
.ldzpakcixzickvggyixyrhqwjaefknon-enter
.ldzpakcixzickvggyixyrhqwjaefknon-leave-to
opacity 0
transform translateY(-30px)
2018-09-28 03:14:58 +02:00
.mk-welcome-timeline
2018-09-26 13:28:13 +02:00
background var(--face)
2018-03-16 19:33:36 +01:00
> div
2018-09-07 21:54:11 +02:00
> *
transition transform .3s ease, opacity .3s ease
> div
padding 16px
overflow-wrap break-word
font-size .9em
2018-09-28 03:14:58 +02:00
color var(--noteText)
border-bottom 1px solid var(--faceDivider)
2018-09-07 21:54:11 +02:00
&: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 04:55:17 +02:00
color var(--noteHeaderName)
2018-09-07 21:54:11 +02:00
> .username
margin 0 .5em 0 0
2018-09-28 03:14:58 +02:00
color var(--noteHeaderAcct)
2018-09-07 21:54:11 +02:00
> .info
margin-left auto
font-size 0.9em
> .created-at
2018-09-28 03:14:58 +02:00
color var(--noteHeaderInfo)
2018-09-07 21:54:11 +02:00
> .text
text-align left
2018-06-15 06:08:56 +02:00
2018-03-16 19:33:36 +01:00
</style>