From 69c0f64e82f9b2d85620315014521c2cfc6d6d69 Mon Sep 17 00:00:00 2001 From: iRohitSingh Date: Thu, 19 Dec 2024 20:15:20 +0530 Subject: [PATCH 1/4] Show preview image in folder content on hover --- .../manage/Contents/ContentsItem.jsx | 53 +++++++++++++++---- .../themes/pastanaga/extras/contents.less | 16 ++++++ 2 files changed, 60 insertions(+), 9 deletions(-) diff --git a/packages/volto/src/components/manage/Contents/ContentsItem.jsx b/packages/volto/src/components/manage/Contents/ContentsItem.jsx index 1db0a4da4b..392030000b 100644 --- a/packages/volto/src/components/manage/Contents/ContentsItem.jsx +++ b/packages/volto/src/components/manage/Contents/ContentsItem.jsx @@ -4,7 +4,13 @@ */ import React from 'react'; -import { Button, Table, Menu, Divider } from 'semantic-ui-react'; +import { + Button, + Table, + Menu, + Divider, + Popup as SemanticUiPopup, +} from 'semantic-ui-react'; import { Link } from 'react-router-dom'; import PropTypes from 'prop-types'; import map from 'lodash/map'; @@ -97,6 +103,8 @@ export const ContentsItemComponent = ({ order, }) => { const intl = useIntl(); + const previewImageUrl = `${item['@id']}/${item.image_scales?.image?.[0]?.scales?.teaser?.download}`; + const previewIconUrl = `${item['@id']}/${item.image_scales?.image?.[0]?.scales?.thumb?.download}`; return connectDropTarget( connectDragPreview( @@ -156,14 +164,41 @@ export const ContentsItemComponent = ({ to={`${item['@id']}${item.is_folderish ? '/contents' : ''}`} >
- {' '} - {item.title} + {item['@type'] === 'Image' ? ( + + {' '} + {item.title} +
+ } + > + +
+ +
+ + + ) : ( +
+ + {item.title} +
+ )} {item.ExpirationDate !== 'None' && new Date(item.ExpirationDate).getTime() < diff --git a/packages/volto/theme/themes/pastanaga/extras/contents.less b/packages/volto/theme/themes/pastanaga/extras/contents.less index 64a1383dfc..384a5f5b26 100644 --- a/packages/volto/theme/themes/pastanaga/extras/contents.less +++ b/packages/volto/theme/themes/pastanaga/extras/contents.less @@ -140,6 +140,17 @@ .ui.table .expire-align { display: flex; align-items: center; + + .preview-image-container { + display: flex; + align-items: center; + + .popup-image-icon { + width: 20px; + height: 20px; + margin-right: 4px; + } + } } .ui.table .icon-margin { @@ -153,6 +164,11 @@ color: white; } } +/* Folder contents preview image on title hover */ +.popup-preview-image { + width: 100%; + height: 100%; +} .contents-pagination { .ui.secondary.menu .item { From e113f14b0bc927b9aa7d26ec4e276739dc5ea30c Mon Sep 17 00:00:00 2001 From: iRohitSingh Date: Thu, 19 Dec 2024 20:18:27 +0530 Subject: [PATCH 2/4] Add change log --- packages/volto/news/6550.feature | 1 + 1 file changed, 1 insertion(+) create mode 100644 packages/volto/news/6550.feature diff --git a/packages/volto/news/6550.feature b/packages/volto/news/6550.feature new file mode 100644 index 0000000000..b5be0f4f10 --- /dev/null +++ b/packages/volto/news/6550.feature @@ -0,0 +1 @@ +Show preview image in folder contents view on hover @iRohitSingh \ No newline at end of file From 47dc5db21fab90650c7becb5625dd476eec89a95 Mon Sep 17 00:00:00 2001 From: iRohitSingh Date: Thu, 19 Dec 2024 20:33:17 +0530 Subject: [PATCH 3/4] Fix test --- .../__snapshots__/ContentsItem.test.jsx.snap | 49 ++++++++++--------- 1 file changed, 26 insertions(+), 23 deletions(-) diff --git a/packages/volto/src/components/manage/Contents/__snapshots__/ContentsItem.test.jsx.snap b/packages/volto/src/components/manage/Contents/__snapshots__/ContentsItem.test.jsx.snap index bfbbff011f..2bf8a3ea7e 100644 --- a/packages/volto/src/components/manage/Contents/__snapshots__/ContentsItem.test.jsx.snap +++ b/packages/volto/src/components/manage/Contents/__snapshots__/ContentsItem.test.jsx.snap @@ -79,31 +79,34 @@ exports[`ContentsItem renders a contents item component 1`] = `
- Paginaundefined", +
+ Paginaundefined", + } } - } - onClick={null} - style={ - Object { - "fill": "#878f93", - "height": "20px", - "width": "auto", + onClick={null} + style={ + Object { + "fill": "#878f93", + "height": "20px", + "width": "auto", + } } - } - viewBox="" - xmlns="" - /> - - - - Blog - + viewBox="" + xmlns="" + /> + + + Blog + +
From 4915080b5142f85f9b70193e08cca128219f5602 Mon Sep 17 00:00:00 2001 From: iRohitSingh Date: Wed, 15 Jan 2025 18:46:25 +0530 Subject: [PATCH 4/4] lazy load the image and also refactor in component --- .../manage/Contents/ContentsItem.jsx | 59 +++++++++++-------- 1 file changed, 35 insertions(+), 24 deletions(-) diff --git a/packages/volto/src/components/manage/Contents/ContentsItem.jsx b/packages/volto/src/components/manage/Contents/ContentsItem.jsx index 392030000b..7d3dd5998f 100644 --- a/packages/volto/src/components/manage/Contents/ContentsItem.jsx +++ b/packages/volto/src/components/manage/Contents/ContentsItem.jsx @@ -81,11 +81,45 @@ function getColor(string) { } } +// PreviewImage Component +const PreviewImage = ({ item }) => { + const previewImageUrl = `${item['@id']}/${item.image_scales?.image?.[0]?.scales?.teaser?.download}`; + const previewIconUrl = `${item['@id']}/${item.image_scales?.image?.[0]?.scales?.thumb?.download}`; + + return ( + + {' '} + {item.title} + + } + > + +
+ +
+ + + ); +}; + /** * Contents item component class. * @function ContentsItemComponent * @returns {string} Markup of the component. */ + export const ContentsItemComponent = ({ item, selected, @@ -103,8 +137,6 @@ export const ContentsItemComponent = ({ order, }) => { const intl = useIntl(); - const previewImageUrl = `${item['@id']}/${item.image_scales?.image?.[0]?.scales?.teaser?.download}`; - const previewIconUrl = `${item['@id']}/${item.image_scales?.image?.[0]?.scales?.thumb?.download}`; return connectDropTarget( connectDragPreview( @@ -165,28 +197,7 @@ export const ContentsItemComponent = ({ >
{item['@type'] === 'Image' ? ( - - {' '} - {item.title} -
- } - > - -
- -
- - + ) : (