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';