OpenSource/misskey
OpenSource/misskey
1
0
Fork 0
mirror of https://github.com/misskey-dev/misskey.git synced 2024-12-11 19:20:55 +01:00
Code Issues Projects Releases Packages Wiki Activity

wip

Browse source
This commit is contained in:
syuilo 2018-02-20 23:02:24 +09:00
parent e1259409e9
commit 78160188d9
6 changed files with 58 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/web/app/desktop/views/components/index.ts
View file

@ -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);

4
src/web/app/desktop/views/components/post-detail-sub.vue → src/web/app/desktop/views/components/post-detail.sub.vue
View file

@ -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

45
src/web/app/desktop/views/components/post-detail.vue
View file

@ -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);
}
}
});

4
src/web/app/desktop/views/components/posts-post-sub.vue → src/web/app/desktop/views/components/posts.post.sub.vue
View file

@ -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

14
src/web/app/desktop/views/components/posts-post.vue → src/web/app/desktop/views/components/posts.post.vue
View file

@ -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

6
src/web/app/desktop/views/components/posts.vue
View file

@ -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,