Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

wip

Browse source
This commit is contained in:
syuilo 2018-02-13 09:12:54 +09:00
parent 21c4f863ef
commit be80c98ee5
9 changed files with 217 additions and 574 deletions
Download patch file Download diff file Expand all files Collapse all files

37
src/web/app/desktop/views/components/ellipsis-icon.vue Normal file
View file

@ -0,0 +1,37 @@
<template>
<div class="mk-ellipsis-icon">
<div></div><div></div><div></div>
</div>
</template>
<style lang="stylus" scoped>
.mk-ellipsis-icon
width 70px
margin 0 auto
text-align center
> div
display inline-block
width 18px
height 18px
background-color rgba(0, 0, 0, 0.3)
border-radius 100%
animation bounce 1.4s infinite ease-in-out both
&:nth-child(1)
animation-delay 0s
&:nth-child(2)
margin 0 6px
animation-delay 0.16s
&:nth-child(3)
animation-delay 0.32s
@keyframes bounce
0%, 80%, 100%
transform scale(0)
40%
transform scale(1)
</style>

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

@ -11,13 +11,15 @@ import uiHeaderSearch from './ui-header-search.vue';
import uiNotification from './ui-notification.vue';
import home from './home.vue';
import timeline from './timeline.vue';
import timelinePost from './timeline-post.vue';
import timelinePostSub from './timeline-post-sub.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';
import repostFormWindow from './repost-form-window.vue';
import analogClock from './analog-clock.vue';
import ellipsisIcon from './ellipsis-icon.vue';
Vue.component('mk-ui', ui);
Vue.component('mk-ui-header', uiHeader);
@ -30,10 +32,12 @@ Vue.component('mk-ui-header-search', uiHeaderSearch);
Vue.component('mk-ui-notification', uiNotification);
Vue.component('mk-home', home);
Vue.component('mk-timeline', timeline);
Vue.component('mk-timeline-post', timelinePost);
Vue.component('mk-timeline-post-sub', timelinePostSub);
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);
Vue.component('mk-repost-form-window', repostFormWindow);
Vue.component('mk-analog-clock', analogClock);
Vue.component('mk-ellipsis-icon', ellipsisIcon);

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

@ -1,5 +1,5 @@
<template>
<div class="mk-timeline-post-sub" :title="title">
<div class="mk-posts-post-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-timeline-post-sub
.mk-posts-post-sub
margin 0
padding 0
font-size 0.9em

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

@ -1,7 +1,7 @@
<template>
<div class="mk-timeline-post" tabindex="-1" :title="title" @keydown="onKeyDown" @dblclick="onDblClick">
<div class="mk-posts-post" tabindex="-1" :title="title" @keydown="onKeyDown" @dblclick="onDblClick">
<div class="reply-to" v-if="p.reply">
<mk-timeline-post-sub post="p.reply"/>
<mk-posts-post-sub post="p.reply"/>
</div>
<div class="repost" v-if="isRepost">
<p>
@ -242,7 +242,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
.mk-timeline-post
.mk-posts-post
margin 0
padding 0
background #fff

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

@ -0,0 +1,69 @@
<template>
<div class="mk-posts">
<template v-for="(post, i) in _posts">
<mk-posts-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>
<slot name="footer"></slot>
</footer>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: {
posts: {
type: Array,
default: () => []
}
},
computed: {
_posts(): any[] {
return (this.posts as any).map(post => {
const date = new Date(post.created_at).getDate();
const month = new Date(post.created_at).getMonth() + 1;
post._date = date;
post._datetext = `${month}月 ${date}日`;
return post;
});
}
},
methods: {
focus() {
(this.$el as any).children[0].focus();
}
}
});
</script>
<style lang="stylus" scoped>
.mk-posts
> .date
display block
margin 0
line-height 32px
font-size 14px
text-align center
color #aaa
background #fdfdfd
border-bottom solid 1px #eaeaea
span
margin 0 16px
[data-fa]
margin-right 8px
> footer
padding 16px
text-align center
color #ccc
border-top solid 1px #eaeaea
border-bottom-left-radius 4px
border-bottom-right-radius 4px
</style>

