feat: tooltips and actions

IQSS · Dec 18, 2024 · c9879ac · c9879ac
1 parent b7391d2
commit c9879ac
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 15 deletions.
diff --git a/public/locales/en/collectionFeaturedItems.json b/public/locales/en/collectionFeaturedItems.json
@@ -8,7 +8,10 @@
       "description": "Upload an image to display with the item, accepted extensions are png, jpg, jpeg and webp, and the maximum file size is {{maxImageSize}}.",
       "invalid": {
         "size": "The file is too large. The maximum file size is {{maxImageSize}}"
-      }
+      },
+      "restoreInitial": "Restore initial image",
+      "changeImage": "Change image",
+      "removeImage": "Remove image"
     }
   }
 }
diff --git a/...ions/collection-featured-items/featured-items-form/featured-item/FeaturedItem.module.scss b/...ions/collection-featured-items/featured-items-form/featured-item/FeaturedItem.module.scss
@@ -58,6 +58,9 @@
   }
 
   .image-wrapper {
+    position: relative;
+    display: flex;
+    justify-content: center;
     padding: 4px;
     border: solid 1px $dv-border-color;
     border-radius: 6px;
@@ -73,5 +76,16 @@
     &.hide {
       display: none;
     }
+
+    .image-actions {
+      position: absolute;
+      top: 4px;
+      right: 4px;
+      display: flex;
+      gap: 0.25rem;
+      align-items: center;
+      align-self: flex-start;
+      justify-self: flex-end;
+    }
   }
 }
diff --git a/...ns/collection-featured-items/featured-items-form/featured-item/image-field/ImageField.tsx b/...ns/collection-featured-items/featured-items-form/featured-item/image-field/ImageField.tsx
@@ -1,13 +1,11 @@
 import { useState, ChangeEvent } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Controller, UseControllerProps, useFormContext } from 'react-hook-form'
-import { Button, Col, Form, Stack } from '@iqss/dataverse-design-system'
-import { X as CloseIcon, ArrowDownUp, ArrowCounterclockwise } from 'react-bootstrap-icons'
+import { Button, Col, Form, Stack, Tooltip } from '@iqss/dataverse-design-system'
+import { ArrowDownUp, ArrowCounterclockwise, XLg } from 'react-bootstrap-icons'
 import cn from 'classnames'
 import styles from '../FeaturedItem.module.scss'
 
-// TODO:ME - Add tooltips
-
 interface ImageFieldProps {
   itemIndex: number
   initialImageUrl?: string
@@ -63,17 +61,23 @@ export const ImageField = ({ itemIndex, initialImageUrl }: ImageFieldProps) => {
   const handleClickChangeImage = () => fileInputRef?.click()
 
   const handleRemoveImage = () => {
+    formattedSelectedFile?.objectUrl && URL.revokeObjectURL(formattedSelectedFile.objectUrl)
     setFormattedSelectedFile(null)
+
     fileInputRef?.value && (fileInputRef.value = '')
+
     setValue(`featuredItems.${itemIndex}.image`, null, {
       shouldDirty: true,
       shouldValidate: true
     })
   }
 
   const handleRestoreInitialImage = () => {
+    formattedSelectedFile?.objectUrl && URL.revokeObjectURL(formattedSelectedFile.objectUrl)
     setFormattedSelectedFile(null)
+
     fileInputRef?.value && (fileInputRef.value = '')
+
     setValue(`featuredItems.${itemIndex}.image`, initialImageUrl, {
       shouldDirty: true,
       shouldValidate: true
@@ -112,9 +116,13 @@ export const ImageField = ({ itemIndex, initialImageUrl }: ImageFieldProps) => {
                   }}
                 />
                 {showFileInput && initialImageUrl && (
-                  <Button onClick={handleRestoreInitialImage} aria-label="Restore initial image">
-                    <ArrowCounterclockwise />
-                  </Button>
+                  <Tooltip placement="top" overlay={t('form.image.restoreInitial')}>
+                    <Button
+                      onClick={handleRestoreInitialImage}
+                      aria-label={t('form.image.restoreInitial')}>
+                      <ArrowCounterclockwise />
+                    </Button>
+                  </Tooltip>
                 )}
               </Stack>
               <div
@@ -125,13 +133,27 @@ export const ImageField = ({ itemIndex, initialImageUrl }: ImageFieldProps) => {
                 {isNewFileSelected && (
                   <img src={formattedSelectedFile?.objectUrl} alt="Image preview" />
                 )}
-
-                <Button type="button" onClick={handleClickChangeImage} aria-label="Change image">
-                  <ArrowDownUp />
-                </Button>
-                <Button type="button" onClick={handleRemoveImage} aria-label="Remove image">
-                  <CloseIcon />
-                </Button>
+                <div className={styles['image-actions']}>
+                  <Tooltip placement="top" overlay={t('form.image.changeImage')}>
+                    <Button
+                      type="button"
+                      size="sm"
+                      onClick={handleClickChangeImage}
+                      aria-label={t('form.image.changeImage')}>
+                      <ArrowDownUp />
+                    </Button>
+                  </Tooltip>
+
+                  <Tooltip placement="top" overlay={t('form.image.removeImage')}>
+                    <Button
+                      type="button"
+                      size="sm"
+                      onClick={handleRemoveImage}
+                      aria-label={t('form.image.removeImage')}>
+                      <XLg />
+                    </Button>
+                  </Tooltip>
+                </div>
               </div>
 
               {invalid && <div className={styles['error-msg']}>{error?.message}</div>}