Skip to content
Snippets Groups Projects
Commit e1a7f785 authored by Glenn Fischer's avatar Glenn Fischer
Browse files

#2114: add counter

parent b1571222
Branches
Tags
No related merge requests found
......@@ -39,6 +39,7 @@
"mosaic": "Mosaik",
"nextCanvas": "Nächstes Objekt",
"numItems": "{{number}} Elemente",
"of": "von",
"off": "Keine",
"openAnnotationCompanionWindow": "Annotationsfenster öffnen",
"openCanvasNavigationCompanionWindow": "Hilfsfenster für die Leinwandnavigation schließen",
......
......@@ -45,6 +45,7 @@
"moveCompanionWindowToRight": "Move to right",
"nextCanvas": "Next item",
"numItems": "{{number}} items",
"of": "of",
"off": "Off",
"openAnnotationCompanionWindow": "Open annotation companion window",
"openCanvasNavigationCompanionWindow": "Open canvas navigation companion window",
......@@ -69,7 +70,6 @@
"tryAgain": "Try again",
"untitled": "[Untitled]",
"view": "View",
"window": "Window: {{label}}",
"windowMenu": "Window menu",
"workspace": "Workspace",
"workspaceFullScreen": "Full Screen",
......
import React, { Component } from 'react';
import Typography from '@material-ui/core/Typography';
import PropTypes from 'prop-types';
import ns from '../config/css-ns';
/**
*
*/
export class ViewerInfo extends Component {
/** */
render() {
const {
canvasCount,
canvasIndex,
canvasLabel,
t,
} = this.props;
return (
<div className={ns('osd-info')}>
<Typography variant="caption" className={ns('canvas-label')}>
{`${canvasIndex + 1} ${t('of')} ${canvasCount}`}
{
// eslint-disable-next-line prefer-template
canvasLabel && '' + canvasLabel
}
</Typography>
</div>
);
}
}
ViewerInfo.defaultProps = {
canvasLabel: undefined,
t: () => {},
};
ViewerInfo.propTypes = {
canvasCount: PropTypes.number.isRequired,
canvasIndex: PropTypes.number.isRequired,
canvasLabel: PropTypes.string,
t: PropTypes.func,
};
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Typography from '@material-ui/core/Typography';
import ZoomControls from '../containers/ZoomControls';
import ViewerInfo from '../containers/ViewerInfo';
import ViewerNavigation from '../containers/ViewerNavigation';
import ns from '../config/css-ns';
......@@ -12,7 +12,7 @@ export class WindowCanvasNavigationControls extends Component {
/** */
render() {
const {
canvases, canvasLabel, visible, window,
canvases, visible, window,
} = this.props;
if (!visible) return (<></>);
......@@ -21,11 +21,7 @@ export class WindowCanvasNavigationControls extends Component {
<div className={ns('canvas-nav')}>
<ZoomControls windowId={window.id} />
<ViewerNavigation window={window} canvases={canvases} />
{
canvasLabel && (
<Typography variant="caption" className={ns('canvas-label')}>{canvasLabel}</Typography>
)
}
<ViewerInfo windowId={window.id} />
</div>
);
}
......@@ -35,11 +31,9 @@ export class WindowCanvasNavigationControls extends Component {
WindowCanvasNavigationControls.propTypes = {
canvases: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
window: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
canvasLabel: PropTypes.string,
visible: PropTypes.bool,
};
WindowCanvasNavigationControls.defaultProps = {
canvasLabel: undefined,
visible: true,
};
......@@ -10,6 +10,7 @@ export * from './NestedMenu';
export * from './OpenSeadragonViewer';
export * from './SanitizedHtml';
export * from './ThumbnailNavigation';
export * from './ViewerInfo';
export * from './ViewerNavigation';
export * from './Window';
export * from './WindowList';
......
import { compose } from 'redux';
import { connect } from 'react-redux';
import { withTranslation } from 'react-i18next';
import { ViewerInfo } from '../components/ViewerInfo';
import { getCanvasLabel, getWindowManifest, getManifestCanvases } from '../state/selectors';
/**
* mapStateToProps - to hook up connect
* @memberof Window
* @private
*/
const mapStateToProps = (state, props) => {
const { windowId } = props;
const manifest = getWindowManifest(state, windowId);
const canvases = getManifestCanvases(manifest);
const { canvasIndex } = state.windows[windowId];
return {
canvasCount: canvases.length,
canvasIndex,
canvasLabel: getCanvasLabel(canvases[canvasIndex], canvasIndex),
};
};
const enhance = compose(
withTranslation(),
connect(mapStateToProps, null),
// further HOC go here
);
export default enhance(ViewerInfo);
......@@ -111,10 +111,19 @@
top: 12px;
}
&-osd-navigation {
order: 1;
}
&-osd-info {
order: 2
}
&-canvas-nav {
display: flex;
justify-content: center;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
text-align: center;
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment