From 15c7beac0ff2c692226c2de452cd67d2cd670acf Mon Sep 17 00:00:00 2001 From: Ky Date: Mon, 6 Apr 2020 14:06:27 +0200 Subject: [PATCH 1/3] pagination alignment Signed-off-by: Ky --- .../admin/src/containers/HomePage/index.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/packages/strapi-plugin-upload/admin/src/containers/HomePage/index.js b/packages/strapi-plugin-upload/admin/src/containers/HomePage/index.js index 8dda52589a..a7c28c0049 100644 --- a/packages/strapi-plugin-upload/admin/src/containers/HomePage/index.js +++ b/packages/strapi-plugin-upload/admin/src/containers/HomePage/index.js @@ -394,12 +394,16 @@ const HomePage = () => { onCardClick={handleClickEditFile} selectedItems={dataToDelete} /> - {} }} - count={paginationCount} - onChangeParams={handleChangeListParams} - params={params} - /> + + + {} }} + count={paginationCount} + onChangeParams={handleChangeListParams} + params={params} + /> + + ) : ( Date: Mon, 6 Apr 2020 16:26:30 +0200 Subject: [PATCH 2/3] some ui fixes Signed-off-by: Ky --- .../admin/src/components/Card/index.js | 15 ++++++- .../src/components/CardControl/Wrapper.js | 2 +- .../admin/src/components/FileInfos/index.js | 7 +++- .../src/components/FiltersPicker/Wrapper.js | 1 + .../src/components/FiltersPicker/index.js | 39 ++++++++++--------- .../admin/src/components/ListEmpty/Wrapper.js | 2 +- .../admin/src/components/ListWrapper/index.js | 2 +- .../admin/src/icons/Download/index.js | 2 +- 8 files changed, 46 insertions(+), 24 deletions(-) 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 6f2cdf527a..f09c5398e7 100644 --- a/packages/strapi-plugin-upload/admin/src/components/Card/index.js +++ b/packages/strapi-plugin-upload/admin/src/components/Card/index.js @@ -20,6 +20,7 @@ const Card = ({ errorMessage, hasError, hasIcon, + height, mime, name, onClick, @@ -28,6 +29,7 @@ const Card = ({ size, type, url, + width, withFileCaching, withoutFileInfo, }) => { @@ -59,7 +61,14 @@ const Card = ({ {name} - {!withoutFileInfo && } + {!withoutFileInfo && ( + + )} ) : ( @@ -77,6 +86,7 @@ Card.defaultProps = { id: null, hasError: false, hasIcon: false, + height: null, mime: null, name: null, onClick: () => {}, @@ -85,6 +95,7 @@ Card.defaultProps = { small: false, type: null, url: null, + width: null, withFileCaching: true, withoutFileInfo: false, }; @@ -96,6 +107,7 @@ Card.propTypes = { errorMessage: PropTypes.string, hasError: PropTypes.bool, hasIcon: PropTypes.bool, + height: PropTypes.number, mime: PropTypes.string, name: PropTypes.string, onClick: PropTypes.func, @@ -104,6 +116,7 @@ Card.propTypes = { small: PropTypes.bool, type: PropTypes.string, url: PropTypes.string, + width: PropTypes.number, withFileCaching: PropTypes.bool, withoutFileInfo: PropTypes.bool, }; 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 1d45e35127..ce242de1de 100644 --- a/packages/strapi-plugin-upload/admin/src/components/CardControl/Wrapper.js +++ b/packages/strapi-plugin-upload/admin/src/components/CardControl/Wrapper.js @@ -14,7 +14,7 @@ const Wrapper = styled.div` border: 1px solid ${({ theme }) => theme.main.colors.darkGrey}; border-radius: ${({ theme }) => theme.main.sizes.borderRadius}; cursor: pointer; - font-size: 11px; + font-size: ${({ small }) => (small ? '11px' : '13px')}; color: ${({ color }) => color}; ${({ type }) => diff --git a/packages/strapi-plugin-upload/admin/src/components/FileInfos/index.js b/packages/strapi-plugin-upload/admin/src/components/FileInfos/index.js index 0c4ac832ae..192db7077c 100644 --- a/packages/strapi-plugin-upload/admin/src/components/FileInfos/index.js +++ b/packages/strapi-plugin-upload/admin/src/components/FileInfos/index.js @@ -3,10 +3,11 @@ import PropTypes from 'prop-types'; import Text from '../Text'; -const FileInfos = ({ extension, size }) => { +const FileInfos = ({ height, extension, size, width }) => { return ( {extension.toUpperCase()} + {width && height && `\u00A0\u2014\u00A0${width}×${height}`}  —  {size} @@ -14,13 +15,17 @@ const FileInfos = ({ extension, size }) => { }; FileInfos.defaultProps = { + height: null, extension: null, + width: null, size: null, }; FileInfos.propTypes = { + height: PropTypes.number, extension: PropTypes.string, size: PropTypes.string, + width: PropTypes.number, }; export default FileInfos; diff --git a/packages/strapi-plugin-upload/admin/src/components/FiltersPicker/Wrapper.js b/packages/strapi-plugin-upload/admin/src/components/FiltersPicker/Wrapper.js index eef401c32f..a4fc3345d8 100644 --- a/packages/strapi-plugin-upload/admin/src/components/FiltersPicker/Wrapper.js +++ b/packages/strapi-plugin-upload/admin/src/components/FiltersPicker/Wrapper.js @@ -2,6 +2,7 @@ import styled from 'styled-components'; const Wrapper = styled.div` position: relative; + padding-bottom: 6px; `; export default Wrapper; diff --git a/packages/strapi-plugin-upload/admin/src/components/FiltersPicker/index.js b/packages/strapi-plugin-upload/admin/src/components/FiltersPicker/index.js index 65e03d5469..6d61b6d071 100644 --- a/packages/strapi-plugin-upload/admin/src/components/FiltersPicker/index.js +++ b/packages/strapi-plugin-upload/admin/src/components/FiltersPicker/index.js @@ -3,8 +3,9 @@ import PropTypes from 'prop-types'; import { FormattedMessage } from 'react-intl'; import { FilterIcon } from 'strapi-helper-plugin'; -import FiltersCard from './FiltersCard'; import Picker from '../Picker'; +import FiltersCard from './FiltersCard'; +import Wrapper from './Wrapper'; import formatFilter from './utils/formatFilter'; @@ -14,23 +15,25 @@ const FiltersPicker = ({ onChange, filters }) => { }; return ( - ( - <> - - - - )} - renderSectionContent={onToggle => ( - { - handleChange(e); - onToggle(); - }} - /> - )} - /> + + ( + <> + + + + )} + renderSectionContent={onToggle => ( + { + handleChange(e); + onToggle(); + }} + /> + )} + /> + ); }; diff --git a/packages/strapi-plugin-upload/admin/src/components/ListEmpty/Wrapper.js b/packages/strapi-plugin-upload/admin/src/components/ListEmpty/Wrapper.js index 00233cb7b6..f2a7c7fa97 100644 --- a/packages/strapi-plugin-upload/admin/src/components/ListEmpty/Wrapper.js +++ b/packages/strapi-plugin-upload/admin/src/components/ListEmpty/Wrapper.js @@ -6,7 +6,7 @@ const Wrapper = styled.div` padding: 0; .btn-wrapper { position: absolute; - top: 109px; + top: 115px; width: 100%; text-align: center; } diff --git a/packages/strapi-plugin-upload/admin/src/components/ListWrapper/index.js b/packages/strapi-plugin-upload/admin/src/components/ListWrapper/index.js index 8b3ba923ef..1fb2113d0a 100644 --- a/packages/strapi-plugin-upload/admin/src/components/ListWrapper/index.js +++ b/packages/strapi-plugin-upload/admin/src/components/ListWrapper/index.js @@ -2,7 +2,7 @@ import styled from 'styled-components'; import PropTypes from 'prop-types'; const ListWrapper = styled.div` - margin-top: ${({ small }) => (small ? '2px' : '13px')}; + margin-top: ${({ small }) => (small ? '2px' : '7px')}; `; ListWrapper.defaultProps = { diff --git a/packages/strapi-plugin-upload/admin/src/icons/Download/index.js b/packages/strapi-plugin-upload/admin/src/icons/Download/index.js index b7f17dd3fd..41b18f2ebf 100644 --- a/packages/strapi-plugin-upload/admin/src/icons/Download/index.js +++ b/packages/strapi-plugin-upload/admin/src/icons/Download/index.js @@ -2,7 +2,7 @@ import React from 'react'; const Download = props => { return ( - + Date: Mon, 6 Apr 2020 17:14:20 +0200 Subject: [PATCH 3/3] clean Signed-off-by: Ky --- .../admin/src/components/FileInfos/index.js | 4 ++-- .../admin/src/components/FiltersPicker/index.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/strapi-plugin-upload/admin/src/components/FileInfos/index.js b/packages/strapi-plugin-upload/admin/src/components/FileInfos/index.js index 192db7077c..127b975b51 100644 --- a/packages/strapi-plugin-upload/admin/src/components/FileInfos/index.js +++ b/packages/strapi-plugin-upload/admin/src/components/FileInfos/index.js @@ -3,12 +3,12 @@ import PropTypes from 'prop-types'; import Text from '../Text'; -const FileInfos = ({ height, extension, size, width }) => { +const FileInfos = ({ extension, height, size, width }) => { return ( {extension.toUpperCase()} - {width && height && `\u00A0\u2014\u00A0${width}×${height}`}  —  + {width && height && `${width}×${height}\u00A0\u2014\u00A0`} {size} ); diff --git a/packages/strapi-plugin-upload/admin/src/components/FiltersPicker/index.js b/packages/strapi-plugin-upload/admin/src/components/FiltersPicker/index.js index 6d61b6d071..dd1c571b89 100644 --- a/packages/strapi-plugin-upload/admin/src/components/FiltersPicker/index.js +++ b/packages/strapi-plugin-upload/admin/src/components/FiltersPicker/index.js @@ -3,9 +3,9 @@ import PropTypes from 'prop-types'; import { FormattedMessage } from 'react-intl'; import { FilterIcon } from 'strapi-helper-plugin'; -import Picker from '../Picker'; import FiltersCard from './FiltersCard'; import Wrapper from './Wrapper'; +import Picker from '../Picker'; import formatFilter from './utils/formatFilter';