forked from FoundKeyGang/FoundKey
wip
This commit is contained in:
syuilo
parent
e1259409e9
commit
78160188d9
6 changed files with 58 additions and 19 deletions
|
|
@ -5,8 +5,6 @@ import uiNotification from './ui-notification.vue';
|
|||
import home from './home.vue';
|
||||
import timeline from './timeline.vue';
|
||||
import posts from './posts.vue';
|
||||
import postsPost from './posts-post.vue';
|
||||
import postsPostSub from './posts-post-sub.vue';
|
||||
import subPostContent from './sub-post-content.vue';
|
||||
import window from './window.vue';
|
||||
import postFormWindow from './post-form-window.vue';
|
||||
|
|
@ -43,8 +41,6 @@ Vue.component('mk-ui-notification', uiNotification);
|
|||
Vue.component('mk-home', home);
|
||||
Vue.component('mk-timeline', timeline);
|
||||
Vue.component('mk-posts', posts);
|
||||
Vue.component('mk-posts-post', postsPost);
|
||||
Vue.component('mk-posts-post-sub', postsPostSub);
|
||||
Vue.component('mk-sub-post-content', subPostContent);
|
||||
Vue.component('mk-window', window);
|
||||
Vue.component('mk-post-form-window', postFormWindow);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="mk-post-detail-sub" :title="title">
|
||||
<div class="sub" :title="title">
|
||||
<a class="avatar-anchor" href={ '/' + post.user.username }>
|
||||
<img class="avatar" src={ post.user.avatar_url + '?thumbnail&size=64' } alt="avatar" v-user-preview={ post.user_id }/>
|
||||
</a>
|
||||
|
|
@ -40,7 +40,7 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.mk-post-detail-sub
|
||||
.sub
|
||||
margin 0
|
||||
padding 20px 32px
|
||||
background #fdfdfd
|
||||
|
|
@ -11,10 +11,10 @@
|
|||
<template v-if="contextFetching">%fa:spinner .pulse%</template>
|
||||
</button>
|
||||
<div class="context">
|
||||
<mk-post-detail-sub v-for="post in context" :key="post.id" :post="post"/>
|
||||
<x-sub v-for="post in context" :key="post.id" :post="post"/>
|
||||
</div>
|
||||
<div class="reply-to" v-if="p.reply">
|
||||
<mk-post-detail-sub :post="p.reply"/>
|
||||
<x-sub :post="p.reply"/>
|
||||
</div>
|
||||
<div class="repost" v-if="isRepost">
|
||||
<p>
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
</footer>
|
||||
</article>
|
||||
<div class="replies" v-if="!compact">
|
||||
<mk-post-detail-sub v-for="post in nreplies" :key="post.id" :post="post"/>
|
||||
<x-sub v-for="post in replies" :key="post.id" :post="post"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -71,7 +71,16 @@
|
|||
import Vue from 'vue';
|
||||
import dateStringify from '../../../common/scripts/date-stringify';
|
||||
|
||||
import MkPostFormWindow from './post-form-window.vue';
|
||||
import MkRepostFormWindow from './repost-form-window.vue';
|
||||
import MkPostMenu from '../../../common/views/components/post-menu.vue';
|
||||
import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
|
||||
import XSub from './post-detail.sub.vue';
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
'x-sub': XSub
|
||||
},
|
||||
props: {
|
||||
post: {
|
||||
type: Object,
|
||||
|
|
@ -137,6 +146,36 @@ export default Vue.extend({
|
|||
this.contextFetching = false;
|
||||
this.context = context.reverse();
|
||||
});
|
||||
},
|
||||
reply() {
|
||||
document.body.appendChild(new MkPostFormWindow({
|
||||
propsData: {
|
||||
reply: this.p
|
||||
}
|
||||
}).$mount().$el);
|
||||
},
|
||||
repost() {
|
||||
document.body.appendChild(new MkRepostFormWindow({
|
||||
propsData: {
|
||||
post: this.p
|
||||
}
|
||||
}).$mount().$el);
|
||||
},
|
||||
react() {
|
||||
document.body.appendChild(new MkReactionPicker({
|
||||
propsData: {
|
||||
source: this.$refs.reactButton,
|
||||
post: this.p
|
||||
}
|
||||
}).$mount().$el);
|
||||
},
|
||||
menu() {
|
||||
document.body.appendChild(new MkPostMenu({
|
||||
propsData: {
|
||||
source: this.$refs.menuButton,
|
||||
post: this.p
|
||||
}
|
||||
}).$mount().$el);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="mk-posts-post-sub" :title="title">
|
||||
<div class="sub" :title="title">
|
||||
<a class="avatar-anchor" :href="`/${post.user.username}`">
|
||||
<img class="avatar" :src="`${post.user.avatar_url}?thumbnail&size=64`" alt="avatar" v-user-preview="post.user_id"/>
|
||||
</a>
|
||||
|
|
@ -33,7 +33,7 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.mk-posts-post-sub
|
||||
.sub
|
||||
margin 0
|
||||
padding 0
|
||||
font-size 0.9em
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="mk-posts-post" tabindex="-1" :title="title" @keydown="onKeydown">
|
||||
<div class="post" tabindex="-1" :title="title" @keydown="onKeydown">
|
||||
<div class="reply-to" v-if="p.reply">
|
||||
<mk-posts-post-sub post="p.reply"/>
|
||||
<x-sub post="p.reply"/>
|
||||
</div>
|
||||
<div class="repost" v-if="isRepost">
|
||||
<p>
|
||||
|
|
@ -80,6 +80,7 @@ import MkPostFormWindow from './post-form-window.vue';
|
|||
import MkRepostFormWindow from './repost-form-window.vue';
|
||||
import MkPostMenu from '../../../common/views/components/post-menu.vue';
|
||||
import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
|
||||
import XSub from './posts.post.sub.vue';
|
||||
|
||||
function focus(el, fn) {
|
||||
const target = fn(el);
|
||||
|
|
@ -93,6 +94,9 @@ function focus(el, fn) {
|
|||
}
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
'x-sub': XSub
|
||||
},
|
||||
props: ['post'],
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -180,7 +184,6 @@ export default Vue.extend({
|
|||
},
|
||||
reply() {
|
||||
document.body.appendChild(new MkPostFormWindow({
|
||||
|
||||
propsData: {
|
||||
reply: this.p
|
||||
}
|
||||
|
|
@ -188,7 +191,6 @@ export default Vue.extend({
|
|||
},
|
||||
repost() {
|
||||
document.body.appendChild(new MkRepostFormWindow({
|
||||
|
||||
propsData: {
|
||||
post: this.p
|
||||
}
|
||||
|
|
@ -196,7 +198,6 @@ export default Vue.extend({
|
|||
},
|
||||
react() {
|
||||
document.body.appendChild(new MkReactionPicker({
|
||||
|
||||
propsData: {
|
||||
source: this.$refs.reactButton,
|
||||
post: this.p
|
||||
|
|
@ -205,7 +206,6 @@ export default Vue.extend({
|
|||
},
|
||||
menu() {
|
||||
document.body.appendChild(new MkPostMenu({
|
||||
|
||||
propsData: {
|
||||
source: this.$refs.menuButton,
|
||||
post: this.p
|
||||
|
|
@ -253,7 +253,7 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.mk-posts-post
|
||||
.post
|
||||
margin 0
|
||||
padding 0
|
||||
background #fff
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="mk-posts">
|
||||
<template v-for="(post, i) in _posts">
|
||||
<mk-posts-post :post.sync="post" :key="post.id"/>
|
||||
<x-post :post.sync="post" :key="post.id"/>
|
||||
<p class="date" :key="post.id + '-time'" v-if="i != posts.length - 1 && post._date != _posts[i + 1]._date"><span>%fa:angle-up%{{ post._datetext }}</span><span>%fa:angle-down%{{ _posts[i + 1]._datetext }}</span></p>
|
||||
</template>
|
||||
<footer>
|
||||
|
|
@ -12,8 +12,12 @@
|
|||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import XPost from './posts.post.vue';
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
'x-post': XPost
|
||||
},
|
||||
props: {
|
||||
posts: {
|
||||
type: Array,
|
||||
|
|
|
|||
Loading…
Reference in a new issue