Implement copy button

src/components/App/App.reducer.js

@@ -17,6 +17,7 @@ const initialState = {
   displaySettings: {
     uiSize: DISPLAY_SIZE_STANDARD,
     fontSize: DISPLAY_SIZE_STANDARD,
+    copyShowActive: false,
     hideOutputActive: false,
     labelPosition: LABEL_POSITION_BELOW,
     darkThemeActive: false

src/components/App/__tests__/App.reducer.test.js

@@ -26,6 +26,7 @@ describe('reducer', () => {
       navigationSettings: {
         active: false,
         caBackButtonActive: false,
+        copyShowActive: false,
         quickUnlockActive: false,
         removeOutputActive: false,
         vocalizeFolders: false
@@ -46,6 +47,7 @@ describe('reducer', () => {
       navigationSettings: {
         active: false,
         caBackButtonActive: false,
+        copyShowActive: false,
         quickUnlockActive: false,
         removeOutputActive: false,
         vocalizeFolders: false

src/components/Board/Board.component.js

@@ -81,14 +81,15 @@ export class Board extends Component {
     onBoardTypeChange: PropTypes.func,
     isFixedBoard: PropTypes.bool,
     onAddRemoveColumn: PropTypes.func,
-    onAddRemoveRow: PropTypes.func, 
+    onAddRemoveRow: PropTypes.func,
     onLayoutChange: PropTypes.func
   };
 
   static defaultProps = {
     displaySettings: {
       uiSize: 'Standard',
       labelPosition: 'Below',
+      copyShowActive: false,
       hideOutputActive: false
     },
     navigationSettings: {},
@@ -277,7 +278,7 @@ export class Board extends Component {
       emptyVoiceAlert,
       onAddRemoveRow,
       onAddRemoveColumn,
-      onTileDrop, 
+      onTileDrop,
       onLayoutChange
     } = this.props;
 

src/components/Board/Output/Output.container.js

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from 'react-intl';
 import { connect } from 'react-redux';
 import keycode from 'keycode';
+import messages from '../Board.messages';
+import { showNotification } from '../../Notifications/Notifications.actions';
 
 import {
   cancelSpeech,
@@ -179,6 +181,14 @@ export class OutputContainer extends Component {
     this.clearOutput();
   };
 
+  handleCopyClick = () => {
+    const { intl, showNotification } = this.props;
+    let labels = [];
+    this.props.output.map(symbol => labels.push(symbol.label));
+    navigator.clipboard.writeText(labels.join(' '));
+    showNotification(intl.formatMessage(messages.copyMessage));
+  };
+
   handleRemoveClick = index => event => {
     const { cancelSpeech } = this.props;
     cancelSpeech();
@@ -207,6 +217,7 @@ export class OutputContainer extends Component {
       <SymbolOutput
         onBackspaceClick={this.handleBackspaceClick}
         onClearClick={this.handleClearClick}
+        onCopyClick={this.handleCopyClick}
         onRemoveClick={this.handleRemoveClick}
         onClick={this.handleOutputClick}
         onKeyDown={this.handleOutputKeyDown}
@@ -221,15 +232,16 @@ export class OutputContainer extends Component {
 const mapStateToProps = ({ board, app }) => {
   return {
     output: board.output,
-    navigationSettings: app.navigationSettings,
+    navigationSettings: app.navigationSettings
   };
 };
 
 const mapDispatchToProps = {
   cancelSpeech,
   changeOutput,
   clickOutput,
-  speak
+  speak,
+  showNotification
 };
 
 export default connect(

src/components/Board/Output/SymbolOutput/CopyButton/CopyButton.js

@@ -0,0 +1,50 @@
+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 { Scannable } from 'react-scannable';
+
+const styles = {
+  button: {
+    alignSelf: 'center',
+    height: '64px',
+    width: '64px'
+  },
+  icon: {
+    height: '32px',
+    width: '32px'
+  }
+};
+
+export class CopyButton extends Component {
+  static propTypes = {
+    /**
+     * @ignore
+     */
+    classes: PropTypes.object,
+    /**
+     * @ignore
+     */
+    theme: PropTypes.object,
+
+    hidden: PropTypes.bool
+  };
+
+  render() {
+    const { classes, theme, hidden, ...other } = this.props;
+
+    const copyIconStyle =
+      theme.direction === 'ltr' ? null : { transform: 'scaleX(-1)' };
+
+    return (
+      <Scannable disabled={hidden}>
+        <IconButton aria-label="Copy" className={classes.button} {...other}>
+          <FileCopy className={classes.icon} style={copyIconStyle} />
+        </IconButton>
+      </Scannable>
+    );
+  }
+}
+
+export default withStyles(styles, { withTheme: true })(CopyButton);

src/components/Board/Output/SymbolOutput/CopyButton/index.js

@@ -0,0 +1 @@
+export { default } from './CopyButton';

src/components/Board/Output/SymbolOutput/SymbolOutput.js

@@ -7,6 +7,7 @@ import IconButton from '@material-ui/core/IconButton';
 import Symbol from '../../Symbol';
 import BackspaceButton from './BackspaceButton';
 import ClearButton from './ClearButton';
+import CopyButton from './CopyButton';
 import Scroll from './Scroll';
 import './SymbolOutput.css';
 
@@ -37,6 +38,7 @@ class SymbolOutput extends PureComponent {
     const {
       onBackspaceClick,
       onClearClick,
+      onCopyClick,
       onRemoveClick,
       symbols,
       navigationSettings,
@@ -47,6 +49,10 @@ class SymbolOutput extends PureComponent {
       visibility: symbols.length ? 'visible' : 'hidden'
     };
 
+    const copyButtonStyle = {
+      visibility: symbols.length ? 'visible' : 'hidden'
+    };
+
     const removeButtonStyle = {
       visibility: navigationSettings.removeOutputActive ? 'visible' : 'hidden'
     };
@@ -80,7 +86,14 @@ class SymbolOutput extends PureComponent {
             </div>
           ))}
         </Scroll>
-
+        {navigationSettings.copyShowActive && (
+          <CopyButton
+            color="inherit"
+            onClick={onCopyClick}
+            style={copyButtonStyle}
+            hidden={!symbols.length}
+          />
+        )}
         <ClearButton
           color="inherit"
           onClick={onClearClick}

src/components/Settings/Navigation/Navigation.component.js

@@ -7,6 +7,7 @@ import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
 import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+import Divider from '@material-ui/core/Divider';
 import FullScreenDialog from '../../UI/FullScreenDialog';
 import messages from './Navigation.messages';
 
@@ -42,6 +43,12 @@ class Navigation extends React.Component {
     });
   };
 
+  toggleCopyShow = () => {
+    this.setState({
+      copyShowActive: !this.state.copyShowActive
+    });
+  };
+
   toggleRemoveOutput = () => {
     this.setState({
       removeOutputActive: !this.state.removeOutputActive
@@ -85,6 +92,25 @@ class Navigation extends React.Component {
                   />
                 </ListItemSecondaryAction>
               </ListItem>
+              <Divider />
+              <ListItem>
+                <ListItemText
+                  className="Display__ListItemText"
+                  primary={<FormattedMessage {...messages.copyShow} />}
+                  secondary={
+                    <FormattedMessage {...messages.copyShowSecondary} />
+                  }
+                />
+                <ListItemSecondaryAction>
+                  <Switch
+                    checked={this.state.copyShowActive}
+                    onChange={this.toggleCopyShow}
+                    value="active"
+                    color="secondary"
+                  />
+                </ListItemSecondaryAction>
+              </ListItem>
+              <Divider />
               <ListItem>
                 <ListItemText
                   className="Navigation__ListItemText"
@@ -102,6 +128,7 @@ class Navigation extends React.Component {
                   />
                 </ListItemSecondaryAction>
               </ListItem>
+              <Divider />
               <ListItem disabled={true}>
                 <ListItemText
                   className="Navigation__ListItemText"
@@ -120,6 +147,7 @@ class Navigation extends React.Component {
                   />
                 </ListItemSecondaryAction>
               </ListItem>
+              <Divider />
               <ListItem>
                 <ListItemText
                   className="Navigation__ListItemText"

src/components/Settings/Navigation/Navigation.messages.js

@@ -3,7 +3,7 @@ import { defineMessages } from 'react-intl';
 export default defineMessages({
   navigation: {
     id: 'cboard.components.Settings.Navigation.navigation',
-    defaultMessage: 'Navigation'
+    defaultMessage: 'Navigation & Buttons'
   },
   enable: {
     id: 'cboard.components.Settings.Navigation.enable',
@@ -21,6 +21,15 @@ export default defineMessages({
     id: 'cboard.components.Settings.Navigation.quickUnlockSecondary',
     defaultMessage: 'Unlocks the settings with a single click'
   },
+  copyShow: {
+    id: 'cboard.components.Settings.Navigation.copyShow',
+    defaultMessage: 'Show the symbol copy button'
+  },
+  copyShowSecondary: {
+    id: 'cboard.components.Settings.Navigation.copyShowSecondary',
+    defaultMessage:
+      'Show a copy button (next to backspace button) that copies the selected symbols to the clipboard.'
+  },
   outputRemove: {
     id: 'cboard.components.Settings.Navigation.outputRemove',
     defaultMessage: 'Remove symbols from the output bar'
@@ -35,6 +44,6 @@ export default defineMessages({
   },
   vocalizeFoldersSecondary: {
     id: 'cboard.components.Settings.Navigation.vocalizeFoldersSecondary',
-    defaultMessage: 'Reads a folder\'s name out loud when clicked'
+    defaultMessage: "Reads a folder's name out loud when clicked"
   }
 });

src/translations/ar-SA.json

@@ -200,7 +200,7 @@
   "cboard.components.CommunicatorDialog.editBoardTitle": "تحرير اسم اللوحة ووصفها",
   "cboard.components.CommunicatorDialog.editBoardTitleDescription": "يمكنك تعديل اسم اللوحة ووصفها من هنا. يرجى النظر في كتابة وصف ذي مغزى لمنتداك.",
   "board.components.CommunicatorDialog.noTitle": "بلا عنوان",
-  "cboard.components.Settings.navigation": "التنقل",
+  "cboard.components.Settings.navigation": "التنقل والأزرار",
   "cboard.components.Settings.scanning": "مسح",
   "cboard.components.Settings.display": "عرض",
   "cboard.components.Settings.feedback": "ردود الفعل",

src/translations/be-BY.json

@@ -200,7 +200,7 @@
   "cboard.components.CommunicatorDialog.editBoardTitle": "Адрэдагаваць назву дошкі і апісанне",
   "cboard.components.CommunicatorDialog.editBoardTitleDescription": "Вы можаце змяніць назву дошкі і апісанне тут. Калі ласка, падумайце, каб напісаць змястоўнае апісанне для вашай дошкі.",
   "board.components.CommunicatorDialog.noTitle": "Без назвы",
-  "cboard.components.Settings.navigation": "рух",
+  "cboard.components.Settings.navigation": "Навігацыя і кнопкі",
   "cboard.components.Settings.scanning": "сканаванне",
   "cboard.components.Settings.display": "дысплей",
   "cboard.components.Settings.feedback": "зваротная сувязь",

src/translations/bn-BD.json

@@ -200,7 +200,7 @@
   "cboard.components.CommunicatorDialog.editBoardTitle": "বোর্ডের নাম এবং বর্ণনা সম্পাদনা করুন",
   "cboard.components.CommunicatorDialog.editBoardTitleDescription": "আপনি এখান থেকে বোর্ডের নাম এবং বর্ণনা সম্পাদনা করতে পারেন। আপনার বোর্ডের জন্য একটি অর্থবহ বর্ণনা লিখতে দয়া করে বিবেচনা করুন।",
   "board.components.CommunicatorDialog.noTitle": "কোনো শিরোনাম নেই",
-  "cboard.components.Settings.navigation": "ন্যাভিগেশন",
+  "cboard.components.Settings.navigation": "নেভিগেশন এবং বোতাম",
   "cboard.components.Settings.scanning": "স্ক্যান করা হচ্ছে",
   "cboard.components.Settings.display": "প্রদর্শন",
   "cboard.components.Settings.feedback": "প্রতিক্রিয়া",

src/translations/cs-CZ.json

@@ -200,7 +200,7 @@
   "cboard.components.CommunicatorDialog.editBoardTitle": "Upravit název a popis desky",
   "cboard.components.CommunicatorDialog.editBoardTitleDescription": "Zde můžete upravit název a popis desky. Zvažte prosím napsat smysluplný popis své rady.",
   "board.components.CommunicatorDialog.noTitle": "Bez názvu",
-  "cboard.components.Settings.navigation": "Navigace",
+  "cboard.components.Settings.navigation": "Navigace a tlačítka",
   "cboard.components.Settings.scanning": "Snímání",
   "cboard.components.Settings.display": "Zobrazit",
   "cboard.components.Settings.feedback": "Zpětná vazba",

src/translations/da-DK.json

@@ -200,7 +200,7 @@
   "cboard.components.CommunicatorDialog.editBoardTitle": "Rediger kortets navn og beskrivelse",
   "cboard.components.CommunicatorDialog.editBoardTitleDescription": "Du kan redigere kortets navn og beskrivelse herfra. Overvej at skrive en meningsfuld beskrivelse til dit bord.",
   "board.components.CommunicatorDialog.noTitle": "Ingen titel",
-  "cboard.components.Settings.navigation": "Navigation",
+  "cboard.components.Settings.navigation": "Navigation og knapper",
   "cboard.components.Settings.scanning": "Scanning",
   "cboard.components.Settings.display": "Skærm",
   "cboard.components.Settings.feedback": "Feedback",
@@ -260,7 +260,7 @@
   "cboard.components.Settings.Scanning.scannerHowToDeactivate": "Tryk Escape 4 gange for at deaktivere Scanner",
   "cboard.components.Settings.Scanning.scannerManualStrategy": "Scanner fremskridt med mellemrumstasten, tryk på enter for at vælge et element",
   "cboard.components.Settings.Scanning.scannerAutomaticStrategy": "Scanneren gentager elementerne, tryk på en vilkårlig tast for at vælge dem",
-  "cboard.components.Settings.Navigation.navigation": "Navigation",
+  "cboard.components.Settings.Navigation.navigation": "Navigation og knapper",
   "cboard.components.Settings.Navigation.enable": "Aktivér kontekstbevidst tilbage-knap",
   "cboard.components.Settings.Navigation.enableSecondary": "Viser store tilbage knapper oven på brædderne",
   "cboard.components.Settings.Navigation.quickUnlock": "Aktivér hurtig indstilling oplåsning",

src/translations/de-DE.json

@@ -200,7 +200,7 @@
   "cboard.components.CommunicatorDialog.editBoardTitle": "Bearbeiten Sie den Namen und die Beschreibung der Karte",
   "cboard.components.CommunicatorDialog.editBoardTitleDescription": "Hier können Sie den Namen und die Beschreibung des Boards bearbeiten. Bitte denken Sie daran, eine aussagekräftige Beschreibung für Ihr Board zu schreiben.",
   "board.components.CommunicatorDialog.noTitle": "Kein Titel",
-  "cboard.components.Settings.navigation": "Navigation",
+  "cboard.components.Settings.navigation": "Navigation und Schaltflächen",
   "cboard.components.Settings.scanning": "Scannen",
   "cboard.components.Settings.display": "Anzeige",
   "cboard.components.Settings.feedback": "Feedback",

src/translations/el-GR.json

@@ -200,7 +200,7 @@
   "cboard.components.CommunicatorDialog.editBoardTitle": "Επεξεργασία ονόματος και περιγραφής πίνακα",
   "cboard.components.CommunicatorDialog.editBoardTitleDescription": "Μπορείτε να επεξεργαστείτε το όνομα και την περιγραφή του πίνακα από εδώ. Εξετάστε το ενδεχόμενο να γράψετε μια σημαντική περιγραφή για το διοικητικό συμβούλιο.",
   "board.components.CommunicatorDialog.noTitle": "Χωρίς τίτλο",
-  "cboard.components.Settings.navigation": "Πλοήγηση",
+  "cboard.components.Settings.navigation": "Πλοήγηση και κουμπιά",
   "cboard.components.Settings.scanning": "Ερευνα",
   "cboard.components.Settings.display": "Απεικόνιση",
   "cboard.components.Settings.feedback": "Ανατροφοδότηση",

src/translations/en-GB.json

@@ -200,7 +200,7 @@
   "cboard.components.CommunicatorDialog.editBoardTitle": "Edit board name and description",
   "cboard.components.CommunicatorDialog.editBoardTitleDescription": "You can edit board name and description from here. Please consider to write a meaningful description for your board.",
   "board.components.CommunicatorDialog.noTitle": "No title",
-  "cboard.components.Settings.navigation": "Navigation",
+  "cboard.components.Settings.navigation": "Navigation and Buttons",
   "cboard.components.Settings.scanning": "Scanning",
   "cboard.components.Settings.display": "Display",
   "cboard.components.Settings.feedback": "Feedback",
@@ -260,7 +260,7 @@
   "cboard.components.Settings.Scanning.scannerHowToDeactivate": "Press Escape 4 times to deactivate Scanner",
   "cboard.components.Settings.Scanning.scannerManualStrategy": "Scanner advances with space bar key, press enter to select an item",
   "cboard.components.Settings.Scanning.scannerAutomaticStrategy": "Scanner will iterate over elements, press any key to select them",
-  "cboard.components.Settings.Navigation.navigation": "Navigation",
+  "cboard.components.Settings.Navigation.navigation": "Navigation and Buttons",
   "cboard.components.Settings.Navigation.enable": "Enable context aware back button",
   "cboard.components.Settings.Navigation.enableSecondary": "Shows big back buttons on top of the boards",
   "cboard.components.Settings.Navigation.quickUnlock": "Enable quick settings unlock",