@ -210,6 +210,36 @@ class MediaLibrary extends React.Component {
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Downloads the selected file.
|
||||
*/
|
||||
handleDownload = () => {
|
||||
const { selectedFile } = this.state;
|
||||
const { displayURLs } = this.props;
|
||||
const url = displayURLs.getIn([selectedFile.id, 'url']) || selectedFile.url;
|
||||
if (!url) {
|
||||
return;
|
||||
}
|
||||
|
||||
const filename = selectedFile.name;
|
||||
|
||||
const element = document.createElement('a');
|
||||
element.setAttribute('href', url);
|
||||
element.setAttribute('download', filename);
|
||||
|
||||
element.style.display = 'none';
|
||||
document.body.appendChild(element);
|
||||
|
||||
element.click();
|
||||
|
||||
document.body.removeChild(element);
|
||||
this.setState({ selectedFile: {} });
|
||||
};
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
|
||||
handleLoadMore = () => {
|
||||
const { loadMedia, dynamicSearchQuery, page, privateUpload } = this.props;
|
||||
loadMedia({ query: dynamicSearchQuery, page: page + 1, privateUpload });
|
||||
@ -302,6 +332,7 @@ class MediaLibrary extends React.Component {
|
||||
handlePersist={this.handlePersist}
|
||||
handleDelete={this.handleDelete}
|
||||
handleInsert={this.handleInsert}
|
||||
handleDownload={this.handleDownload}
|
||||
setScrollContainerRef={ref => (this.scrollContainerRef = ref)}
|
||||
handleAssetClick={this.handleAssetClick}
|
||||
handleLoadMore={this.handleLoadMore}
|
||||
|
@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
|
||||
import { css } from '@emotion/core';
|
||||
import styled from '@emotion/styled';
|
||||
import { FileUploadButton } from 'UI';
|
||||
import { buttons, shadows, zIndex } from 'netlify-cms-ui-default';
|
||||
import { buttons, colors, colorsRaw, shadows, zIndex } from 'netlify-cms-ui-default';
|
||||
|
||||
const styles = {
|
||||
button: css`
|
||||
@ -61,6 +61,24 @@ const InsertButton = styled.button`
|
||||
${buttons.green};
|
||||
`;
|
||||
|
||||
const DownloadButton = styled.button`
|
||||
${styles.button};
|
||||
background-color: ${colors.button};
|
||||
color: ${colors.buttonText};
|
||||
|
||||
${props =>
|
||||
props.focused === true &&
|
||||
css`
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: ${colorsRaw.white};
|
||||
background-color: #555a65;
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
const UpperActionsContainer = styled.div``;
|
||||
|
||||
const LowerActionsContainer = styled.div`
|
||||
margin-top: 30px;
|
||||
`;
|
||||
@ -69,22 +87,30 @@ const MediaLibraryActions = ({
|
||||
uploadButtonLabel,
|
||||
deleteButtonLabel,
|
||||
insertButtonLabel,
|
||||
downloadButtonLabel,
|
||||
uploadEnabled,
|
||||
deleteEnabled,
|
||||
insertEnabled,
|
||||
downloadEnabled,
|
||||
insertVisible,
|
||||
imagesOnly,
|
||||
onPersist,
|
||||
onDelete,
|
||||
onInsert,
|
||||
onDownload,
|
||||
}) => (
|
||||
<ActionsContainer>
|
||||
<StyledUploadButton
|
||||
label={uploadButtonLabel}
|
||||
imagesOnly={imagesOnly}
|
||||
onChange={onPersist}
|
||||
disabled={!uploadEnabled}
|
||||
/>
|
||||
<UpperActionsContainer>
|
||||
<DownloadButton onClick={onDownload} disabled={!downloadEnabled} focused={downloadEnabled}>
|
||||
{downloadButtonLabel}
|
||||
</DownloadButton>
|
||||
<StyledUploadButton
|
||||
label={uploadButtonLabel}
|
||||
imagesOnly={imagesOnly}
|
||||
onChange={onPersist}
|
||||
disabled={!uploadEnabled}
|
||||
/>
|
||||
</UpperActionsContainer>
|
||||
<LowerActionsContainer>
|
||||
<DeleteButton onClick={onDelete} disabled={!deleteEnabled}>
|
||||
{deleteButtonLabel}
|
||||
@ -102,14 +128,17 @@ MediaLibraryActions.propTypes = {
|
||||
uploadButtonLabel: PropTypes.string.isRequired,
|
||||
deleteButtonLabel: PropTypes.string.isRequired,
|
||||
insertButtonLabel: PropTypes.string.isRequired,
|
||||
downloadButtonLabel: PropTypes.string.isRequired,
|
||||
uploadEnabled: PropTypes.bool,
|
||||
deleteEnabled: PropTypes.bool,
|
||||
insertEnabled: PropTypes.bool,
|
||||
insertVisible: PropTypes.bool,
|
||||
downloadEnabled: PropTypes.bool,
|
||||
imagesOnly: PropTypes.bool,
|
||||
onPersist: PropTypes.func.isRequired,
|
||||
onDelete: PropTypes.func.isRequired,
|
||||
onInsert: PropTypes.func.isRequired,
|
||||
onDownload: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default MediaLibraryActions;
|
||||
|
@ -92,6 +92,7 @@ const MediaLibraryModal = ({
|
||||
handlePersist,
|
||||
handleDelete,
|
||||
handleInsert,
|
||||
handleDownload,
|
||||
setScrollContainerRef,
|
||||
handleAssetClick,
|
||||
handleLoadMore,
|
||||
@ -141,22 +142,25 @@ const MediaLibraryModal = ({
|
||||
uploadButtonLabel={
|
||||
isPersisting
|
||||
? t('mediaLibrary.mediaLibraryModal.uploading')
|
||||
: t('mediaLibrary.mediaLibraryModal.uploadNew')
|
||||
: t('mediaLibrary.mediaLibraryModal.upload')
|
||||
}
|
||||
deleteButtonLabel={
|
||||
isDeleting
|
||||
? t('mediaLibrary.mediaLibraryModal.deleting')
|
||||
: t('mediaLibrary.mediaLibraryModal.deleteSelected')
|
||||
}
|
||||
downloadButtonLabel={t('mediaLibrary.mediaLibraryModal.download')}
|
||||
insertButtonLabel={t('mediaLibrary.mediaLibraryModal.chooseSelected')}
|
||||
uploadEnabled={!shouldShowButtonLoader}
|
||||
deleteEnabled={!shouldShowButtonLoader && hasSelection}
|
||||
insertEnabled={hasSelection}
|
||||
downloadEnabled={hasSelection}
|
||||
insertVisible={canInsert}
|
||||
imagesOnly={forImage}
|
||||
onPersist={handlePersist}
|
||||
onDelete={handleDelete}
|
||||
onInsert={handleInsert}
|
||||
onDownload={handleDownload}
|
||||
/>
|
||||
</LibraryTop>
|
||||
{!shouldShowEmptyMessage ? null : (
|
||||
|
Reference in New Issue
Block a user