diff --git a/package.json b/package.json index 2038444919e7683b6cbf633dd7892b07469c1784..8d5e632b7862e886260c1864bc4d539899a01e46 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,7 @@ "node-sass": "^4.9.2", "openseadragon": "^2.4.0", "prop-types": "^15.6.2", + "react-copy-to-clipboard": "^5.0.1", "react-full-screen": "^0.2.4", "react-i18next": "^10.5.2", "react-image": "^2.0.0", diff --git a/src/components/WorkspaceExport.js b/src/components/WorkspaceExport.js index c4143585eb569aecf54525798dfe6476260f25cd..10b37504acfd7175a02ab31cc6dc278721ba138d 100644 --- a/src/components/WorkspaceExport.js +++ b/src/components/WorkspaceExport.js @@ -1,13 +1,25 @@ -import React, { Component } from 'react'; +import React, { Component, Children } from 'react'; +import Button from '@material-ui/core/Button'; import Dialog from '@material-ui/core/Dialog'; +import DialogActions from '@material-ui/core/DialogActions'; import DialogContent from '@material-ui/core/DialogContent'; import DialogTitle from '@material-ui/core/DialogTitle'; import Typography from '@material-ui/core/Typography'; import PropTypes from 'prop-types'; +import { CopyToClipboard } from 'react-copy-to-clipboard'; /** */ export class WorkspaceExport extends Component { + /** */ + constructor(props) { + super(props); + + this.state = { + value: '', + }; + } + /** * @private */ @@ -36,10 +48,16 @@ export class WorkspaceExport extends Component { */ render() { const { - container, handleClose, open, children, t, + children, container, handleClose, open, t, } = this.props; return ( - <Dialog id="workspace-settings" container={container} open={open} onClose={handleClose}> + <Dialog + id="workspace-settings" + container={container} + open={open} + onClose={handleClose} + scroll="paper" + > <DialogTitle id="form-dialog-title" disableTypography> <Typography variant="h2">{t('downloadExport')}</Typography> </DialogTitle> @@ -49,6 +67,15 @@ export class WorkspaceExport extends Component { {this.exportableState()} </pre> </DialogContent> + <DialogActions> + <Button color="secondary" onClick={() => handleClose()}>{t('cancel')}</Button> + <CopyToClipboard + // eslint-disable-next-line react/destructuring-assignment + text={this.state.value} + > + <Button variant="contained" color="secondary" onClick={() => this.setState({ value: this.exportableState() })}>{t('copy')}</Button> + </CopyToClipboard> + </DialogActions> </Dialog> ); } diff --git a/src/locales/de/translation.json b/src/locales/de/translation.json index 86804652308df1cd5cf2134bb442160474d9f1b9..bd24a16a869101180e0fa406764aa1744a1fbb83 100644 --- a/src/locales/de/translation.json +++ b/src/locales/de/translation.json @@ -15,11 +15,12 @@ "closeWindow": "Fenster schließen", "collapseSidePanel": "Seitenleiste zuklappen", "compactList": "Kompaktliste", + "copy": "Kopieren", "currentItem": "Objekt", "dark": "Dunkel", "dismiss": "Verwerfen", - "downloadExport": "Download/Export Arbeitsfläche", - "downloadExportWorkspace": "Download/Export Arbeitsfläche", + "downloadExport": "Arbeitsfläche exportieren", + "downloadExportWorkspace": "Arbeitsfläche exortieren", "elastic": "Elastisch", "errorDialogTitle": "Es ist ein Fehler aufgetreten", "errorDialogConfirm": "OK", diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index 1c5cb4e5feb71b3436ee69fc999455d54f3bd3a0..6afee50bda82be163b5ec48327a426fd956be482 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -16,12 +16,13 @@ "closeWindow": "Close window", "collapseSidePanel": "Collapse sidebar", "compactList": "Compact list", + "copy": "Copy", "currentItem": "Current item", "dark": "Dark theme", "dismiss": "Dismiss", "displayAllAnnotations": "Highlight all", - "downloadExport": "Download/Export workspace", - "downloadExportWorkspace": "Download/Export workspace", + "downloadExport": "Export workspace", + "downloadExportWorkspace": "Export workspace", "elastic": "Elastic", "errorDialogConfirm": "OK", "errorDialogTitle": "An error occurred",