This commit is contained in:
syuilo 2018-06-05 22:54:03 +09:00
parent e28d1c7569
commit dfa2c951d6
7 changed files with 72 additions and 23 deletions

View file

@ -11,7 +11,7 @@
<li class="deck" :class="{ active: $route.name == 'deck' }"> <li class="deck" :class="{ active: $route.name == 'deck' }">
<router-link to="/deck"> <router-link to="/deck">
%fa:columns% %fa:columns%
<p>%i18n:@deck%</p> <p>%i18n:@deck% <small>(beta)</small></p>
</router-link> </router-link>
</li> </li>
<li class="messaging"> <li class="messaging">

View file

@ -1,10 +1,10 @@
<template> <template>
<div class="dnpfarvgbnfmyzbdquhhzyxcmstpdqzs"> <div class="dnpfarvgbnfmyzbdquhhzyxcmstpdqzs">
<header> <header>
<slot name="header">Timeline</slot> <slot name="header"></slot>
</header> </header>
<div ref="body"> <div ref="body">
<x-tl ref="tl"/> <slot></slot>
</div> </div>
</div> </div>
</template> </template>
@ -17,9 +17,23 @@ export default Vue.extend({
components: { components: {
XTl XTl
}, },
provide() {
return {
getColumn() {
return this;
},
getScrollContainer() {
return this.$refs.body;
}
};
},
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.tl.mount(this.$refs.body); this.$emit('mounted');
setInterval(() => {
this.$emit('mounted');
}, 100);
}); });
} }
}); });
@ -31,6 +45,7 @@ export default Vue.extend({
root(isDark) root(isDark)
flex 1 flex 1
min-width 330px min-width 330px
max-width 330px
height 100% height 100%
margin-right 16px margin-right 16px
background isDark ? #282C37 : #fff background isDark ? #282C37 : #fff
@ -40,14 +55,14 @@ root(isDark)
> header > header
z-index 1 z-index 1
line-height 48px line-height 42px
padding 0 16px padding 0 16px
color isDark ? #e3e5e8 : #888 color isDark ? #e3e5e8 : #888
background isDark ? #313543 : #fff background isDark ? #313543 : #fff
box-shadow 0 1px rgba(#000, 0.15) box-shadow 0 1px rgba(#000, 0.15)
> div > div
height calc(100% - 48px) height calc(100% - 42px)
overflow auto overflow auto
overflow-x hidden overflow-x hidden

View file

@ -73,16 +73,20 @@ export default Vue.extend({
} }
}, },
inject: ['getColumn', 'getScrollContainer'],
created() {
this.getColumn().$once('mounted', () => {
this.rootEl = this.getScrollContainer();
this.rootEl.addEventListener('scroll', this.onScroll);
})
},
beforeDestroy() { beforeDestroy() {
this.root.removeEventListener('scroll', this.onScroll); this.rootEl.removeEventListener('scroll', this.onScroll);
}, },
methods: { methods: {
mount(root) {
this.rootEl = root;
this.rootEl.addEventListener('scroll', this.onScroll);
},
isScrollTop() { isScrollTop() {
if (this.rootEl == null) return true; if (this.rootEl == null) return true;
return this.rootEl.scrollTop <= 8; return this.rootEl.scrollTop <= 8;

View file

@ -0,0 +1,33 @@
<template>
<div>
<x-column>
<span slot="header">
<template v-if="src == 'home'">%fa:home% %i18n:@home%</template>
<template v-if="src == 'local'">%fa:R comments% %i18n:@local%</template>
<template v-if="src == 'global'">%fa:globe% %i18n:@global%</template>
<template v-if="src == 'list'">%fa:list% {{ list.title }}</template>
</span>
<x-tl :src="src"/>
</x-column>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import XColumn from './deck.column.vue';
import XTl from './deck.tl.vue';
export default Vue.extend({
components: {
XColumn,
XTl
},
props: {
src: {
type: String,
required: false
}
},
});
</script>

View file

@ -14,10 +14,6 @@ export default Vue.extend({
}, },
props: { props: {
root: {
type: Object,
required: false
},
src: { src: {
type: String, type: String,
required: false, required: false,

View file

@ -1,21 +1,20 @@
<template> <template>
<mk-ui :class="$style.root"> <mk-ui :class="$style.root">
<div class="qlvquzbjribqcaozciifydkngcwtyzje"> <div class="qlvquzbjribqcaozciifydkngcwtyzje">
<x-column src="home"/> <x-tl-column src="home"/>
<x-column src="home"/> <x-tl-column src="local"/>
<x-column src="home"/> <x-tl-column src="global"/>
<x-column src="home"/>
</div> </div>
</mk-ui> </mk-ui>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import XColumn from './deck.column.vue'; import XTlColumn from './deck.tl-column.vue';
export default Vue.extend({ export default Vue.extend({
components: { components: {
XColumn XTlColumn
} }
}); });
</script> </script>

View file

@ -221,7 +221,9 @@ export default async (user: IUser, data: {
} }
// Publish note to global timeline stream // Publish note to global timeline stream
if (note.visibility == 'public' && note.replyId == null) {
publishGlobalTimelineStream(noteObj); publishGlobalTimelineStream(noteObj);
}
if (note.visibility == 'specified') { if (note.visibility == 'specified') {
data.visibleUsers.forEach(async u => { data.visibleUsers.forEach(async u => {