From fe2487dea56a51b9f2fffb1ad33d7714c6a05941 Mon Sep 17 00:00:00 2001
From: David Jay <davidgljay@gmail.com>
Date: Wed, 14 Dec 2016 15:02:26 -0500
Subject: [PATCH] Add streams option and sidebar.

---
 client/coral-admin/src/AppRouter.js           |  2 +
 .../coral-admin/src/components/ui/Header.js   |  2 +
 .../src/containers/Streams/Streams.css        | 40 +++++++++++++++++++
 .../src/containers/Streams/Streams.js         | 40 +++++++++++++++++++
 client/coral-admin/src/translations.json      |  1 +
 5 files changed, 85 insertions(+)
 create mode 100644 client/coral-admin/src/containers/Streams/Streams.css
 create mode 100644 client/coral-admin/src/containers/Streams/Streams.js

diff --git a/client/coral-admin/src/AppRouter.js b/client/coral-admin/src/AppRouter.js
index 6d55d7b18..bc9747f34 100644
--- a/client/coral-admin/src/AppRouter.js
+++ b/client/coral-admin/src/AppRouter.js
@@ -4,6 +4,7 @@ import {Router, Route, IndexRoute, browserHistory} from 'react-router';
 import ModerationQueue from 'containers/ModerationQueue/ModerationQueue';
 import CommentStream from 'containers/CommentStream/CommentStream';
 import Configure from 'containers/Configure/Configure';
+import Streams from 'containers/Streams/Streams';
 import CommunityContainer from 'containers/Community/CommunityContainer';
 import LayoutContainer from 'containers/LayoutContainer';
 
@@ -13,6 +14,7 @@ const routes = (
     <Route path='embed' component={CommentStream} />
     <Route path='community' component={CommunityContainer} />
     <Route path='configure' component={Configure} />
+    <Route path='streams' component={Streams} />
   </Route>
 );
 
diff --git a/client/coral-admin/src/components/ui/Header.js b/client/coral-admin/src/components/ui/Header.js
index e4d151d30..4c76424cc 100644
--- a/client/coral-admin/src/components/ui/Header.js
+++ b/client/coral-admin/src/components/ui/Header.js
@@ -16,6 +16,8 @@ export default ({handleLogout}) => (
             activeClassName={styles.active}>{lang.t('configure.community')}</Link>
       <Link className={styles.navLink} to="/admin/configure"
             activeClassName={styles.active}>{lang.t('configure.configure')}</Link>
+          <Link className={styles.navLink} to="/admin/streams"
+            activeClassName={styles.active}>{lang.t('configure.streams')}</Link>
     </Navigation>
     <div className={styles.rightPanel}>
       <ul>
diff --git a/client/coral-admin/src/containers/Streams/Streams.css b/client/coral-admin/src/containers/Streams/Streams.css
new file mode 100644
index 000000000..56d757863
--- /dev/null
+++ b/client/coral-admin/src/containers/Streams/Streams.css
@@ -0,0 +1,40 @@
+.container {
+  padding: 10px;
+  display: flex;
+}
+
+.leftColumn {
+  width: 200px;
+}
+
+.mainContent {
+  width: calc(70% - 300px)
+}
+
+.searchIcon {
+  vertical-align: middle;
+  font-size: 18px;
+  color: #ccc;
+}
+
+.searchBox {
+  padding: 3px;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  width: 90%;
+  display: flex;
+}
+
+.searchBoxInput {
+  border: none;
+  flex: 1;
+  font-size: 14px;
+}
+
+.searchBoxInput:focus {
+  outline: none;
+}
+
+.hidden {
+  display: none;
+}
diff --git a/client/coral-admin/src/containers/Streams/Streams.js b/client/coral-admin/src/containers/Streams/Streams.js
new file mode 100644
index 000000000..0e3e0d3f1
--- /dev/null
+++ b/client/coral-admin/src/containers/Streams/Streams.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import styles from './Streams.css';
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from '../../translations.json';
+import {
+  RadioGroup,
+  Radio,
+  Icon
+} from 'react-mdl';
+
+const Streams = () => <div className={styles.container}>
+  <div className={styles.leftColumn}>
+  <div className={styles.searchBox}>
+    <Icon name='search' className={styles.searchIcon}/>
+    <input
+      type='text'
+      className={styles.searchBoxInput}
+      onChange={() => {}}
+      placeholder="Search"/>
+  </div>
+  <div>{lang.t('streams.filter-streams')}</div>
+  <div>{lang.t('streams.stream-status')}</div>
+  <RadioGroup name='status' value='all'>
+    <Radio value='all'>{lang.t('streams.all')}</Radio>
+    <Radio value='open'>{lang.t('streams.open')}</Radio>
+    <Radio value='closed'>{lang.t('streams.closed')}</Radio>
+  </RadioGroup>
+  <div>{lang.t('streams.sort-by')}</div>
+  <RadioGroup name='sortBy' value='newest'>
+    <Radio value='newest'>{lang.t('streams.newest')}</Radio>
+    <Radio value='oldest'>{lang.t('streams.oldest')}</Radio>
+  </RadioGroup>
+  </div>
+  <div className={styles.mainContent}>
+  </div>
+</div>;
+
+export default Streams;
+
+const lang = new I18n(translations);
diff --git a/client/coral-admin/src/translations.json b/client/coral-admin/src/translations.json
index e462f7567..4d3525dd9 100644
--- a/client/coral-admin/src/translations.json
+++ b/client/coral-admin/src/translations.json
@@ -55,6 +55,7 @@
       "moderate": "Moderate",
       "configure": "Configure",
       "community": "Community",
+      "streams": "Streams",
       "closed-comments-desc": "Write a message for closed threads",
       "closed-comments-label": "Write a message...",
       "comment-count-header": "Limit Comment Length",