Fix bug
This commit is contained in:
		
							parent
							
								
									af9c5c6ab7
								
							
						
					
					
						commit
						af501f5eeb
					
				
					 5 changed files with 71 additions and 31 deletions
				
			
		|  | @ -1,10 +1,10 @@ | |||
| <template> | ||||
| <x-widgets-column v-if="column.type == 'widgets'"/> | ||||
| <x-notifications-column v-else-if="column.type == 'notifications'"/> | ||||
| <x-tl-column v-else-if="column.type == 'home'"/> | ||||
| <x-tl-column v-else-if="column.type == 'local'"/> | ||||
| <x-tl-column v-else-if="column.type == 'global'"/> | ||||
| <x-tl-column v-else-if="column.type == 'list'"/> | ||||
| <x-widgets-column v-if="column.type == 'widgets'" :column="column" :is-stacked="isStacked" :is-active="isActive"/> | ||||
| <x-notifications-column v-else-if="column.type == 'notifications'" :column="column" :is-stacked="isStacked" :is-active="isActive"/> | ||||
| <x-tl-column v-else-if="column.type == 'home'" :column="column" :is-stacked="isStacked" :is-active="isActive"/> | ||||
| <x-tl-column v-else-if="column.type == 'local'" :column="column" :is-stacked="isStacked" :is-active="isActive"/> | ||||
| <x-tl-column v-else-if="column.type == 'global'" :column="column" :is-stacked="isStacked" :is-active="isActive"/> | ||||
| <x-tl-column v-else-if="column.type == 'list'" :column="column" :is-stacked="isStacked" :is-active="isActive"/> | ||||
| </template> | ||||
| 
 | ||||
| <script lang="ts"> | ||||
|  | @ -35,14 +35,6 @@ export default Vue.extend({ | |||
| 			required: false, | ||||
| 			default: true | ||||
| 		} | ||||
| 	}, | ||||
| 
 | ||||
| 	provide() { | ||||
| 		return { | ||||
| 			column: this.column, | ||||
| 			isStacked: this.isStacked, | ||||
| 			isActive: this.isActive | ||||
| 		}; | ||||
| 	} | ||||
| }); | ||||
| </script> | ||||
|  |  | |||
|  | @ -1,11 +1,11 @@ | |||
| <template> | ||||
| <div class="dnpfarvgbnfmyzbdquhhzyxcmstpdqzs" :class="{ naked, narrow, isActive, isStacked }"> | ||||
| <div class="dnpfarvgbnfmyzbdquhhzyxcmstpdqzs" :class="{ naked, narrow, active, isStacked }"> | ||||
| 	<header :class="{ indicate: count > 0 }" @click="toggleActive"> | ||||
| 		<slot name="header"></slot> | ||||
| 		<span class="count" v-if="count > 0">({{ count }})</span> | ||||
| 		<button ref="menu" @click.stop="showMenu">%fa:caret-down%</button> | ||||
| 	</header> | ||||
| 	<div ref="body" v-show="isActive"> | ||||
| 	<div ref="body" v-show="active"> | ||||
| 		<slot></slot> | ||||
| 	</div> | ||||
| </div> | ||||
|  | @ -17,6 +17,18 @@ import Menu from '../../../../common/views/components/menu.vue'; | |||
| 
 | ||||
| export default Vue.extend({ | ||||
| 	props: { | ||||
| 		column: { | ||||
| 			type: Object, | ||||
| 			required: true | ||||
| 		}, | ||||
| 		isStacked: { | ||||
| 			type: Boolean, | ||||
| 			required: true | ||||
| 		}, | ||||
| 		isActive: { | ||||
| 			type: Boolean, | ||||
| 			required: true | ||||
| 		}, | ||||
| 		name: { | ||||
| 			type: String, | ||||
| 			required: false | ||||
|  | @ -39,21 +51,18 @@ export default Vue.extend({ | |||
| 	}, | ||||
| 
 | ||||
| 	inject: { | ||||
| 		column: { from: 'column' }, | ||||
| 		_isActive: { from: 'isActive' }, | ||||
| 		isStacked: { from: 'isStacked' }, | ||||
| 		getColumnVm: { from: 'getColumnVm' } | ||||
| 	}, | ||||
| 
 | ||||
| 	data() { | ||||
| 		return { | ||||
| 			count: 0, | ||||
| 			isActive: this._isActive | ||||
| 			active: this.isActive | ||||
| 		}; | ||||
| 	}, | ||||
| 
 | ||||
| 	watch: { | ||||
| 		isActive(v) { | ||||
| 		active(v) { | ||||
| 			if (v && this.isScrollTop()) { | ||||
| 				this.$emit('top'); | ||||
| 			} | ||||
|  | @ -79,12 +88,12 @@ export default Vue.extend({ | |||
| 		toggleActive() { | ||||
| 			if (!this.isStacked) return; | ||||
| 			const vms = this.$store.state.settings.deck.layout.find(ids => ids.indexOf(this.column.id) != -1).map(id => this.getColumnVm(id)); | ||||
| 			if (this.isActive && vms.filter(vm => vm.$el.classList.contains('isActive')).length == 1) return; | ||||
| 			this.isActive = !this.isActive; | ||||
| 			if (this.active && vms.filter(vm => vm.$el.classList.contains('active')).length == 1) return; | ||||
| 			this.active = !this.active; | ||||
| 		}, | ||||
| 
 | ||||
| 		isScrollTop() { | ||||
| 			return this.isActive && this.$refs.body.scrollTop == 0; | ||||
| 			return this.active && this.$refs.body.scrollTop == 0; | ||||
| 		}, | ||||
| 
 | ||||
| 		onScroll() { | ||||
|  | @ -176,7 +185,7 @@ root(isDark) | |||
| 	box-shadow 0 2px 16px rgba(#000, 0.1) | ||||
| 	overflow hidden | ||||
| 
 | ||||
| 	&:not(.isActive) | ||||
| 	&:not(.active) | ||||
| 		flex-basis $header-height | ||||
| 		min-height $header-height | ||||
| 
 | ||||
|  |  | |||
|  | @ -1,5 +1,5 @@ | |||
| <template> | ||||
| <x-column :name="name"> | ||||
| <x-column :name="name" :column="column" :is-stacked="isStacked" :is-active="isActive"> | ||||
| 	<span slot="header">%fa:bell R%{{ name }}</span> | ||||
| 
 | ||||
| 	<x-notifications/> | ||||
|  | @ -17,7 +17,20 @@ export default Vue.extend({ | |||
| 		XNotifications | ||||
| 	}, | ||||
| 
 | ||||
| 	inject: ['column'], | ||||
| 	props: { | ||||
| 		column: { | ||||
| 			type: Object, | ||||
| 			required: true | ||||
| 		}, | ||||
| 		isStacked: { | ||||
| 			type: Boolean, | ||||
| 			required: true | ||||
| 		}, | ||||
| 		isActive: { | ||||
| 			type: Boolean, | ||||
| 			required: true | ||||
| 		} | ||||
| 	}, | ||||
| 
 | ||||
| 	computed: { | ||||
| 		name(): string { | ||||
|  |  | |||
|  | @ -1,5 +1,5 @@ | |||
| <template> | ||||
| <x-column :menu="menu" :name="name"> | ||||
| <x-column :menu="menu" :name="name" :column="column" :is-stacked="isStacked" :is-active="isActive"> | ||||
| 	<span slot="header"> | ||||
| 		<template v-if="column.type == 'home'">%fa:home%</template> | ||||
| 		<template v-if="column.type == 'local'">%fa:R comments%</template> | ||||
|  | @ -30,7 +30,20 @@ export default Vue.extend({ | |||
| 		XListTl | ||||
| 	}, | ||||
| 
 | ||||
| 	inject: ['column'], | ||||
| 	props: { | ||||
| 		column: { | ||||
| 			type: Object, | ||||
| 			required: true | ||||
| 		}, | ||||
| 		isStacked: { | ||||
| 			type: Boolean, | ||||
| 			required: true | ||||
| 		}, | ||||
| 		isActive: { | ||||
| 			type: Boolean, | ||||
| 			required: true | ||||
| 		} | ||||
| 	}, | ||||
| 
 | ||||
| 	data() { | ||||
| 		return { | ||||
|  |  | |||
|  | @ -1,5 +1,5 @@ | |||
| <template> | ||||
| <x-column :menu="menu" :naked="true" :narrow="true" :name="name" class="wtdtxvecapixsepjtcupubtsmometobz"> | ||||
| <x-column :menu="menu" :naked="true" :narrow="true" :name="name" :column="column" :is-stacked="isStacked" :is-active="isActive" class="wtdtxvecapixsepjtcupubtsmometobz"> | ||||
| 	<span slot="header">%fa:calculator%{{ name }}</span> | ||||
| 
 | ||||
| 	<div class="gqpwvtwtprsbmnssnbicggtwqhmylhnq"> | ||||
|  | @ -64,7 +64,20 @@ export default Vue.extend({ | |||
| 		XDraggable | ||||
| 	}, | ||||
| 
 | ||||
| 	inject: ['column'], | ||||
| 	props: { | ||||
| 		column: { | ||||
| 			type: Object, | ||||
| 			required: true | ||||
| 		}, | ||||
| 		isStacked: { | ||||
| 			type: Boolean, | ||||
| 			required: true | ||||
| 		}, | ||||
| 		isActive: { | ||||
| 			type: Boolean, | ||||
| 			required: true | ||||
| 		} | ||||
| 	}, | ||||
| 
 | ||||
| 	data() { | ||||
| 		return { | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue