diff --git a/client/coral-embed-stream/src/CommentStream.js b/client/coral-embed-stream/src/CommentStream.js
index a0eaca044..89e5e82c6 100644
--- a/client/coral-embed-stream/src/CommentStream.js
+++ b/client/coral-embed-stream/src/CommentStream.js
@@ -3,7 +3,8 @@ import {
itemActions,
Notification,
notificationActions,
- authActions
+ authActions,
+ embedStream
} from '../../coral-framework';
import {connect} from 'react-redux';
import CommentBox from '../../coral-plugin-commentbox/CommentBox';
@@ -19,17 +20,20 @@ import LikeButton from '../../coral-plugin-likes/LikeButton';
import PermalinkButton from '../../coral-plugin-permalinks/PermalinkButton';
import SignInContainer from '../../coral-sign-in/containers/SignInContainer';
import UserBox from '../../coral-sign-in/components/UserBox';
+import {TabBar, Tab, ContentBox} from '../../coral-ui';
const {addItem, updateItem, postItem, getStream, postAction, deleteAction, appendItemArray} = itemActions;
const {addNotification, clearNotification} = notificationActions;
const {logout} = authActions;
+const {changeTab} = embedStream;
const mapStateToProps = (state) => {
return {
config: state.config.toJS(),
items: state.items.toJS(),
notification: state.notification.toJS(),
- auth: state.auth.toJS()
+ auth: state.auth.toJS(),
+ embedStream: state.embedStream.toJS()
};
};
@@ -46,7 +50,8 @@ const mapDispatchToProps = (dispatch) => ({
},
appendItemArray: (item, property, value, addToFront, itemType) =>
dispatch(appendItemArray(item, property, value, addToFront, itemType)),
- logout: () => dispatch(logout())
+ logout: () => dispatch(logout()),
+ changeTab: tab => dispatch(changeTab(tab))
});
class CommentStream extends Component {
@@ -86,137 +91,149 @@ class CommentStream extends Component {
const rootItem = this.props.items.assets && this.props.items.assets[rootItemId];
const {actions, users, comments} = this.props.items;
const {loggedIn, user, showSignInDialog} = this.props.auth;
+ const {changeTab} = this.props.embedStream;
+
return
{
rootItem
?
-
- {
- rootItem.comments && rootItem.comments.map((commentId) => {
- const comment = comments[commentId];
- return
-
-
-
-
-
-
-
-
-
- {
- comment.children &&
- comment.children.map((replyId) => {
- let reply = this.props.items.comments[replyId];
- return
-
-
-
-
-
-
+
+ Settings
+
+
+
+
+ {
+ rootItem.comments && rootItem.comments.map((commentId) => {
+ const comment = comments[commentId];
+ return
+
+
+
+
+
+
+
+
+
+ {
+ comment.children &&
+ comment.children.map((replyId) => {
+ let reply = this.props.items.comments[replyId];
+ return
-
-
- ;
- })
- }
- ;
- })
- }
-
+ ;
+ })
+ }
+ ;
+ })
+ }
+
+
+
+ Bio!
+
: 'Loading'
}
diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index 174f3ef16..2da0c09c4 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -154,11 +154,6 @@ hr {
color: #F00;
}
-/* Comment count styles */
-.coral-plugin-comment-count-text {
- margin-bottom: 15px;
-}
-
.coral-plugin-pubdate-text {
color: #CCC;
display: inline-block;
diff --git a/client/coral-framework/actions/embedStream.js b/client/coral-framework/actions/embedStream.js
new file mode 100644
index 000000000..0452d8a9c
--- /dev/null
+++ b/client/coral-framework/actions/embedStream.js
@@ -0,0 +1,7 @@
+import * as actions from '../constants/embedStream';
+
+export const changeTab = view => dispatch =>
+ dispatch({
+ type: actions.CHANGE_TAB,
+ view
+ });
diff --git a/client/coral-framework/constants/embedStream.js b/client/coral-framework/constants/embedStream.js
new file mode 100644
index 000000000..5b0344234
--- /dev/null
+++ b/client/coral-framework/constants/embedStream.js
@@ -0,0 +1 @@
+export const CHANGE_TAB = 'CHANGE_VIEW';
diff --git a/client/coral-framework/index.js b/client/coral-framework/index.js
index 4c6ae741f..478c395bd 100644
--- a/client/coral-framework/index.js
+++ b/client/coral-framework/index.js
@@ -5,6 +5,7 @@ import * as itemActions from './actions/items';
import I18n from './modules/i18n/i18n';
import * as notificationActions from './actions/notification';
import * as authActions from './actions/auth';
+import * as embedStream from './actions/embedStream';
export {
Notification,
@@ -13,5 +14,6 @@ export {
itemActions,
I18n,
notificationActions,
- authActions
+ authActions,
+ embedStream
};
diff --git a/client/coral-framework/reducers/embedStream.js b/client/coral-framework/reducers/embedStream.js
new file mode 100644
index 000000000..0cc0078ca
--- /dev/null
+++ b/client/coral-framework/reducers/embedStream.js
@@ -0,0 +1,16 @@
+import {Map} from 'immutable';
+import * as actions from '../constants/embedStream';
+
+const initialState = Map({
+ tab: 'COMMENT_BOX'
+});
+
+export default function embedStream (state = initialState, action) {
+ switch (action.type) {
+ case actions.CHANGE_TAB :
+ return state
+ .set('tab', action.tab);
+ default :
+ return state;
+ }
+}
diff --git a/client/coral-framework/reducers/index.js b/client/coral-framework/reducers/index.js
index b38de61ae..964774000 100644
--- a/client/coral-framework/reducers/index.js
+++ b/client/coral-framework/reducers/index.js
@@ -5,6 +5,7 @@ import config from './config';
import items from './items';
import notification from './notification';
import auth from './auth';
+import embedStream from './embedStream';
/**
* Expose the combined main reducer
@@ -14,5 +15,6 @@ export default combineReducers({
config,
items,
notification,
- auth
+ auth,
+ embedStream
});
diff --git a/client/coral-ui/components/ContentBox.js b/client/coral-ui/components/ContentBox.js
new file mode 100644
index 000000000..737c9a5e6
--- /dev/null
+++ b/client/coral-ui/components/ContentBox.js
@@ -0,0 +1,6 @@
+import React from 'react';
+
+export default ({children, show = true}) => (
+ show ?
{children}
: null
+);
+
diff --git a/client/coral-ui/components/Tab.css b/client/coral-ui/components/Tab.css
new file mode 100644
index 000000000..4acff0333
--- /dev/null
+++ b/client/coral-ui/components/Tab.css
@@ -0,0 +1,20 @@
+.active {
+ background: #F0F0F0;
+}
+
+.base {
+ color: #4E5259;
+ border: solid 1px #D8D8D8;
+ background: white;
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
+ display: inline-block;
+ border-bottom: none;
+ padding: 8px 10px;
+ margin-right: -1px;
+}
+
+.base:hover {
+ background: #f3f3f3;
+ cursor: pointer;
+}
diff --git a/client/coral-ui/components/Tab.js b/client/coral-ui/components/Tab.js
new file mode 100644
index 000000000..baff8358a
--- /dev/null
+++ b/client/coral-ui/components/Tab.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import styles from './Tab.css';
+
+export default ({children, tabId, active, onTabClick}) => (
+
+ {children}
+
+);
+
diff --git a/client/coral-ui/components/TabBar.css b/client/coral-ui/components/TabBar.css
new file mode 100644
index 000000000..e006c8e31
--- /dev/null
+++ b/client/coral-ui/components/TabBar.css
@@ -0,0 +1,5 @@
+.base {
+ list-style: none;
+ border-bottom: solid 1px #D8D8D8;
+ padding: 0;
+}
diff --git a/client/coral-ui/components/TabBar.js b/client/coral-ui/components/TabBar.js
new file mode 100644
index 000000000..759825c11
--- /dev/null
+++ b/client/coral-ui/components/TabBar.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import styles from './TabBar.css';
+
+export class TabBar extends React.Component {
+ constructor(props) {
+ super(props);
+ this.handleClickTab = this.handleClickTab.bind(this);
+ }
+
+ handleClickTab (e) {
+ console.log(e);
+ }
+
+ render() {
+ const {children, activeTab = 0} = this.props;
+
+ return (
+
+
+ {React.Children.map(children, (child, tabId) =>
+ React.cloneElement(child, {
+ tabId,
+ active: tabId === activeTab,
+ onTabClick: this.handleClickTab,
+ })
+ )}
+
+
+ );
+ }
+}
+
+export default TabBar;
diff --git a/client/coral-ui/index.js b/client/coral-ui/index.js
index 416f89671..9d13057ce 100644
--- a/client/coral-ui/index.js
+++ b/client/coral-ui/index.js
@@ -1,3 +1,6 @@
export {default as Dialog} from './components/Dialog';
export {default as CoralLogo} from './components/CoralLogo';
export {default as FabButton} from './components/FabButton';
+export {default as TabBar} from './components/TabBar';
+export {default as Tab} from './components/Tab';
+export {default as ContentBox} from './components/ContentBox';