diff --git a/src/components/App/App.reducer.js b/src/components/App/App.reducer.js index 38ffaa3be..76ee481f5 100644 --- a/src/components/App/App.reducer.js +++ b/src/components/App/App.reducer.js @@ -23,7 +23,7 @@ const initialState = { }, navigationSettings: { active: false, - copyShowActive: false, + shareShowActive: false, caBackButtonActive: false, quickUnlockActive: false, removeOutputActive: false, diff --git a/src/components/App/__tests__/App.reducer.test.js b/src/components/App/__tests__/App.reducer.test.js index bb2b5254b..80bc2126a 100644 --- a/src/components/App/__tests__/App.reducer.test.js +++ b/src/components/App/__tests__/App.reducer.test.js @@ -26,7 +26,7 @@ describe('reducer', () => { navigationSettings: { active: false, caBackButtonActive: false, - copyShowActive: false, + shareShowActive: false, quickUnlockActive: false, removeOutputActive: false, vocalizeFolders: false @@ -47,7 +47,7 @@ describe('reducer', () => { navigationSettings: { active: false, caBackButtonActive: false, - copyShowActive: false, + shareShowActive: false, quickUnlockActive: false, removeOutputActive: false, vocalizeFolders: false diff --git a/src/components/Board/Board.component.js b/src/components/Board/Board.component.js index 3584eb1ff..85aa031d2 100644 --- a/src/components/Board/Board.component.js +++ b/src/components/Board/Board.component.js @@ -89,7 +89,7 @@ export class Board extends Component { displaySettings: { uiSize: 'Standard', labelPosition: 'Below', - copyShowActive: false, + shareShowActive: false, hideOutputActive: false }, navigationSettings: {}, diff --git a/src/components/Board/Output/Output.container.js b/src/components/Board/Output/Output.container.js index 4d0ad8de6..e9676b403 100644 --- a/src/components/Board/Output/Output.container.js +++ b/src/components/Board/Output/Output.container.js @@ -182,6 +182,14 @@ export class OutputContainer extends Component { this.clearOutput(); }; + handlePhraseToShare = () => { + if (this.props.output.length) { + const labels = this.props.output.map(symbol => symbol.label); + return labels.join(' '); + } + return ''; + }; + handleCopyClick = async () => { const { intl, showNotification } = this.props; const labels = this.props.output.map(symbol => symbol.label); @@ -233,6 +241,7 @@ export class OutputContainer extends Component { symbols={this.state.translatedOutput} tabIndex={tabIndex} navigationSettings={navigationSettings} + phrase={this.handlePhraseToShare()} /> ); } diff --git a/src/components/Board/Output/PhraseShare/PhraseShare.component.js b/src/components/Board/Output/PhraseShare/PhraseShare.component.js new file mode 100644 index 000000000..933d77a31 --- /dev/null +++ b/src/components/Board/Output/PhraseShare/PhraseShare.component.js @@ -0,0 +1,143 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +//import { Link } from 'react-router-dom'; +import Dialog from '@material-ui/core/Dialog'; +import DialogContent from '@material-ui/core/DialogContent'; +import DialogTitle from '@material-ui/core/DialogTitle'; +import { FormattedMessage } from 'react-intl'; +import CopyIcon from '@material-ui/icons/FilterNone'; +import CloseIcon from '@material-ui/icons/Close'; +import ShareButton from '../SymbolOutput/ShareButton'; +import IconButton from '../../../UI/IconButton'; +import Button from '@material-ui/core/Button'; +import { + FacebookShareButton, + FacebookIcon, + TwitterShareButton, + TwitterIcon, + EmailShareButton, + EmailIcon, + WhatsappShareButton, + WhatsappIcon, + RedditShareButton, + RedditIcon +} from 'react-share'; +import withMobileDialog from '@material-ui/core/withMobileDialog'; +import messages from './PhraseShare.messages'; + +import './PhraseShare.css'; + +const PhraseShare = ({ + label, + phrase, + intl, + open, + fullScreen, + onShareClick, + onShareClose, + onCopyPhrase, + style, + hidden +}) => ( + + +); + +PhraseShare.defaultProps = { + open: false, + disabled: false, + onShareClose: () => {}, + onCopyPhrase: () => {} +}; + +PhraseShare.propTypes = { + open: PropTypes.bool, + phrase: PropTypes.string.isRequired, + onShareClose: PropTypes.func, + onShareClick: PropTypes.func.isRequired, + onCopyPhrase: PropTypes.func +}; + +export default withMobileDialog()(PhraseShare); diff --git a/src/components/Board/Output/PhraseShare/PhraseShare.css b/src/components/Board/Output/PhraseShare/PhraseShare.css new file mode 100644 index 000000000..3ebabee49 --- /dev/null +++ b/src/components/Board/Output/PhraseShare/PhraseShare.css @@ -0,0 +1,52 @@ +.SharePhraseDialog__container .SharePhraseDialog__title { + border-bottom: 1px solid #ccc; + margin-bottom: 18px; + padding: 20px 24px 18px; + position: relative; +} + +.SharePhraseDialog__container .SharePhraseDialog__title button { + position: absolute; + top: 7px; + right: 7px; + color: #000; +} + +.SharePhraseDialog__container .SharePhraseDialog__ToggleStatusButton { + top: 0; +} + +.SharePhraseDialog__socialIcons { + text-align: center; +} + +.SharePhraseDialog__socialIcons > div { + display: flex; +} + +.SharePhraseDialog__socialIcons > div { + margin-bottom: 10px; +} + +.SharePhraseDialog__socialIcons button:disabled { + -webkit-filter: grayscale(100%); + filter: grayscale(100%); +} + +.SharePhraseDialog__socialIcons > div > button:not(:last-child) { + margin: 0 2px 0 0; +} + +.SharePhraseDialog__socialIcons__copyAction div:first-child { + padding: 10px 0 4px; +} + +.SharePhraseDialog__socialIcons__copyAction > span, +.SharePhraseDialog__socialIcons .SocialMediaShareButton span { + padding: 3px 0 0; + font-size: 0.85rem; +} + +.SharePhraseDialog__socialIcons__copyAction svg { + font-size: 3.42rem; +} diff --git a/src/components/Board/Output/PhraseShare/PhraseShare.messages.js b/src/components/Board/Output/PhraseShare/PhraseShare.messages.js new file mode 100644 index 000000000..fcb8549d3 --- /dev/null +++ b/src/components/Board/Output/PhraseShare/PhraseShare.messages.js @@ -0,0 +1,49 @@ +import { defineMessages } from 'react-intl'; + +export default defineMessages({ + title: { + id: 'cboard.components.PhraseShare.title', + defaultMessage: 'Share or copy your Phrase' + }, + close: { + id: 'cboard.components.PhraseShare.close', + defaultMessage: 'Close' + }, + copyLink: { + id: 'cboard.components.PhraseShare.copyPhrase', + defaultMessage: 'Copy phrase' + }, + facebook: { + id: 'cboard.components.PhraseShare.facebook', + defaultMessage: 'Facebook' + }, + twitter: { + id: 'cboard.components.PhraseShare.twitter', + defaultMessage: 'Twitter' + }, + email: { + id: 'cboard.components.PhraseShare.email', + defaultMessage: 'Email' + }, + subject: { + id: 'cboard.components.PhraseShare.subject', + defaultMessage: 'Check out this email from Cboard user!' + }, + whatsapp: { + id: 'cboard.components.PhraseShare.whatsapp', + defaultMessage: 'Whatsapp' + }, + reddit: { + id: 'cboard.components.PhraseShare.reddit', + defaultMessage: 'Reddit' + } + // subject: { + // id: 'cboard.components.PhraseShare.subject', + // defaultMessage: 'Check out this board from Cboard!' + // }, + // body: { + // id: 'cboard.components.PhraseShare.body', + // defaultMessage: + // 'Hello! I want to share a communication board from the Cboard tool. Please find it at: {url}' + // } +}); diff --git a/src/components/Board/Output/PhraseShare/index.js b/src/components/Board/Output/PhraseShare/index.js new file mode 100644 index 000000000..4edd74b80 --- /dev/null +++ b/src/components/Board/Output/PhraseShare/index.js @@ -0,0 +1,3 @@ +import PhraseShare from './PhraseShare.component'; + +export default PhraseShare; diff --git a/src/components/Board/Output/SymbolOutput/CopyButton/index.js b/src/components/Board/Output/SymbolOutput/CopyButton/index.js deleted file mode 100644 index 90e9e6d20..000000000 --- a/src/components/Board/Output/SymbolOutput/CopyButton/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './CopyButton'; diff --git a/src/components/Board/Output/SymbolOutput/CopyButton/CopyButton.js b/src/components/Board/Output/SymbolOutput/ShareButton/ShareButton.js similarity index 70% rename from src/components/Board/Output/SymbolOutput/CopyButton/CopyButton.js rename to src/components/Board/Output/SymbolOutput/ShareButton/ShareButton.js index 9014bda0b..06cddc788 100644 --- a/src/components/Board/Output/SymbolOutput/CopyButton/CopyButton.js +++ b/src/components/Board/Output/SymbolOutput/ShareButton/ShareButton.js @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { withStyles } from '@material-ui/core/styles'; import IconButton from '@material-ui/core/IconButton'; -import FileCopy from '@material-ui/icons/FileCopy'; +import ShareIcon from '@material-ui/icons/Share'; import { Scannable } from 'react-scannable'; const styles = { @@ -17,7 +17,7 @@ const styles = { } }; -export class CopyButton extends Component { +export class ShareButton extends Component { static propTypes = { /** * @ignore @@ -34,17 +34,17 @@ export class CopyButton extends Component { render() { const { classes, theme, hidden, ...other } = this.props; - const copyIconStyle = + const shareIconStyle = theme.direction === 'ltr' ? null : { transform: 'scaleX(-1)' }; return ( - - + + ); } } -export default withStyles(styles, { withTheme: true })(CopyButton); +export default withStyles(styles, { withTheme: true })(ShareButton); diff --git a/src/components/Board/Output/SymbolOutput/ShareButton/index.js b/src/components/Board/Output/SymbolOutput/ShareButton/index.js new file mode 100644 index 000000000..2382465b7 --- /dev/null +++ b/src/components/Board/Output/SymbolOutput/ShareButton/index.js @@ -0,0 +1 @@ +export { default } from './ShareButton'; diff --git a/src/components/Board/Output/SymbolOutput/SymbolOutput.js b/src/components/Board/Output/SymbolOutput/SymbolOutput.js index 1d32c4245..cc613226b 100644 --- a/src/components/Board/Output/SymbolOutput/SymbolOutput.js +++ b/src/components/Board/Output/SymbolOutput/SymbolOutput.js @@ -7,11 +7,29 @@ import IconButton from '@material-ui/core/IconButton'; import Symbol from '../../Symbol'; import BackspaceButton from './BackspaceButton'; import ClearButton from './ClearButton'; -import CopyButton from './CopyButton'; +import messages from '../../Board.messages'; +import PhraseShare from '../PhraseShare'; import Scroll from './Scroll'; import './SymbolOutput.css'; +import { injectIntl } from 'react-intl'; class SymbolOutput extends PureComponent { + constructor(props) { + super(props); + + this.state = { + openPhraseShareDialog: false + }; + } + + onShareClick = () => { + this.setState({ openPhraseShareDialog: true }); + }; + + onShareClose = () => { + this.setState({ openPhraseShareDialog: false }); + }; + static propTypes = { /** * Symbols to output @@ -36,12 +54,15 @@ class SymbolOutput extends PureComponent { render() { const { + intl, onBackspaceClick, onClearClick, + getPhraseToShare, onCopyClick, onRemoveClick, symbols, navigationSettings, + phrase, ...other } = this.props; @@ -86,10 +107,16 @@ class SymbolOutput extends PureComponent { ))} - {navigationSettings.copyShowActive && ( -