Merge pull request #5720 from strapi/media-lib/last-ui-fixes

Media lib UI

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 = ({
             <Title>{name}</Title>
             <Tag label={getType(fileType)} />
           </Flex>
-          {!withoutFileInfo && <FileInfos extension={getExtension(fileType)} size={fileSize} />}
+          {!withoutFileInfo && (
+            <FileInfos
+              extension={getExtension(fileType)}
+              size={fileSize}
+              width={width}
+              height={height}
+            />
+          )}
         </>
       ) : (
         <Text lineHeight="13px" />
@@ -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,
 };

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 }) =>

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

@@ -3,24 +3,29 @@ import PropTypes from 'prop-types';
 
 import Text from '../Text';
 
-const FileInfos = ({ extension, size }) => {
+const FileInfos = ({ extension, height, size, width }) => {
   return (
     <Text color="grey" fontSize="xs" ellipsis>
       {extension.toUpperCase()}
       &nbsp;&mdash;&nbsp;
+      {width && height && `${width}×${height}\u00A0\u2014\u00A0`}
       {size}
     </Text>
   );
 };
 
 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;

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;

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

@@ -4,6 +4,7 @@ import { FormattedMessage } from 'react-intl';
 import { FilterIcon } from 'strapi-helper-plugin';
 
 import FiltersCard from './FiltersCard';
+import Wrapper from './Wrapper';
 import Picker from '../Picker';
 
 import formatFilter from './utils/formatFilter';
@@ -14,23 +15,25 @@ const FiltersPicker = ({ onChange, filters }) => {
   };
 
   return (
-    <Picker
-      renderButtonContent={() => (
-        <>
-          <FilterIcon />
-          <FormattedMessage id="app.utils.filters" />
-        </>
-      )}
-      renderSectionContent={onToggle => (
-        <FiltersCard
-          filters={filters}
-          onChange={e => {
-            handleChange(e);
-            onToggle();
-          }}
-        />
-      )}
-    />
+    <Wrapper>
+      <Picker
+        renderButtonContent={() => (
+          <>
+            <FilterIcon />
+            <FormattedMessage id="app.utils.filters" />
+          </>
+        )}
+        renderSectionContent={onToggle => (
+          <FiltersCard
+            filters={filters}
+            onChange={e => {
+              handleChange(e);
+              onToggle();
+            }}
+          />
+        )}
+      />
+    </Wrapper>
   );
 };
 

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;
   }

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

packages/strapi-plugin-upload/admin/src/containers/HomePage/index.js

@@ -395,12 +395,16 @@ const HomePage = () => {
             onCardClick={handleClickEditFile}
             selectedItems={dataToDelete}
           />
-          <PageFooter
-            context={{ emitEvent: () => {} }}
-            count={paginationCount}
-            onChangeParams={handleChangeListParams}
-            params={params}
-          />
+          <Padded left right size="sm">
+            <Padded left right size="xs">
+              <PageFooter
+                context={{ emitEvent: () => {} }}
+                count={paginationCount}
+                onChangeParams={handleChangeListParams}
+                params={params}
+              />
+            </Padded>
+          </Padded>
         </>
       ) : (
         <ListEmpty

packages/strapi-plugin-upload/admin/src/icons/Download/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 const Download = props => {
   return (
-    <svg width="16" height="21" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <svg width="16" height="17" xmlns="http://www.w3.org/2000/svg" {...props}>
       <defs>
         <filter
           x="-1.7%"