From 601cc1f92c433cce517684940c0ce448286bf928 Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Mon, 17 Apr 2023 13:50:13 +1200
Subject: [PATCH] help(ui): Basic responsive updates to demonstrate

Made some basic responsive changes to demonstrate how to go about making changes.

There are a bunch of problems not addressed yet. Like dealing with the resizeable component and etc.
---
 invokeai/frontend/web/src/app/App.tsx         |  7 ++-
 .../gallery/components/ImageGalleryPanel.tsx  |  9 ++++
 .../src/features/ui/components/InvokeTabs.tsx |  4 +-
 .../features/ui/components/InvokeWorkarea.tsx | 26 ++++++---
 .../ui/components/ParametersPanel.tsx         | 54 +++++++++++++------
 5 files changed, 75 insertions(+), 25 deletions(-)

diff --git a/invokeai/frontend/web/src/app/App.tsx b/invokeai/frontend/web/src/app/App.tsx
index 40c15b38c0..c57a529654 100644
--- a/invokeai/frontend/web/src/app/App.tsx
+++ b/invokeai/frontend/web/src/app/App.tsx
@@ -41,7 +41,12 @@ const App = (props: PropsWithChildren) => {
           h={APP_HEIGHT}
         >
           {props.children || <SiteHeader />}
-          <Flex gap={4} w="full" h="full">
+          <Flex
+            gap={4}
+            w="full"
+            h="full"
+            flexDir={{ base: 'column', xl: 'row' }}
+          >
             <InvokeTabs />
             <ImageGalleryPanel />
           </Flex>
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryPanel.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryPanel.tsx
index da97dea9bf..d1c38c4bf6 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryPanel.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryPanel.tsx
@@ -26,6 +26,7 @@ import {
 import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
 import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
 import { lightboxSelector } from 'features/lightbox/store/lightboxSelectors';
+import useResolution from 'common/hooks/useResolution';
 
 const GALLERY_TAB_WIDTHS: Record<
   InvokeTabName,
@@ -96,6 +97,8 @@ export default function ImageGalleryPanel() {
     shouldPinGallery && dispatch(requestCanvasRescale());
   };
 
+  const resolution = useResolution();
+
   useHotkeys(
     'g',
     () => {
@@ -178,6 +181,11 @@ export default function ImageGalleryPanel() {
     [galleryImageMinimumWidth]
   );
 
+  const calcGalleryMinHeight = () => {
+    if (resolution == 'desktop') return;
+    return 600;
+  };
+
   return (
     <ResizableDrawer
       direction="right"
@@ -195,6 +203,7 @@ export default function ImageGalleryPanel() {
           ? GALLERY_TAB_WIDTHS[activeTabName].galleryMaxWidth
           : undefined
       }
+      minHeight={calcGalleryMinHeight()}
     >
       <ImageGalleryContent />
     </ResizableDrawer>
diff --git a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
index 18db74791b..594ec3d6c4 100644
--- a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
@@ -174,8 +174,10 @@ export default function InvokeTabs() {
         dispatch(setActiveTab(index));
       }}
       flexGrow={1}
+      flexDir={{ base: 'column', xl: 'row' }}
+      gap={{ base: 4 }}
     >
-      <TabList>{tabs}</TabList>
+      <TabList flexDir={{ base: 'row', xl: 'column' }}>{tabs}</TabList>
       <TabPanels>{tabPanels}</TabPanels>
     </Tabs>
   );
diff --git a/invokeai/frontend/web/src/features/ui/components/InvokeWorkarea.tsx b/invokeai/frontend/web/src/features/ui/components/InvokeWorkarea.tsx
index ea4cd5ba1a..218c708bbd 100644
--- a/invokeai/frontend/web/src/features/ui/components/InvokeWorkarea.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/InvokeWorkarea.tsx
@@ -1,4 +1,4 @@
-import { Box, BoxProps, Flex } from '@chakra-ui/react';
+import { Box, BoxProps, Flex, Grid, GridItem } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import { setInitialImage } from 'features/parameters/store/generationSlice';
@@ -54,12 +54,26 @@ const InvokeWorkarea = (props: InvokeWorkareaProps) => {
   };
 
   return (
-    <Flex {...rest} pos="relative" w="full" h={APP_CONTENT_HEIGHT} gap={4}>
+    <Grid
+      {...rest}
+      gridTemplateAreas={{
+        base: `'workarea-display' 'workarea-panel'`,
+        md: `'workarea-panel workarea-display'`,
+      }}
+      gridAutoRows={{ base: 'maxcontent auto' }}
+      gridAutoColumns={{ md: 'max-content auto' }}
+      pos="relative"
+      w="full"
+      h={APP_CONTENT_HEIGHT}
+      gap={4}
+    >
       <ParametersPanel>{parametersPanelContent}</ParametersPanel>
-      <Box pos="relative" w="100%" h="100%" onDrop={handleDrop}>
-        {children}
-      </Box>
-    </Flex>
+      <GridItem gridArea="workarea-display">
+        <Box pos="relative" w="100%" h="100%" onDrop={handleDrop}>
+          {children}
+        </Box>
+      </GridItem>
+    </Grid>
   );
 };
 
diff --git a/invokeai/frontend/web/src/features/ui/components/ParametersPanel.tsx b/invokeai/frontend/web/src/features/ui/components/ParametersPanel.tsx
index 1f0bcaead3..fc27ccef4c 100644
--- a/invokeai/frontend/web/src/features/ui/components/ParametersPanel.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/ParametersPanel.tsx
@@ -19,6 +19,7 @@ import { createSelector } from '@reduxjs/toolkit';
 import { activeTabNameSelector, uiSelector } from '../store/uiSelectors';
 import { isEqual } from 'lodash';
 import { lightboxSelector } from 'features/lightbox/store/lightboxSelectors';
+import useResolution from 'common/hooks/useResolution';
 
 const parametersPanelSelector = createSelector(
   [uiSelector, activeTabNameSelector, lightboxSelector],
@@ -58,6 +59,8 @@ const ParametersPanel = ({ children }: ParametersPanelProps) => {
     dispatch(setShouldShowParametersPanel(false));
   };
 
+  const resolution = useResolution();
+
   useHotkeys(
     'o',
     () => {
@@ -88,21 +91,9 @@ const ParametersPanel = ({ children }: ParametersPanelProps) => {
     },
     []
   );
-  return (
-    <ResizableDrawer
-      direction="left"
-      isResizable={isResizable || !shouldPinParametersPanel}
-      isOpen={shouldShowParametersPanel}
-      onClose={closeParametersPanel}
-      isPinned={shouldPinParametersPanel || isLightboxOpen}
-      sx={{
-        borderColor: 'base.700',
-        p: shouldPinParametersPanel ? 0 : 4,
-        bg: 'base.900',
-      }}
-      initialWidth={PARAMETERS_PANEL_WIDTH}
-      minWidth={PARAMETERS_PANEL_WIDTH}
-    >
+
+  const parametersPanelContent = () => {
+    return (
       <Flex flexDir="column" position="relative" h="full" w="full">
         {!shouldPinParametersPanel && (
           <Flex
@@ -122,8 +113,37 @@ const ParametersPanel = ({ children }: ParametersPanelProps) => {
           />
         )}
       </Flex>
-    </ResizableDrawer>
-  );
+    );
+  };
+
+  const resizableParametersPanelContent = () => {
+    return (
+      <ResizableDrawer
+        direction="left"
+        isResizable={isResizable || !shouldPinParametersPanel}
+        isOpen={shouldShowParametersPanel}
+        onClose={closeParametersPanel}
+        isPinned={shouldPinParametersPanel || isLightboxOpen}
+        sx={{
+          borderColor: 'base.700',
+          p: shouldPinParametersPanel ? 0 : 4,
+          bg: 'base.900',
+        }}
+        initialWidth={PARAMETERS_PANEL_WIDTH}
+        minWidth={PARAMETERS_PANEL_WIDTH}
+      >
+        {parametersPanelContent()}
+      </ResizableDrawer>
+    );
+  };
+
+  const renderParametersPanel = () => {
+    if (['mobile', 'tablet'].includes(resolution))
+      return parametersPanelContent();
+    return resizableParametersPanelContent();
+  };
+
+  return resizableParametersPanelContent();
 };
 
 export default memo(ParametersPanel);