prparing sidebar for wav upload componnt

6 files changed, 98 insertions, 57 deletions

diff --git a/animism-align/frontend/app/views/editor/align/align.container.js b/animism-align/frontend/app/views/editor/align/align.container.js
index e145936..46954e8 100644
--- a/animism-align/frontend/app/views/editor/align/align.container.js
+++ b/animism-align/frontend/app/views/editor/align/align.container.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 
 import './align.css'
+import './sidebar.css'
 
 import Timeline from './containers/timeline.container.js'
 import Sidebar from './containers/sidebar.container.js'
diff --git a/animism-align/frontend/app/views/editor/align/align.css b/animism-align/frontend/app/views/editor/align/align.css
index d10b601..58adcf8 100644
--- a/animism-align/frontend/app/views/editor/align/align.css
+++ b/animism-align/frontend/app/views/editor/align/align.css
@@ -115,46 +115,9 @@ canvas {
   background-image: url('/static/img/icons_play_white.svg');
 }
 
-/* Script */
-
-.sidebar {
-  position: absolute;
-  top: 0;
-  right: 0;
-  min-width: 4rem;
-  z-index: 8;
-}
-.sidebar textarea {
-  height: calc(100vh - 3.15rem);
-}
-.sidebar button {
-  position: absolute;
-  top: 0.25rem;
-  right: 0.25rem;
-  z-index: 9;
-  border: 0;
-  background: transparent;
-}
-
 /* Annotations */
 
 .annotations {
   position: relative;
   width: 450px;
 }
-
-/* table of contents */
-
-.toc {
-  background: #222;
-  width: 15rem;
-  padding: 0.5rem 0;
-}
-.toc div {
-  width: 15rem;
-  padding: 0.25rem 0.75rem;
-  cursor: pointer;
-}
-.toc div:hover {
-  background: #213;
-}
\ No newline at end of file
diff --git a/animism-align/frontend/app/views/editor/align/components/sidebar/waveUpload.component.js b/animism-align/frontend/app/views/editor/align/components/sidebar/waveUpload.component.js
new file mode 100644
index 0000000..5293ffd
--- /dev/null
+++ b/animism-align/frontend/app/views/editor/align/components/sidebar/waveUpload.component.js
@@ -0,0 +1,17 @@
+import React, { Component } from 'react'
+// import { Link } from 'react-router-dom'
+import { connect } from 'react-redux'
+
+import actions from 'app/actions'
+
+const WaveUpload = ({ peaks }) => {
+  return (
+    <div />
+  )
+}
+
+const mapStateToProps = state => ({
+  peaks: state.align.peaks,
+})
+
+export default connect(mapStateToProps)(WaveUpload)
diff --git a/animism-align/frontend/app/views/editor/align/containers/sidebar.container.js b/animism-align/frontend/app/views/editor/align/containers/sidebar.container.js
index a771f1a..10ebc03 100644
--- a/animism-align/frontend/app/views/editor/align/containers/sidebar.container.js
+++ b/animism-align/frontend/app/views/editor/align/containers/sidebar.container.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import { connect } from 'react-redux'
 // import { Link } from 'react-router-dom'
 
 import actions from 'app/actions'
@@ -6,28 +7,34 @@ import actions from 'app/actions'
 import Script from '../components/sidebar/script.component.js'
 import TableOfContents from '../components/sidebar/tableOfContents.component.js'
 
-export default class Sidebar extends Component {
+class Sidebar extends Component {
   state = {
     mode: "toc",
   }
-  render() {
-    if (this.state.mode === "toc") {
-      return (
-        <div className='sidebar'>
-          <button onClick={() => this.setState({ mode: "script" })}>
-            +
-          </button>
-          <TableOfContents />
-        </div>
-      )
+  componentDidMount(){
+    if (!this.props.peaks.length) {
+      this.setState({ mode: "wav" })
     }
+  }
+
+  render() {
+    const { mode } = this.state
     return (
       <div className='sidebar'>
-        <Script />
-        <button onClick={() => this.setState({ mode: "toc" })}>
-          x
-        </button>
+        <div className='buttons'>
+          <button onClick={() => this.setState({ mode: "txt" })}>text</button>
+          <button onClick={() => this.setState({ mode: "wav" })}>wav</button>
+          <button onClick={() => this.setState({ mode: "toc" })}>contents</button>
+        </div>
+        {mode === 'toc' && <TableOfContents />}
+        {mode === 'txt' && <Script />}
       </div>
     )
   }
 }
+
+const mapStateToProps = state => ({
+  peaks: state.align.peaks,
+})
+
+export default connect(mapStateToProps)(Sidebar)
diff --git a/animism-align/frontend/app/views/editor/align/sidebar.css b/animism-align/frontend/app/views/editor/align/sidebar.css
new file mode 100644
index 0000000..60e9321
--- /dev/null
+++ b/animism-align/frontend/app/views/editor/align/sidebar.css
@@ -0,0 +1,46 @@
+/* Script */
+
+.sidebar {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 15rem;
+  z-index: 8;
+}
+.sidebar textarea {
+  height: calc(100vh - 3.15rem);
+}
+.sidebar .buttons {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 15rem;
+  z-index: 9;
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-start;
+  background: #111;
+}
+.sidebar .buttons button {
+  border: 0;
+  background: transparent;
+}
+.sidebar .buttons button:hover {
+  background: #333;
+}
+
+/* table of contents */
+
+.toc {
+  background: #222;
+  width: 15rem;
+  padding: 0.5rem 0;
+}
+.toc div {
+  width: 15rem;
+  padding: 0.25rem 0.75rem;
+  cursor: pointer;
+}
+.toc div:hover {
+  background: #213;
+}
diff --git a/animism-align/frontend/app/views/nav/nav.css b/animism-align/frontend/app/views/nav/nav.css
index 765c00f..073b045 100644
--- a/animism-align/frontend/app/views/nav/nav.css
+++ b/animism-align/frontend/app/views/nav/nav.css
@@ -28,7 +28,9 @@ header > div:first-child {
   padding-left: 0.5rem;
 }
 header > div:last-child {
-  padding-right: 1.5rem;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
 }
 header > div > button {
   padding: 0.25rem;
@@ -41,11 +43,16 @@ header > div > button:hover {
   border-color: #fff;
   color: #fff;
 }
-header > div:first-child a {
-  padding: 0.5rem;
+header > div > a {
+  background: transparent;
+  padding: 0 1rem;
+  height: 3.125rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
-header > div:last-child a {
-  padding: 0.5rem;
+header > div > a:hover {
+  background: #333;
 }
 header .btn-link:focus,
 header .btn-link:hover,