Design pencil control

Signed-off-by: soupette <cyril.lpz@gmail.com>

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;

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 (
+    <Wrapper>
+      <Pencil fill="#b3b5b9" />
+    </Wrapper>
+  );
+};
+
+export default CardControl;

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;

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 = {

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;

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 = ({
       <div>
         <CardImgWrapper isSmall hasError={hasError}>
           {isUploading && <InfiniteLoadingIndicator onClick={handleClick} />}
+          {!isUploading && (
+            <CardControlsWrapper className="card-control-wrapper">
+              <CardControl />
+            </CardControlsWrapper>
+          )}
         </CardImgWrapper>
         <p style={{ marginBottom: 14 }}>{errorMessage || file.name}</p>
       </div>

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 = ({
       </ModalSection>
 
       <ModalSection>
-        <ContainerFluid>
-          <ListWrapper>
-            {matrix.map(({ key, rowContent }) => {
-              return (
-                <div className="row" key={key}>
-                  {rowContent.map(data => (
-                    <RowItem
-                      {...data}
-                      onClick={onClickCancelUpload}
-                      key={data.originalIndex}
-                    />
-                  ))}
-                </div>
-              );
-            })}
-          </ListWrapper>
-        </ContainerFluid>
+        <Container>
+          {matrix.map(({ key, rowContent }) => {
+            return (
+              <div className="row" key={key}>
+                {rowContent.map(data => (
+                  <RowItem
+                    {...data}
+                    onClick={onClickCancelUpload}
+                    key={data.originalIndex}
+                  />
+                ))}
+              </div>
+            );
+          })}
+        </Container>
       </ModalSection>
     </>
   );

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 }) => {
     <Modal isOpen={isOpen} onToggle={onToggle} onClosed={handleClosed}>
       {/* header title */}
       <ModalHeader
-        headers={[
-          {
-            key: headerTradId,
-            element: <FormattedMessage id={headerTradId} />,
-          },
-        ]}
+        headers={headers.map(headerTrad => ({
+          key: headerTrad,
+          element: <FormattedMessage id={headerTrad} />,
+        }))}
       />
       {/* body of the modal */}
       {Component && (

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: [],
 });
 

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',
   },

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",