From 59437a02c30392ab6c0a23e9691d9d42e6db2ed7 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Thu, 11 Jan 2024 23:44:20 +1100 Subject: [PATCH] feat(ui): restore resizable prompt boxes The autosize proved to be unpopular. Changed back to resizable. --- .../components/InvAutosizeTextarea/InvAutosizeTextarea.tsx | 2 +- .../web/src/common/components/InvAutosizeTextarea/theme.ts | 0 .../web/src/common/components/InvTextarea/InvTextarea.tsx | 1 + .../parameters/components/Core/ParamNegativePrompt.tsx | 7 ++----- .../parameters/components/Core/ParamPositivePrompt.tsx | 7 +++---- .../SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx | 7 ++----- .../SDXLPrompts/ParamSDXLPositiveStylePrompt.tsx | 7 ++----- 7 files changed, 11 insertions(+), 20 deletions(-) delete mode 100644 invokeai/frontend/web/src/common/components/InvAutosizeTextarea/theme.ts diff --git a/invokeai/frontend/web/src/common/components/InvAutosizeTextarea/InvAutosizeTextarea.tsx b/invokeai/frontend/web/src/common/components/InvAutosizeTextarea/InvAutosizeTextarea.tsx index 431a901bb2..881343bf5c 100644 --- a/invokeai/frontend/web/src/common/components/InvAutosizeTextarea/InvAutosizeTextarea.tsx +++ b/invokeai/frontend/web/src/common/components/InvAutosizeTextarea/InvAutosizeTextarea.tsx @@ -24,8 +24,8 @@ export const InvAutosizeTextarea = memo( ref={ref} overflow="scroll" w="100%" - resize="none" minRows={3} + minH={20} onPaste={stopPastePropagation} onKeyUp={onKeyUpDown} onKeyDown={onKeyUpDown} diff --git a/invokeai/frontend/web/src/common/components/InvAutosizeTextarea/theme.ts b/invokeai/frontend/web/src/common/components/InvAutosizeTextarea/theme.ts deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/invokeai/frontend/web/src/common/components/InvTextarea/InvTextarea.tsx b/invokeai/frontend/web/src/common/components/InvTextarea/InvTextarea.tsx index 050c5aa515..ff42fe9093 100644 --- a/invokeai/frontend/web/src/common/components/InvTextarea/InvTextarea.tsx +++ b/invokeai/frontend/web/src/common/components/InvTextarea/InvTextarea.tsx @@ -23,6 +23,7 @@ export const InvTextarea = memo( onPaste={stopPastePropagation} onKeyUp={onKeyUpDown} onKeyDown={onKeyUpDown} + minH={20} {...rest} /> ); diff --git a/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx b/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx index b231d1173d..5b768d5ee0 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx @@ -1,6 +1,6 @@ import { Box } from '@chakra-ui/layout'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { InvAutosizeTextarea } from 'common/components/InvAutosizeTextarea/InvAutosizeTextarea'; +import { InvTextarea } from 'common/components/InvTextarea/InvTextarea'; import { AddEmbeddingButton } from 'features/embedding/AddEmbeddingButton'; import { EmbeddingPopover } from 'features/embedding/EmbeddingPopover'; import { usePrompt } from 'features/embedding/usePrompt'; @@ -35,7 +35,7 @@ export const ParamNegativePrompt = memo(() => { width={textareaRef.current?.clientWidth} > - { placeholder={t('parameters.negativePromptPlaceholder')} onChange={onChange} onKeyDown={onKeyDown} - minH="unset" fontSize="sm" - minRows={2} - maxRows={5} variant="darkFilled" /> diff --git a/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx b/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx index efe8fb6fad..e6e0aa3bb7 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx @@ -1,6 +1,6 @@ import { Box } from '@chakra-ui/layout'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { InvAutosizeTextarea } from 'common/components/InvAutosizeTextarea/InvAutosizeTextarea'; +import { InvTextarea } from 'common/components/InvTextarea/InvTextarea'; import { ShowDynamicPromptsPreviewButton } from 'features/dynamicPrompts/components/ShowDynamicPromptsPreviewButton'; import { AddEmbeddingButton } from 'features/embedding/AddEmbeddingButton'; import { EmbeddingPopover } from 'features/embedding/EmbeddingPopover'; @@ -58,16 +58,15 @@ export const ParamPositivePrompt = memo(() => { width={textareaRef.current?.clientWidth} > - diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx index a6f9f07312..240dfb926c 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx @@ -1,6 +1,6 @@ import { Box } from '@chakra-ui/layout'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { InvAutosizeTextarea } from 'common/components/InvAutosizeTextarea/InvAutosizeTextarea'; +import { InvTextarea } from 'common/components/InvTextarea/InvTextarea'; import { AddEmbeddingButton } from 'features/embedding/AddEmbeddingButton'; import { EmbeddingPopover } from 'features/embedding/EmbeddingPopover'; import { usePrompt } from 'features/embedding/usePrompt'; @@ -45,7 +45,7 @@ export const ParamSDXLNegativeStylePrompt = memo(() => { width={textareaRef.current?.clientWidth} > - { placeholder={t('sdxl.negStylePrompt')} onChange={onChange} onKeyDown={onKeyDown} - minH="unset" fontSize="sm" - minRows={2} - maxRows={5} variant="darkFilled" /> diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLPositiveStylePrompt.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLPositiveStylePrompt.tsx index 5ee3862e6c..55fbe3fc99 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLPositiveStylePrompt.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLPositiveStylePrompt.tsx @@ -1,6 +1,6 @@ import { Box } from '@chakra-ui/layout'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { InvAutosizeTextarea } from 'common/components/InvAutosizeTextarea/InvAutosizeTextarea'; +import { InvTextarea } from 'common/components/InvTextarea/InvTextarea'; import { AddEmbeddingButton } from 'features/embedding/AddEmbeddingButton'; import { EmbeddingPopover } from 'features/embedding/EmbeddingPopover'; import { usePrompt } from 'features/embedding/usePrompt'; @@ -35,7 +35,7 @@ export const ParamSDXLPositiveStylePrompt = memo(() => { width={textareaRef.current?.clientWidth} > - { placeholder={t('sdxl.posStylePrompt')} onChange={onChange} onKeyDown={onKeyDown} - minH="unset" fontSize="sm" - minRows={2} - maxRows={5} variant="darkFilled" />