generalize img card

Signed-off-by: Ky <virginie.ky@gmail.com>

packages/strapi-plugin-upload/admin/src/components/Card/Border.js

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+const Border = styled.div`
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: none;
+  border: 2px solid #007eff;
+  ${({ checked }) => checked && 'display: block;'}
+`;
+
+Border.defaultProps = {
+  checked: false,
+};
+
+Border.propTypes = {
+  checked: PropTypes.bool,
+};
+
+export default Border;

packages/strapi-plugin-upload/admin/src/components/Card/index.js

@@ -6,8 +6,8 @@ import CardImgWrapper from '../CardImgWrapper';
 import CardPreview from '../CardPreview';
 import Wrapper from './Wrapper';
 import Title from './Title';
+import Border from './Border';
 
-// TODO - adapt with the real data
 const Card = ({
   checked,
   children,
@@ -15,7 +15,6 @@ const Card = ({
   hasError,
   mime,
   name,
-  onChange,
   small,
   size,
   type,
@@ -26,6 +25,7 @@ const Card = ({
       <div>
         <CardImgWrapper small={small} checked={checked} hasError={hasError}>
           <CardPreview type={mime || type} url={url} />
+          <Border checked={checked} />
           {children}
         </CardImgWrapper>
         <Title fontSize="md" fontWeight="bold" ellipsis>
@@ -41,9 +41,10 @@ const Card = ({
 Card.defaultProps = {
   checked: false,
   children: null,
+  errorMessage: null,
   hasError: false,
+  mime: null,
   name: null,
-  onChange: () => {},
   size: 0,
   small: false,
   type: null,
@@ -53,9 +54,10 @@ Card.defaultProps = {
 Card.propTypes = {
   checked: PropTypes.bool,
   children: PropTypes.node,
+  errorMessage: PropTypes.string,
   hasError: PropTypes.bool,
+  mime: PropTypes.string,
   name: PropTypes.string,
-  onChange: PropTypes.func,
   size: PropTypes.number,
   small: PropTypes.bool,
   type: PropTypes.string,

packages/strapi-plugin-upload/admin/src/components/CardControl/Wrapper.js

@@ -8,8 +8,7 @@ const Wrapper = styled.div`
   align-items: center;
   width: 24px;
   height: 24px;
-  margin-left: auto;
-  margin-right: 5px;
+  margin-left: 5px;
   background-color: ${({ theme }) => theme.main.colors.white};
   border: 1px solid #e3e9f3;
   border-radius: ${({ theme }) => theme.main.sizes.borderRadius};

packages/strapi-plugin-upload/admin/src/components/CardControlsWrapper/index.js

@@ -1,10 +1,22 @@
 import styled from 'styled-components';
+import PropTypes from 'prop-types';
 
 const CardControlsWrapper = styled.div`
-  position: absolute;
-  top: 10px;
-  right: 5px;
   display: flex;
+  position: absolute;
+  top: 0;
+  ${({ leftAlign }) => (leftAlign ? 'left: 0;' : 'right: 0;')};
+  width: fit-content;
+  height: auto;
+  margin: 10px;
 `;
 
+CardControlsWrapper.defaultProps = {
+  leftAlign: false,
+};
+
+CardControlsWrapper.propTypes = {
+  leftAlign: PropTypes.bool,
+};
+
 export default CardControlsWrapper;

packages/strapi-plugin-upload/admin/src/components/CardImgWrapper/index.js

@@ -12,12 +12,6 @@ const CardImgWrapper = styled.div`
 
   .card-control-wrapper {
     display: none;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    padding: 10px;
   }
 
   &:hover {
@@ -44,7 +38,6 @@ const CardImgWrapper = styled.div`
     .card-control-wrapper {
       display: flex;
       z-index: 1050;
-      border: 2px solid #007EFF;
     }
   `}
 `;

packages/strapi-plugin-upload/admin/src/components/EditForm/FileWrapper.js

@@ -9,6 +9,9 @@ const FileWrapper = styled(CardImgWrapper)`
     width: 100%;
     object-fit: contain;
     margin: auto;
+    position: absolute;
+    top: 0;
+    left: 0;
   }
 
   .cropper-view-box {

packages/strapi-plugin-upload/admin/src/components/InfiniteLoadingIndicator/Container.js

@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-import { themePropTypes } from 'strapi-helper-plugin';
 
 const Container = styled.div`
   width: 44%;

packages/strapi-plugin-upload/admin/src/components/List/index.js

@@ -5,6 +5,7 @@ import { Checkbox } from '@buffetjs/core';
 import createMatrix from '../../utils/createMatrix';
 
 import Card from '../Card';
+import CardControlsWrapper from '../CardControlsWrapper';
 import Wrapper from './Wrapper';
 
 const List = ({ data, onChange, selectedItems }) => {
@@ -22,9 +23,9 @@ const List = ({ data, onChange, selectedItems }) => {
               return (
                 <div className="col-xs-12 col-md-6 col-xl-3" key={JSON.stringify(item)}>
                   <Card small checked={checked} {...item} url={`${strapi.backendURL}${url}`}>
-                    <div className="card-control-wrapper">
+                    <CardControlsWrapper leftAlign className="card-control-wrapper">
                       <Checkbox name={`${id}`} onChange={onChange} value={checked} />
-                    </div>
+                    </CardControlsWrapper>
                   </Card>
                 </div>
               );

packages/strapi-plugin-upload/admin/src/components/UploadList/RowItem.js

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import Card from '../Card';
 import CardControl from '../CardControl';
 import CardControlsWrapper from '../CardControlsWrapper';
-import CardImgWrapper from '../CardImgWrapper';
 import InfiniteLoadingIndicator from '../InfiniteLoadingIndicator';
 
 const RowItem = ({

packages/strapi-plugin-upload/admin/src/components/UploadList/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
 import { Button } from '@buffetjs/core';
 import createMatrix from '../../utils/createMatrix';
 import getTrad from '../../utils/getTrad';