Merge pull request #73 from sensebox/add/copyToClipboardButton

add copy to clipboard Button

src/components/Blockly/msg/de/ui.js

@@ -39,6 +39,7 @@ export const UI = {
     tooltip_trashcan_delete: 'Blöcke endgültig löschen',
     tooltip_project_title: "Titel des Projektes",
     tooltip_check_solution: "Lösung kontrollieren",
+    tooltip_copy_code: "Code in die Zwischenablage kopieren",
 
     /**
      * Messages
@@ -62,6 +63,7 @@ export const UI = {
     messages_newblockly_text: "Die neue Blockly-Version befindet sich derzeit in der Testphase. Wenn Sie einen Fehler finden, melden Sie diesen bitte in unserem [Forum](https://forum.sensebox.de/t/neue-blockly-version-beta-test-und-feedback/1176). Eine Übersicht über alle neuen Funktionen finden Sie [hier](/news)",
     messages_GET_TUTORIAL_FAIL: 'Zurück zur Tutorials-Übersicht',
     messages_LOGIN_FAIL: 'Der Benutzername oder das Passwort ist nicht korrekt.',
+    messages_copy_code: "Code wurde in die Zwischenablage kopiert",
     /**
      * Share Dialog
      */

src/components/Blockly/msg/en/ui.js

@@ -41,6 +41,7 @@ export const UI = {
     tooltip_trashcan_delete: "empty trashcan",
     tooltip_project_title: "Project title",
     tooltip_check_solution: "Check solution",
+    tooltip_copy_code: "Copy Code to clipboard",
 
     /**
      * Messages
@@ -65,6 +66,7 @@ export const UI = {
     messages_GET_TUTORIAL_FAIL: 'Back to tutorials overview',
     messages_LOGIN_FAIL: 'The username or password is incorrect.',
     messages_login_error: "Enter both a username and a password.",
+    messages_copy_code: "Copy code to clipboard succesfull",
     /**
      * Share Dialog
      */

src/components/Workspace/CopyCode.js

@@ -0,0 +1,99 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { workspaceName } from '../../actions/workspaceActions';
+
+import { withStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import IconButton from '@material-ui/core/IconButton';
+import Tooltip from '@material-ui/core/Tooltip';
+
+import { faCopy } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import * as Blockly from 'blockly/core';
+import Snackbar from '../Snackbar';
+
+
+const styles = (theme) => ({
+    backdrop: {
+        zIndex: theme.zIndex.drawer + 1,
+        color: '#fff',
+    },
+    iconButton: {
+        backgroundColor: theme.palette.primary.main,
+        color: theme.palette.primary.contrastText,
+        width: '40px',
+        height: '40px',
+        '&:hover': {
+            backgroundColor: theme.palette.primary.main,
+            color: theme.palette.primary.contrastText,
+        }
+    },
+    button: {
+        backgroundColor: theme.palette.button.copycode,
+        color: theme.palette.primary.contrastText,
+        '&:hover': {
+            backgroundColor: theme.palette.button.copycode,
+            color: theme.palette.primary.contrastText,
+        }
+    }
+});
+
+
+class CopyCode extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            snackbar: false,
+        };
+    }
+
+
+    copyCode = () => {
+        navigator.clipboard.writeText(this.props.arduino)
+        this.setState({ snackbar: true, type: 'success', key: Date.now(), message: Blockly.Msg.messages_copy_code });
+    }
+
+    render() {
+        return (
+            <div style={{}}>
+                {this.props.iconButton ?
+                    <Tooltip title={Blockly.Msg.tooltip_copy_code} arrow style={{ marginRight: '5px' }}>
+                        <IconButton
+                            className={`copyCode ${this.props.classes.iconButton}`}
+                            onClick={() => this.copyCode()}
+                        >
+                            <FontAwesomeIcon icon={faCopy} size="l" />
+                        </IconButton>
+                    </Tooltip>
+                    :
+                    <Button style={{ float: 'right', color: 'white' }} variant="contained" className={this.props.classes.button} onClick={() => this.copyCode()}>
+                        <FontAwesomeIcon icon={faCopy} style={{ marginRight: '5px' }} /> Code kopieren
+          </Button>
+                }
+                <Snackbar
+                    open={this.state.snackbar}
+                    message={this.state.message}
+                    type={this.state.type}
+                    key={this.state.key}
+                />
+
+            </div >
+        );
+    };
+}
+
+CopyCode.propTypes = {
+    arduino: PropTypes.string.isRequired,
+    name: PropTypes.string,
+    workspaceName: PropTypes.func.isRequired
+};
+
+const mapStateToProps = state => ({
+    arduino: state.workspace.code.arduino,
+    name: state.workspace.name
+});
+
+
+export default connect(mapStateToProps, { workspaceName })(withStyles(styles, { withTheme: true })(CopyCode));

src/components/Workspace/WorkspaceFunc.js

@@ -12,6 +12,7 @@ import Screenshot from './Screenshot';
 import ShareProject from './ShareProject';
 import ResetWorkspace from './ResetWorkspace';
 import DeleteProject from './DeleteProject';
+import CopyCode from './CopyCode';
 
 class WorkspaceFunc extends Component {
 
@@ -34,6 +35,11 @@ class WorkspaceFunc extends Component {
             <Compile iconButton />
             : null}
 
+        {!this.props.multiple ?
+          <CopyCode iconButton />
+          : null}
+
+
         {this.props.user && !this.props.multiple ?
           <SaveProject
             style={{ marginRight: '5px' }}
@@ -46,6 +52,7 @@ class WorkspaceFunc extends Component {
           <DownloadProject style={{ marginRight: '5px' }} />
           : null}
 
+
         {!this.props.assessment && !this.props.multiple ?
           <OpenProject
             style={{ marginRight: '5px' }}