gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

enhancement(media library): add visual placeholder for non-image files (#2089)

Browse Source
This commit is contained in:
Dennis Padiernos 2019-02-13 08:27:32 -06:00 committed by Shawn Erquhart
parent 8dd9cc01b5
commit d9043b4a66
2 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryCard.js
View File

@ -26,7 +26,14 @@ const CardImage = styled.img`
border-radius: 2px 2px 0 0; border-radius: 2px 2px 0 0;
`; `;
const CardImagePlaceholder = CardImage.withComponent(`div`); const CardFileIcon = styled.div`
width: 100%;
height: 160px;
object-fit: cover;
border-radius: 2px 2px 0 0;
padding: 1em;
font-size: 3em;
`;
const CardText = styled.p` const CardText = styled.p`
color: ${colors.text}; color: ${colors.text};
@ -36,7 +43,16 @@ const CardText = styled.p`
line-height: 1.3 !important; line-height: 1.3 !important;
`; `;
const MediaLibraryCard = ({ isSelected, displayURL, text, onClick, width, margin, isPrivate }) => ( const MediaLibraryCard = ({
isSelected,
displayURL,
text,
onClick,
width,
margin,
isPrivate,
type,
}) => (
<Card <Card
isSelected={isSelected} isSelected={isSelected}
onClick={onClick} onClick={onClick}
@ -45,7 +61,7 @@ const MediaLibraryCard = ({ isSelected, displayURL, text, onClick, width, margin
tabIndex="-1" tabIndex="-1"
isPrivate={isPrivate} isPrivate={isPrivate}
> >
<div>{displayURL ? <CardImage src={displayURL} /> : <CardImagePlaceholder />}</div> <div>{displayURL ? <CardImage src={displayURL} /> : <CardFileIcon>{type}</CardFileIcon>}</div>
<CardText>{text}</CardText> <CardText>{text}</CardText>
</Card> </Card>
); );
@ -58,6 +74,7 @@ MediaLibraryCard.propTypes = {
width: PropTypes.string.isRequired, width: PropTypes.string.isRequired,
margin: PropTypes.string.isRequired, margin: PropTypes.string.isRequired,
isPrivate: PropTypes.bool, isPrivate: PropTypes.bool,
type: PropTypes.string,
}; };
export default MediaLibraryCard; export default MediaLibraryCard;

1
packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryCardGrid.js
View File

@ -47,6 +47,7 @@ const MediaLibraryCardGrid = ({
margin={cardMargin} margin={cardMargin}
isPrivate={isPrivate} isPrivate={isPrivate}
displayURL={file.isViewableImage && getDisplayURL(file)} displayURL={file.isViewableImage && getDisplayURL(file)}
type={file.type}
/> />
))} ))}
{!canLoadMore ? null : <Waypoint onEnter={onLoadMore} />} {!canLoadMore ? null : <Waypoint onEnter={onLoadMore} />}