diff --git a/packages/volto/news/6550.feature b/packages/volto/news/6550.feature new file mode 100644 index 0000000000..2fb4c26212 --- /dev/null +++ b/packages/volto/news/6550.feature @@ -0,0 +1 @@ +Show preview image in folder contents view on title hover @iRohitSingh \ No newline at end of file diff --git a/packages/volto/src/components/manage/Contents/ContentsItem.jsx b/packages/volto/src/components/manage/Contents/ContentsItem.jsx index 1db0a4da4b..d408a91564 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'; @@ -156,14 +162,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() < @@ -382,6 +415,9 @@ const DragDropConnector = (props) => { DragSource( 'item', { + canDrag(props) { + return !props.dragDisabled; + }, beginDrag(props) { return { id: props.item['@id'], 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 {