Merge pull request #73 from sensebox/add/copyToClipboardButton
add copy to clipboard Button
This commit is contained in:
Mario Pesch
GitHub
commit
7a34575314
@ -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
|
||||
*/
|
||||
|
||||
@ -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
|
||||
*/
|
||||
|
||||
99
src/components/Workspace/CopyCode.js
Normal file
99
src/components/Workspace/CopyCode.js
Normal file
@ -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));
|
||||
@ -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 {
|
||||
|
||||
@ -21,7 +22,7 @@ class WorkspaceFunc extends Component {
|
||||
|
||||
{!this.props.assessment ?
|
||||
<WorkspaceName
|
||||
style={{marginRight: '5px'}}
|
||||
style={{ marginRight: '5px' }}
|
||||
multiple={this.props.multiple}
|
||||
project={this.props.project}
|
||||
projectType={this.props.projectType}
|
||||
@ -30,53 +31,59 @@ class WorkspaceFunc extends Component {
|
||||
|
||||
{this.props.assessment ?
|
||||
<SolutionCheck />
|
||||
: !this.props.multiple ?
|
||||
: !this.props.multiple ?
|
||||
<Compile iconButton />
|
||||
: null}
|
||||
|
||||
{!this.props.multiple ?
|
||||
<CopyCode iconButton />
|
||||
: null}
|
||||
|
||||
{this.props.user && !this.props.multiple?
|
||||
|
||||
{this.props.user && !this.props.multiple ?
|
||||
<SaveProject
|
||||
style={{marginRight: '5px'}}
|
||||
style={{ marginRight: '5px' }}
|
||||
projectType={this.props.projectType}
|
||||
project={this.props.project}
|
||||
/>
|
||||
: null}
|
||||
: null}
|
||||
|
||||
{!this.props.multiple ?
|
||||
<DownloadProject style={{marginRight: '5px'}} />
|
||||
: null}
|
||||
<DownloadProject style={{ marginRight: '5px' }} />
|
||||
: null}
|
||||
|
||||
{!this.props.assessment && !this.props.multiple?
|
||||
|
||||
{!this.props.assessment && !this.props.multiple ?
|
||||
<OpenProject
|
||||
style={{marginRight: '5px'}}
|
||||
style={{ marginRight: '5px' }}
|
||||
assessment={this.props.assessment}
|
||||
/>
|
||||
: null}
|
||||
: null}
|
||||
|
||||
{!this.props.assessment && !this.props.multiple?
|
||||
<Screenshot style={{marginRight: '5px'}} />
|
||||
: null}
|
||||
{!this.props.assessment && !this.props.multiple ?
|
||||
<Screenshot style={{ marginRight: '5px' }} />
|
||||
: null}
|
||||
|
||||
{this.props.projectType !== 'gallery' && !this.props.assessment ?
|
||||
<ShareProject
|
||||
style={{marginRight: '5px'}}
|
||||
style={{ marginRight: '5px' }}
|
||||
multiple={this.props.multiple}
|
||||
project={this.props.project}
|
||||
projectType={this.props.projectType}
|
||||
/>
|
||||
:null}
|
||||
: null}
|
||||
|
||||
{!this.props.multiple ?
|
||||
<ResetWorkspace style={this.props.projectType === 'project' || this.props.projectType === 'gallery' ? { marginRight: '5px' }:null}
|
||||
<ResetWorkspace style={this.props.projectType === 'project' || this.props.projectType === 'gallery' ? { marginRight: '5px' } : null}
|
||||
/>
|
||||
: null}
|
||||
: null}
|
||||
|
||||
{!this.props.assessment && (this.props.projectType === 'project' || this.props.projectType === 'gallery') && this.props.user && this.props.user.email === this.props.project.creator ?
|
||||
<DeleteProject
|
||||
project={this.props.project}
|
||||
projectType={this.props.projectType}
|
||||
/>
|
||||
:null}
|
||||
: null}
|
||||
|
||||
</div>
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user