diff --git a/client/coral-plugin-flags/FlagButton.js b/client/coral-plugin-flags/FlagButton.js
index cbb0fef63..ed59fc774 100644
--- a/client/coral-plugin-flags/FlagButton.js
+++ b/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
-
-
;
-};
+ 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
+ { this.state.showMenu &&
test }
+
+
;
+ }
+}
const styles = {
flaggedIcon: {
diff --git a/client/coral-plugin-flags/translations.json b/client/coral-plugin-flags/translations.json
index fb2daa883..d87445fb8 100644
--- a/client/coral-plugin-flags/translations.json
+++ b/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!"
}
diff --git a/client/coral-ui/components/PopupMenu.css b/client/coral-ui/components/PopupMenu.css
new file mode 100644
index 000000000..93d4535cb
--- /dev/null
+++ b/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;
+}
diff --git a/client/coral-ui/components/PopupMenu.js b/client/coral-ui/components/PopupMenu.js
new file mode 100644
index 000000000..dfc81c3a1
--- /dev/null
+++ b/client/coral-ui/components/PopupMenu.js
@@ -0,0 +1,6 @@
+import React from 'react';
+import styles from './PopupMenu.css';
+
+export default ({children}) => (
+ {children}
+);
diff --git a/client/coral-ui/index.js b/client/coral-ui/index.js
index ffdb3bbd2..b40765052 100644
--- a/client/coral-ui/index.js
+++ b/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';