Configure Stream Ready, Checkbox Coral UI

client/coral-configure/components/ConfigureCommentStream.css

@@ -0,0 +1,37 @@
+.container {
+  position: relative;
+}
+
+.apply {
+  position: absolute;
+  top: 38%;
+  transform: translateX(-50%);
+  right: 0;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+}
+
+ul ul {
+  padding-left: 20px
+}
+
+.checkbox {
+  vertical-align: top;
+  margin: 12px 12px 12px 0;
+}
+
+h4 {
+  font-size: 14px;
+  margin-bottom: 5px;
+}
+
+p {
+  max-width: 380px;
+}
+
+.wrapper {
+  margin-bottom: 20px;
+}

client/coral-configure/components/ConfigureCommentStream.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import {Button, Checkbox} from 'coral-ui';
+import styles from './ConfigureCommentStream.css';
+
+export default ({handleChange, handleApply, changed}) => (
+  <div className={styles.wrapper}>
+    <div className={styles.container}>
+      <h3>Configure Comment Stream</h3>
+      <p>
+        As an admin you may customize the settings for the comment stream for this article
+      </p>
+      <Button
+        className={styles.apply}
+        cStyle={changed ? 'green' : 'darkGrey'}
+        onClick={handleApply}
+      >
+        Apply
+      </Button>
+    </div>
+    <ul>
+      <li>
+        <Checkbox
+          className={styles.checkbox}
+          cStyle={changed ? 'green' : 'darkGrey'}
+          name="premod"
+          onChange={handleChange}
+          info={{
+            title: 'Enable Premoderation',
+            description: 'Moderators must approve any comment before its published'
+          }}
+        />
+        <ul>
+          <li>
+            <Checkbox
+              className={styles.checkbox}
+              cStyle={changed ? 'green' : 'darkGrey'}
+              name="premodLinks"
+              onChange={handleChange}
+              info={{
+                title: 'Pre-Moderate Comments Containing Links',
+                description: 'Moderators must approve any comment containing a link before its published.'
+              }}
+            />
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </div>
+);

client/coral-configure/containers/ConfigureStreamContainer.js

@@ -0,0 +1,66 @@
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+
+import {updateOpenStatus} from '../../coral-framework/actions/config';
+
+import CloseCommentsInfo from '../components/CloseCommentsInfo';
+import ConfigureCommentStream from '../components/ConfigureCommentStream';
+
+class ConfigureStreamContainer extends Component {
+  constructor (props) {
+    super(props);
+
+    this.state = {
+      premod: false,
+      premodLinks: false
+    };
+
+    this.toggleStatus = this.toggleStatus.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleChange (e) {
+    const {name, checked} = e.target;
+    this.setState({
+      [name]: checked,
+      changed: true
+    });
+  }
+
+  toggleStatus () {
+    this.props.updateStatus(this.props.config.status === 'open' ? 'closed' : 'open');
+  }
+
+  render () {
+    const {status} = this.props;
+    return (
+      <div>
+        <ConfigureCommentStream
+          handleChange={this.handleChange}
+          handleApply={this.props.handleApply}
+          changed={this.state.changed}
+        />
+        <hr />
+        <h3>{status === 'open' ? 'Close' : 'Open'} Comment Stream</h3>
+        <CloseCommentsInfo
+          onClick={this.toggleStatus}
+          status={status}
+        />
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = (state) => ({
+  config: state.config.toJS()
+});
+
+const mapDispatchToProps = dispatch => ({
+  updateStatus: status => dispatch(updateOpenStatus(status)),
+  handleApply: () => {}
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ConfigureStreamContainer);

client/coral-embed-stream/src/CommentStream.js

@@ -6,8 +6,7 @@ import {
   itemActions,
   Notification,
   notificationActions,
-  authActions,
-  configActions
+  authActions
 } from '../../coral-framework';
 
 import CommentBox from '../../coral-plugin-commentbox/CommentBox';
@@ -27,12 +26,12 @@ import {TabBar, Tab, TabContent, Spinner} from '../../coral-ui';
 import SettingsContainer from '../../coral-settings/containers/SettingsContainer';
 import RestrictedContent from '../../coral-framework/components/RestrictedContent';
 import SuspendedAccount from '../../coral-framework/components/SuspendedAccount';
-import CloseCommentsInfo from '../../coral-framework/components/CloseCommentsInfo';
+
+import ConfigureStreamContainer from '../../coral-configure/containers/ConfigureStreamContainer';
 
 const {addItem, updateItem, postItem, getStream, postAction, deleteAction, appendItemArray} = itemActions;
 const {addNotification, clearNotification} = notificationActions;
 const {logout, showSignInDialog} = authActions;
-const {updateOpenStatus} = configActions;
 
 class CommentStream extends Component {
 
@@ -44,7 +43,6 @@ class CommentStream extends Component {
     };
 
     this.changeTab = this.changeTab.bind(this);
-    this.toggleStatus = this.toggleStatus.bind(this);
   }
 
   changeTab (tab) {
@@ -53,10 +51,6 @@ class CommentStream extends Component {
     });
   }
 
-  toggleStatus () {
-    this.props.updateStatus(this.props.config.status === 'open' ? 'closed' : 'open');
-  }
-
   static propTypes = {
     items: PropTypes.object.isRequired,
     addItem: PropTypes.func.isRequired,
@@ -66,10 +60,9 @@ class CommentStream extends Component {
   componentDidMount () {
     // Set up messaging between embedded Iframe an parent component
     this.pym = new Pym.Child({polling: 100});
-
     const path = /https?\:\/\/([^?#]+)/.exec(this.pym.parentUrl);
+    this.props.getStream(window.location);
 
-    this.props.getStream(path[1] || window.location);
     this.path = path;
 
     this.pym.sendMessage('childReady');
@@ -92,7 +85,7 @@ class CommentStream extends Component {
             <Tab>Settings</Tab>
             <Tab>Configure Stream</Tab>
           </TabBar>
-            {loggedIn && <UserBox user={user} logout={this.props.logout} />}
+          {loggedIn && <UserBox user={user} logout={this.props.logout} />}
           {/* Add to the restricted param a boolean if the user is suspended*/}
           <RestrictedContent restricted={false} restrictedComp={<SuspendedAccount />}>
             <TabContent show={activeTab === 0}>
@@ -238,9 +231,11 @@ class CommentStream extends Component {
               />
             </TabContent>
             <TabContent show={activeTab === 2}>
-              <h3>{status === 'open' ? 'Close' : 'Open'} Comment Stream</h3>
               <RestrictedContent restricted={!loggedIn}>
-                <CloseCommentsInfo onClick={this.toggleStatus} status={status} />
+                <ConfigureStreamContainer
+                  status={status}
+                  onClick={this.toggleStatus}
+                />
               </RestrictedContent>
             </TabContent>
           </RestrictedContent>
@@ -277,8 +272,7 @@ const mapDispatchToProps = (dispatch) => ({
   deleteAction: (item, action, user, itemType) => dispatch(deleteAction(item, action, user, itemType)),
   appendItemArray: (item, property, value, addToFront, itemType) => dispatch(appendItemArray(item, property, value, addToFront, itemType)),
   handleSignInDialog: () => dispatch(authActions.showSignInDialog()),
-  logout: () => dispatch(logout()),
-  updateStatus: status => dispatch(updateOpenStatus(status))
+  logout: () => dispatch(logout())
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(CommentStream);

client/coral-ui/components/Button.css

@@ -77,6 +77,16 @@
   background: #696969;
 }
 
+.type--green {
+  color: white;
+  background: #00897B;
+}
+
+.type--green:hover {
+  color: white;
+  background: #00a291;
+}
+
 .full {
   width: 100%;
   margin: 0;

client/coral-ui/components/Checkbox.css

@@ -0,0 +1,70 @@
+.label {
+  position: relative;
+  display: inline-block;
+}
+
+.label input {
+  visibility: hidden;
+  position: absolute;
+  left: 7px;
+  bottom: 7px;
+  margin: 0;
+  padding: 0;
+  outline: none;
+  cursor: pointer;
+  opacity: 0;
+}
+
+.checkbox {
+  cursor: pointer;
+}
+
+.label input[type="checkbox"]:checked + .checkbox:before {
+  content: "\e834";
+}
+
+.label input[type="checkbox"] + .checkbox:before {
+  content: "\e835";
+  color: #717171;
+}
+
+.label.type--green input[type="checkbox"] + .checkbox:before {
+  color: #00a291;
+}
+
+.label input[type="checkbox"] + .checkbox:before {
+  position: absolute;
+  left: 4px;
+  top: 0px;
+  width: 18px;
+  height: 18px;
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  vertical-align: -6px;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-feature-settings: 'liga';
+  font-feature-settings: 'liga';
+  -webkit-transition: all .2s ease;
+  transition: all .2s ease;
+  z-index: 1;
+}
+
+.checkboxInfo {
+  display: inline-block;
+  max-width: 360px;
+  margin-left: 50px;
+}
+
+.checkboxInfo h4 {
+  margin: 0 0 5px;
+}

client/coral-ui/components/Checkbox.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import styles from './Checkbox.css';
+
+export default ({name, cStyle = 'base', onChange, label, className, info}) => (
+  <label className={`${styles.label} ${styles[`type--${cStyle}`]} ${className}`} htmlFor={name}>
+    <input type="checkbox" id={name} name={name} onChange={onChange} />
+    <span className={styles.checkbox}></span>
+    {label && <span>{label}</span>}
+    {info && (
+      <div className={styles.checkboxInfo}>
+        <h4>{info.title}</h4>
+        <span>{info.description}</span>
+      </div>
+    )}
+  </label>
+);

client/coral-ui/index.js

@@ -7,3 +7,4 @@ export {default as TabContent} from './components/TabContent';
 export {default as Button} from './components/Button';
 export {default as Spinner} from './components/Spinner';
 export {default as Tooltip} from './components/Tooltip';
+export {default as Checkbox} from './components/Checkbox';