Change streamBox to streamFilter

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

@@ -10,3 +10,9 @@
 .tabPanel {
   margin-top: 8px;
 }
+
+.filterWrapper {
+  position: absolute;
+  right: 0;
+  margin-top: 6px;
+}

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

@@ -12,6 +12,7 @@ import t, {timeago} from 'coral-framework/services/i18n';
 import CommentBox from 'coral-plugin-commentbox/CommentBox';
 import QuestionBox from 'coral-plugin-questionbox/QuestionBox';
 import {Button, TabBar, Tab, TabCount, TabContent, TabPane} from 'coral-ui';
+import cn from 'classnames';
 
 import {getTopLevelParent} from '../graphql/utils';
 import AllCommentsPane from './AllCommentsPane';
@@ -163,10 +164,6 @@ class Stream extends React.Component {
           />
         )}
 
-        <div className="talk-stream-wrapper-box">
-          <Slot fill="streamBox" />
-        </div>
-
         {/* the highlightedComment is isolated after the user followed a permalink */}
         {highlightedComment
           ? <Comment
@@ -199,6 +196,11 @@ class Stream extends React.Component {
               liveUpdates={true}
             />
           : <div>
+              <div
+                className={cn('talk-stream-filter-wrapper', styles.filterWrapper)}
+              >
+                <Slot fill="streamFilter" />
+              </div>
               <TabBar activeTab={activeStreamTab} onTabClick={setActiveStreamTab} sub>
                 <Tab tabId={'featured'}>
                  Featured

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

@@ -181,10 +181,6 @@ body {
   display: none;
 }
 
-.talk-stream-wrapper-box {
-  padding: 10px 0;
-}
-
 .talk-stream-comments-container {
   position: relative;
 }

plugins/coral-plugin-viewing-options/client/components/ViewingOptions.css

@@ -1,18 +1,17 @@
 .root {
-  display: flex;
-  justify-content: flex-end;
-  position: relative;
-  width: 100%;
-  z-index: 10;
-  cursor: pointer;
+}
+
+.button {
+  composes: buttonReset from "coral-framework/styles/reset.css";
 }
 
 .list {
   background: white;
   position: absolute;
   box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15);
-  right: 3px;
+  right: 0px;
   top: 20px;
+  z-index: 10;
 }
 
 .list > ul, .list > ul > li {
@@ -23,4 +22,5 @@
 .list > ul > li {
   padding: 10px;
   list-style: none;
+  white-space: nowrap;
 }

plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 import styles from './ViewingOptions.css';
-import {Slot} from 'plugin-api/beta/client/components';
+import {Slot, ClickOutside} from 'plugin-api/beta/client/components';
 import {Icon} from 'plugin-api/beta/client/components/ui';
 
 const ViewingOptions = (props) => {
@@ -12,29 +12,38 @@ const ViewingOptions = (props) => {
       props.closeViewingOptions();
     }
   };
+
+  const handleClickOutside = () => {
+    if (props.open) {
+      props.closeViewingOptions();
+    }
+  };
+
   return (
-    <div className={cn([styles.root, 'coral-plugin-viewing-options'])}>
-      <div>
-        <a onClick={toggleOpen}>Viewing Options
-          {props.open ? <Icon name="arrow_drop_up"/> : <Icon name="arrow_drop_down"/>}
-        </a>
+    <ClickOutside onClickOutside={handleClickOutside}>
+      <div className={cn([styles.root, 'coral-plugin-viewing-options'])}>
+        <div>
+          <button className={styles.button} onClick={toggleOpen}>Viewing Options
+            {props.open ? <Icon name="arrow_drop_up"/> : <Icon name="arrow_drop_down"/>}
+          </button>
+        </div>
+        {
+          props.open ? (
+            <div className={cn([styles.list, 'coral-plugin-viewing-options-list'])}>
+              <ul>
+                {
+                  React.Children.map(<Slot fill="viewingOptions" />, (component) => {
+                    return React.createElement('li', {
+                      className: 'coral-plugin-viewing-options-item'
+                    }, component);
+                  })
+                }
+              </ul>
+            </div>
+          ) : null
+        }
       </div>
-      {
-        props.open ? (
-          <div className={cn([styles.list, 'coral-plugin-viewing-options-list'])}>
-            <ul>
-              {
-                React.Children.map(<Slot fill="viewingOptions" />, (component) => {
-                  return React.createElement('li', {
-                    className: 'coral-plugin-viewing-options-item'
-                  }, component);
-                })
-              }
-            </ul>
-          </div>
-        ) : null
-      }
-    </div>
+    </ClickOutside>
   );
 };
 

plugins/coral-plugin-viewing-options/client/index.js

@@ -4,6 +4,6 @@ import reducer from './reducer';
 export default {
   reducer,
   slots: {
-    streamBox: [ViewingOptions]
+    streamFilter: [ViewingOptions]
   }
 };