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
 | 
				
			||||||
		publishGlobalTimelineStream(noteObj);
 | 
							if (note.visibility == 'public' && note.replyId == null) {
 | 
				
			||||||
 | 
								publishGlobalTimelineStream(noteObj);
 | 
				
			||||||
 | 
							}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
		if (note.visibility == 'specified') {
 | 
							if (note.visibility == 'specified') {
 | 
				
			||||||
			data.visibleUsers.forEach(async u => {
 | 
								data.visibleUsers.forEach(async u => {
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue