Show preview image in folder content on hover

plone · Dec 19, 2024 · 69c0f64 · 69c0f64
1 parent 09b88e6
commit 69c0f64
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 9 deletions.
diff --git 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' : ''}`}
           >
             <div className="expire-align">
-              <Icon
-                name={getContentIcon(item['@type'], item.is_folderish)}
-                size="20px"
-                className="icon-margin"
-                color="#878f93"
-                title={item['Type'] || item['@type']}
-              />{' '}
-              <span title={item.title}> {item.title}</span>
+              {item['@type'] === 'Image' ? (
+                <SemanticUiPopup
+                  trigger={
+                    <div className="preview-image-container">
+                      <img
+                        className="popup-image-icon"
+                        src={previewIconUrl}
+                        alt=""
+                      />{' '}
+                      <span title={item.title}> {item.title}</span>
+                    </div>
+                  }
+                >
+                  <SemanticUiPopup.Content>
+                    <div>
+                      <img
+                        className="popup-preview-image"
+                        src={previewImageUrl}
+                        alt=""
+                      />
+                    </div>
+                  </SemanticUiPopup.Content>
+                </SemanticUiPopup>
+              ) : (
+                <div className="preview-image-container">
+                  <Icon
+                    name={getContentIcon(item['@type'], item.is_folderish)}
+                    size="20px"
+                    className="icon-margin"
+                    color="#878f93"
+                    title={item['Type'] || item['@type']}
+                  />
+                  <span title={item.title}> {item.title}</span>
+                </div>
+              )}
             </div>
             {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
@@ -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 {