diff --git a/src/components/WorkspaceExport.js b/src/components/WorkspaceExport.js index a9ce6ed290f8274d88a1912ad26e115a3b25d0bc..2a7ff7e0ce6a882742e5ee6ecb10ac30466d52ae 100644 --- a/src/components/WorkspaceExport.js +++ b/src/components/WorkspaceExport.js @@ -3,13 +3,17 @@ import Button from '@material-ui/core/Button'; import Dialog from '@material-ui/core/Dialog'; import DialogActions from '@material-ui/core/DialogActions'; import DialogTitle from '@material-ui/core/DialogTitle'; +import DialogContent from '@material-ui/core/DialogContent'; import Typography from '@material-ui/core/Typography'; import Snackbar from '@material-ui/core/Snackbar'; import IconButton from '@material-ui/core/IconButton'; +import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import CloseIcon from '@material-ui/icons/Close'; +import Accordion from '@material-ui/core/Accordion'; +import AccordionSummary from '@material-ui/core/AccordionSummary'; +import AccordionDetails from '@material-ui/core/AccordionDetails'; import PropTypes from 'prop-types'; import { CopyToClipboard } from 'react-copy-to-clipboard'; -import ScrollIndicatedDialogContent from '../containers/ScrollIndicatedDialogContent'; /** */ @@ -50,7 +54,7 @@ export class WorkspaceExport extends Component { */ render() { const { - children, container, open, t, + children, classes, container, open, t, } = this.props; const { copied } = this.state; @@ -87,12 +91,24 @@ export class WorkspaceExport extends Component { <DialogTitle id="form-dialog-title" disableTypography> <Typography variant="h2">{t('downloadExport')}</Typography> </DialogTitle> - <ScrollIndicatedDialogContent> - {children} - <pre> - {this.exportedState()} - </pre> - </ScrollIndicatedDialogContent> + + <DialogContent> + <Accordion elevation={0}> + <AccordionSummary + classes={{ root: classes.accordionTitle }} + expandIcon={<ExpandMoreIcon />} + > + <Typography variant="h4">{t('viewWorkspaceConfiguration')}</Typography> + </AccordionSummary> + <AccordionDetails> + {children} + <pre> + {this.exportedState()} + </pre> + </AccordionDetails> + </Accordion> + </DialogContent> + <DialogActions> <Button onClick={this.handleClose}>{t('cancel')}</Button> <CopyToClipboard @@ -109,6 +125,7 @@ export class WorkspaceExport extends Component { WorkspaceExport.propTypes = { children: PropTypes.node, + classes: PropTypes.objectOf(PropTypes.string), container: PropTypes.object, // eslint-disable-line react/forbid-prop-types exportableState: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types handleClose: PropTypes.func.isRequired, @@ -118,6 +135,7 @@ WorkspaceExport.propTypes = { WorkspaceExport.defaultProps = { children: null, + classes: {}, container: null, open: false, t: key => key, diff --git a/src/containers/WorkspaceExport.js b/src/containers/WorkspaceExport.js index 069a52542815f19231609bdfe7e0f81997efbff7..e1ac982c10aa03c0cff9451dd1c3fbb63bac98ab 100644 --- a/src/containers/WorkspaceExport.js +++ b/src/containers/WorkspaceExport.js @@ -1,5 +1,6 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; +import { withStyles } from '@material-ui/core/styles'; import { withTranslation } from 'react-i18next'; import { withPlugins } from '../extend/withPlugins'; import { WorkspaceExport } from '../components/WorkspaceExport'; @@ -16,8 +17,18 @@ const mapStateToProps = state => ({ exportableState: getExportableState(state), }); +/** + * Styles for the withStyles HOC + */ +const styles = theme => ({ + accordionTitle: { + padding: 0, + }, +}); + const enhance = compose( withTranslation(), + withStyles(styles), connect(mapStateToProps, {}), withPlugins('WorkspaceExport'), ); diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index 383b98fb32aa0a031a13697491326c4062f03c71..72b645b8304fb522b267772b3e63f98ff0b4568d 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -139,6 +139,7 @@ "tryAgain": "Try again", "untitled": "[Untitled]", "view": "View", + "viewWorkspaceConfiguration": "View workspace configuration", "welcome": "Welcome to Mirador", "window": "Window: {{label}}", "windowMenu": "Window views & thumbnail display",