toggle script

1 files changed, 22 insertions, 5 deletions

diff --git a/animism-align/frontend/app/views/align/containers/script.container.js b/animism-align/frontend/app/views/align/containers/script.container.js
index cc340c6..fe3f27b 100644
--- a/animism-align/frontend/app/views/align/containers/script.container.js
+++ b/animism-align/frontend/app/views/align/containers/script.container.js
@@ -6,17 +6,34 @@ import { connect } from 'react-redux'
 import actions from 'app/actions'
 
 class Timeline extends Component {
+  state = {
+    visible: false,
+  }
   constructor(props){
     super(props)
   }
   render() {
     if (this.props.text.loading) return <div />
+    if (!this.state.visible) {
+      return (
+        <div className='script'>
+          <button onClick={() => this.setState({ visible: true })}>
+            +
+          </button>
+        </div>
+      )
+    }
     return (
-      <textarea 
-        className='script'
-        onChange={e => actions.site.updateText(e.target.value)}
-        value={this.props.text}
-      />
+      <div className='script'>
+        <textarea 
+          className='script'
+          onChange={e => actions.site.updateText(e.target.value)}
+          value={this.props.text}
+        />
+        <button onClick={() => this.setState({ visible: false })}>
+          x
+        </button>
+      </div>
     )
   }
 }