Adding streamBox slot and coral-plugin-viewing-options 🎉

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

@@ -4,6 +4,11 @@ import OffTopicFilter from './containers/OffTopicFilter';
 import OffTopicCheckbox from './containers/OffTopicCheckbox';
 import reducer from './reducer';
 
+/**
+ * coral-plugin-offtopic depends on coral-plugin-viewing-options
+ * in other to display filter and use the streamViewingOptions slot
+ */
+
 export default {
   translations,
   reducer,

plugins/coral-plugin-viewing-options/client/.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "es2015"
+  ],
+  "plugins": [
+    "add-module-exports",
+    "transform-class-properties",
+    "transform-decorators-legacy",
+    "transform-object-assign",
+    "transform-object-rest-spread",
+    "transform-async-to-generator",
+    "transform-react-jsx"
+  ]
+}

plugins/coral-plugin-viewing-options/client/.eslintrc.json

@@ -0,0 +1,23 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "mocha": true
+  },
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    }
+  },
+  "parser": "babel-eslint",
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
+    "no-console": ["warn", { "allow": ["warn", "error"] }]
+  }
+}

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

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

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import cn from 'classnames';
+import {Icon} from 'coral-ui';
+import styles from './ViewingOptions.css';
+import Slot from 'coral-framework/components/Slot';
+
+const ViewingOptions = (props) => {
+  const toggleOpen = () => {
+    if (!props.open) {
+      props.openViewingOptions();
+    } else {
+      props.closeViewingOptions();
+    }
+  };
+
+  return (
+    <div className={cn([styles.viewingOptions, 'streamViewingOptions'])}>
+      <div>
+        <a onClick={toggleOpen}>Viewing Options
+          {props.open ? <Icon name="arrow_drop_up"/> : <Icon name="arrow_drop_down"/>}
+        </a>
+      </div>
+      {
+        props.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>
+  );
+};
+
+export default ViewingOptions;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import ViewingOptions from '../components/ViewingOptions';
+import {openViewingOptions, closeViewingOptions} from 'coral-embed-stream/src/actions/stream';
+
+const mapStateToProps = ({stream}) => ({open: stream.viewingOption.open});
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({openViewingOptions, closeViewingOptions}, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(ViewingOptions);

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

@@ -0,0 +1,7 @@
+import ViewingOptions from './containers/ViewingOptions';
+
+export default {
+  slots: {
+    streamBox: [ViewingOptions]
+  }
+};

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

@@ -0,0 +1 @@
+module.exports = {};