feat(ui): make jump to page a popover

Author: Mary Hipp

invokeai/frontend/web/public/locales/en.json

@@ -381,7 +381,9 @@
         "featuresWillReset": "If you delete this image, those features will immediately be reset.",
         "galleryImageSize": "Image Size",
         "gallerySettings": "Gallery Settings",
+        "go": "Go",
         "image": "image",
+        "jump": "Jump",
         "loading": "Loading",
         "loadMore": "Load More",
         "newestFirst": "Newest First",

invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryPagination.tsx

@@ -1,8 +1,10 @@
-import { Button, CompositeNumberInput, Flex, Icon, IconButton, Spacer } from '@invoke-ai/ui-library';
+import { Button, Flex, Icon, IconButton } from '@invoke-ai/ui-library';
 import { ELLIPSIS, useGalleryPagination } from 'features/gallery/hooks/useGalleryPagination';
 import { useCallback } from 'react';
 import { PiCaretLeftBold, PiCaretRightBold, PiDotsThreeBold } from 'react-icons/pi';
 
+import { JumpTo } from './JumpTo';
+
 export const GalleryPagination = () => {
   const { goPrev, goNext, isPrevEnabled, isNextEnabled, pageButtons, goToPage, currentPage, total } =
     useGalleryPagination();
@@ -15,64 +17,44 @@ export const GalleryPagination = () => {
     goNext();
   }, [goNext]);
 
-  const onChangeJumpTo = useCallback(
-    (v: number) => {
-      goToPage(v - 1);
-    },
-    [goToPage]
-  );
-
   if (!total) {
     return null;
   }
 
   return (
-    <Flex justifyContent="space-between" alignItems="center" w="full">
-      <Spacer w="auto" />
-      <Flex flexGrow="1" justifyContent="center">
-        <Flex gap={1} alignItems="center">
-          <IconButton
-            size="xs"
-            aria-label="prev"
-            icon={<PiCaretLeftBold />}
-            onClick={onClickPrev}
-            isDisabled={!isPrevEnabled}
-            variant="ghost"
-          />
-          {pageButtons.map((page, i) => {
-            if (page === ELLIPSIS) {
-              return <Icon as={PiDotsThreeBold} boxSize="4" key={`ellipsis-${i}`} />;
-            }
-            return (
-              <Button
-                size="xs"
-                key={page}
-                onClick={goToPage.bind(null, page - 1)}
-                variant={currentPage === page - 1 ? 'solid' : 'outline'}
-              >
-                {page}
-              </Button>
-            );
-          })}
-          <IconButton
-            size="xs"
-            aria-label="next"
-            icon={<PiCaretRightBold />}
-            onClick={onClickNext}
-            isDisabled={!isNextEnabled}
-            variant="ghost"
-          />
-        </Flex>
-      </Flex>
-      <CompositeNumberInput
-        size="xs"
-        maxW="60px"
-        value={currentPage + 1}
-        min={1}
-        max={total}
-        step={1}
-        onChange={onChangeJumpTo}
+    <Flex justifyContent="center" alignItems="center" w="full" gap={1}>
+      <IconButton
+        size="sm"
+        aria-label="prev"
+        icon={<PiCaretLeftBold />}
+        onClick={onClickPrev}
+        isDisabled={!isPrevEnabled}
+        variant="ghost"
+      />
+      {pageButtons.map((page, i) => {
+        if (page === ELLIPSIS) {
+          return <Icon as={PiDotsThreeBold} boxSize="4" key={`ellipsis-${i}`} />;
+        }
+        return (
+          <Button
+            size="sm"
+            key={page}
+            onClick={goToPage.bind(null, page - 1)}
+            variant={currentPage === page - 1 ? 'solid' : 'outline'}
+          >
+            {page}
+          </Button>
+        );
+      })}
+      <IconButton
+        size="sm"
+        aria-label="next"
+        icon={<PiCaretRightBold />}
+        onClick={onClickNext}
+        isDisabled={!isNextEnabled}
+        variant="ghost"
       />
+      <JumpTo />
     </Flex>
   );
 };

invokeai/frontend/web/src/features/gallery/components/ImageGrid/JumpTo.tsx

@@ -0,0 +1,77 @@
+import {
+  Button,
+  CompositeNumberInput,
+  Flex,
+  FormControl,
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+  useDisclosure,
+} from '@invoke-ai/ui-library';
+import { useGalleryPagination } from 'features/gallery/hooks/useGalleryPagination';
+import { useCallback, useEffect, useState } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { useTranslation } from 'react-i18next';
+
+export const JumpTo = () => {
+  const { t } = useTranslation();
+  const { goToPage, currentPage, pages } = useGalleryPagination();
+  const [newPage, setNewPage] = useState(currentPage);
+  const { isOpen, onToggle, onClose } = useDisclosure();
+
+  const onChangeJumpTo = useCallback((v: number) => {
+    setNewPage(v - 1);
+  }, []);
+
+  const onClickGo = useCallback(() => {
+    goToPage(newPage);
+    onClose();
+  }, [newPage, goToPage, onClose]);
+
+  useHotkeys(
+    'enter',
+    () => {
+      if (isOpen) {
+        onClickGo();
+      }
+    },
+    [isOpen, onClickGo]
+  );
+
+  useEffect(() => {
+    setNewPage(currentPage);
+  }, [currentPage]);
+
+  return (
+    <Popover isOpen={isOpen} onClose={onClose}>
+      <PopoverTrigger>
+        <Button aria-label={t('gallery.jump')} size="xs" onClick={onToggle}>
+          {t('gallery.jump')}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent>
+        <PopoverArrow />
+        <PopoverBody>
+          <Flex gap={2}>
+            <FormControl>
+              <CompositeNumberInput
+                size="sm"
+                maxW="60px"
+                value={newPage + 1}
+                min={1}
+                max={pages}
+                step={1}
+                onChange={onChangeJumpTo}
+              />
+              <Button size="sm" onClick={onClickGo}>
+                {t('gallery.go')}
+              </Button>
+            </FormControl>
+          </Flex>
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  );
+};