Add show/hide capability to editor

src/components/InputEditor.vue

@@ -1,14 +1,18 @@
 <template>
 	<div
 		class='input_editor'
-		:class='{"input_editor--focus": focused, "input_editor--float": float}'
+		:class='{
+			"input_editor--focus": focused,
+			"input_editor--float": float,
+			"input_editor--hidden": !visible
+		}'
 	>
+		<div class='input_editor__close input_editor__format_button' @click='closeEditor'>&times;</div>
 		<tab-view :tabs='["Editor", "Preview"]' :name='name' small-tabs='true'>
 			<template slot='Editor'>
 				<div class='input_editor__format_bar'>
 					<div class='input_editor__format_button' @click='replaceSelectedText("**", "**")'>B</div>
 					<div class='input_editor__format_button' @click='replaceSelectedText("*", "*")'>I</div>
-					<div class='input_editor__spacer'></div>
 					<div class='input_editor__format_button' @click='showLinkModal("thread_editor--link")'><span class='fa fa-link'></span></div>
 					<div class='input_editor__format_button' @click='formatCode'><span class='fa fa-code'></span></div>
 					<div class='input_editor__format_button' @click='showModal("thread_editor--picture")'><span class='fa fa-picture-o'></span></div>
@@ -78,7 +82,10 @@
 		},
 		computed: {
 			editor () {
-				return this.$store.state.editors[this.name];
+				return this.$store.state.editors[this.name].value;
+			},
+			visible () {
+				return this.$store.state.editors[this.name].visible;
 			},
 			markdownHTML () {
 				return Marked(this.editor);
@@ -103,7 +110,13 @@
 				this.linkText = '';
 				this.linkURL = '';
 			},
-
+			closeEditor () {
+				this.$store.commit({
+					type: 'showEditor',
+					name: this.name,
+					value: false
+				});
+			},
 			setEditor (value) {
 				this.$store.commit({
 					type: 'setEditor',
@@ -179,15 +192,35 @@
 		border: 0.125rem solid $color__gray--darker;
 		position: relative;
 
+		margin-bottom: 0;
+		pointer-events: all;
+		opacity: 1;
+		transition:  margin-bottom 0.2s, opacity 0.2s;
+
 		@at-root #{&}--focus {
 			border-color: $color__gray--darkest;
 		}
 
 		@at-root #{&}--float {
 			position: fixed;
+			z-index: 2;
 			bottom: 0;
 		}
 
+		@at-root #{&}--hidden {
+			pointer-events: none;
+			opacity: 0;
+			margin-bottom: -3rem;
+			transition:  margin-bottom 0.2s, opacity 0.2s;
+		}
+
+
+		@at-root #{&}__close {
+			position: absolute;
+			right: 0.3rem;
+			top: 0.5rem;
+		}
+
 		@at-root #{&}__format_bar {
 			width: auto;
 			position: absolute;
@@ -198,6 +231,7 @@
 			display: flex;
 			align-items: center;
 			padding: 0 0.125rem;
+			margin-right: 2.4rem;
 		}
 		@at-root #{&}__format_button {
 			height: 1.5rem;

src/components/routes/Thread.vue

@@ -2,7 +2,7 @@
 	<div class='route_container'>
 		<header class='thread_header'>
 			<div class='thread_header__thread_title'>Thread title</div>
-			<button class='button thread_header__reply_button'>Reply to thread</button>
+			<button class='button thread_header__reply_button' @click='showEditor'>Reply to thread</button>
 		</header>
 		<input-editor name='thread' float='true'></input-editor>
 		<div class='posts'>
@@ -19,7 +19,7 @@
 				</div>
 				<div class='post__actions'>
 					<div class='post__action post__share'>Share</div>
-					<div class='post__action post__reply'>Reply</div>
+					<div class='post__action post__reply' @click='showEditor'>Reply</div>
 				</div>
 			</div>
 		</div>
@@ -33,6 +33,15 @@
 		name: 'Thread',
 		components: {
 			InputEditor
+		},
+		methods: {
+			showEditor () {
+				this.$store.commit({
+					type: 'showEditor',
+					name: 'thread',
+					value: true
+				})
+			}
 		}
 	}
 </script>

src/store/index.js

@@ -31,7 +31,10 @@ export default new Vuex.Store({
 			'thread_editor--link': false
 		},
 		editors: {
-			thread: ''
+			thread: {
+				value: '',
+				visible: true
+			}
 		}
 	},
 	mutations: {
@@ -39,7 +42,10 @@ export default new Vuex.Store({
 			state.tabs[payload.tab] = payload.index;
 		},
 		setEditor (state, payload) {
-			state.editors[payload.name] = payload.value;
+			state.editors[payload.name].value = payload.value;
+		},
+		showEditor (state, payload) {
+			state.editors[payload.name].visible = payload.value;
 		},
 		setSelectOptions (state, payload) {
 			state.selectOptions[payload.name] = payload.value;