Add streams option and sidebar.

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>
 );
 

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>

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;
+}

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);

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",