Plugins renaming

plugins/talk-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/talk-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/talk-plugin-viewing-options/client/actions.js

@@ -0,0 +1,9 @@
+import {VIEWING_OPTIONS_OPEN, VIEWING_OPTIONS_CLOSE} from './constants';
+
+export const openViewingOptions = () => ({
+  type: VIEWING_OPTIONS_OPEN
+});
+
+export const closeViewingOptions = () => ({
+  type: VIEWING_OPTIONS_CLOSE
+});

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

@@ -0,0 +1,31 @@
+.root {
+}
+
+.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: 0px;
+  top: 20px;
+  z-index: 10;
+}
+
+.list > ul, .list > ul > li {
+  padding: 0;
+  margin: 0;
+}
+
+.list > ul > li {
+  padding: 10px;
+  list-style: none;
+  white-space: nowrap;
+}
+
+.icon {
+  font-size: 14px;
+  vertical-align: middle;
+}

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

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

plugins/talk-plugin-viewing-options/client/constants.js

@@ -0,0 +1,2 @@
+export const VIEWING_OPTIONS_OPEN = 'VIEWING_OPTIONS_OPEN';
+export const VIEWING_OPTIONS_CLOSE = 'VIEWING_OPTIONS_CLOSE';

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

@@ -0,0 +1,13 @@
+import {connect} from 'plugin-api/beta/client/hocs';
+import {bindActionCreators} from 'redux';
+import ViewingOptions from '../components/ViewingOptions';
+import {openViewingOptions, closeViewingOptions} from '../actions';
+
+const mapStateToProps = ({coralPluginViewingOptions: state}) => ({
+  open: state.open
+});
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({openViewingOptions, closeViewingOptions}, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(ViewingOptions);

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

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

plugins/talk-plugin-viewing-options/client/reducer.js

@@ -0,0 +1,22 @@
+import {VIEWING_OPTIONS_OPEN, VIEWING_OPTIONS_CLOSE} from './constants';
+
+const initialState = {
+  open: false
+};
+
+export default function offTopic (state = initialState, action) {
+  switch (action.type) {
+  case VIEWING_OPTIONS_OPEN:
+    return {
+      ...state,
+      open: true
+    };
+  case VIEWING_OPTIONS_CLOSE:
+    return {
+      ...state,
+      open: false
+    };
+  default :
+    return state;
+  }
+}

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

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