feat(context menu): ✨ condense top row of image context menu

invoke-ai · Oct 2, 2024 · 9b90834 · 9b90834
1 parent a8957aa
commit 9b90834
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 33 deletions.
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemCopy.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemCopy.tsx
@@ -1,4 +1,4 @@
-import { MenuItem } from '@invoke-ai/ui-library';
+import { IconButton } from '@invoke-ai/ui-library';
 import { useCopyImageToClipboard } from 'common/hooks/useCopyImageToClipboard';
 import { useImageDTOContext } from 'features/gallery/contexts/ImageDTOContext';
 import { memo, useCallback } from 'react';
@@ -19,9 +19,14 @@ export const ImageMenuItemCopy = memo(() => {
   }
 
   return (
-    <MenuItem icon={<PiCopyBold />} onClickCapture={onClick}>
-      {t('parameters.copyImage')}
-    </MenuItem>
+    <IconButton
+      icon={<PiCopyBold />}
+      aria-label={t('parameters.copyImage')}
+      tooltip={t('parameters.copyImage')}
+      onClickCapture={onClick}
+      variant="ghost"
+      colorScheme="base"
+    />
   );
 });
 

diff --git a/...eai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemDelete.tsx b/...eai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemDelete.tsx
@@ -1,4 +1,4 @@
-import { MenuItem } from '@invoke-ai/ui-library';
+import { IconButton } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { imagesToDeleteSelected } from 'features/deleteImageModal/store/slice';
 import { useImageDTOContext } from 'features/gallery/contexts/ImageDTOContext';
@@ -16,9 +16,14 @@ export const ImageMenuItemDelete = memo(() => {
   }, [dispatch, imageDTO]);
 
   return (
-    <MenuItem isDestructive icon={<PiTrashSimpleBold />} onClickCapture={onClick}>
-      {t('gallery.deleteImage', { count: 1 })}
-    </MenuItem>
+    <IconButton
+      icon={<PiTrashSimpleBold />}
+      onClickCapture={onClick}
+      aria-label={t('gallery.deleteImage', { count: 1 })}
+      tooltip={t('gallery.deleteImage', { count: 1 })}
+      variant="ghost"
+      colorScheme="red"
+    />
   );
 });
 

diff --git a/...i/frontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemDownload.tsx b/...i/frontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemDownload.tsx
@@ -1,4 +1,4 @@
-import { MenuItem } from '@invoke-ai/ui-library';
+import { IconButton } from '@invoke-ai/ui-library';
 import { useDownloadImage } from 'common/hooks/useDownloadImage';
 import { useImageDTOContext } from 'features/gallery/contexts/ImageDTOContext';
 import { memo, useCallback } from 'react';
@@ -15,9 +15,14 @@ export const ImageMenuItemDownload = memo(() => {
   }, [downloadImage, imageDTO.image_name, imageDTO.image_url]);
 
   return (
-    <MenuItem icon={<PiDownloadSimpleBold />} onClickCapture={onClick}>
-      {t('parameters.downloadImage')}
-    </MenuItem>
+    <IconButton
+      icon={<PiDownloadSimpleBold />}
+      aria-label={t('parameters.downloadImage')}
+      tooltip={t('parameters.downloadImage')}
+      variant="ghost"
+      colorScheme="base"
+      onClick={onClick}
+    />
   );
 });
 

diff --git a/...ontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemOpenInNewTab.tsx b/...ontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemOpenInNewTab.tsx
@@ -1,17 +1,25 @@
-import { MenuItem } from '@invoke-ai/ui-library';
+import { IconButton } from '@invoke-ai/ui-library';
 import { useImageDTOContext } from 'features/gallery/contexts/ImageDTOContext';
-import { memo } from 'react';
+import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiArrowSquareOutBold } from 'react-icons/pi';
 
 export const ImageMenuItemOpenInNewTab = memo(() => {
   const { t } = useTranslation();
   const imageDTO = useImageDTOContext();
+  const onClick = useCallback(() => {
+    window.open(imageDTO.image_url, '_blank');
+  }, [imageDTO.image_url]);
 
   return (
-    <MenuItem as="a" href={imageDTO.image_url} target="_blank" icon={<PiArrowSquareOutBold />}>
-      {t('common.openInNewTab')}
-    </MenuItem>
+    <IconButton
+      onClickCapture={onClick}
+      aria-label={t('common.openInNewTab')}
+      tooltip={t('common.openInNewTab')}
+      icon={<PiArrowSquareOutBold />}
+      variant="ghost"
+      colorScheme="base"
+    />
   );
 });
 

diff --git a/...ontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemOpenInViewer.tsx b/...ontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemOpenInViewer.tsx
@@ -1,4 +1,4 @@
-import { MenuItem } from '@invoke-ai/ui-library';
+import { IconButton } from '@invoke-ai/ui-library';
 import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
 import { useImageDTOContext } from 'features/gallery/contexts/ImageDTOContext';
 import { memo, useCallback } from 'react';
@@ -14,9 +14,14 @@ export const ImageMenuItemOpenInViewer = memo(() => {
   }, [imageDTO, imageViewer]);
 
   return (
-    <MenuItem icon={<PiArrowsOutBold />} onClick={onClick}>
-      {t('gallery.openInViewer')}
-    </MenuItem>
+    <IconButton
+      icon={<PiArrowsOutBold />}
+      onClick={onClick}
+      aria-label={t('common.openInViewer')}
+      tooltip={t('common.openInViewer')}
+      variant="ghost"
+      colorScheme="base"
+    />
   );
 });
 

diff --git a/...nd/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemSelectForCompare.tsx b/...nd/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemSelectForCompare.tsx
@@ -1,4 +1,4 @@
-import { MenuItem } from '@invoke-ai/ui-library';
+import { IconButton } from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useImageDTOContext } from 'features/gallery/contexts/ImageDTOContext';
@@ -22,9 +22,15 @@ export const ImageMenuItemSelectForCompare = memo(() => {
   }, [dispatch, imageDTO]);
 
   return (
-    <MenuItem icon={<PiImagesBold />} isDisabled={!maySelectForCompare} onClick={onClick}>
-      {t('gallery.selectForCompare')}
-    </MenuItem>
+    <IconButton
+      icon={<PiImagesBold />}
+      isDisabled={!maySelectForCompare}
+      onClick={onClick}
+      aria-label={t('gallery.selectForCompare')}
+      tooltip={t('gallery.selectForCompare')}
+      variant="ghost"
+      colorScheme="base"
+    />
   );
 });
 

diff --git a/...rontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx b/...rontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx
@@ -1,4 +1,4 @@
-import { MenuDivider } from '@invoke-ai/ui-library';
+import { Flex, MenuDivider } from '@invoke-ai/ui-library';
 import { ImageMenuItemChangeBoard } from 'features/gallery/components/ImageContextMenu/ImageMenuItemChangeBoard';
 import { ImageMenuItemCopy } from 'features/gallery/components/ImageContextMenu/ImageMenuItemCopy';
 import { ImageMenuItemDelete } from 'features/gallery/components/ImageContextMenu/ImageMenuItemDelete';
@@ -23,11 +23,14 @@ type SingleSelectionMenuItemsProps = {
 const SingleSelectionMenuItems = ({ imageDTO }: SingleSelectionMenuItemsProps) => {
   return (
     <ImageDTOContextProvider value={imageDTO}>
-      <ImageMenuItemOpenInNewTab />
-      <ImageMenuItemCopy />
-      <ImageMenuItemDownload />
-      <ImageMenuItemOpenInViewer />
-      <ImageMenuItemSelectForCompare />
+      <Flex gap={2}>
+        <ImageMenuItemOpenInNewTab />
+        <ImageMenuItemCopy />
+        <ImageMenuItemDownload />
+        <ImageMenuItemOpenInViewer />
+        <ImageMenuItemSelectForCompare />
+        <ImageMenuItemDelete />
+      </Flex>
       <MenuDivider />
       <ImageMenuItemLoadWorkflow />
       <ImageMenuItemMetadataRecallActions />
@@ -38,8 +41,6 @@ const SingleSelectionMenuItems = ({ imageDTO }: SingleSelectionMenuItemsProps) =
       <MenuDivider />
       <ImageMenuItemChangeBoard />
       <ImageMenuItemStarUnstar />
-      <MenuDivider />
-      <ImageMenuItemDelete />
     </ImageDTOContextProvider>
   );
 };