From 941d427302f6106bb1fa9c4dd66bda501d7e3976 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 23 Nov 2022 11:02:43 +1100
Subject: [PATCH] Adds single-column gallery layout

---
 .../features/gallery/components/HoverableImage.tsx  |  5 ++++-
 .../features/gallery/components/ImageGallery.tsx    | 13 +++++++++++++
 frontend/src/features/gallery/store/gallerySlice.ts |  9 +++++++++
 .../features/gallery/store/gallerySliceSelectors.ts |  7 ++++++-
 4 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/frontend/src/features/gallery/components/HoverableImage.tsx b/frontend/src/features/gallery/components/HoverableImage.tsx
index 5748b51aab..c9765ab6fc 100644
--- a/frontend/src/features/gallery/components/HoverableImage.tsx
+++ b/frontend/src/features/gallery/components/HoverableImage.tsx
@@ -52,6 +52,7 @@ const HoverableImage = memo((props: HoverableImageProps) => {
     galleryImageMinimumWidth,
     mayDeleteImage,
     isLightBoxOpen,
+    shouldUseSingleGalleryColumn,
   } = useAppSelector(hoverableImageSelector);
   const { image, isSelected } = props;
   const { url, thumbnail, uuid, metadata } = image;
@@ -171,7 +172,9 @@ const HoverableImage = memo((props: HoverableImageProps) => {
         >
           <Image
             className="hoverable-image-image"
-            objectFit={galleryImageObjectFit}
+            objectFit={
+              shouldUseSingleGalleryColumn ? 'contain' : galleryImageObjectFit
+            }
             rounded={'md'}
             src={thumbnail || url}
             loading={'lazy'}
diff --git a/frontend/src/features/gallery/components/ImageGallery.tsx b/frontend/src/features/gallery/components/ImageGallery.tsx
index 76f4abdc20..826b67a048 100644
--- a/frontend/src/features/gallery/components/ImageGallery.tsx
+++ b/frontend/src/features/gallery/components/ImageGallery.tsx
@@ -25,6 +25,7 @@ import {
   setShouldAutoSwitchToNewImages,
   setShouldHoldGalleryOpen,
   setShouldPinGallery,
+  setShouldUseSingleGalleryColumn,
 } from 'features/gallery/store/gallerySlice';
 import HoverableImage from './HoverableImage';
 import { setShouldShowGallery } from 'features/gallery/store/gallerySlice';
@@ -79,6 +80,7 @@ export default function ImageGallery() {
     isLightBoxOpen,
     isStaging,
     shouldEnableResize,
+    shouldUseSingleGalleryColumn,
   } = useAppSelector(imageGallerySelector);
 
   const { galleryMinWidth, galleryMaxWidth } = isLightBoxOpen
@@ -480,6 +482,17 @@ export default function ImageGallery() {
                       }
                     />
                   </div>
+                  <div>
+                    <IAICheckbox
+                      label="Single Column Layout"
+                      isChecked={shouldUseSingleGalleryColumn}
+                      onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                        dispatch(
+                          setShouldUseSingleGalleryColumn(e.target.checked)
+                        )
+                      }
+                    />
+                  </div>
                 </div>
               </IAIPopover>
 
diff --git a/frontend/src/features/gallery/store/gallerySlice.ts b/frontend/src/features/gallery/store/gallerySlice.ts
index 901a58e124..932c45210e 100644
--- a/frontend/src/features/gallery/store/gallerySlice.ts
+++ b/frontend/src/features/gallery/store/gallerySlice.ts
@@ -42,6 +42,7 @@ export interface GalleryState {
   };
   currentCategory: GalleryCategory;
   galleryWidth: number;
+  shouldUseSingleGalleryColumn: boolean;
 }
 
 const initialState: GalleryState = {
@@ -69,6 +70,7 @@ const initialState: GalleryState = {
     },
   },
   galleryWidth: 300,
+  shouldUseSingleGalleryColumn: false,
 };
 
 export const gallerySlice = createSlice({
@@ -263,6 +265,12 @@ export const gallerySlice = createSlice({
     setGalleryWidth: (state, action: PayloadAction<number>) => {
       state.galleryWidth = action.payload;
     },
+    setShouldUseSingleGalleryColumn: (
+      state,
+      action: PayloadAction<boolean>
+    ) => {
+      state.shouldUseSingleGalleryColumn = action.payload;
+    },
   },
 });
 
@@ -284,6 +292,7 @@ export const {
   setShouldAutoSwitchToNewImages,
   setCurrentCategory,
   setGalleryWidth,
+  setShouldUseSingleGalleryColumn,
 } = gallerySlice.actions;
 
 export default gallerySlice.reducer;
diff --git a/frontend/src/features/gallery/store/gallerySliceSelectors.ts b/frontend/src/features/gallery/store/gallerySliceSelectors.ts
index ccb97172d6..3485a0c027 100644
--- a/frontend/src/features/gallery/store/gallerySliceSelectors.ts
+++ b/frontend/src/features/gallery/store/gallerySliceSelectors.ts
@@ -27,6 +27,7 @@ export const imageGallerySelector = createSelector(
       shouldHoldGalleryOpen,
       shouldAutoSwitchToNewImages,
       galleryWidth,
+      shouldUseSingleGalleryColumn,
     } = gallery;
 
     const { isLightBoxOpen } = options;
@@ -38,7 +39,9 @@ export const imageGallerySelector = createSelector(
       galleryScrollPosition,
       galleryImageMinimumWidth,
       galleryImageObjectFit,
-      galleryGridTemplateColumns: `repeat(auto-fill, minmax(${galleryImageMinimumWidth}px, auto))`,
+      galleryGridTemplateColumns: shouldUseSingleGalleryColumn
+        ? 'auto'
+        : `repeat(auto-fill, minmax(${galleryImageMinimumWidth}px, auto))`,
       activeTabName,
       shouldHoldGalleryOpen,
       shouldAutoSwitchToNewImages,
@@ -54,6 +57,7 @@ export const imageGallerySelector = createSelector(
         (activeTabName === 'unifiedCanvas' && shouldPinGallery)
           ? false
           : true,
+      shouldUseSingleGalleryColumn,
     };
   },
   {
@@ -80,6 +84,7 @@ export const hoverableImageSelector = createSelector(
       mayDeleteImage: system.isConnected && !system.isProcessing,
       galleryImageObjectFit: gallery.galleryImageObjectFit,
       galleryImageMinimumWidth: gallery.galleryImageMinimumWidth,
+      shouldUseSingleGalleryColumn: gallery.shouldUseSingleGalleryColumn,
       activeTabName,
       isLightBoxOpen: options.isLightBoxOpen,
     };