Bladeren bron

Add share modal with link to post

sbkwgh 8 jaren geleden
bovenliggende
commit
afa2de78ba
2 gewijzigde bestanden met toevoegingen van 20 en 4 verwijderingen
  1. 20 2
      src/components/ThreadPost.vue
  2. 0 2
      src/components/routes/Thread.vue

+ 20 - 2
src/components/ThreadPost.vue

@@ -5,6 +5,13 @@
 		@mouseenter='setPostFooterState(true)'
 		@mouseleave='setPostFooterState(false)'
 	>
+		<modal-window v-model='showShareModal'>
+			<div style='padding: 0rem 1rem 1rem 1rem;'>
+				<p>Copy this URL to share the post</p>
+				<fancy-input placeholder='Post URL' :value='postURL' width='100%'></fancy-input>
+				<button class='button button--modal' @click='setShareModalState(false)'>OK</button>
+			</div>
+		</modal-window>
 		<div class='post__meta_data'>
 			<avatar-icon :user='post.User' class='post__avatar'></avatar-icon>
 			<div class='post__thread' v-if='showThread' @click='goToThread'>{{post.Thread.name}}</div>
@@ -33,7 +40,7 @@
 			</div>
 			<div
 				class='post__footer_group'>
-				<div class='post__action post__share'>Share</div>
+				<div class='post__action post__share' @click='setShareModalState(true)'>Share</div>
 				<div
 					class='post__action post__reply'
 					v-if='$store.state.username && showReply'
@@ -48,6 +55,8 @@
 
 <script>
 	import PostReply from './PostReply'
+	import ModalWindow from './ModalWindow'
+	import FancyInput from './FancyInput'
 	import ReplyingTo from './ReplyingTo'
 	import AvatarIcon from './AvatarIcon'
 
@@ -58,18 +67,27 @@
 		props: ['post', 'highlight', 'showReply', 'showThread'],
 		components: {
 			PostReply,
+			ModalWindow,
+			FancyInput,
 			ReplyingTo,
 			AvatarIcon
 		},
 		data () {
+			let post = this.post
+
 			return {
-				hover: false
+				hover: false,
+				showShareModal: false,
+				postURL: `${location.origin}/thread/${post.Thread.name}/${post.ThreadId}/${post.id}`
 			}
 		},
 		methods: {
 			setPostFooterState (state) {
 				this.hover = state
 			},
+			setShareModalState (val) {
+				this.showShareModal = val
+			},
 			goToThread () {
 				this.$router.push(`/thread/${this.post.Thread.slug}/${this.post.Thread.id}`)
 			}

+ 0 - 2
src/components/routes/Thread.vue

@@ -131,8 +131,6 @@
 					apiURL += '?postId=' + postId
 				}
 
-				console.log('here')
-
 				this.axios
 					.get(apiURL)
 					.then(res => {