Skip to content
Snippets Groups Projects
Commit 4113e2df authored by Lutz Helm's avatar Lutz Helm
Browse files

Add workaround for #24 - switch to single view

parent d6b55e03
No related branches found
No related tags found
No related merge requests found
import React, { Component } 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 DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import Typography from '@material-ui/core/Typography';
import PropTypes from 'prop-types';
export class SingleCanvasDialog extends Component {
constructor(props) {
super(props);
this.confirm = this.confirm.bind(this);
}
confirm() {
this.props.switchToSingleCanvasView();
this.props.openCreateAnnotationCompanionWindow();
this.props.handleClose();
}
render() {
return (
<Dialog
onClose={this.props.hideDialog}
open={this.props.open}
>
<DialogTitle disableTypography>
<Typography variant="h2">
Switch view type to single view?
</Typography>
</DialogTitle>
<DialogContent>
<DialogContentText variant="body2" color="inherit">
Annotations can only be edited in single canvas view type. Switch view type to single view now?
</DialogContentText>
<DialogActions>
<Button onClick={this.confirm} variant="contained">
Switch and start annotating
</Button>
<Button onClick={this.props.handleClose} variant="contained">
Cancel
</Button>
</DialogActions>
</DialogContent>
</Dialog>
);
}
}
SingleCanvasDialog.propTypes = {
handleClose: PropTypes.func.isRequired,
open: PropTypes.bool,
openCreateAnnotationCompanionWindow: PropTypes.func.isRequired,
switchToSingleCanvasView: PropTypes.func.isRequired,
}
SingleCanvasDialog.defaultProps = {
open: false,
}
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import * as actions from 'mirador/dist/es/src/state/actions'; import * as actions from 'mirador/dist/es/src/state/actions';
import { getWindowViewType } from 'mirador/dist/es/src/state/selectors';
import AddBoxIcon from '@material-ui/icons/AddBox'; import AddBoxIcon from '@material-ui/icons/AddBox';
import { MiradorMenuButton } from 'mirador/dist/es/src/components/MiradorMenuButton'; import { MiradorMenuButton } from 'mirador/dist/es/src/components/MiradorMenuButton';
import { SingleCanvasDialog } from '../SingleCanvasDialog';
/** */ /** */
class MiradorAnnotation extends Component { class MiradorAnnotation extends Component {
/** */ /** */
constructor(props) { constructor(props) {
super(props); super(props);
this.state = {
singleCanvasDialogOpen: false,
};
this.openCreateAnnotationCompanionWindow = this.openCreateAnnotationCompanionWindow.bind(this); this.openCreateAnnotationCompanionWindow = this.openCreateAnnotationCompanionWindow.bind(this);
this.toggleSingleCanvasDialogOpen = this.toggleSingleCanvasDialogOpen.bind(this);
} }
/** */ /** */
...@@ -23,6 +30,12 @@ class MiradorAnnotation extends Component { ...@@ -23,6 +30,12 @@ class MiradorAnnotation extends Component {
}); });
} }
toggleSingleCanvasDialogOpen() {
this.setState({
singleCanvasDialogOpen: !this.state.singleCanvasDialogOpen,
});
}
/** */ /** */
render() { render() {
const { TargetComponent, targetProps } = this.props; const { TargetComponent, targetProps } = this.props;
...@@ -33,11 +46,21 @@ class MiradorAnnotation extends Component { ...@@ -33,11 +46,21 @@ class MiradorAnnotation extends Component {
/> />
<MiradorMenuButton <MiradorMenuButton
aria-label="Create new annotation" aria-label="Create new annotation"
onClick={this.openCreateAnnotationCompanionWindow} onClick={this.props.windowViewType === 'single' ? this.openCreateAnnotationCompanionWindow : this.toggleSingleCanvasDialogOpen}
size="small" size="small"
> >
<AddBoxIcon /> <AddBoxIcon />
</MiradorMenuButton> </MiradorMenuButton>
{
this.state.singleCanvasDialogOpen && (
<SingleCanvasDialog
open={this.state.singleCanvasDialogOpen}
handleClose={this.toggleSingleCanvasDialogOpen}
openCreateAnnotationCompanionWindow={this.openCreateAnnotationCompanionWindow}
switchToSingleCanvasView={this.props.switchToSingleCanvasView}
/>
)
}
</div> </div>
); );
} }
...@@ -57,11 +80,19 @@ const mapDispatchToProps = (dispatch, props) => ({ ...@@ -57,11 +80,19 @@ const mapDispatchToProps = (dispatch, props) => ({
addCompanionWindow: (content, additionalProps) => dispatch( addCompanionWindow: (content, additionalProps) => dispatch(
actions.addCompanionWindow(props.targetProps.windowId, { content, ...additionalProps }), actions.addCompanionWindow(props.targetProps.windowId, { content, ...additionalProps }),
), ),
switchToSingleCanvasView: () => dispatch(
actions.setWindowViewType(props.targetProps.windowId, 'single')
)
});
const mapStateToProps = (state, props) => ({
windowViewType: getWindowViewType(state, { windowId: props.targetProps.windowId }),
}); });
export default { export default {
component: MiradorAnnotation, component: MiradorAnnotation,
mapDispatchToProps, mapDispatchToProps,
mapStateToProps,
mode: 'wrap', mode: 'wrap',
target: 'AnnotationSettings', target: 'AnnotationSettings',
}; };
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment