diff --git a/src/components/CanvasAnnotations.js b/src/components/CanvasAnnotations.js index 0fa2f787b2bfdb61f29bfdcecd4ee5fd6a9aba61..f32a6cc729fa956399843c4bb748638a775a2312 100644 --- a/src/components/CanvasAnnotations.js +++ b/src/components/CanvasAnnotations.js @@ -88,6 +88,8 @@ export class CanvasAnnotations extends Component { annotations = filterAnnotation(annotations, inputSearch); } + const annotationCount = annotations.length; + return ( <> <div className={classes.form}> @@ -163,6 +165,9 @@ export class CanvasAnnotations extends Component { </MenuItem> )} </MenuList> + <div className={classes.footerAnnotationPanel}> + <Typography component="p" variant="subtitle2">{t('showingNumAnnotations', { count: annotationCount, number: annotationCount })}</Typography> + </div> </> ); } diff --git a/src/components/WindowSideBarAnnotationsPanel.js b/src/components/WindowSideBarAnnotationsPanel.js index f5182e6443dcfc8430aba05f808200e6ac83f25b..177f0f23ed5b2d454dbb0647e932765fe4ffed78 100644 --- a/src/components/WindowSideBarAnnotationsPanel.js +++ b/src/components/WindowSideBarAnnotationsPanel.js @@ -34,10 +34,6 @@ export class WindowSideBarAnnotationsPanel extends Component { otherRef={this.containerRef} titleControls={<AnnotationSettings windowId={windowId} />} > - <div className={classes.section}> - <Typography component="p" variant="subtitle2">{t('showingNumAnnotations', { count: annotationCount, number: annotationCount })}</Typography> - </div> - {canvasIds.map((canvasId, index) => ( <CanvasAnnotations canvasId={canvasId} diff --git a/src/containers/CanvasAnnotations.js b/src/containers/CanvasAnnotations.js index d4b90c97631006b6bb0b2be252e5c9b08c937713..a3a07135c338ecf1b99f4ab75a73a9fcdaf6facb 100644 --- a/src/containers/CanvasAnnotations.js +++ b/src/containers/CanvasAnnotations.js @@ -73,8 +73,17 @@ const styles = theme => ({ position: 'absolute', right: 0, }, + footerAnnotationPanel: { + background: theme.palette.background.paper, + bottom: 0, + position: 'sticky', + }, form: { + background: theme.palette.background.paper, padding: theme.spacing(0, 1, 0, 1), + position: 'sticky', + top: 0, + zIndex: 10, }, grow: { flexGrow: 1,