Adding filters

client/coral-embed-stream/src/components/Stream.js

@@ -6,6 +6,7 @@ import Comment from '../containers/Comment';
 import SuspendedAccount from './SuspendedAccount';
 import RestrictedMessageBox
   from 'coral-framework/components/RestrictedMessageBox';
+import ViewingOptions from './ViewingOptions';
 import Slot from 'coral-framework/components/Slot';
 import InfoBox from 'coral-plugin-infobox/InfoBox';
 import {can} from 'coral-framework/services/perms';
@@ -13,6 +14,7 @@ import {ModerationLink} from 'coral-plugin-moderation';
 import CommentBox from 'coral-plugin-commentbox/CommentBox';
 import QuestionBox from 'coral-plugin-questionbox/QuestionBox';
 import IgnoredCommentTombstone from './IgnoredCommentTombstone';
+
 import t, {timeago} from 'coral-framework/services/i18n';
 
 class Stream extends React.Component {
@@ -108,11 +110,16 @@ class Stream extends React.Component {
                 />}
             </div>
           : <p>{asset.settings.closedMessage}</p>}
-        {loggedIn &&
-          <ModerationLink
-            assetId={asset.id}
-            isAdmin={can(user, 'MODERATE_COMMENTS')}
-          />}
+
+        <div className="streamBox">
+          {loggedIn &&
+            <ModerationLink
+              assetId={asset.id}
+              isAdmin={can(user, 'MODERATE_COMMENTS')}
+            />}
+
+          <ViewingOptions />
+        </div>
 
         {/* the highlightedComment is isolated after the user followed a permalink */}
         {highlightedComment
@@ -140,7 +147,7 @@ class Stream extends React.Component {
               maxCharCount={asset.settings.charCount}
               editComment={this.props.editComment}
             />
-          : <div>
+          : <div className="commentStreamContainer">
               <NewCount
                 commentCount={asset.commentCount}
                 commentCountCache={commentCountCache}

client/coral-embed-stream/src/components/ViewingOptions.css

@@ -0,0 +1,23 @@
+.viewingOptions {
+    float: right;
+    text-align: right;
+    position: relative;
+    display: inline-block;
+    min-width: 220px;
+}
+
+.streamViewingOptionsList {
+    background: white;
+    position: absolute;
+    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15);
+}
+
+.streamViewingOptionsList ul, .streamViewingOptionsList li {
+    padding: 0;
+    margin: 0;
+}
+
+.streamViewingOptionsList li {
+    padding: 10px;
+    list-style: none;
+}

client/coral-embed-stream/src/components/ViewingOptions.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import styles from './ViewingOptions.css';
+import cn from 'classnames';
+import Slot from 'coral-framework/components/Slot';
+
+export default class ViewingOptions extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      open: false
+    };
+  }
+
+  toggleOpen = () => {
+    this.setState((state) => ({
+      open: !state.open
+    }));
+  }
+
+  render() {
+    return (
+      <div className={cn([styles.viewingOptions, 'streamViewingOptions'])}>
+        <div>
+          <a onClick={this.toggleOpen}>Viewing Options</a>
+        </div>
+        {
+          this.state.open ? (
+            <div className={cn([styles.streamViewingOptionsList, 'streamViewingOptionsList'])}>
+              <ul>
+                {
+                  React.Children.map(<Slot fill="streamViewingOptions" />, (component) => {
+                    return React.createElement('li', {
+                      className: 'viewingOption'
+                    }, component);
+                  })
+                }
+              </ul>
+            </div>
+          ) : null
+        }
+      </div>
+    );
+  }
+}

client/coral-embed-stream/style/default.css

@@ -178,6 +178,15 @@ hr {
   display: none;
 }
 
+.streamBox {
+  padding: 10px 0;
+}
+
+.commentStreamContainer {
+  position: relative;
+  z-index: -1;
+}
+
 .commentStream {
   /* prevent absolutely positioned final permalink popover from being clipped */
   padding-bottom: 50px;

client/coral-plugin-moderation/styles.css

@@ -1,4 +1,6 @@
 .moderationLink {
+  display: inline;
+
   a {
     color: #679af3;
     text-decoration: none;

plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js

@@ -1,7 +1,5 @@
 import React from 'react';
 
-export default (props) => (
-  <span>
-    Filter
-  </span>
+export default () => (
+  <span><input type="checkbox"/>Hide Off-Topic Comments</span>
 );

plugins/coral-plugin-offtopic/client/index.js

@@ -1,11 +1,13 @@
 import OffTopicCheckbox from './components/OffTopicCheckbox';
 import OffTopicTag from './components/OffTopicTag';
+import OffTopicFilter from './components/OffTopicFilter';
 import translations from './translations.json';
 
 export default {
   translations,
   slots: {
     commentInputDetailArea: [OffTopicCheckbox],
+    streamViewingOptions: [OffTopicFilter],
     commentInfoBar: [OffTopicTag]
   }
 };