diff --git a/src/components/ManifestListItem.js b/src/components/ManifestListItem.js index 022f2943924121f6d788435db6d99b59e5dec294..1dc9d800e6210ea6c66968cb7da13a0dc6f7c87f 100644 --- a/src/components/ManifestListItem.js +++ b/src/components/ManifestListItem.js @@ -41,6 +41,7 @@ export class ManifestListItem extends React.Component { ready, title, thumbnail, + manifestLogo, addWindow, handleClose, size, @@ -119,7 +120,16 @@ export class ManifestListItem extends React.Component { </Grid> <Grid item xs={4} sm={2}> - <WindowIcon className={ns('manifest-list-item-logo')} manifestId={manifestId} /> + { + <ReactPlaceholder ready={!!manifestLogo} type="rect" style={{ width: 60, height: 60 }}> + <img + src={manifestLogo} + alt="" + role="presentation" + className={classes.logo} + /> + </ReactPlaceholder> + } </Grid> </Grid> </ReactPlaceholder> @@ -136,6 +146,7 @@ ManifestListItem.propTypes = { title: PropTypes.string, thumbnail: PropTypes.string, size: PropTypes.number, + manifestLogo: PropTypes.string, classes: PropTypes.object, // eslint-disable-line react/forbid-prop-types provider: PropTypes.string, t: PropTypes.func, @@ -155,4 +166,5 @@ ManifestListItem.defaultProps = { t: key => key, error: null, isFetching: false, + manifestLogo: null, }; diff --git a/src/containers/ManifestListItem.js b/src/containers/ManifestListItem.js index 173e0ee92b2f401505c0d52079e7d63a342cec90..7a195970335e17feb9981e46d61cecd9a7425003 100644 --- a/src/containers/ManifestListItem.js +++ b/src/containers/ManifestListItem.js @@ -3,7 +3,7 @@ import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; import { withStyles } from '@material-ui/core'; import { - getManifestTitle, getManifestThumbnail, getManifestCanvases, getManifestProvider, + getManifestTitle, getManifestThumbnail, getManifestCanvases, getManifestLogo, getManifestProvider, } from '../state/selectors'; import * as actions from '../state/actions'; import { ManifestListItem } from '../components/ManifestListItem'; @@ -20,6 +20,7 @@ const mapStateToProps = (state, { manifestId }) => { thumbnail: getManifestThumbnail(manifest), provider: getManifestProvider(manifest), size: getManifestCanvases(manifest).length, + manifestLogo: getManifestLogo(state.manifests[manifestId]), }; }; @@ -43,6 +44,10 @@ const styles = theme => ({ textTransform: 'initial', textAlign: 'left', }, + logo: { + height: '2.5rem', + paddingRight: 8, + }, }); const enhance = compose(