wip
This commit is contained in:
		
							parent
							
								
									fb7e9310bf
								
							
						
					
					
						commit
						853b846c40
					
				|  | @ -1,55 +1,49 @@ | |||
| <template> | ||||
| <div> | ||||
| 	<template v-if="reactions"> | ||||
| 		<span v-if="reactions.like"><mk-reaction-icon reaction='like'/><span>{ reactions.like }</span></span> | ||||
| 		<span v-if="reactions.love"><mk-reaction-icon reaction='love'/><span>{ reactions.love }</span></span> | ||||
| 		<span v-if="reactions.laugh"><mk-reaction-icon reaction='laugh'/><span>{ reactions.laugh }</span></span> | ||||
| 		<span v-if="reactions.hmm"><mk-reaction-icon reaction='hmm'/><span>{ reactions.hmm }</span></span> | ||||
| 		<span v-if="reactions.surprise"><mk-reaction-icon reaction='surprise'/><span>{ reactions.surprise }</span></span> | ||||
| 		<span v-if="reactions.congrats"><mk-reaction-icon reaction='congrats'/><span>{ reactions.congrats }</span></span> | ||||
| 		<span v-if="reactions.angry"><mk-reaction-icon reaction='angry'/><span>{ reactions.angry }</span></span> | ||||
| 		<span v-if="reactions.confused"><mk-reaction-icon reaction='confused'/><span>{ reactions.confused }</span></span> | ||||
| 		<span v-if="reactions.pudding"><mk-reaction-icon reaction='pudding'/><span>{ reactions.pudding }</span></span> | ||||
| 		<span v-if="reactions.like"><mk-reaction-icon reaction='like'/><span>{{ reactions.like }}</span></span> | ||||
| 		<span v-if="reactions.love"><mk-reaction-icon reaction='love'/><span>{{ reactions.love }}</span></span> | ||||
| 		<span v-if="reactions.laugh"><mk-reaction-icon reaction='laugh'/><span>{{ reactions.laugh }}</span></span> | ||||
| 		<span v-if="reactions.hmm"><mk-reaction-icon reaction='hmm'/><span>{{ reactions.hmm }}</span></span> | ||||
| 		<span v-if="reactions.surprise"><mk-reaction-icon reaction='surprise'/><span>{{ reactions.surprise }}</span></span> | ||||
| 		<span v-if="reactions.congrats"><mk-reaction-icon reaction='congrats'/><span>{{ reactions.congrats }}</span></span> | ||||
| 		<span v-if="reactions.angry"><mk-reaction-icon reaction='angry'/><span>{{ reactions.angry }}</span></span> | ||||
| 		<span v-if="reactions.confused"><mk-reaction-icon reaction='confused'/><span>{{ reactions.confused }}</span></span> | ||||
| 		<span v-if="reactions.pudding"><mk-reaction-icon reaction='pudding'/><span>{{ reactions.pudding }}</span></span> | ||||
| 	</template> | ||||
| </div> | ||||
| </template> | ||||
| 
 | ||||
| <script> | ||||
| 	export default { | ||||
| 		props: ['post'], | ||||
| 		computed: { | ||||
| 			reactions: function() { | ||||
| 				return this.post.reaction_counts; | ||||
| 			} | ||||
| 		} | ||||
| 	}; | ||||
| </script> | ||||
| 
 | ||||
| <mk-reactions-viewer> | ||||
| 	<virtual v-if="reactions"> | ||||
| 		 | ||||
| 	</virtual> | ||||
| 	<style lang="stylus" scoped> | ||||
| 		:scope | ||||
| 			display block | ||||
| 			border-top dashed 1px #eee | ||||
| 			border-bottom dashed 1px #eee | ||||
| 			margin 4px 0 | ||||
| <style lang="stylus" scoped> | ||||
| 	:scope | ||||
| 		display block | ||||
| 		border-top dashed 1px #eee | ||||
| 		border-bottom dashed 1px #eee | ||||
| 		margin 4px 0 | ||||
| 
 | ||||
| 			&:empty | ||||
| 				display none | ||||
| 		&:empty | ||||
| 			display none | ||||
| 
 | ||||
| 		> span | ||||
| 			margin-right 8px | ||||
| 
 | ||||
| 			> mk-reaction-icon | ||||
| 				font-size 1.4em | ||||
| 
 | ||||
| 			> span | ||||
| 				margin-right 8px | ||||
| 				margin-left 4px | ||||
| 				font-size 1.2em | ||||
| 				color #444 | ||||
| 
 | ||||
| 				> mk-reaction-icon | ||||
| 					font-size 1.4em | ||||
| 
 | ||||
| 				> span | ||||
| 					margin-left 4px | ||||
| 					font-size 1.2em | ||||
| 					color #444 | ||||
| 
 | ||||
| 	</style> | ||||
| 	<script> | ||||
| 		this.post = this.opts.post; | ||||
| 
 | ||||
| 		this.on('mount', () => { | ||||
| 			this.update(); | ||||
| 		}); | ||||
| 
 | ||||
| 		this.on('update', () => { | ||||
| 			this.reactions = this.post.reaction_counts; | ||||
| 		}); | ||||
| 	</script> | ||||
| </mk-reactions-viewer> | ||||
| </style> | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue