From d2fc652c17fbe428f07f3067d00ce1c4df6c862f Mon Sep 17 00:00:00 2001 From: Virginie Ky Date: Thu, 5 Sep 2019 15:17:09 +0200 Subject: [PATCH 1/4] list ui name display --- .../MediaPreviewList/StyledMediaPreviewList.js | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/packages/strapi-plugin-content-manager/admin/src/components/MediaPreviewList/StyledMediaPreviewList.js b/packages/strapi-plugin-content-manager/admin/src/components/MediaPreviewList/StyledMediaPreviewList.js index 625b87c34f..4edc921f2c 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/MediaPreviewList/StyledMediaPreviewList.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/MediaPreviewList/StyledMediaPreviewList.js @@ -52,13 +52,22 @@ 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; + } i { position: absolute; left: 0; @@ -77,10 +86,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 { From f32197d9839c727a0ce0f59443a54ac5a1619ebd Mon Sep 17 00:00:00 2001 From: Virginie Ky Date: Thu, 5 Sep 2019 17:01:58 +0200 Subject: [PATCH 2/4] style --- .../MediaPreviewList/StyledMediaPreviewList.js | 1 + .../admin/src/components/MediaPreviewList/index.js | 13 +++++++++---- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/strapi-plugin-content-manager/admin/src/components/MediaPreviewList/StyledMediaPreviewList.js b/packages/strapi-plugin-content-manager/admin/src/components/MediaPreviewList/StyledMediaPreviewList.js index 4edc921f2c..c471adc722 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/MediaPreviewList/StyledMediaPreviewList.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/MediaPreviewList/StyledMediaPreviewList.js @@ -67,6 +67,7 @@ const MediaPreviewFile = styled(MediaPreviewItem)` span { display: block; padding: 0 3px; + text-transform: uppercase; } i { position: absolute; diff --git a/packages/strapi-plugin-content-manager/admin/src/components/MediaPreviewList/index.js b/packages/strapi-plugin-content-manager/admin/src/components/MediaPreviewList/index.js index ccc4881fab..a4b1842d14 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/MediaPreviewList/index.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/MediaPreviewList/index.js @@ -17,7 +17,12 @@ function MediaPreviewList({ hoverable, files }) { const getFileType = fileName => fileName.split('.').slice(-1)[0]; const renderImage = image => { - const { name, url } = image; + const { name, size, url } = image; + + // TODO !! - Specific UI for size > 200MB + if (size > 200) { + return renderFile(image); + } return ( @@ -30,13 +35,13 @@ function MediaPreviewList({ hoverable, files }) { }; const renderFile = file => { - const { ext, name } = file; + const { name } = file; const fileType = getFileType(name); return (
- {ext} + {fileType}
{name} @@ -88,7 +93,7 @@ function MediaPreviewList({ hoverable, files }) { } MediaPreviewList.default = { - hoverable: false, + hoverable: true, files: null, }; From b84b73d02fc67ede84a3f5863fb12c7b26dc4c81 Mon Sep 17 00:00:00 2001 From: Virginie Ky Date: Thu, 5 Sep 2019 17:45:52 +0200 Subject: [PATCH 3/4] display wide images --- .../src/components/MediaPreviewList/index.js | 6 +++--- .../admin/src/containers/ListView/index.js | 18 +----------------- 2 files changed, 4 insertions(+), 20 deletions(-) diff --git a/packages/strapi-plugin-content-manager/admin/src/components/MediaPreviewList/index.js b/packages/strapi-plugin-content-manager/admin/src/components/MediaPreviewList/index.js index a4b1842d14..27f05a7f85 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/MediaPreviewList/index.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/MediaPreviewList/index.js @@ -20,7 +20,7 @@ function MediaPreviewList({ hoverable, files }) { const { name, size, url } = image; // TODO !! - Specific UI for size > 200MB - if (size > 200) { + if (size > 2000) { return renderFile(image); } @@ -35,8 +35,8 @@ function MediaPreviewList({ hoverable, files }) { }; const renderFile = file => { - const { name } = file; - const fileType = getFileType(name); + const { mime, name } = file; + const fileType = includes(mime, 'image') ? 'image' : getFileType(name); return ( diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/ListView/index.js b/packages/strapi-plugin-content-manager/admin/src/containers/ListView/index.js index adf7be00e7..44fec4ef5f 100644 --- a/packages/strapi-plugin-content-manager/admin/src/containers/ListView/index.js +++ b/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 ( <> Date: Thu, 5 Sep 2019 17:51:38 +0200 Subject: [PATCH 4/4] code clean --- .../admin/src/components/CustomTable/Row.js | 9 ++------- .../admin/src/components/CustomTable/index.js | 2 -- .../admin/src/components/MediaPreviewList/index.js | 1 - .../admin/src/containers/ListView/index.js | 1 - 4 files changed, 2 insertions(+), 11 deletions(-) diff --git a/packages/strapi-plugin-content-manager/admin/src/components/CustomTable/Row.js b/packages/strapi-plugin-content-manager/admin/src/components/CustomTable/Row.js index 1926f96940..1049d8d66d 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/CustomTable/Row.js +++ b/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 ( - - ); + return ; }; return ( diff --git a/packages/strapi-plugin-content-manager/admin/src/components/CustomTable/index.js b/packages/strapi-plugin-content-manager/admin/src/components/CustomTable/index.js index 84db7c3f89..aa9a14249e 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/CustomTable/index.js +++ b/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({ > { const { name, size, url } = image; - // TODO !! - Specific UI for size > 200MB if (size > 2000) { return renderFile(image); } diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/ListView/index.js b/packages/strapi-plugin-content-manager/admin/src/containers/ListView/index.js index 44fec4ef5f..1715004e47 100644 --- a/packages/strapi-plugin-content-manager/admin/src/containers/ListView/index.js +++ b/packages/strapi-plugin-content-manager/admin/src/containers/ListView/index.js @@ -377,7 +377,6 @@ function ListView({ data={data} headers={getTableHeaders()} isBulkable={getLayoutSettingRef.current('bulkable')} - isHoverable={true} onChangeParams={handleChangeParams} slug={slug} />