diff --git a/packages/strapi-plugin-upload/admin/src/components/Card/Border.js b/packages/strapi-plugin-upload/admin/src/components/Card/Border.js new file mode 100644 index 0000000000..54314880c1 --- /dev/null +++ b/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; diff --git a/packages/strapi-plugin-upload/admin/src/components/Card/index.js b/packages/strapi-plugin-upload/admin/src/components/Card/index.js index a715d21cea..9a5a325589 100644 --- a/packages/strapi-plugin-upload/admin/src/components/Card/index.js +++ b/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 = ({
+ {children} @@ -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, diff --git a/packages/strapi-plugin-upload/admin/src/components/CardControl/Wrapper.js b/packages/strapi-plugin-upload/admin/src/components/CardControl/Wrapper.js index 7d797c2e79..9eb3773520 100644 --- a/packages/strapi-plugin-upload/admin/src/components/CardControl/Wrapper.js +++ b/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}; diff --git a/packages/strapi-plugin-upload/admin/src/components/CardControlsWrapper/index.js b/packages/strapi-plugin-upload/admin/src/components/CardControlsWrapper/index.js index 4d4a114600..63e74ad50b 100644 --- a/packages/strapi-plugin-upload/admin/src/components/CardControlsWrapper/index.js +++ b/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; 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 e90687f2ac..f9f91abe27 100644 --- a/packages/strapi-plugin-upload/admin/src/components/CardImgWrapper/index.js +++ b/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; } `} `; diff --git a/packages/strapi-plugin-upload/admin/src/components/EditForm/FileWrapper.js b/packages/strapi-plugin-upload/admin/src/components/EditForm/FileWrapper.js index 38d363377e..4f841e1098 100644 --- a/packages/strapi-plugin-upload/admin/src/components/EditForm/FileWrapper.js +++ b/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 { diff --git a/packages/strapi-plugin-upload/admin/src/components/InfiniteLoadingIndicator/Container.js b/packages/strapi-plugin-upload/admin/src/components/InfiniteLoadingIndicator/Container.js index 925d736422..a49f3d824d 100644 --- a/packages/strapi-plugin-upload/admin/src/components/InfiniteLoadingIndicator/Container.js +++ b/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%; diff --git a/packages/strapi-plugin-upload/admin/src/components/List/index.js b/packages/strapi-plugin-upload/admin/src/components/List/index.js index 91d1d41a6d..0c2b813f91 100644 --- a/packages/strapi-plugin-upload/admin/src/components/List/index.js +++ b/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> ); 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 5c2e478346..02a01742fb 100644 --- a/packages/strapi-plugin-upload/admin/src/components/UploadList/RowItem.js +++ b/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 = ({ 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 b2bf55c475..fcff2ec1de 100644 --- a/packages/strapi-plugin-upload/admin/src/components/UploadList/index.js +++ b/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';