Merge pull request #3906 from strapi/front/media-preview-list

Front/media preview list

packages/strapi-plugin-content-manager/admin/src/components/CustomTable/Row.js

@@ -56,7 +56,7 @@ const getDisplayedValue = (type, value, name) => {
   }
 };
 
-function Row({ goTo, isBulkable, isHoverable, row, headers }) {
+function Row({ goTo, isBulkable, row, headers }) {
   const {
     entriesToDelete,
     onChangeBulk,
@@ -65,12 +65,7 @@ function Row({ goTo, isBulkable, isHoverable, row, headers }) {
   } = useListView();
 
   const renderMediaList = files => {
-    return (
-      <MediaPreviewList
-        files={files}
-        hoverable={isHoverable}
-      ></MediaPreviewList>
-    );
+    return <MediaPreviewList files={files}></MediaPreviewList>;
   };
 
   return (

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

@@ -18,7 +18,6 @@ function CustomTable({
     push,
   },
   isBulkable,
-  isHoverable,
 }) {
   const {
     emitEvent,
@@ -68,7 +67,6 @@ function CustomTable({
           >
             <Row
               isBulkable={isBulkable}
-              isHoverable={isHoverable}
               headers={headers}
               row={row}
               goTo={handleGoTo}

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

@@ -52,13 +52,23 @@ const MediaPreviewItem = styled.div`
 `;
 
 const MediaPreviewFile = styled(MediaPreviewItem)`
+  span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
   div {
     position: relative;
     background-color: #9fa7b6;
     color: white;
     text-align: center;
     line-height: ${sizes.small};
-    font-size: 13px;
+    font-size: 11px;
+    span {
+      display: block;
+      padding: 0 3px;
+      text-transform: uppercase;
+    }
     i {
       position: absolute;
       left: 0;
@@ -77,10 +87,12 @@ const MediaPreviewFile = styled(MediaPreviewItem)`
   }
   div + span {
     display: none;
-    color: #333740;
     position: absolute;
-    left: 100%;
+    left: 120%;
     bottom: -10px;
+    display: none;
+    max-width: 150px;
+    color: #333740;
   }
   &.hoverable {
     :hover {

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

@@ -17,7 +17,11 @@ function MediaPreviewList({ hoverable, files }) {
   const getFileType = fileName => fileName.split('.').slice(-1)[0];
 
   const renderImage = image => {
-    const { name, url } = image;
+    const { name, size, url } = image;
+
+    if (size > 2000) {
+      return renderFile(image);
+    }
 
     return (
       <MediaPreviewImage className={hoverable ? 'hoverable' : ''}>
@@ -30,13 +34,13 @@ function MediaPreviewList({ hoverable, files }) {
   };
 
   const renderFile = file => {
-    const { ext, name } = file;
-    const fileType = getFileType(name);
+    const { mime, name } = file;
+    const fileType = includes(mime, 'image') ? 'image' : getFileType(name);
 
     return (
       <MediaPreviewFile className={hoverable ? 'hoverable' : ''}>
         <div>
-          <span>{ext}</span>
+          <span>{fileType}</span>
           <i className={`fa fa-file-${fileType}-o`} />
         </div>
         <span>{name}</span>
@@ -88,7 +92,7 @@ function MediaPreviewList({ hoverable, files }) {
 }
 
 MediaPreviewList.default = {
-  hoverable: false,
+  hoverable: true,
   files: null,
 };
 

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

@@ -237,22 +237,6 @@ function ListView({
     },
   ];
 
-  // TODO - Remove when media is enable in List Layout
-  const imgHeader = {
-    label: 'Image',
-    name: 'image',
-    searchable: false,
-    sortable: false,
-  };
-  const iconsHeader = {
-    label: 'Icons',
-    name: 'icons',
-    searchable: false,
-    sortable: false,
-  };
-  const tableHeaders = [...getTableHeaders(), imgHeader, iconsHeader];
-
-  console.log(data);
   return (
     <>
       <ListViewProvider
@@ -391,9 +375,8 @@ function ListView({
               <div className="col-12">
                 <CustomTable
                   data={data}
-                  headers={tableHeaders}
+                  headers={getTableHeaders()}
                   isBulkable={getLayoutSettingRef.current('bulkable')}
-                  isHoverable={true}
                   onChangeParams={handleChangeParams}
                   slug={slug}
                 />