Show preview image in folder contents view on title hover

plone · Dec 19, 2024 · 9ee3695 · 9ee3695
1 parent 09b88e6
commit 9ee3695
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 9 deletions.
diff --git a/packages/volto/news/6550.feature b/packages/volto/news/6550.feature
@@ -0,0 +1 @@
+Show preview image in folder contents view on title hover @iRohitSingh
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';
@@ -156,14 +162,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={`${item['@id']}/@@images/image`}
+                        alt=""
+                      />{' '}
+                      <span title={item.title}> {item.title}</span>
+                    </div>
+                  }
+                >
+                  <SemanticUiPopup.Content>
+                    <div>
+                      <img
+                        className="popup-preview-image"
+                        src={`${item['@id']}/@@images/image`}
+                        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() <
@@ -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
@@ -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 {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Show preview image in folder contents view on title hover @iRohitSingh