wip
This commit is contained in:
parent
e28d1c7569
commit
dfa2c951d6
7 changed files with 72 additions and 23 deletions
|
@ -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">
|
||||||
|
|
|
@ -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
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
33
src/client/app/desktop/views/pages/deck/deck.tl-column.vue
Normal file
33
src/client/app/desktop/views/pages/deck/deck.tl-column.vue
Normal 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>
|
|
@ -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,
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 => {
|
||||||
|
|
Loading…
Reference in a new issue