From cf252605ad8fee6f3d307302dc50759813ee765c Mon Sep 17 00:00:00 2001 From: Kunal Kundu <51631122+tinfoil-knight@users.noreply.github.com> Date: Mon, 20 Apr 2020 15:07:47 +0530 Subject: [PATCH] feat: add-download-button closes #3429 (#3609) --- .../components/MediaLibrary/MediaLibrary.js | 31 +++++++++++++ .../MediaLibrary/MediaLibraryActions.js | 43 ++++++++++++++++--- .../MediaLibrary/MediaLibraryModal.js | 6 ++- packages/netlify-cms-locales/src/ca/index.js | 2 +- packages/netlify-cms-locales/src/cs/index.js | 2 +- packages/netlify-cms-locales/src/de/index.js | 2 +- packages/netlify-cms-locales/src/en/index.js | 3 +- packages/netlify-cms-locales/src/es/index.js | 2 +- packages/netlify-cms-locales/src/fr/index.js | 2 +- packages/netlify-cms-locales/src/gr/index.js | 2 +- packages/netlify-cms-locales/src/hu/index.js | 2 +- packages/netlify-cms-locales/src/it/index.js | 2 +- packages/netlify-cms-locales/src/ja/index.js | 2 +- packages/netlify-cms-locales/src/nl/index.js | 2 +- packages/netlify-cms-locales/src/pl/index.js | 2 +- packages/netlify-cms-locales/src/pt/index.js | 2 +- packages/netlify-cms-locales/src/ru/index.js | 2 +- packages/netlify-cms-locales/src/tr/index.js | 2 +- packages/netlify-cms-locales/src/uk/index.js | 2 +- .../netlify-cms-locales/src/zh_Hant/index.js | 2 +- 20 files changed, 90 insertions(+), 25 deletions(-) diff --git a/packages/netlify-cms-core/src/components/MediaLibrary/MediaLibrary.js b/packages/netlify-cms-core/src/components/MediaLibrary/MediaLibrary.js index 497a6cd5..dc8f0ced 100644 --- a/packages/netlify-cms-core/src/components/MediaLibrary/MediaLibrary.js +++ b/packages/netlify-cms-core/src/components/MediaLibrary/MediaLibrary.js @@ -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} diff --git a/packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryActions.js b/packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryActions.js index 7e05776a..4140ee83 100644 --- a/packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryActions.js +++ b/packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryActions.js @@ -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, }) => ( - + + + {downloadButtonLabel} + + + {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; diff --git a/packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryModal.js b/packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryModal.js index fd1d62f1..f3d88af4 100644 --- a/packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryModal.js +++ b/packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryModal.js @@ -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} /> {!shouldShowEmptyMessage ? null : ( diff --git a/packages/netlify-cms-locales/src/ca/index.js b/packages/netlify-cms-locales/src/ca/index.js index 9402d0b8..4bb247f3 100644 --- a/packages/netlify-cms-locales/src/ca/index.js +++ b/packages/netlify-cms-locales/src/ca/index.js @@ -164,7 +164,7 @@ const ca = { mediaAssets: 'Arxius multimedia', search: 'Buscar...', uploading: 'Penjant...', - uploadNew: 'Penjar de nuevo', + upload: 'Penjar de nuevo', deleting: 'Eliminant...', deleteSelected: 'Eliminar selecció', chooseSelected: 'Confirmar selecció', diff --git a/packages/netlify-cms-locales/src/cs/index.js b/packages/netlify-cms-locales/src/cs/index.js index e113d5be..f086ddcf 100644 --- a/packages/netlify-cms-locales/src/cs/index.js +++ b/packages/netlify-cms-locales/src/cs/index.js @@ -153,7 +153,7 @@ const cs = { mediaAssets: 'Média', search: 'Hledat…', uploading: 'Nahrávání…', - uploadNew: 'Nahrát nový', + upload: 'Nahrát nový', deleting: 'Vymazávání…', deleteSelected: 'Smazat označené', chooseSelected: 'Vybrat označené', diff --git a/packages/netlify-cms-locales/src/de/index.js b/packages/netlify-cms-locales/src/de/index.js index bfa12fcf..d79ec61e 100644 --- a/packages/netlify-cms-locales/src/de/index.js +++ b/packages/netlify-cms-locales/src/de/index.js @@ -161,7 +161,7 @@ const de = { mediaAssets: 'Medien', search: 'Suchen...', uploading: 'Hochladen...', - uploadNew: 'Hochladen', + upload: 'Hochladen', deleting: 'Löschen...', deleteSelected: 'Ausgewähltes Element löschen', chooseSelected: 'Ausgewähltes Element verwenden', diff --git a/packages/netlify-cms-locales/src/en/index.js b/packages/netlify-cms-locales/src/en/index.js index ef4c48d4..42f02b1a 100644 --- a/packages/netlify-cms-locales/src/en/index.js +++ b/packages/netlify-cms-locales/src/en/index.js @@ -176,7 +176,8 @@ const en = { mediaAssets: 'Media assets', search: 'Search...', uploading: 'Uploading...', - uploadNew: 'Upload new', + upload: 'Upload', + download: 'Download', deleting: 'Deleting...', deleteSelected: 'Delete selected', chooseSelected: 'Choose selected', diff --git a/packages/netlify-cms-locales/src/es/index.js b/packages/netlify-cms-locales/src/es/index.js index cef24ad2..fe1f6c03 100644 --- a/packages/netlify-cms-locales/src/es/index.js +++ b/packages/netlify-cms-locales/src/es/index.js @@ -180,7 +180,7 @@ const es = { mediaAssets: 'Archivos multimedia', search: 'Buscar...', uploading: 'Subiendo...', - uploadNew: 'Subir nuevo', + upload: 'Subir nuevo', deleting: 'Eliminando...', deleteSelected: 'Eliminar selección', chooseSelected: 'Confirmar selección', diff --git a/packages/netlify-cms-locales/src/fr/index.js b/packages/netlify-cms-locales/src/fr/index.js index 5da3b4cd..ffea1af6 100644 --- a/packages/netlify-cms-locales/src/fr/index.js +++ b/packages/netlify-cms-locales/src/fr/index.js @@ -135,7 +135,7 @@ const fr = { mediaAssets: 'Ressources', search: 'Recherche...', uploading: 'Téléversement...', - uploadNew: 'Téléverser une nouvelle ressource', + upload: 'Téléverser une nouvelle ressource', deleting: 'Suppression...', deleteSelected: 'Supprimer les éléments sélectionnés', chooseSelected: 'Choisir les éléments sélectionnés', diff --git a/packages/netlify-cms-locales/src/gr/index.js b/packages/netlify-cms-locales/src/gr/index.js index 560dad29..e0c1d384 100644 --- a/packages/netlify-cms-locales/src/gr/index.js +++ b/packages/netlify-cms-locales/src/gr/index.js @@ -159,7 +159,7 @@ const gr = { mediaAssets: 'Αρχεία πολυμέσων', search: 'Αναζήτηση...', uploading: 'Φόρτωμα...', - uploadNew: 'Ανεβάστε νέα', + upload: 'Ανεβάστε νέα', deleting: 'Διαγραφή...', deleteSelected: 'Διαγραφή επιλεγμένου', chooseSelected: 'Επιλέξτε επιλεγμένο', diff --git a/packages/netlify-cms-locales/src/hu/index.js b/packages/netlify-cms-locales/src/hu/index.js index b7c91335..4286cb8c 100644 --- a/packages/netlify-cms-locales/src/hu/index.js +++ b/packages/netlify-cms-locales/src/hu/index.js @@ -141,7 +141,7 @@ const hu = { mediaAssets: 'Média tartalmak', search: 'Keresés...', uploading: 'Feltöltés...', - uploadNew: 'Új feltöltés', + upload: 'Új feltöltés', deleting: 'Törlés...', deleteSelected: 'Kijelöltek törlése', chooseSelected: 'Kijelöl', diff --git a/packages/netlify-cms-locales/src/it/index.js b/packages/netlify-cms-locales/src/it/index.js index 8def31a8..ecabba1e 100644 --- a/packages/netlify-cms-locales/src/it/index.js +++ b/packages/netlify-cms-locales/src/it/index.js @@ -156,7 +156,7 @@ const it = { mediaAssets: 'Media assets', search: 'Cerca...', uploading: 'Uploading...', - uploadNew: 'Upload new', + upload: 'Upload', deleting: 'Deleting...', deleteSelected: 'Cancella selezionato', chooseSelected: 'Prendi selezionato', diff --git a/packages/netlify-cms-locales/src/ja/index.js b/packages/netlify-cms-locales/src/ja/index.js index 65eed064..aa46a0fb 100644 --- a/packages/netlify-cms-locales/src/ja/index.js +++ b/packages/netlify-cms-locales/src/ja/index.js @@ -157,7 +157,7 @@ const ja = { mediaAssets: 'データ', search: '検索', uploading: 'アップロード中...', - uploadNew: 'アップロードする', + upload: 'アップロードする', deleting: '削除中...', deleteSelected: '削除する', chooseSelected: '選択する', diff --git a/packages/netlify-cms-locales/src/nl/index.js b/packages/netlify-cms-locales/src/nl/index.js index a18327e8..7bb34b5f 100644 --- a/packages/netlify-cms-locales/src/nl/index.js +++ b/packages/netlify-cms-locales/src/nl/index.js @@ -164,7 +164,7 @@ const nl = { mediaAssets: 'Media', search: 'Zoeken...', uploading: 'Uploaden...', - uploadNew: 'Nieuwe uploaden', + upload: 'Nieuwe uploaden', deleting: 'Verwijderen...', deleteSelected: 'Verwijder selectie', chooseSelected: 'Gebruik selectie', diff --git a/packages/netlify-cms-locales/src/pl/index.js b/packages/netlify-cms-locales/src/pl/index.js index 6b779390..1166ff80 100644 --- a/packages/netlify-cms-locales/src/pl/index.js +++ b/packages/netlify-cms-locales/src/pl/index.js @@ -174,7 +174,7 @@ const pl = { mediaAssets: 'Zasoby multimedialne', search: 'Szukaj...', uploading: 'Przesyłanie...', - uploadNew: 'Prześlij nowe', + upload: 'Prześlij nowe', deleting: 'Usuwanie...', deleteSelected: 'Usuń zaznaczone', chooseSelected: 'Wybierz zaznaczone', diff --git a/packages/netlify-cms-locales/src/pt/index.js b/packages/netlify-cms-locales/src/pt/index.js index 2af4c7b1..54674364 100644 --- a/packages/netlify-cms-locales/src/pt/index.js +++ b/packages/netlify-cms-locales/src/pt/index.js @@ -140,7 +140,7 @@ const pt = { mediaAssets: 'Recursos de mídia', search: 'Pesquisar...', uploading: 'Enviando...', - uploadNew: 'Enviar novo', + upload: 'Enviar novo', deleting: 'Deletando...', deleteSelected: 'Excluir selecionado', chooseSelected: 'Escolher selecionado', diff --git a/packages/netlify-cms-locales/src/ru/index.js b/packages/netlify-cms-locales/src/ru/index.js index 2b065962..c7cdf2d6 100644 --- a/packages/netlify-cms-locales/src/ru/index.js +++ b/packages/netlify-cms-locales/src/ru/index.js @@ -139,7 +139,7 @@ const ru = { mediaAssets: 'Медиаресурсы', search: 'Идёт поиск…', uploading: 'Загрузка…', - uploadNew: 'Загрузить новый', + upload: 'Загрузить новый', deleting: 'Удаление…', deleteSelected: 'Удалить помеченные', chooseSelected: 'Выбрать помеченные', diff --git a/packages/netlify-cms-locales/src/tr/index.js b/packages/netlify-cms-locales/src/tr/index.js index 110b77b1..e79c9e9f 100644 --- a/packages/netlify-cms-locales/src/tr/index.js +++ b/packages/netlify-cms-locales/src/tr/index.js @@ -162,7 +162,7 @@ const tr = { mediaAssets: 'Medya dosyaları', search: 'Ara...', uploading: 'Yükleniyor...', - uploadNew: 'Yeni yükle', + upload: 'Yeni yükle', deleting: 'Siliniyor...', deleteSelected: 'Silme seçildi', chooseSelected: 'Seç', diff --git a/packages/netlify-cms-locales/src/uk/index.js b/packages/netlify-cms-locales/src/uk/index.js index e3b85bb8..c1fafa52 100644 --- a/packages/netlify-cms-locales/src/uk/index.js +++ b/packages/netlify-cms-locales/src/uk/index.js @@ -135,7 +135,7 @@ const uk = { mediaAssets: 'Медіа матеріали', search: 'Пошук...', uploading: 'Завантаження...', - uploadNew: 'Завантажити', + upload: 'Завантажити', deleting: 'Видалення...', deleteSelected: 'Видалити обране', chooseSelected: 'Додати обране', diff --git a/packages/netlify-cms-locales/src/zh_Hant/index.js b/packages/netlify-cms-locales/src/zh_Hant/index.js index 58b81607..d69f4aa6 100644 --- a/packages/netlify-cms-locales/src/zh_Hant/index.js +++ b/packages/netlify-cms-locales/src/zh_Hant/index.js @@ -152,7 +152,7 @@ const zh_Hant = { mediaAssets: '媒體資產', search: '搜尋中...', uploading: '上傳中...', - uploadNew: '上傳新內容', + upload: '上傳新內容', deleting: '刪除中...', deleteSelected: '刪除已選擇的項目', chooseSelected: '選擇已選擇的項目',