141
src/web/app/desktop/views/components/timeline.vue
View file

@ -1,12 +1,11 @@
<template>
<div class="mk-timeline">
<template v-for="(post, i) in _posts">
<mk-timeline-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>
<slot name="footer"></slot>
</footer>
<mk-following-setuper v-if="alone"/>
<div class="loading" v-if="fetching">
<mk-ellipsis-icon/>
</div>
<p class="empty" v-if="posts.length == 0 && !fetching">%fa:R comments%自分の投稿や、自分がフォローしているユーザーの投稿が表示されます。</p>
<mk-posts :posts="posts" ref="timeline"/>
</div>
</template>
@ -15,28 +14,85 @@ import Vue from 'vue';
export default Vue.extend({
props: {
posts: {
type: Array,
default: []
date: {
type: Date,
required: false
}
},
data() {
return {
fetching: true,
moreFetching: false,
posts: [],
connection: null,
connectionId: null
};
},
computed: {
_posts(): any[] {
return this.posts.map(post => {
const date = new Date(post.created_at).getDate();
const month = new Date(post.created_at).getMonth() + 1;
post._date = date;
post._datetext = `${month}月 ${date}日`;
return post;
});
},
tail(): any {
return this.posts[this.posts.length - 1];
alone(): boolean {
return this.$root.$data.os.i.following_count == 0;
}
},
mounted() {
this.connection = this.$root.$data.os.stream.getConnection();
this.connectionId = this.$root.$data.os.stream.use();
this.connection.on('post', this.onPost);
this.connection.on('follow', this.onChangeFollowing);
this.connection.on('unfollow', this.onChangeFollowing);
document.addEventListener('keydown', this.onKeydown);
window.addEventListener('scroll', this.onScroll);
this.fetch();
},
beforeDestroy() {
this.connection.off('post', this.onPost);
this.connection.off('follow', this.onChangeFollowing);
this.connection.off('unfollow', this.onChangeFollowing);
this.$root.$data.os.stream.dispose(this.connectionId);
document.removeEventListener('keydown', this.onKeydown);
window.removeEventListener('scroll', this.onScroll);
},
methods: {
focus() {
(this.$el as any).children[0].focus();
fetch(cb?) {
this.fetching = true;
this.$root.$data.os.api('posts/timeline', {
until_date: this.date ? (this.date as any).getTime() : undefined
}).then(posts => {
this.fetching = false;
this.posts = posts;
if (cb) cb();
});
},
more() {
if (this.moreFetching || this.fetching || this.posts.length == 0) return;
this.moreFetching = true;
this.$root.$data.os.api('posts/timeline', {
until_id: this.posts[this.posts.length - 1].id
}).then(posts => {
this.moreFetching = false;
this.posts.unshift(posts);
});
},
onPost(post) {
this.posts.unshift(post);
},
onChangeFollowing() {
this.fetch();
},
onScroll() {
const current = window.scrollY + window.innerHeight;
if (current > document.body.offsetHeight - 8) this.more();
},
onKeydown(e) {
if (e.target.tagName != 'INPUT' && e.target.tagName != 'TEXTAREA') {
if (e.which == 84) { // t
(this.$refs.timeline as any).focus();
}
}
}
}
});
@ -44,29 +100,28 @@ export default Vue.extend({
<style lang="stylus" scoped>
.mk-timeline
background #fff
border solid 1px rgba(0, 0, 0, 0.075)
border-radius 6px
> .date
> mk-following-setuper
border-bottom solid 1px #eee
> .loading
padding 64px 0
> .empty
display block
margin 0
line-height 32px
font-size 14px
margin 0 auto
padding 32px
max-width 400px
text-align center
color #aaa
background #fdfdfd
border-bottom solid 1px #eaeaea
color #999
span
margin 0 16px
[data-fa]
margin-right 8px
> footer
padding 16px
text-align center
color #ccc
border-top solid 1px #eaeaea
border-bottom-left-radius 4px
border-bottom-right-radius 4px
> [data-fa]
display block
margin-bottom 16px
font-size 3em
color #ccc
</style>