diff --git a/packages/strapi-plugin-upload/admin/src/components/FileIcon/extensions.json b/packages/strapi-plugin-upload/admin/src/components/FileIcon/extensions.json new file mode 100644 index 0000000000..f821dee9ee --- /dev/null +++ b/packages/strapi-plugin-upload/admin/src/components/FileIcon/extensions.json @@ -0,0 +1,9 @@ +{ + "archive": ["rar", "zip"], + "code": ["js", "json", "rb", "erb", "txt", "css", "scss", "html", "jsx"], + "img": ["jpg", "jpeg", "png", "gif"], + "pdf": ["pdf"], + "powerpoint": ["ppt", "key", "xls"], + "video": ["mov", "avi", "mpg", "mp4", "m4v"], + "word": ["doc", "pages"] +} diff --git a/packages/strapi-plugin-upload/admin/src/components/FileIcon/index.js b/packages/strapi-plugin-upload/admin/src/components/FileIcon/index.js index 8b200169e4..ddcc57aa13 100644 --- a/packages/strapi-plugin-upload/admin/src/components/FileIcon/index.js +++ b/packages/strapi-plugin-upload/admin/src/components/FileIcon/index.js @@ -8,24 +8,29 @@ import React from 'react'; import PropTypes from 'prop-types'; import cn from 'classnames'; +import ext from './extensions.json'; + import styles from './styles.scss'; function FileIcon({ fileType }) { const iconType = (() => { - switch (fileType) { - case 'jpg': - case 'jpeg': - case 'png': - case 'gif': - return 'image'; - case 'mov': - case 'avi': - case 'mpg': - case 'm4v': - case 'mp4': - return 'video'; + switch (true) { + case ext.archive.includes(fileType): + return 'file-archive-o'; + case ext.code.includes(fileType): + return 'file-code-o'; + case ext.img.includes(fileType): + return 'file-image-o'; + case ext.pdf.includes(fileType): + return 'file-pdf-o'; + case ext.powerpoint.includes(fileType): + return 'file-powerpoint-o'; + case ext.video.includes(fileType): + return 'file-video-o'; + case ext.word.includes(fileType): + return 'file-word-o'; default: - return fileType; + return 'file'; } })(); @@ -33,13 +38,14 @@ function FileIcon({ fileType }) {
- +
); } diff --git a/packages/strapi-plugin-upload/admin/src/components/FileIcon/styles.scss b/packages/strapi-plugin-upload/admin/src/components/FileIcon/styles.scss index e494667ff4..22b5aeff4f 100644 --- a/packages/strapi-plugin-upload/admin/src/components/FileIcon/styles.scss +++ b/packages/strapi-plugin-upload/admin/src/components/FileIcon/styles.scss @@ -17,3 +17,7 @@ .zip { color: #A16B26; } + +.code { + color: #BDBFC2; +} diff --git a/packages/strapi-plugin-upload/admin/src/components/Li/styles.scss b/packages/strapi-plugin-upload/admin/src/components/Li/styles.scss index a987c7d8cc..5f404b385f 100644 --- a/packages/strapi-plugin-upload/admin/src/components/Li/styles.scss +++ b/packages/strapi-plugin-upload/admin/src/components/Li/styles.scss @@ -1,4 +1,4 @@ - .liWrapper { +.liWrapper { height: 54px; background-color: #fff; padding-top: 5px; 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 e645e33223..24cc674fa6 100644 --- a/packages/strapi-plugin-upload/admin/src/components/List/index.js +++ b/packages/strapi-plugin-upload/admin/src/components/List/index.js @@ -6,6 +6,7 @@ import React from 'react'; import PropTypes from 'prop-types'; +import { FormattedMessage } from 'react-intl'; import cn from 'classnames'; import Li from 'components/Li'; @@ -13,28 +14,41 @@ import ListHeader from 'components/ListHeader'; import styles from './styles.scss'; +const EmptyLi = () => ( +
  • +
    + +
    +
    • +); + function List(props) { return (
      - + {props.data.map((item, key) => (
    • ))} + {props.data.length === 0 && }
    ); } -List.defaultProps = {}; +List.defaultProps = { + sort: 'id', +}; List.propTypes = { + changeSort: PropTypes.func.isRequired, data: PropTypes.arrayOf(PropTypes.object).isRequired, + sort: PropTypes.string, }; export default List; diff --git a/packages/strapi-plugin-upload/admin/src/components/List/styles.scss b/packages/strapi-plugin-upload/admin/src/components/List/styles.scss index 20017379d9..4ea452e2c8 100644 --- a/packages/strapi-plugin-upload/admin/src/components/List/styles.scss +++ b/packages/strapi-plugin-upload/admin/src/components/List/styles.scss @@ -22,3 +22,20 @@ } } } + +.emptyLiWrapper { + height: 54px; + background-color: #fff; + padding-top: 5px; + cursor: pointer; + > div { + display: flex; + width: 100%; + justify-content: center; + padding-top: 1px; + text-align: center; + font-size: 12px; + line-height: 54px; + text-transform: uppercase; + } +} diff --git a/packages/strapi-plugin-upload/admin/src/components/ListHeader/index.js b/packages/strapi-plugin-upload/admin/src/components/ListHeader/index.js index 9f36dc355b..46a5a9c909 100644 --- a/packages/strapi-plugin-upload/admin/src/components/ListHeader/index.js +++ b/packages/strapi-plugin-upload/admin/src/components/ListHeader/index.js @@ -7,15 +7,14 @@ import React from 'react'; import { FormattedMessage } from 'react-intl'; import cn from 'classnames'; +import PropTypes from 'prop-types'; // import InputCheckBox from 'components/InputCheckbox'; import styles from './styles.scss'; -function ListHeader() { +function ListHeader({ changeSort, sort }) { const titles = [ - // '', - // 'type', 'hash', 'name', 'updated', @@ -23,20 +22,37 @@ function ListHeader() { 'related', '', ]; + + const handleChangeSort = (name) => { + if (sort === name) { + changeSort(`-${name}`); + } else if (sort === `-${name}`) { + changeSort('hash'); + } else if (name === 'updated' || name === 'related') { + changeSort('hash'); + } else { + changeSort(name); + } + }; + + const shouldDisplaySort = (title) => sort === title && styles.icon || sort === `-${title}` && styles.iconDesc || ''; + return (
  • -
    +
    handleChangeSort('type')}> +
    {titles.map((title, key) => { if (title !== '') { return ( -
    +
    handleChangeSort(title)}> +
    ); } @@ -48,4 +64,13 @@ function ListHeader() { ); } +ListHeader.defaultProps = { + changeSort: () => {}, +}; + +ListHeader.propTypes = { + changeSort: PropTypes.func, + sort: PropTypes.string.isRequired, +}; + export default ListHeader; diff --git a/packages/strapi-plugin-upload/admin/src/components/ListHeader/styles.scss b/packages/strapi-plugin-upload/admin/src/components/ListHeader/styles.scss index ff5aec84a3..e18abcb541 100644 --- a/packages/strapi-plugin-upload/admin/src/components/ListHeader/styles.scss +++ b/packages/strapi-plugin-upload/admin/src/components/ListHeader/styles.scss @@ -32,13 +32,6 @@ > div:nth-child(4) { width: 184px; flex-shrink: 0; - > span { - &:after { - content: '\f0d8'; - margin-left: 10px; - font-family: 'FontAwesome'; - } - } } > div:nth-child(5) { width: 100px; @@ -53,3 +46,23 @@ flex-shrink: 0; } } + +.icon { + > span:last-child { + &:after { + content: '\f0d8'; + margin-left: 10px; + font-family: 'FontAwesome'; + } + } +} + +.iconDesc { + > span:last-child { + &:after { + content: '\f0d7'; + margin-left: 10px; + font-family: 'FontAwesome'; + } + } +} 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 f744f418d5..7e3102aae9 100755 --- a/packages/strapi-plugin-upload/admin/src/containers/HomePage/index.js +++ b/packages/strapi-plugin-upload/admin/src/containers/HomePage/index.js @@ -81,6 +81,21 @@ export class HomePage extends React.Component { getURLParams = (type) => getQueryParameters(this.props.location.search, type); + changeSort = (name) => { + const { params: { limit, page } } = this.props; + const target = { + name: 'params.sort', + value: name, + }; + const search = `page=${page}&limit=${limit}&sort=${name}`; + + this.props.changeParams({ target }); + this.props.history.push({ + pathname: this.props.history.pathname, + search, + }); + } + handleChangeParams = (e) => { const { history, params } = this.props; const search = e.target.name === 'params.limit' ? @@ -138,6 +153,8 @@ export class HomePage extends React.Component {