From fe8f3ae4bb8dd329bca67be5e18f1036ef6b96af Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 20 Jun 2017 08:32:08 -0300 Subject: [PATCH 1/8] Moving Copy component --- .../Moderation/components/UserDetail.css | 3 +-- .../Moderation/components/UserDetail.js | 21 +++++++++++-------- .../components/Copy.js | 3 ++- client/coral-framework/components/index.js | 1 + client/coral-ui/index.js | 1 - plugin-api/beta/client/components/index.js | 1 + 6 files changed, 17 insertions(+), 13 deletions(-) rename client/{coral-ui => coral-framework}/components/Copy.js (87%) diff --git a/client/coral-admin/src/routes/Moderation/components/UserDetail.css b/client/coral-admin/src/routes/Moderation/components/UserDetail.css index 710f84759..f0b08bfb7 100644 --- a/client/coral-admin/src/routes/Moderation/components/UserDetail.css +++ b/client/coral-admin/src/routes/Moderation/components/UserDetail.css @@ -35,9 +35,8 @@ border: none; background-color: transparent; font-size: 16px; - position: absolute; - width: 90%; outline: none; + width: calc(100% - 90px); } .commentStatuses { diff --git a/client/coral-admin/src/routes/Moderation/components/UserDetail.js b/client/coral-admin/src/routes/Moderation/components/UserDetail.js index abc9f4440..023fb9a3f 100644 --- a/client/coral-admin/src/routes/Moderation/components/UserDetail.js +++ b/client/coral-admin/src/routes/Moderation/components/UserDetail.js @@ -1,8 +1,8 @@ import React, {PropTypes} from 'react'; -import {Button, Drawer, Copy} from 'coral-ui'; -import styles from './UserDetail.css'; -import Slot from 'coral-framework/components/Slot'; import Comment from './Comment'; +import styles from './UserDetail.css'; +import {Button, Drawer} from 'coral-ui'; +import {Slot, Copy} from 'coral-framework/components'; import {actionsMap} from '../helpers/moderationQueueActionsMap'; export default class UserDetail extends React.Component { @@ -98,13 +98,16 @@ export default class UserDetail extends React.Component { return (

{user.username}

- {profile && this.profile = ref} value={profile} />} - this.showCopied()} text={profile} className={styles.profileEmail}> - - +
+ {profile && this.profile = ref} value={profile} />} + + this.showCopied()} text={profile} className={styles.profileEmail}> + + +
Date: Tue, 20 Jun 2017 08:37:53 -0300 Subject: [PATCH 2/8] Adding the translations --- .../src/routes/Moderation/components/UserDetail.js | 5 +++-- locales/en.yml | 3 +++ locales/es.yml | 3 +++ 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/client/coral-admin/src/routes/Moderation/components/UserDetail.js b/client/coral-admin/src/routes/Moderation/components/UserDetail.js index 023fb9a3f..bf8b80267 100644 --- a/client/coral-admin/src/routes/Moderation/components/UserDetail.js +++ b/client/coral-admin/src/routes/Moderation/components/UserDetail.js @@ -2,6 +2,7 @@ import React, {PropTypes} from 'react'; import Comment from './Comment'; import styles from './UserDetail.css'; import {Button, Drawer} from 'coral-ui'; +import t from 'coral-framework/services/i18n'; import {Slot, Copy} from 'coral-framework/components'; import {actionsMap} from '../helpers/moderationQueueActionsMap'; @@ -102,9 +103,9 @@ export default class UserDetail extends React.Component {
{profile && this.profile = ref} value={profile} />} - this.showCopied()} text={profile} className={styles.profileEmail}> + this.showCopied()} text={profile}>
diff --git a/locales/en.yml b/locales/en.yml index de95ddb91..0bbf594c8 100644 --- a/locales/en.yml +++ b/locales/en.yml @@ -32,6 +32,9 @@ en: comment_post_banned_word: "Your comment contains one or more words that are not permitted, so it will not be published. If you think this message is incorrect, please contact our moderation team." comment_post_notif: "Your comment has been posted." comment_post_notif_premod: "Thank you for posting. Our moderation team will review your comment shortly." + common: + copied: 'Copied' + copy: 'Copy' community: account_creation_date: "Account Creation Date" active: Active diff --git a/locales/es.yml b/locales/es.yml index 6897f6f8b..9d7e4c939 100644 --- a/locales/es.yml +++ b/locales/es.yml @@ -32,6 +32,9 @@ es: comment_post_banned_word: "Tu comentario contiene una o más palabras que no están permitidas en nuestro espacio, por lo que no será publicado. Si crees que es un error, por favor contacta a nuestro equipo de moderación." comment_post_notif: "Tu comentario ha sido publicado." comment_post_notif_premod: "Gracias por el comentario. Nuestro equipo de moderación va a revisarlo muy pronto." + common: + copied: 'Copiado' + copy: 'Copiar' community: account_creation_date: "Fecha de creación de la cuenta" active: Activa From 7faa00c46387bce0052a01a3bce5e00d0f742d13 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 20 Jun 2017 09:05:01 -0300 Subject: [PATCH 3/8] withCopyToClipboard --- .../Moderation/components/UserDetail.js | 17 ++++---- client/coral-framework/components/Copy.js | 39 ------------------- client/coral-framework/components/index.js | 1 - client/coral-framework/hocs/index.js | 2 +- .../hocs/withCopyToClipboard.js | 33 ++++++++++++++++ 5 files changed, 44 insertions(+), 48 deletions(-) delete mode 100644 client/coral-framework/components/Copy.js create mode 100644 client/coral-framework/hocs/withCopyToClipboard.js diff --git a/client/coral-admin/src/routes/Moderation/components/UserDetail.js b/client/coral-admin/src/routes/Moderation/components/UserDetail.js index bf8b80267..116e043ca 100644 --- a/client/coral-admin/src/routes/Moderation/components/UserDetail.js +++ b/client/coral-admin/src/routes/Moderation/components/UserDetail.js @@ -3,7 +3,8 @@ import Comment from './Comment'; import styles from './UserDetail.css'; import {Button, Drawer} from 'coral-ui'; import t from 'coral-framework/services/i18n'; -import {Slot, Copy} from 'coral-framework/components'; +import {Slot} from 'coral-framework/components'; +import {withCopyToClipboard} from 'coral-framework/hocs'; import {actionsMap} from '../helpers/moderationQueueActionsMap'; export default class UserDetail extends React.Component { @@ -96,18 +97,20 @@ export default class UserDetail extends React.Component { rejectedPercent = 0; } + const CopyToClipboard = withCopyToClipboard({ text: profile })( + + ); + + console.log(CopyToClipboard) + return (

{user.username}

{profile && this.profile = ref} value={profile} />} - - this.showCopied()} text={profile}> - -
{ - this.props.onCopy(); - e.clearSelection(); - }); - } - - refCopyButton(button) { - this.copyButtonEl = button; - } - - render() { - const {children, target = '', text = '', className = ''} = this.props; - - return ( - - {children} - - ); - } -} diff --git a/client/coral-framework/components/index.js b/client/coral-framework/components/index.js index 6c9a3f876..b7aaef665 100644 --- a/client/coral-framework/components/index.js +++ b/client/coral-framework/components/index.js @@ -1,2 +1 @@ export {default as Slot} from './Slot'; -export {default as Copy} from './Copy'; diff --git a/client/coral-framework/hocs/index.js b/client/coral-framework/hocs/index.js index 01b3daff4..782f840bd 100644 --- a/client/coral-framework/hocs/index.js +++ b/client/coral-framework/hocs/index.js @@ -1,4 +1,4 @@ export {default as withFragments} from './withFragments'; export {default as withMutation} from './withMutation'; export {default as withQuery} from './withQuery'; - +export {default as withCopyToClipboard} from './withCopyToClipboard'; diff --git a/client/coral-framework/hocs/withCopyToClipboard.js b/client/coral-framework/hocs/withCopyToClipboard.js new file mode 100644 index 000000000..2ca9e1b13 --- /dev/null +++ b/client/coral-framework/hocs/withCopyToClipboard.js @@ -0,0 +1,33 @@ +import React from 'react'; +import Clipboard from 'clipboard'; + +export default (config) => (WrappedComponent) => { + console.log(config, WrappedComponent) + + class withCopyToClipboard extends React.Component { + + componentDidMount() { + const node = ReactDOM.findDOMNode(WrappedComponent); + const clipboard = new Clipboard(node); + + clipboard.on('success', (e) => { + this.props.onCopy(); + e.clearSelection(); + }); + } + + render() { + const {target = '', text = ''} = config; + + return ; + } + } + + return withCopyToClipboard; +}; From d97fb0a83fa472da7efebe569eaf5cb70a8e4e51 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 20 Jun 2017 09:47:37 -0300 Subject: [PATCH 4/8] Refs by ReactDOMNode --- .../components/ButtonCopyToClipboard.js | 35 ++++++++++++++++++ .../Moderation/components/Moderation.js | 2 + .../Moderation/components/UserDetail.js | 19 +--------- .../hocs/withCopyToClipboard.js | 16 ++++---- client/coral-ui/components/Button.js | 37 ++++++++++--------- 5 files changed, 67 insertions(+), 42 deletions(-) create mode 100644 client/coral-admin/src/routes/Moderation/components/ButtonCopyToClipboard.js diff --git a/client/coral-admin/src/routes/Moderation/components/ButtonCopyToClipboard.js b/client/coral-admin/src/routes/Moderation/components/ButtonCopyToClipboard.js new file mode 100644 index 000000000..ba25d533c --- /dev/null +++ b/client/coral-admin/src/routes/Moderation/components/ButtonCopyToClipboard.js @@ -0,0 +1,35 @@ +import React from 'react'; +import {Button} from 'coral-ui'; +import t from 'coral-framework/services/i18n'; +import {withCopyToClipboard} from 'coral-framework/hocs'; + +class ButtonCopyToClipboard extends React.Component { + + constructor() { + super(); + + this.state = { + emailCopied: false + }; + } + + showCopied() { + this.setState({ + emailCopied: true + }, () => { + setTimeout(() => this.setState({ + emailCopied: false + }), 3000); + }); + } + + render () { + return ( + + ); + } +} + +export default withCopyToClipboard(ButtonCopyToClipboard); diff --git a/client/coral-admin/src/routes/Moderation/components/Moderation.js b/client/coral-admin/src/routes/Moderation/components/Moderation.js index 63c9e13ab..6d3b975db 100644 --- a/client/coral-admin/src/routes/Moderation/components/Moderation.js +++ b/client/coral-admin/src/routes/Moderation/components/Moderation.js @@ -207,6 +207,7 @@ export default class Moderation extends Component { shortcutsNoteVisible={moderation.shortcutsNoteVisible} open={moderation.modalOpen} onClose={this.onClose}/> + {moderation.userDetailId && ( )} + - {this.state.emailCopied ? t('common.copied') : t('common.copy')} - - ); - - console.log(CopyToClipboard) - return (

{user.username}

{profile && this.profile = ref} value={profile} />} +
(WrappedComponent) => { - console.log(config, WrappedComponent) +export default (WrappedComponent) => { class withCopyToClipboard extends React.Component { - componentDidMount() { - const node = ReactDOM.findDOMNode(WrappedComponent); - const clipboard = new Clipboard(node); + const clipboard = new Clipboard(ReactDOM.findDOMNode(this)); clipboard.on('success', (e) => { - this.props.onCopy(); + if (this.props.onCopy) { + this.props.onCopy(); + } e.clearSelection(); }); } render() { - const {target = '', text = ''} = config; + const {target = '', text = '', className = '', ...rest} = this.props; return ; } } diff --git a/client/coral-ui/components/Button.js b/client/coral-ui/components/Button.js index 6d3dc94d2..cbfb6ad61 100644 --- a/client/coral-ui/components/Button.js +++ b/client/coral-ui/components/Button.js @@ -2,20 +2,23 @@ import React from 'react'; import styles from './Button.css'; import Icon from './Icon'; -const Button = ({cStyle = 'local', children, className, raised = false, full = false, icon = '', ...props}) => ( - -); - -export default Button; +export default class Button extends React.Component { + render() { + const {cStyle = 'local', children, className, raised = false, full = false, icon = '', ...props} = this.props; + return ( + + ); + } +} From 942ea7b9167a012fb9d4c8b606bf8d7e90d8f470 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 20 Jun 2017 10:37:10 -0300 Subject: [PATCH 5/8] ButtonCopyToClipboard --- .../components/ButtonCopyToClipboard.js | 23 ++----------------- .../Moderation/components/UserDetail.js | 12 +--------- .../hocs/withCopyToClipboard.js | 14 ++++------- client/coral-ui/components/Button.css | 10 ++++++++ locales/en.yml | 1 - locales/es.yml | 1 - 6 files changed, 18 insertions(+), 43 deletions(-) diff --git a/client/coral-admin/src/routes/Moderation/components/ButtonCopyToClipboard.js b/client/coral-admin/src/routes/Moderation/components/ButtonCopyToClipboard.js index ba25d533c..5bc5767ba 100644 --- a/client/coral-admin/src/routes/Moderation/components/ButtonCopyToClipboard.js +++ b/client/coral-admin/src/routes/Moderation/components/ButtonCopyToClipboard.js @@ -4,29 +4,10 @@ import t from 'coral-framework/services/i18n'; import {withCopyToClipboard} from 'coral-framework/hocs'; class ButtonCopyToClipboard extends React.Component { - - constructor() { - super(); - - this.state = { - emailCopied: false - }; - } - - showCopied() { - this.setState({ - emailCopied: true - }, () => { - setTimeout(() => this.setState({ - emailCopied: false - }), 3000); - }); - } - render () { return ( - ); } diff --git a/client/coral-admin/src/routes/Moderation/components/UserDetail.js b/client/coral-admin/src/routes/Moderation/components/UserDetail.js index a591d1393..791f47729 100644 --- a/client/coral-admin/src/routes/Moderation/components/UserDetail.js +++ b/client/coral-admin/src/routes/Moderation/components/UserDetail.js @@ -44,16 +44,6 @@ export default class UserDetail extends React.Component { this.props.changeStatus('rejected'); } - showCopied() { - this.setState({ - emailCopied: true - }, () => { - setTimeout(() => this.setState({ - emailCopied: false - }), 3000); - }); - } - render () { const { root: { @@ -95,7 +85,7 @@ export default class UserDetail extends React.Component {
{profile && this.profile = ref} value={profile} />} - +
{ - - class withCopyToClipboard extends React.Component { + class WithCopyToClipboard extends React.Component { componentDidMount() { const clipboard = new Clipboard(ReactDOM.findDOMNode(this)); clipboard.on('success', (e) => { - if (this.props.onCopy) { - this.props.onCopy(); - } e.clearSelection(); }); } render() { - const {target = '', text = '', className = '', ...rest} = this.props; + const {copyTarget = '', copyText = '', className = '', ...rest} = this.props; return ; } } - return withCopyToClipboard; + return WithCopyToClipboard; }; diff --git a/client/coral-ui/components/Button.css b/client/coral-ui/components/Button.css index 671c55bad..409fc1bc6 100644 --- a/client/coral-ui/components/Button.css +++ b/client/coral-ui/components/Button.css @@ -53,6 +53,16 @@ color: #212121; } +.type--local:hover { + background: #d6d5d5; + color: #212121; +} + +.type--local:active { + background: #cccccc; + color: #212121; +} + .type--facebook { background-color: #4267b2; border-color: #4267b2; diff --git a/locales/en.yml b/locales/en.yml index 0bbf594c8..73a7e82d2 100644 --- a/locales/en.yml +++ b/locales/en.yml @@ -33,7 +33,6 @@ en: comment_post_notif: "Your comment has been posted." comment_post_notif_premod: "Thank you for posting. Our moderation team will review your comment shortly." common: - copied: 'Copied' copy: 'Copy' community: account_creation_date: "Account Creation Date" diff --git a/locales/es.yml b/locales/es.yml index 9d7e4c939..4eb1ca756 100644 --- a/locales/es.yml +++ b/locales/es.yml @@ -33,7 +33,6 @@ es: comment_post_notif: "Tu comentario ha sido publicado." comment_post_notif_premod: "Gracias por el comentario. Nuestro equipo de moderación va a revisarlo muy pronto." common: - copied: 'Copiado' copy: 'Copiar' community: account_creation_date: "Fecha de creación de la cuenta" From 66aec74b387e6b356a37bbf2f0f39b606336b889 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Wed, 21 Jun 2017 13:29:44 -0300 Subject: [PATCH 6/8] good looking export --- plugin-api/beta/client/components/index.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/plugin-api/beta/client/components/index.js b/plugin-api/beta/client/components/index.js index f719b9442..934f75299 100644 --- a/plugin-api/beta/client/components/index.js +++ b/plugin-api/beta/client/components/index.js @@ -1,2 +1 @@ -export {Slot} from 'coral-framework/components'; -export {Copy} from 'coral-framework/components'; +export {Slot, Copy} from 'coral-framework/components'; \ No newline at end of file From cdcd543fe0b98cf312b525c8e099e88239752b99 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Wed, 21 Jun 2017 13:30:09 -0300 Subject: [PATCH 7/8] good looking export --- plugin-api/beta/client/components/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugin-api/beta/client/components/index.js b/plugin-api/beta/client/components/index.js index 934f75299..520c5b7d8 100644 --- a/plugin-api/beta/client/components/index.js +++ b/plugin-api/beta/client/components/index.js @@ -1 +1 @@ -export {Slot, Copy} from 'coral-framework/components'; \ No newline at end of file +export {Slot, Copy} from 'coral-framework/components'; From a9cefd8cbd82d42d7dece588c203e5d49f0c4c95 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Wed, 21 Jun 2017 14:23:51 -0300 Subject: [PATCH 8/8] deleting old ref --- plugin-api/beta/client/components/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugin-api/beta/client/components/index.js b/plugin-api/beta/client/components/index.js index 520c5b7d8..5d76732fc 100644 --- a/plugin-api/beta/client/components/index.js +++ b/plugin-api/beta/client/components/index.js @@ -1 +1 @@ -export {Slot, Copy} from 'coral-framework/components'; +export {Slot} from 'coral-framework/components';