ListView UI

packages/strapi-plugin-content-manager/admin/src/components/MediaPreviewList/StyledMediaPreviewList.js

@@ -34,17 +34,69 @@ function createCSS() {
   `;
 }
 
-//34373F gris +5 FAFAFB
-
 const MediaPreviewItem = styled.div`
   width: ${sizes.small};
   height: ${sizes.small};
-
   div {
     width: 100%;
     height: 100%;
     overflow: hidden;
     border-radius: calc(${sizes.small} / 2);
+    background-color: #fafafb;
+  }
+  &.hoverable {
+    :hover {
+      z-index: ${max + 1};
+    }
+  }
+`;
+
+const MediaPreviewFile = styled(MediaPreviewItem)`
+  div {
+    position: relative;
+    background-color: #9fa7b6;
+    color: white;
+    text-align: center;
+    line-height: ${sizes.small};
+    font-size: 13px;
+    i {
+      position: absolute;
+      left: 0;
+      top: 0;
+      font-size: 15px;
+      width: 100%;
+      height: 100%;
+      &:before {
+        width: 100%;
+        height: 100%;
+        padding: 10px;
+        line-height: 35px;
+        background: #9fa7b6;
+      }
+    }
+  }
+  div + span {
+    display: none;
+    color: #333740;
+    position: absolute;
+    left: 100%;
+    bottom: -10px;
+  }
+  &.hoverable {
+    :hover {
+      div + span {
+        display: block;
+      }
+    }
+  }
+`;
+
+const MediaPreviewText = styled(MediaPreviewItem)`
+  div {
+    font-size: 13px;
+    color: #333740;
+    text-align: center;
+    line-height: ${sizes.small};
   }
 `;
 
@@ -52,6 +104,7 @@ const MediaPreviewImage = styled(MediaPreviewItem)`
   img {
     display: block;
     object-fit: cover;
+    background-color: #fafafb;
   }
   div {
     position: relative;
@@ -80,7 +133,6 @@ const MediaPreviewImage = styled(MediaPreviewItem)`
 
   &.hoverable {
     :hover {
-      z-index: ${max + 1};
       div {
         &::before {
           opacity: 0.6;
@@ -93,4 +145,10 @@ const MediaPreviewImage = styled(MediaPreviewItem)`
   }
 `;
 
-export { MediaPreviewImage, MediaPreviewItem, StyledMediaPreviewList };
+export {
+  MediaPreviewFile,
+  MediaPreviewImage,
+  MediaPreviewItem,
+  MediaPreviewText,
+  StyledMediaPreviewList,
+};

packages/strapi-plugin-content-manager/admin/src/components/MediaPreviewList/index.js

@@ -6,12 +6,15 @@ import DefaultIcon from '../../assets/images/media/na.svg';
 
 import {
   StyledMediaPreviewList,
+  MediaPreviewFile,
   MediaPreviewImage,
   MediaPreviewItem,
+  MediaPreviewText,
 } from './StyledMediaPreviewList';
 
 function MediaPreviewList({ hoverable, files }) {
   const baseUrl = strapi.backendURL;
+  const getFileType = fileName => fileName.split('.').slice(-1)[0];
 
   const renderImage = image => {
     const { name, url } = image;
@@ -26,13 +29,48 @@ function MediaPreviewList({ hoverable, files }) {
     );
   };
 
-  const renderMultipleList = files => {
+  const renderFile = file => {
-    return files.map(file => {
+    const { ext, name } = file;
-      const { mime } = file;
+    const fileType = getFileType(name);
-      // Check file type
+
+    return (
+      <MediaPreviewFile className={hoverable ? 'hoverable' : ''}>
+        <div>
+          <span>{ext}</span>
+          <i className={`fa fa-file-${fileType}-o`} />
+        </div>
+        <span>{name}</span>
+      </MediaPreviewFile>
+    );
+  };
+
+  const renderItem = file => {
+    const { mime } = file;
+
+    return (
+      <React.Fragment key={JSON.stringify(file)}>
+        {includes(mime, 'image') ? renderImage(file) : renderFile(file)}
+      </React.Fragment>
+    );
+  };
+
+  const renderText = count => {
+    return (
+      <MediaPreviewText>
+        <div>
+          <span>+{count}</span>
+        </div>
+      </MediaPreviewText>
+    );
+  };
+
+  const renderMultipleItems = files => {
+    return files.map((file, index) => {
       return (
         <React.Fragment key={JSON.stringify(file)}>
-          {includes(mime, 'image') ? renderImage(file) : <p>{mime}</p>}
+          {index === 3 && files.length - 4 > 0
+            ? renderText(files.length - 4)
+            : renderItem(file)}
         </React.Fragment>
       );
     });
@@ -40,7 +78,7 @@ function MediaPreviewList({ hoverable, files }) {
 
   return !!files && !isEmpty(files) ? (
     <StyledMediaPreviewList>
-      {!isArray(files) ? renderImage(files) : renderMultipleList(files)}
+      {!isArray(files) ? renderItem(files) : renderMultipleItems(files)}
     </StyledMediaPreviewList>
   ) : (
     <MediaPreviewItem>

packages/strapi-plugin-content-manager/admin/src/containers/ListView/index.js

@@ -252,6 +252,7 @@ function ListView({
   };
   const tableHeaders = [...getTableHeaders(), imgHeader, iconsHeader];
 
+  console.log(data);
   return (
     <>
       <ListViewProvider