Fixes #308 Show tooltip when hover item

packages/aesirx-dam-app/src/components/MoveToFolder/index.jsx

@@ -95,7 +95,6 @@ const MoveToFolder = observer(({ current = 0 }) => {
       <div className={`w-100 ${styles.list}`}>
         {collections.map((collection, index) => {
           if (+collection?.parent_id === (currentCollection.id ? +currentCollection.id : 0)) {
-            console.log(collection, 'tesst');
             return (
               collection?.name && (
                 <OverlayTrigger

packages/aesirx-dam-app/src/components/Table/Thumb.jsx

@@ -12,6 +12,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSquareCheck } from '@fortawesome/free-solid-svg-icons';
 import { observer } from 'mobx-react';
 import styles from './table.module.scss';
+import { useTranslation } from 'react-i18next';
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
 export const DND_ITEM_TYPE = 'thumb';
 let timer = 0;
 let delay = 200;
@@ -210,67 +212,26 @@ const Thumb = observer(
     }, []);
 
     drag(drop(ref));
+    const { t } = useTranslation();
+    const tooltip = (
+      <Tooltip id={`tooltip-${row.original.id}`}>
+        <p className="mb-0 fs-12">{t('double_click_to_edit')}</p>
+        <p className="mb-0 fs-12">{t('right-click_to_get_a_list_of_actions')}</p>
+      </Tooltip>
+    );
 
     return isList ? (
-      <tr
-        key={row.getRowProps().key}
-        {...row.getRowProps()}
-        className={`position-relative item_thumb cursor-move ${
-          isOver ? 'border border-success bg-success-05' : 'border-none'
-        } ${className}`}
-        onDoubleClick={() => {
-          clearTimeout(timer);
-          prevent = true;
-          onDoubleClick(row.original);
-        }}
-        onClick={(e) => {
-          timer = setTimeout(function () {
-            if (!prevent) {
-              onSelect(e);
-            }
-            prevent = false;
-          }, delay);
-        }}
-        onContextMenu={(e) => {
-          onRightClickItem(e, { ...row.original, index });
-        }}
-        style={{ opacity }}
-        type={type}
-        ref={ref}
-      >
-        {newRowCells.map((cell, _index) => {
-          if (cell.column.id === 'selection') {
-            return (
-              <td key={_index} {...cell.getCellProps()} style={{ width: 64 }}>
-                <IndeterminateCheckbox index={index} />
-              </td>
-            );
-          } else {
-            return (
-              <td key={_index} {...cell.getCellProps()} className="fw-normal px-2 py-3">
-                {cell.render('Cell')}
-                <FakeThumb id={+row.original.id} index={index} isList={true} />
-              </td>
-            );
-          }
-        })}
-      </tr>
-    ) : (
-      <div style={{ opacity }} className={className}>
-        <div
-          className={`${
-            isOver ? 'border-success bg-success-05' : 'bg-white border-thumb'
-          } position-relative item_thumb d-flex border-1  cursor-move align-items-center justify-content-center shadow-sm h-100 rounded-2 overflow-hidden flex-column `}
-          onContextMenu={(e) => {
-            onRightClickItem(e, { ...row.original, index });
-          }}
-          ref={ref}
+      <OverlayTrigger placement="top" overlay={tooltip}>
+        <tr
+          key={row.getRowProps().key}
+          {...row.getRowProps()}
+          className={`position-relative item_thumb cursor-move ${
+            isOver ? 'border border-success bg-success-05' : 'border-none'
+          } ${className}`}
           onDoubleClick={() => {
             clearTimeout(timer);
             prevent = true;
-            if (!isEditCollection) {
-              onDoubleClick(row.original);
-            }
+            onDoubleClick(row.original);
           }}
           onClick={(e) => {
             timer = setTimeout(function () {
@@ -280,12 +241,64 @@ const Thumb = observer(
               prevent = false;
             }, delay);
           }}
+          onContextMenu={(e) => {
+            onRightClickItem(e, { ...row.original, index });
+          }}
+          style={{ opacity }}
           type={type}
+          ref={ref}
         >
-          <ThumbContainer newRowCells={newRowCells} />
-          <FakeThumb id={+row.original.id} />
+          {newRowCells.map((cell, _index) => {
+            if (cell.column.id === 'selection') {
+              return (
+                <td key={_index} {...cell.getCellProps()} style={{ width: 64 }}>
+                  <IndeterminateCheckbox index={index} />
+                </td>
+              );
+            } else {
+              return (
+                <td key={_index} {...cell.getCellProps()} className="fw-normal px-2 py-3">
+                  {cell.render('Cell')}
+                  <FakeThumb id={+row.original.id} index={index} isList={true} />
+                </td>
+              );
+            }
+          })}
+        </tr>
+      </OverlayTrigger>
+    ) : (
+      <OverlayTrigger placement="top" overlay={tooltip}>
+        <div style={{ opacity }} className={className}>
+          <div
+            className={`${
+              isOver ? 'border-success bg-success-05' : 'bg-white border-thumb'
+            } position-relative item_thumb d-flex border-1  cursor-move align-items-center justify-content-center shadow-sm h-100 rounded-2 overflow-hidden flex-column `}
+            onContextMenu={(e) => {
+              onRightClickItem(e, { ...row.original, index });
+            }}
+            ref={ref}
+            onDoubleClick={() => {
+              clearTimeout(timer);
+              prevent = true;
+              if (!isEditCollection) {
+                onDoubleClick(row.original);
+              }
+            }}
+            onClick={(e) => {
+              timer = setTimeout(function () {
+                if (!prevent) {
+                  onSelect(e);
+                }
+                prevent = false;
+              }, delay);
+            }}
+            type={type}
+          >
+            <ThumbContainer newRowCells={newRowCells} />
+            <FakeThumb id={+row.original.id} />
+          </div>
         </div>
-      </div>
+      </OverlayTrigger>
     );
   }
 );

packages/aesirx-dam-app/src/containers/Homepage/index.scss

@@ -49,19 +49,18 @@
       display: none !important;
     }
   }
-}
-
- #contextMenuItem {
-  > div:not(:last-child) {
-    svg {
-      path {
-        fill: $gray-900;
+  #contextMenuItem {
+    > div:not(:last-child) {
+      svg {
+        path {
+          fill: $gray-900;
+        }
       }
-    }
-    .stroke-dark {
-      path {
-        stroke: $gray-900;
-        fill: transparent;
+      .stroke-dark {
+        path {
+          stroke: $gray-900;
+          fill: transparent;
+        }
       }
     }
   }

packages/aesirx-dam-app/src/translations/dk/common.json

@@ -87,5 +87,7 @@
   "txt_description" : "Beskrivelse",
   "maximum_upload_size": "Maksimal uploadstørrelse: 10,00 MB",
   "txt_keywords": "Søgeord",
-  "txt_tags" : "Tags"
+  "txt_tags" : "Tags",
+  "double_click_to_edit" : "Dobbeltklik for at redigere",
+  "right-click_to_get_a_list_of_actions" : "Højreklik for at få en liste over handlinger"
 }

packages/aesirx-dam-app/src/translations/en/common.json

@@ -88,5 +88,7 @@
   "txt_description" : "Description",
   "maximum_upload_size": "Maximum upload size: 10.00 MB",
   "txt_keywords": "Keywords",
-  "txt_tags" : "Tags"
+  "txt_tags" : "Tags",
+  "double_click_to_edit" : "Double click to edit",
+  "right-click_to_get_a_list_of_actions" : "Right click to get a list of actions"
 }

packages/aesirx-dam-app/src/translations/es/common.json

@@ -83,5 +83,7 @@
   "txt_description": "Descripción",
   "maximum_upload_size": "Tamaño máximo de carga: 10,00 MB",
   "txt_keywords": "Palabras clave",
-  "txt_tags": "Etiquetas"
+  "txt_tags": "Etiquetas",
+  "double_click_to_edit": "Doble clic para editar",
+  "right-click_to_get_a_list_of_actions": "Haz clic derecho para obtener una lista de acciones"
 }

packages/aesirx-dam-app/src/translations/fr/common.json

@@ -83,5 +83,7 @@
   "txt_description" : "Description",
   "maximum_upload_size": "Taille maximale de téléchargement : 10,00 Mo",
   "txt_keywords": "Mots clés",
-  "txt_tags" : "Balises"
+  "txt_tags" : "Balises",
+  "double_click_to_edit" : "Double-cliquez pour éditer",
+  "right-click_to_get_a_list_of_actions" : "Cliquez avec le bouton droit pour obtenir une liste d'actions"
 }

packages/aesirx-dam-app/src/translations/hr/common.json

@@ -83,5 +83,7 @@
   "txt_description" : "Opis",
   "maximum_upload_size": "Maksimalna veličina za prijenos: 10,00 MB",
   "txt_keywords": "Ključne riječi",
-  "txt_tags" : "Oznake"
+  "txt_tags" : "Oznake",
+  "double_click_to_edit" : "Dvaput kliknite za uređivanje",
+  "right-click_to_get_a_list_of_actions" : "Desni klik za dobivanje popisa radnji"
 }

