diff --git a/packages/strapi-plugin-upload/admin/src/components/CardControl/Wrapper.js b/packages/strapi-plugin-upload/admin/src/components/CardControl/Wrapper.js
new file mode 100644
index 0000000000..ad8c739a59
--- /dev/null
+++ b/packages/strapi-plugin-upload/admin/src/components/CardControl/Wrapper.js
@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+ display: flex;
+ width: 24px;
+ height: 24px;
+ background-color: #ffffff;
+ border: 1px solid #e3e9f3;
+ border-radius: 2px;
+ cursor: pointer;
+ > svg {
+ margin: auto;
+ }
+`;
+
+export default Wrapper;
diff --git a/packages/strapi-plugin-upload/admin/src/components/CardControl/index.js b/packages/strapi-plugin-upload/admin/src/components/CardControl/index.js
new file mode 100644
index 0000000000..0131c33a76
--- /dev/null
+++ b/packages/strapi-plugin-upload/admin/src/components/CardControl/index.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Pencil } from '@buffetjs/icons';
+import Wrapper from './Wrapper';
+
+const CardControl = () => {
+ return (
+
+
+
+ );
+};
+
+export default CardControl;
diff --git a/packages/strapi-plugin-upload/admin/src/components/CardControlsWrapper/index.js b/packages/strapi-plugin-upload/admin/src/components/CardControlsWrapper/index.js
new file mode 100644
index 0000000000..ab5c578269
--- /dev/null
+++ b/packages/strapi-plugin-upload/admin/src/components/CardControlsWrapper/index.js
@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+const CardControlsWrapper = styled.div`
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ display: flex;
+`;
+
+export default CardControlsWrapper;
diff --git a/packages/strapi-plugin-upload/admin/src/components/CardImgWrapper/index.js b/packages/strapi-plugin-upload/admin/src/components/CardImgWrapper/index.js
index cda86c0a30..aaec9294e0 100644
--- a/packages/strapi-plugin-upload/admin/src/components/CardImgWrapper/index.js
+++ b/packages/strapi-plugin-upload/admin/src/components/CardImgWrapper/index.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
const CardImgWrapper = styled.div`
position: relative;
height: ${({ isSmall }) => (isSmall ? '127px' : '156px')};
- min-width: ${({ isSmall }) => (isSmall ? '200px' : '245px')};
+ min-width: ${({ isSmall }) => (isSmall ? '100%' : '245px')};
border-radius: 2px;
background: ${({ withOverlay }) => (withOverlay ? '#F6F6F6' : '#333740')};
@@ -18,6 +18,16 @@ const CardImgWrapper = styled.div`
return '';
}}
+
+ .card-control-wrapper {
+ display: none;
+ }
+
+ &:hover {
+ .card-control-wrapper {
+ display: block;
+ }
+ }
`;
CardImgWrapper.defaultProps = {
diff --git a/packages/strapi-plugin-upload/admin/src/components/UploadList/Container.js b/packages/strapi-plugin-upload/admin/src/components/UploadList/Container.js
new file mode 100644
index 0000000000..ceed033373
--- /dev/null
+++ b/packages/strapi-plugin-upload/admin/src/components/UploadList/Container.js
@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+import ContainerFluid from '../ContainerFluid';
+
+const Container = styled(ContainerFluid)`
+ margin-bottom: 4px;
+ padding-top: 14px;
+ max-height: 350px;
+ overflow: auto;
+ overflow-x: hidden;
+`;
+
+export default Container;
diff --git a/packages/strapi-plugin-upload/admin/src/components/UploadList/RowItem.js b/packages/strapi-plugin-upload/admin/src/components/UploadList/RowItem.js
index 5cd8565c71..2951c33a7b 100644
--- a/packages/strapi-plugin-upload/admin/src/components/UploadList/RowItem.js
+++ b/packages/strapi-plugin-upload/admin/src/components/UploadList/RowItem.js
@@ -1,5 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
+import CardControl from '../CardControl';
+import CardControlsWrapper from '../CardControlsWrapper';
import CardImgWrapper from '../CardImgWrapper';
import InfiniteLoadingIndicator from '../InfiniteLoadingIndicator';
@@ -20,6 +22,11 @@ const RowItem = ({
{isUploading && }
+ {!isUploading && (
+
+
+
+ )}
{errorMessage || file.name}
diff --git a/packages/strapi-plugin-upload/admin/src/components/UploadList/index.js b/packages/strapi-plugin-upload/admin/src/components/UploadList/index.js
index b855a446d7..bccd4ad37b 100644
--- a/packages/strapi-plugin-upload/admin/src/components/UploadList/index.js
+++ b/packages/strapi-plugin-upload/admin/src/components/UploadList/index.js
@@ -4,13 +4,12 @@ import { FormattedMessage } from 'react-intl';
import { Button } from '@buffetjs/core';
import createMatrix from '../../utils/createMatrix';
import getTrad from '../../utils/getTrad';
-import ContainerFluid from '../ContainerFluid';
import ModalSection from '../ModalSection';
import Text from '../Text';
+import Container from './Container';
import ButtonWrapper from './ButtonWrapper';
import TextWrapper from './TextWrapper';
import RowItem from './RowItem';
-import ListWrapper from './ListWrapper';
const UploadList = ({
filesToUpload,
@@ -56,23 +55,21 @@ const UploadList = ({
-
-
- {matrix.map(({ key, rowContent }) => {
- return (
-
- {rowContent.map(data => (
-
- ))}
-
- );
- })}
-
-
+
+ {matrix.map(({ key, rowContent }) => {
+ return (
+
+ {rowContent.map(data => (
+
+ ))}
+
+ );
+ })}
+
>
);
diff --git a/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/index.js b/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/index.js
index 60e279898d..af8f9e7683 100644
--- a/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/index.js
+++ b/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/index.js
@@ -20,7 +20,7 @@ const ModalStepper = ({ isOpen, onToggle }) => {
const { formatMessage } = useGlobalContext();
const [reducerState, dispatch] = useReducer(reducer, initialState, init);
const { currentStep, filesToUpload } = reducerState.toJS();
- const { Component, headerTradId, next, prev } = stepper[currentStep];
+ const { Component, headers, next, prev } = stepper[currentStep];
const filesToUploadLength = filesToUpload.length;
const toggleRef = useRef();
toggleRef.current = onToggle;
@@ -28,7 +28,7 @@ const ModalStepper = ({ isOpen, onToggle }) => {
useEffect(() => {
if (currentStep === 'upload' && filesToUploadLength === 0) {
// Close modal when file uploading is over
- toggleRef.current();
+ // toggleRef.current();
}
}, [filesToUploadLength, currentStep]);
@@ -141,12 +141,10 @@ const ModalStepper = ({ isOpen, onToggle }) => {
{/* header title */}
,
- },
- ]}
+ headers={headers.map(headerTrad => ({
+ key: headerTrad,
+ element: ,
+ }))}
/>
{/* body of the modal */}
{Component && (
diff --git a/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/reducer.js b/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/reducer.js
index a72bdd5d7f..bd43486de6 100644
--- a/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/reducer.js
+++ b/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/reducer.js
@@ -2,7 +2,8 @@ import { fromJS } from 'immutable';
import createNewFilesToUploadArray from './utils/createNewFilesToUploadArray';
const initialState = fromJS({
- currentStep: 'browse',
+ // currentStep: 'browse',
+ currentStep: 'upload',
filesToUpload: [],
});
diff --git a/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/utils/stepper.js b/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/utils/stepper.js
index 13225e7df3..e0ed52b51b 100644
--- a/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/utils/stepper.js
+++ b/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/utils/stepper.js
@@ -5,19 +5,22 @@ import getTrad from '../../../utils/getTrad';
const stepper = {
browse: {
Component: UploadForm,
- headerTradId: getTrad('modal.header.browse'),
+ headers: [getTrad('modal.header.browse')],
prev: null,
next: 'upload',
},
upload: {
Component: UploadList,
- headerTradId: getTrad('modal.header.select-files'),
+ headers: [getTrad('modal.header.select-files')],
next: null,
prev: 'browse',
},
'edit-new': {
- Component: null,
- headerTradId: 'coming soon',
+ Component: () => null,
+ headers: [
+ getTrad('modal.header.select-files'),
+ getTrad('modal.header.file-detail'),
+ ],
next: null,
prev: 'upload',
},
diff --git a/packages/strapi-plugin-upload/admin/src/translations/en.json b/packages/strapi-plugin-upload/admin/src/translations/en.json
index b452f7ca04..203a09f609 100644
--- a/packages/strapi-plugin-upload/admin/src/translations/en.json
+++ b/packages/strapi-plugin-upload/admin/src/translations/en.json
@@ -10,6 +10,7 @@
"list.assets-empty.subtitle": "Add a first one to the list.",
"modal.header.browse": "Upload assets",
"modal.header.select-files": "Selected files",
+ "modal.header.file-detail": "Details",
"modal.nav.computer": "from computer",
"modal.nav.url": "from url",
"modal.upload-list.sub-header-title.plural": "{number} assets selected",