From 30e3e12513f27fac470808a5028d421eefb43378 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 17 Apr 2024 23:12:03 +1000
Subject: [PATCH] feat(ui): layouting regional prompts

---
 .../regionalPrompts/components/BrushSize.tsx  |  2 +-
 .../components/PromptLayerOpacity.tsx         |  7 ++++---
 .../components/RegionalPromptsEditor.tsx      | 21 ++++++++-----------
 3 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/invokeai/frontend/web/src/features/regionalPrompts/components/BrushSize.tsx b/invokeai/frontend/web/src/features/regionalPrompts/components/BrushSize.tsx
index a1a4bb1cfc..d65981d0ff 100644
--- a/invokeai/frontend/web/src/features/regionalPrompts/components/BrushSize.tsx
+++ b/invokeai/frontend/web/src/features/regionalPrompts/components/BrushSize.tsx
@@ -15,7 +15,7 @@ export const BrushSize = memo(() => {
     [dispatch]
   );
   return (
-    <FormControl orientation="vertical">
+    <FormControl>
       <FormLabel>{t('regionalPrompts.brushSize')}</FormLabel>
       <CompositeSlider min={1} max={100} value={brushSize} onChange={onChange} />
       <CompositeNumberInput min={1} max={500} value={brushSize} onChange={onChange} />
diff --git a/invokeai/frontend/web/src/features/regionalPrompts/components/PromptLayerOpacity.tsx b/invokeai/frontend/web/src/features/regionalPrompts/components/PromptLayerOpacity.tsx
index 1ae4ecc524..29906fe2ee 100644
--- a/invokeai/frontend/web/src/features/regionalPrompts/components/PromptLayerOpacity.tsx
+++ b/invokeai/frontend/web/src/features/regionalPrompts/components/PromptLayerOpacity.tsx
@@ -1,4 +1,4 @@
-import { CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
+import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { promptLayerOpacityChanged } from 'features/regionalPrompts/store/regionalPromptsSlice';
 import { memo, useCallback } from 'react';
@@ -15,9 +15,10 @@ export const PromptLayerOpacity = memo(() => {
     [dispatch]
   );
   return (
-    <FormControl orientation="vertical">
-      <FormLabel>{t('regionalPrompts.brushSize')}</FormLabel>
+    <FormControl>
+      <FormLabel>Layer Opacity</FormLabel>
       <CompositeSlider min={0.25} max={1} step={0.01} value={promptLayerOpacity} onChange={onChange} />
+      <CompositeNumberInput min={0.25} max={1} step={0.01} value={promptLayerOpacity} onChange={onChange} />
     </FormControl>
   );
 });
diff --git a/invokeai/frontend/web/src/features/regionalPrompts/components/RegionalPromptsEditor.tsx b/invokeai/frontend/web/src/features/regionalPrompts/components/RegionalPromptsEditor.tsx
index 59eabb0622..72006db3a5 100644
--- a/invokeai/frontend/web/src/features/regionalPrompts/components/RegionalPromptsEditor.tsx
+++ b/invokeai/frontend/web/src/features/regionalPrompts/components/RegionalPromptsEditor.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable i18next/no-literal-string */
-import { Button, Flex } from '@invoke-ai/ui-library';
+import { Button, ButtonGroup, Flex } from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
 import { AddLayerButton } from 'features/regionalPrompts/components/AddLayerButton';
@@ -11,7 +11,6 @@ import { PromptLayerOpacity } from 'features/regionalPrompts/components/PromptLa
 import { ToolChooser } from 'features/regionalPrompts/components/ToolChooser';
 import { selectRegionalPromptsSlice } from 'features/regionalPrompts/store/regionalPromptsSlice';
 import { getRegionalPromptLayerBlobs } from 'features/regionalPrompts/util/getLayerBlobs';
-import { ImageSizeLinear } from 'features/settingsAccordions/components/ImageSettingsAccordion/ImageSizeLinear';
 import { memo } from 'react';
 
 const selectLayerIdsReversed = createMemoizedSelector(selectRegionalPromptsSlice, (regionalPrompts) =>
@@ -27,23 +26,21 @@ export const RegionalPromptsEditor = memo(() => {
   return (
     <Flex gap={4} w="full" h="full">
       <Flex flexDir="column" gap={4} flexShrink={0}>
-        <Flex>
-          <Button onClick={debugBlobs}>DEBUG</Button>
-          <AddLayerButton />
-          <DeleteAllLayersButton />
+        <Flex gap={3}>
+          <ButtonGroup isAttached={false}>
+            <Button onClick={debugBlobs}>DEBUG</Button>
+            <AddLayerButton />
+            <DeleteAllLayersButton />
+          </ButtonGroup>
+          <ToolChooser />
         </Flex>
         <BrushSize />
         <PromptLayerOpacity />
-        <ImageSizeLinear />
-        <ToolChooser />
         {layerIdsReversed.map((id) => (
           <LayerListItem key={id} id={id} />
         ))}
       </Flex>
-      <Flex>
-        <StageComponent />
-        {/* <RegionalPromptsStage /> */}
-      </Flex>
+      <StageComponent />
     </Flex>
   );
 });