feat(ui): restore resizable prompt boxes

The autosize proved to be unpopular. Changed back to resizable.
This commit is contained in:
psychedelicious
2024-01-11 23:44:20 +11:00
parent 98a44d7fa1
commit 59437a02c3
7 changed files with 11 additions and 20 deletions

View File

@ -24,8 +24,8 @@ export const InvAutosizeTextarea = memo(
ref={ref} ref={ref}
overflow="scroll" overflow="scroll"
w="100%" w="100%"
resize="none"
minRows={3} minRows={3}
minH={20}
onPaste={stopPastePropagation} onPaste={stopPastePropagation}
onKeyUp={onKeyUpDown} onKeyUp={onKeyUpDown}
onKeyDown={onKeyUpDown} onKeyDown={onKeyUpDown}

View File

@ -23,6 +23,7 @@ export const InvTextarea = memo(
onPaste={stopPastePropagation} onPaste={stopPastePropagation}
onKeyUp={onKeyUpDown} onKeyUp={onKeyUpDown}
onKeyDown={onKeyUpDown} onKeyDown={onKeyUpDown}
minH={20}
{...rest} {...rest}
/> />
); );

View File

@ -1,6 +1,6 @@
import { Box } from '@chakra-ui/layout'; import { Box } from '@chakra-ui/layout';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; 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 { AddEmbeddingButton } from 'features/embedding/AddEmbeddingButton';
import { EmbeddingPopover } from 'features/embedding/EmbeddingPopover'; import { EmbeddingPopover } from 'features/embedding/EmbeddingPopover';
import { usePrompt } from 'features/embedding/usePrompt'; import { usePrompt } from 'features/embedding/usePrompt';
@ -35,7 +35,7 @@ export const ParamNegativePrompt = memo(() => {
width={textareaRef.current?.clientWidth} width={textareaRef.current?.clientWidth}
> >
<Box pos="relative"> <Box pos="relative">
<InvAutosizeTextarea <InvTextarea
id="negativePrompt" id="negativePrompt"
name="negativePrompt" name="negativePrompt"
ref={textareaRef} ref={textareaRef}
@ -43,10 +43,7 @@ export const ParamNegativePrompt = memo(() => {
placeholder={t('parameters.negativePromptPlaceholder')} placeholder={t('parameters.negativePromptPlaceholder')}
onChange={onChange} onChange={onChange}
onKeyDown={onKeyDown} onKeyDown={onKeyDown}
minH="unset"
fontSize="sm" fontSize="sm"
minRows={2}
maxRows={5}
variant="darkFilled" variant="darkFilled"
/> />
<PromptOverlayButtonWrapper> <PromptOverlayButtonWrapper>

View File

@ -1,6 +1,6 @@
import { Box } from '@chakra-ui/layout'; import { Box } from '@chakra-ui/layout';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; 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 { ShowDynamicPromptsPreviewButton } from 'features/dynamicPrompts/components/ShowDynamicPromptsPreviewButton';
import { AddEmbeddingButton } from 'features/embedding/AddEmbeddingButton'; import { AddEmbeddingButton } from 'features/embedding/AddEmbeddingButton';
import { EmbeddingPopover } from 'features/embedding/EmbeddingPopover'; import { EmbeddingPopover } from 'features/embedding/EmbeddingPopover';
@ -58,16 +58,15 @@ export const ParamPositivePrompt = memo(() => {
width={textareaRef.current?.clientWidth} width={textareaRef.current?.clientWidth}
> >
<Box pos="relative"> <Box pos="relative">
<InvAutosizeTextarea <InvTextarea
id="prompt" id="prompt"
name="prompt" name="prompt"
ref={textareaRef} ref={textareaRef}
value={prompt} value={prompt}
placeholder={t('parameters.positivePromptPlaceholder')} placeholder={t('parameters.positivePromptPlaceholder')}
onChange={onChange} onChange={onChange}
minH={28}
onKeyDown={onKeyDown} onKeyDown={onKeyDown}
minRows={4}
maxRows={7}
variant="darkFilled" variant="darkFilled"
/> />
<PromptOverlayButtonWrapper> <PromptOverlayButtonWrapper>

View File

@ -1,6 +1,6 @@
import { Box } from '@chakra-ui/layout'; import { Box } from '@chakra-ui/layout';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; 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 { AddEmbeddingButton } from 'features/embedding/AddEmbeddingButton';
import { EmbeddingPopover } from 'features/embedding/EmbeddingPopover'; import { EmbeddingPopover } from 'features/embedding/EmbeddingPopover';
import { usePrompt } from 'features/embedding/usePrompt'; import { usePrompt } from 'features/embedding/usePrompt';
@ -45,7 +45,7 @@ export const ParamSDXLNegativeStylePrompt = memo(() => {
width={textareaRef.current?.clientWidth} width={textareaRef.current?.clientWidth}
> >
<Box pos="relative"> <Box pos="relative">
<InvAutosizeTextarea <InvTextarea
id="prompt" id="prompt"
name="prompt" name="prompt"
ref={textareaRef} ref={textareaRef}
@ -53,10 +53,7 @@ export const ParamSDXLNegativeStylePrompt = memo(() => {
placeholder={t('sdxl.negStylePrompt')} placeholder={t('sdxl.negStylePrompt')}
onChange={onChange} onChange={onChange}
onKeyDown={onKeyDown} onKeyDown={onKeyDown}
minH="unset"
fontSize="sm" fontSize="sm"
minRows={2}
maxRows={5}
variant="darkFilled" variant="darkFilled"
/> />
<PromptOverlayButtonWrapper> <PromptOverlayButtonWrapper>

View File

@ -1,6 +1,6 @@
import { Box } from '@chakra-ui/layout'; import { Box } from '@chakra-ui/layout';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; 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 { AddEmbeddingButton } from 'features/embedding/AddEmbeddingButton';
import { EmbeddingPopover } from 'features/embedding/EmbeddingPopover'; import { EmbeddingPopover } from 'features/embedding/EmbeddingPopover';
import { usePrompt } from 'features/embedding/usePrompt'; import { usePrompt } from 'features/embedding/usePrompt';
@ -35,7 +35,7 @@ export const ParamSDXLPositiveStylePrompt = memo(() => {
width={textareaRef.current?.clientWidth} width={textareaRef.current?.clientWidth}
> >
<Box pos="relative"> <Box pos="relative">
<InvAutosizeTextarea <InvTextarea
id="prompt" id="prompt"
name="prompt" name="prompt"
ref={textareaRef} ref={textareaRef}
@ -43,10 +43,7 @@ export const ParamSDXLPositiveStylePrompt = memo(() => {
placeholder={t('sdxl.posStylePrompt')} placeholder={t('sdxl.posStylePrompt')}
onChange={onChange} onChange={onChange}
onKeyDown={onKeyDown} onKeyDown={onKeyDown}
minH="unset"
fontSize="sm" fontSize="sm"
minRows={2}
maxRows={5}
variant="darkFilled" variant="darkFilled"
/> />
<PromptOverlayButtonWrapper> <PromptOverlayButtonWrapper>