Plugins renaming

2026-08-13 12:40:11 +08:00 · 2017-07-20 11:52:36 -03:00
parent eb3a9431f9
commit 6ec33a0225
115 changed files with 0 additions and 411 deletions
@@ -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;
+}
@@ -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;