Adding popup on report button click.

client/coral-plugin-flags/FlagButton.js

@@ -1,47 +1,61 @@
-import React from 'react';
+import React, {Component} from 'react';
 import {I18n} from '../coral-framework';
 import translations from './translations.json';
+import {PopupMenu} from 'coral-ui';
 
 const name = 'coral-plugin-flags';
 
-const FlagButton = ({flag, id, postAction, deleteAction, addItem, updateItem, addNotification, currentUser}) => {
-  const flagged = flag && flag.current_user;
-  const onFlagClick = () => {
-    if (!currentUser) {
+export default class FlagButton extends Component {
+
+  state = {
+    showMenu: false,
+  }
+
+  onFlagClick = () => {
+    if (!this.props.currentUser) {
       return;
     }
-    if (!flagged) {
-      postAction(id, 'flag', currentUser.id, 'comments')
-        .then((action) => {
-          let id = `${action.action_type}_${action.item_id}`;
-          addItem({id, current_user: action, count: flag ? flag.count + 1 : 1}, 'actions');
-          updateItem(action.item_id, action.action_type, id, 'comments');
-        });
-      addNotification('success', lang.t('flag-notif'));
-    } else {
-      deleteAction(flagged.id)
-        .then(() => {
-          updateItem(id, 'flag', '', 'comments');
-        });
-      addNotification('success', lang.t('flag-notif-remove'));
-    }
-  };
+    this.setState({showMenu: !this.state.showMenu});
+  }
 
-  return <div className={`${name}-container`}>
-    <button onClick={onFlagClick} className={`${name}-button`}>
-      {
-        flagged
-        ? <span className={`${name}-button-text`}>{lang.t('flagged')}</span>
-      : <span className={`${name}-button-text`}>{lang.t('flag')}</span>
-      }
-      <i className={`${name}-icon material-icons ${flagged && 'flaggedIcon'}`}
-        style={flagged ? styles.flaggedIcon : {}}
-        aria-hidden={true}>flag</i>
-    </button>
-  </div>;
-};
+  render () {
+    const {flag} = this.props;
+    // const {flag, id, postAction, deleteAction, addItem, updateItem, addNotification, currentUser} = this.props;
+    const flagged = flag && flag.current_user;
+    // const onFlagClick = () => {
 
-export default FlagButton;
+    //   if (!flagged) {
+    //     postAction(id, 'flag', currentUser.id, 'comments')
+    //       .then((action) => {
+    //         let id = `${action.action_type}_${action.item_id}`;
+    //         addItem({id, current_user: action, count: flag ? flag.count + 1 : 1}, 'actions');
+    //         updateItem(action.item_id, action.action_type, id, 'comments');
+    //       });
+    //     addNotification('success', lang.t('flag-notif'));
+    //   } else {
+    //     deleteAction(flagged.id)
+    //       .then(() => {
+    //         updateItem(id, 'flag', '', 'comments');
+    //       });
+    //     addNotification('success', lang.t('flag-notif-remove'));
+    //   }
+    // };
+
+    return <div className={`${name}-container`}>
+      { this.state.showMenu && <PopupMenu>test</PopupMenu> }
+      <button onClick={this.onFlagClick} className={`${name}-button`}>
+        {
+          flagged
+          ? <span className={`${name}-button-text`}>{lang.t('flagged')}</span>
+        : <span className={`${name}-button-text`}>{lang.t('flag')}</span>
+        }
+        <i className={`${name}-icon material-icons ${flagged && 'flaggedIcon'}`}
+          style={flagged ? styles.flaggedIcon : {}}
+          aria-hidden={true}>flag</i>
+      </button>
+    </div>;
+  }
+}
 
 const styles = {
   flaggedIcon: {

client/coral-plugin-flags/translations.json

@@ -1,13 +1,13 @@
 {
   "en": {
-    "flag": "Flag",
-    "flagged": "Flagged",
+    "flag": "Report",
+    "flagged": "Reported",
     "flag-notif": "Thank you for reporting this comment. Our moderation team has been notified and will review it shortly.",
     "flag-notif-remove": "Your flag has been removed."
   },
   "es": {
-    "flag": "Marcar",
-    "flagged": "Marcado",
+    "flag": "Informe",
+    "flagged": "Informado",
     "flag-notif": "Gracias por marcar este comentario. Nuestro equipo de moderación ha sido notificado y muy pronto lo va a revisar.",
     "flag-notif-remove": "¡traduceme!"
   }

client/coral-ui/components/PopupMenu.css

@@ -0,0 +1,32 @@
+.popupMenu {
+  display: inline-block;
+  position: absolute;
+  width: inherit;
+  border: solid 1px #2376D8;
+  bottom: 36px;
+  box-sizing: border-box;
+  background: white;
+  border-radius: 3px;
+  padding: 20px 10px;
+  z-index: 3;
+}
+
+.popupMenu:before{
+  content: '';
+  border: 10px solid transparent;
+  border-top-color: white;
+  position: absolute;
+  left: 1em;
+  top: 56px;
+  z-index: 2;
+}
+
+.popupMenu:after{
+  content: '';
+  border: 10px solid transparent;
+  border-top-color: #2376D8;
+  position: absolute;
+  left: 1em;
+  top: 57px;
+  z-index: 1;
+}

client/coral-ui/components/PopupMenu.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import styles from './PopupMenu.css';
+
+export default ({children}) => (
+  <span className={styles.popupMenu}>{children}</span>
+);

client/coral-ui/index.js

@@ -7,3 +7,4 @@ export {default as TabContent} from './components/TabContent';
 export {default as Button} from './components/Button';
 export {default as Spinner} from './components/Spinner';
 export {default as Tooltip} from './components/Tooltip';
+export {default as PopupMenu} from './components/PopupMenu';