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

130 lines
2.3 KiB
Vue
Raw Normal View History

2018-03-16 18:33:36 +00:00
<template>
<div class="mk-welcome-timeline">
2018-04-07 17:30:37 +00:00
<div v-for="note in notes">
2018-04-29 08:17:15 +00:00
<mk-avatar class="avatar" :user="note.user" target="_blank"/>
2018-03-16 18:33:36 +00:00
<div class="body">
<header>
2018-04-09 09:52:29 +00:00
<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>
2018-03-16 18:33:36 +00:00
<div class="info">
2018-04-09 10:18:15 +00:00
<router-link class="created-at" :to="note | notePage">
2018-04-07 17:30:37 +00:00
<mk-time :time="note.createdAt"/>
2018-03-16 18:33:36 +00:00
</router-link>
</div>
</header>
<div class="text">
2018-06-20 10:55:34 +00:00
<misskey-flavored-markdown v-if="note.text" :text="note.text"/>
2018-03-16 18:33:36 +00:00
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: {
max: {
type: Number,
required: false,
default: undefined
}
},
2018-03-16 18:33:36 +00:00
data() {
return {
fetching: true,
2018-04-07 17:30:37 +00:00
notes: []
2018-03-16 18:33:36 +00:00
};
},
mounted() {
this.fetch();
},
methods: {
fetch(cb?) {
this.fetching = true;
2018-04-07 17:30:37 +00:00
(this as any).api('notes', {
limit: this.max,
local: true,
2018-03-16 18:33:36 +00:00
reply: false,
2018-04-07 17:30:37 +00:00
renote: false,
2018-03-16 18:33:36 +00:00
media: false,
poll: false,
bot: false
2018-04-07 17:30:37 +00:00
}).then(notes => {
this.notes = notes;
2018-03-16 18:33:36 +00:00
this.fetching = false;
});
}
}
});
</script>
<style lang="stylus" scoped>
2018-05-23 06:58:53 +00:00
root(isDark)
background isDark ? #282C37 : #fff
2018-03-16 18:33:36 +00:00
> div
padding 16px
overflow-wrap break-word
font-size .9em
2018-05-23 06:58:53 +00:00
color isDark ? #fff : #4C4C4C
border-bottom 1px solid isDark ? rgba(#000, 0.1) : rgba(#000, 0.05)
2018-03-16 18:33:36 +00:00
&:after
content ""
display block
clear both
2018-04-29 08:17:15 +00:00
> .avatar
2018-03-16 18:33:36 +00:00
display block
float left
position -webkit-sticky
position sticky
top 16px
2018-04-29 08:17:15 +00:00
width 42px
height 42px
border-radius 6px
2018-03-16 18:33:36 +00:00
> .body
float right
2018-03-17 08:47:46 +00:00
width calc(100% - 42px)
padding-left 12px
2018-03-16 18:33:36 +00:00
> 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-05-23 06:58:53 +00:00
color isDark ? #fff : #627079
2018-03-16 18:33:36 +00:00
> .username
margin 0 .5em 0 0
2018-05-23 06:58:53 +00:00
color isDark ? #606984 : #ccc
2018-03-16 18:33:36 +00:00
> .info
margin-left auto
font-size 0.9em
> .created-at
2018-05-23 06:58:53 +00:00
color isDark ? #606984 : #c0c0c0
2018-06-15 04:08:56 +00:00
> .text
text-align left
2018-05-23 06:58:53 +00:00
.mk-welcome-timeline[data-darkmode]
root(true)
.mk-welcome-timeline:not([data-darkmode])
root(false)
2018-03-16 18:33:36 +00:00
</style>