Commit 4f99d6a4 authored by Viacheslav Pavlov's avatar Viacheslav Pavlov Committed by Matija Obreza
Browse files

Image display

parent 510dab22
......@@ -1536,6 +1536,25 @@
}
}
}
},
"public": {
"c": {
"imageDetailsDialog": {
"details": "Image details",
"userAndLicenseNotSpecified": "Creator and license not specified",
"creator": "Creator",
"license": "License",
"height": "Height",
"width": "Width",
"orientation": "Orientation",
"title": "Title",
"extension": "Extension",
"description": "Description",
"thumbnailPath": "Thumbnail path",
"contentType": "Content type",
"originalFilename": "Original filename"
}
}
}
}
,"requests": {
......
......@@ -13,6 +13,7 @@ import Grid from '@material-ui/core/Grid';
import withStyles from '@material-ui/core/styles/withStyles';
import Button from '@material-ui/core/Button';
import Authorize from 'ui/common/authorized/Authorize';
import ImageDetailsDialog from 'repository/ui/c/ImageDetailsDialog';
const style = (theme) => ({
root: {
......@@ -66,10 +67,17 @@ const CropImage = ({classes, crop}: { classes: any, crop: CropDetails}) => {
return (
<div className={ classes.media }>
{ hasCover &&
<img className={ classes.mediaImage } srcSet={ x } sizes={ sizes }
src={ `/proxy/uploads/d/_thumbs${image.thumbnailPath}/300x300.png` } alt={ crop.name } /> }
<span>
<img className={ classes.mediaImage } srcSet={ x } sizes={ sizes }
src={ `/proxy/uploads/d/_thumbs${image.thumbnailPath}/300x300.png` } alt={ crop.name } />
<ImageDetailsDialog image={ image }/>
</span>
}
{ !hasCover &&
<img className={ classes.mediaImage } src={ `images/crop-placeholder.jpg` } alt={ crop.name } />
<span>
<img className={ classes.mediaImage } src={ `images/crop-placeholder.jpg` } alt={ crop.name } />
<ImageDetailsDialog image={ image }/>
</span>
}
</div>
);
......
......@@ -55,5 +55,24 @@
}
}
}
},
"public": {
"c": {
"imageDetailsDialog": {
"details": "Image details",
"userAndLicenseNotSpecified": "Creator and license not specified",
"creator": "Creator",
"license": "License",
"height": "Height",
"width": "Width",
"orientation": "Orientation",
"title": "Title",
"extension": "Extension",
"description": "Description",
"thumbnailPath": "Thumbnail path",
"contentType": "Content type",
"originalFilename": "Original filename"
}
}
}
}
\ No newline at end of file
import * as React from 'react';
import { translate } from 'react-i18next';
import { withStyles } from '@material-ui/core/styles';
import RepositoryImage from 'model/repository/RepositoryImage';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogContent from '@material-ui/core/DialogContent';
import DialogTitle from '@material-ui/core/DialogTitle';
import { Properties, PropertiesItem } from 'ui/common/Properties';
/*tslint:disable*/
const styles = (theme) => ({
root: {
height: '100%',
},
createButton: {
position: 'absolute' as 'absolute',
right: 0,
bottom: 0,
fontSize: '10px',
padding: '4px',
minHeight: '30px',
background: '#e7e5df',
border: 'solid gray',
borderWidth: '1px 0 0 1px',
textTransform: 'initial' as 'initial',
'&:hover': {
background: '#e7e5df',
},
},
});
/*tslint:enable*/
interface IImageDetailsDialog extends React.ClassAttributes<any> {
image: RepositoryImage;
classes?: any;
t?: any;
}
class ImageDetailsDialog extends React.Component<IImageDetailsDialog, any> {
public state = {
open: false,
};
public render() {
const { classes, t, image } = this.props;
const buttonText = image && (image.license || image.creator) ? `${image.license || ''} ${image.creator || ''}` : t('repository.public.c.imageDetailsDialog.userAndLicenseNotSpecified');
return image ? (
<span className={ classes.root }>
<Button className={ classes.createButton } onClick={ this.show }>{ buttonText }</Button>
{ this.state.open &&
<Dialog open={ this.state.open } onClose={ this.hide } maxWidth="md" fullWidth onClick={ (e) => e.preventDefault() }>
<DialogTitle>{ t(`repository.public.c.imageDetailsDialog.details`) }</DialogTitle>
<DialogContent>
<Properties>
<PropertiesItem title={ t('repository.public.c.imageDetailsDialog.title') }>{ image.title || 'Not specified' }</PropertiesItem>
<PropertiesItem title={ t('repository.public.c.imageDetailsDialog.originalFilename') }>{ image.originalFilename || 'Not specified' }</PropertiesItem>
<PropertiesItem title={ t('repository.public.c.imageDetailsDialog.contentType') }>{ image.contentType || 'Not specified' }</PropertiesItem>
<PropertiesItem title={ t('repository.public.c.imageDetailsDialog.extension') }>{ image.extension || 'Not specified' }</PropertiesItem>
<PropertiesItem title={ t('repository.public.c.imageDetailsDialog.creator') }>{ image.creator || 'Not specified' }</PropertiesItem>
<PropertiesItem title={ t('repository.public.c.imageDetailsDialog.license') }>{ image.license || 'Not specified' }</PropertiesItem>
<PropertiesItem title={ t('repository.public.c.imageDetailsDialog.height') }>{ image.height || 'Not specified' }</PropertiesItem>
<PropertiesItem title={ t('repository.public.c.imageDetailsDialog.width') }>{ image.width || 'Not specified' }</PropertiesItem>
<PropertiesItem title={ t('repository.public.c.imageDetailsDialog.orientation') }>{ image.orientation || 'Not specified' }</PropertiesItem>
<PropertiesItem title={ t('repository.public.c.imageDetailsDialog.description') }>{ image.description || 'Not specified' }</PropertiesItem>
<PropertiesItem title={ t('repository.public.c.imageDetailsDialog.thumbnailPath') }>{ image.thumbnailPath || 'Not specified' }</PropertiesItem>
</Properties>
</DialogContent>
</Dialog>
}
</span>
) : null;
}
private show = (e) => {
e.preventDefault();
this.setState(
(state) => ({ ...state, open: true }));
}
private hide = (e) => {
e.preventDefault();
this.setState({ open: false });
}
}
export default translate()(withStyles(styles)(ImageDetailsDialog));
......@@ -9,6 +9,7 @@ import Card, {CardHeader, CardContent, CardMedia} from 'ui/common/Card';
// import PrettyDate from 'ui/common/time/PrettyDate';
import Grid from '@material-ui/core/Grid';
import withStyles from '@material-ui/core/styles/withStyles';
import ImageDetailsDialog from './ImageDetailsDialog';
const style = (theme) => ({
root: {
......@@ -20,6 +21,9 @@ const style = (theme) => ({
media: {
height: 200,
},
mediaContent: {
position: 'relative' as 'relative',
},
});
const ImageGalleryView = ({imageGallery, classes, className, compact = false, edit = false, ...other}: { imageGallery: ImageGallery, className?: string, classes?: any, compact?: boolean, edit?: boolean }) => {
......@@ -44,7 +48,10 @@ const ImageGalleryView = ({imageGallery, classes, className, compact = false, ed
{ imageGallery.images.map((image) => (
<Grid key={ image.uuid } item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 } xl={ 2 }>
<Card className={ classes.root }>
<CardMedia className={ classes.media } image={ `/proxy/uploads/d/_thumbs${image.thumbnailPath}/200x200.png` } title={ image.title || image.orientation } />
<span className={ classes.mediaContent }>
<CardMedia className={ classes.media } image={ `/proxy/uploads/d/_thumbs${image.thumbnailPath}/200x200.png` } title={ image.title || image.orientation } />
<ImageDetailsDialog image={ image }/>
</span>
<CardContent>
{ image.title || image.originalFilename }
</CardContent>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment