Add select capability to posts

src/components/ThreadPost.vue

@@ -1,10 +1,14 @@
 <template>
 	<div
 		class='post'
-		:class='{"post--highlighted": highlight}'
+		:class='{
+			"post--highlighted": highlight,
+			"post--selected": selected
+		}'
 		@mouseenter='setPostFooterState(true)'
 		@mouseleave='setPostFooterState(false)'
 	>
+		<span class='post__remove_icon fa fa-check' :class='{"post__remove_icon--show": showSelect}' @click='toggleSelected'></span>
 		<modal-window v-model='showShareModal'>
 			<div style='padding: 0rem 1rem 1rem 1rem;'>
 				<p>Copy this URL to share the post</p>
@@ -72,7 +76,7 @@
 
 	export default {
 		name: 'ThreadPost',
-		props: ['post', 'highlight', 'showReply', 'showThread'],
+		props: ['post', 'highlight', 'showReply', 'showThread', 'showSelect'],
 		components: {
 			PostReply,
 			ModalWindow,
@@ -87,7 +91,8 @@
 			return {
 				hover: false,
 				showShareModal: false,
-				postURL: `${location.origin}/p/${post.id}`
+				postURL: `${location.origin}/p/${post.id}`,
+				selected: false
 			}
 		},
 		computed: {
@@ -108,6 +113,16 @@
 			},
 			goToThread () {
 				this.$router.push(`/thread/${this.post.Thread.slug}/${this.post.Thread.id}`)
+			},
+			toggleSelected () {
+				this.selected = !this.selected
+
+				this.$emit('selected', { state: this.selected, id: post.id })
+			}
+		},
+		watch: {
+			showSelect () {
+				this.selected = false
 			}
 		}
 	}
@@ -136,6 +151,7 @@
 		border-bottom: thin solid $color__gray--primary;
 		transition: background-color 0.5s;
 		margin: 0.5rem 0;
+		border-radius: 0.25rem;
 
 		@at-root #{&}--highlighted {
 			background-color: $color__lightgray--darkest;
@@ -150,6 +166,33 @@
 			margin-bottom: 0;
 		}
 
+		@at-root #{&}__remove_icon {
+			position: absolute;
+			right: 1rem;
+			display: inline-block;
+			top: 1rem;
+			color: #fff;
+			cursor: pointer;
+			background-color: gray;
+			z-index: 1;
+			border-radius: 100%;
+			opacity: 0;
+			pointer-events: none;
+			padding: 0.25rem;
+
+			transition: all 0.2s;
+
+			@at-root #{&}--show {
+				opacity: 1;
+				pointer-events: all;
+			}
+		}
+		@at-root #{&}--selected {
+			transform: scale(0.95);
+			padding: 1rem;
+			background-color: $color__lightgray--primary;
+		}
+
 		@at-root #{&}__meta_data {
 			display: flex;
 			padding-top: 0.75rem;

src/components/routes/Thread.vue

@@ -8,6 +8,7 @@
 					{ event: "remove_posts", value: "Remove posts" }
 				]'
 				@lock_thread='setThreadLockedState'
+				@remove_posts='setThreadSelectState'
 			>
 				<button class='button'>
 					<span class='fa fa-cogs' style='margin-right: 0.25rem;'></span>
@@ -74,6 +75,7 @@
 					@goToPost='goToPost'
 					:post='post'
 					:show-reply='!$store.state.thread.locked'
+					:showSelect='showSelect'
 					:highlight='highlightedPostIndex === index'
 					:class='{"post--last": index === posts.length-1}'
 					ref='posts'
@@ -113,7 +115,8 @@
 		data () {
 			return {
 				headerTitle: false,
-				highlightedPostIndex: null
+				highlightedPostIndex: null,
+				showSelect: false
 			}
 		},
 		computed: {
@@ -138,6 +141,9 @@
 			setThreadLockedState () {
 				this.$store.dispatch('setThreadLockedState', this)
 			},
+			setThreadSelectState () {
+				this.showSelect = !this.showSelect
+			},
 			showEditor () {
 				this.$store.commit('setThreadEditorState', true);
 			},