packages/aesirx-dam-app/src/translations/th/common.json

@@ -84,5 +84,7 @@
   "txt_description" : "คำอธิบาย",
   "maximum_upload_size": "ขนาดอัพโหลดสูงสุด: 10.00 MB",
   "txt_keywords": "คำหลัก",
-  "txt_tags" : "แท็ก"
+  "txt_tags" : "แท็ก",
+  "double_click_to_edit": "ดับเบิลคลิกเพื่อแก้ไข",
+  "right-click_to_get_a_list_of_actions": "คลิกขวาเพื่อดูรายการการกระทำ"
 }

packages/aesirx-dam-app/src/translations/ua/common.json

@@ -84,5 +84,7 @@
   "txt_description" : "Опис",
   "maximum_upload_size": "Максимальний розмір завантаження: 10,00 МБ",
   "txt_keywords": "Ключові слова",
-  "txt_tags" : "Теги"
+  "txt_tags" : "Теги",
+  "double_click_to_edit" : "Двічі клацніть, щоб редагувати",
+  "right-click_to_get_a_list_of_actions" : "Клацніть правою кнопкою миші, щоб отримати список дій"
 }

packages/aesirx-dam-app/src/translations/vi/common.json

@@ -84,5 +84,7 @@
   "txt_description" : "Mô tả",
   "maximum_upload_size": "Kích thước tải lên tối đa: 10,00 MB",
   "txt_keywords": "Từ khóa",
-  "txt_tags" : "Thẻ"
+  "txt_tags" : "Thẻ",
+  "double_click_to_edit" : "Nhấp đúp để chỉnh sửa",
+  "right-click_to_get_a_list_of_actions" : "Nhấp chuột phải để xem danh sách hành động"
 }