From 3007b603ea390c294599a2d81c9f2a790ac56a58 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFs=20Poujade?= <lois.poujade@tetras-libre.fr>
Date: Tue, 10 Jan 2023 11:41:15 +0100
Subject: [PATCH] Better UI; use Redux selector
- time controls buttons where not visually "buttons"
- added tooltip on hover
- use a Redux selector to get annotations, don't parse them from the state
---
src/AnnotationCreation.js | 27 ++++++++++++++-----
.../annotationCreationCompanionWindow.js | 14 +++-------
2 files changed, 25 insertions(+), 16 deletions(-)
diff --git a/src/AnnotationCreation.js b/src/AnnotationCreation.js
index 49a04ec..98a0e90 100644
--- a/src/AnnotationCreation.js
+++ b/src/AnnotationCreation.js
@@ -442,27 +442,35 @@ class AnnotationCreation extends Component {
<Grid container>
{ mediaIsVideo && (
<>
- <Grid item xs={12} onClick={this.seekToTstart}>
- <IconButton size="small"><LastPage /></IconButton>
+ <Grid item xs={12}>
+ <ToggleButton title="Go to start time" size="small" onClick={this.seekToTstart} className={classes.timecontrolsbutton}>
+ <LastPage />
+ </ToggleButton>
<Typography variant="overline">
Start
</Typography>
</Grid>
<Grid item xs={12} className={classes.paper}>
- <IconButton onClick={this.setTstartNow}><Alarm /></IconButton>
+ <ToggleButton title="Set current time" size="small" onClick={this.setTstartNow} className={classes.timecontrolsbutton}>
+ <Alarm />
+ </ToggleButton>
<HMSInput seconds={tstart} onChange={this.updateTstart} />
</Grid>
- <Grid item xs={12} onClick={this.seekToTend}>
+ <Grid item xs={12}>
<Typography variant="overline">
- <IconButton size="small"><LastPage /></IconButton>
+ <ToggleButton title="Go to start time" size="small" onClick={this.seekToTend} className={classes.timecontrolsbutton}>
+ <LastPage />
+ </ToggleButton>
End
</Typography>
</Grid>
<Grid item xs={12} className={classes.paper}>
- <IconButton onClick={this.setTendNow}><Alarm /></IconButton>
+ <ToggleButton title="Set current time" size="small" onClick={this.setTendNow} className={classes.timecontrolsbutton}>
+ <Alarm />
+ </ToggleButton>
<HMSInput seconds={tend} onChange={this.updateTend} />
</Grid>
</>
@@ -551,6 +559,13 @@ const styles = (theme) => ({
paddingRight: theme.spacing(1),
paddingTop: theme.spacing(2),
},
+ timecontrolsbutton: {
+ height: '30px',
+ margin: 'auto',
+ marginLeft: '0',
+ marginRight: '5px',
+ width: '30px',
+ },
});
AnnotationCreation.propTypes = {
diff --git a/src/plugins/annotationCreationCompanionWindow.js b/src/plugins/annotationCreationCompanionWindow.js
index 5a1d537..afe5bed 100644
--- a/src/plugins/annotationCreationCompanionWindow.js
+++ b/src/plugins/annotationCreationCompanionWindow.js
@@ -2,6 +2,7 @@ import * as actions from 'mirador/dist/es/src/state/actions';
import { getCompanionWindow } from 'mirador/dist/es/src/state/selectors/companionWindows';
import { getWindowCurrentTime, getWindowPausedStatus } from 'mirador/dist/es/src/state/selectors/window';
import { getVisibleCanvases } from 'mirador/dist/es/src/state/selectors/canvases';
+import { getPresentAnnotationsOnSelectedCanvases } from 'mirador/dist/es/src/state/selectors/annotations';
import AnnotationCreation from '../AnnotationCreation';
/** */
@@ -23,16 +24,9 @@ function mapStateToProps(state, { id: companionWindowId, windowId }) {
const { annotationid } = cw;
const canvases = getVisibleCanvases(state, { windowId });
- let annotation = null;
- canvases.forEach((canvas) => {
- const annotationsOnCanvas = state.annotations[canvas.id];
- Object.values(annotationsOnCanvas || {}).forEach((value, i) => {
- if (value.json && value.json.items) {
- const maybeAnnot = value.json.items.find((anno) => anno.id === annotationid);
- if (maybeAnnot !== undefined) annotation = maybeAnnot;
- }
- });
- });
+ const annotation = getPresentAnnotationsOnSelectedCanvases(state, { windowId })
+ .flatMap((annoPage) => annoPage.json.items)
+ .find((annot) => annot.id === annotationid);
return {
annotation,
--
GitLab