feat(ui): add setting for always show image size badge

invoke-ai · Mar 12, 2024 · 43948e0 · 43948e0
1 parent cc03fcb
commit 43948e0
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 1 deletion.
diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
@@ -398,6 +398,7 @@
     },
     "gallery": {
         "allImagesLoaded": "All Images Loaded",
+        "alwaysShowImageSizeBadge": "Always Show Image Size Badge",
         "assets": "Assets",
         "autoAssignBoardOnClick": "Auto-Assign Board on Click",
         "autoSwitchNewImages": "Auto-Switch to New Images",

diff --git a/invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover.tsx b/invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover.tsx
@@ -15,6 +15,7 @@ import {
 } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import {
+  alwaysShowImageSizeBadgeChanged,
   autoAssignBoardOnClickChanged,
   setGalleryImageMinimumWidth,
   shouldAutoSwitchChanged,
@@ -36,6 +37,7 @@ const GallerySettingsPopover = () => {
   const galleryImageMinimumWidth = useAppSelector((s) => s.gallery.galleryImageMinimumWidth);
   const shouldAutoSwitch = useAppSelector((s) => s.gallery.shouldAutoSwitch);
   const autoAssignBoardOnClick = useAppSelector((s) => s.gallery.autoAssignBoardOnClick);
+  const alwaysShowImageSizeBadge = useAppSelector((s) => s.gallery.alwaysShowImageSizeBadge);
 
   const handleChangeGalleryImageMinimumWidth = useCallback(
     (v: number) => {
@@ -56,6 +58,11 @@ const GallerySettingsPopover = () => {
     [dispatch]
   );
 
+  const handleChangeAlwaysShowImageSizeBadgeChanged = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => dispatch(alwaysShowImageSizeBadgeChanged(e.target.checked)),
+    [dispatch]
+  );
+
   return (
     <Popover isLazy>
       <PopoverTrigger>
@@ -88,6 +95,10 @@ const GallerySettingsPopover = () => {
                 <FormLabel>{t('gallery.autoAssignBoardOnClick')}</FormLabel>
                 <Checkbox isChecked={autoAssignBoardOnClick} onChange={handleChangeAutoAssignBoardOnClick} />
               </FormControl>
+              <FormControl>
+                <FormLabel>{t('gallery.alwaysShowImageSizeBadge')}</FormLabel>
+                <Checkbox isChecked={alwaysShowImageSizeBadge} onChange={handleChangeAlwaysShowImageSizeBadgeChanged} />
+              </FormControl>
             </FormControlGroup>
             <BoardAutoAddSelect />
           </Flex>

diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx
@@ -44,6 +44,7 @@ const GalleryImage = (props: HoverableImageProps) => {
   const shift = useShiftModifier();
   const { t } = useTranslation();
   const selectedBoardId = useAppSelector((s) => s.gallery.selectedBoardId);
+  const alwaysShowImageSizeBadge = useAppSelector((s) => s.gallery.alwaysShowImageSizeBadge);
   const { handleClick, isSelected, areMultiplesSelected } = useMultiselect(imageDTO);
 
   const customStarUi = useStore($customStarUI);
@@ -155,7 +156,7 @@ const GalleryImage = (props: HoverableImageProps) => {
           onMouseOut={handleMouseOut}
         >
           <>
-            {isHovered && (
+            {(isHovered || alwaysShowImageSizeBadge) && (
               <Text
                 position="absolute"
                 background="base.900"

diff --git a/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts b/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts
@@ -15,6 +15,7 @@ const initialGalleryState: GalleryState = {
   autoAssignBoardOnClick: true,
   autoAddBoardId: 'none',
   galleryImageMinimumWidth: 90,
+  alwaysShowImageSizeBadge: false,
   selectedBoardId: 'none',
   galleryView: 'images',
   boardSearchText: '',
@@ -71,6 +72,9 @@ export const gallerySlice = createSlice({
         state.limit += IMAGE_LIMIT;
       }
     },
+    alwaysShowImageSizeBadgeChanged: (state, action: PayloadAction<boolean>) => {
+      state.alwaysShowImageSizeBadge = action.payload;
+    },
   },
   extraReducers: (builder) => {
     builder.addMatcher(isAnyBoardDeleted, (state, action) => {
@@ -107,6 +111,7 @@ export const {
   selectionChanged,
   boardSearchTextChanged,
   moreImagesLoaded,
+  alwaysShowImageSizeBadgeChanged,
 } = gallerySlice.actions;
 
 const isAnyBoardDeleted = isAnyOf(

diff --git a/invokeai/frontend/web/src/features/gallery/store/types.ts b/invokeai/frontend/web/src/features/gallery/store/types.ts
@@ -19,4 +19,5 @@ export type GalleryState = {
   boardSearchText: string;
   offset: number;
   limit: number;
+  alwaysShowImageSizeBadge: boolean;
 };