Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): tweak regional prompt box styles

Browse Source
This commit is contained in:
psychedelicious 2024-08-28 08:44:04 +10:00
parent 03e05b2068
commit e8723b7cd3
4 changed files with 47 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceDeletePromptButton.tsx
View File

@ -12,10 +12,13 @@ export const RegionalGuidanceDeletePromptButton = memo(({ onDelete }: Props) =>
return (
<Tooltip label={t('controlLayers.deletePrompt')}>
<IconButton
variant="promptOverlay"
variant="link"
aria-label={t('controlLayers.deletePrompt')}
icon={<PiTrashSimpleBold />}
onClick={onDelete}
flexGrow={0}
size="sm"
p={0}
/>
</Tooltip>
);

27
invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceNegativePrompt.tsx
View File

@ -1,17 +1,21 @@
import { Box, Textarea } from '@invoke-ai/ui-library';
import type { SystemStyleObject } from '@invoke-ai/ui-library';
import { Box, Flex, Textarea } from '@invoke-ai/ui-library';
import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { RegionalGuidanceDeletePromptButton } from 'features/controlLayers/components/RegionalGuidance/RegionalGuidanceDeletePromptButton';
import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
import { rgNegativePromptChanged } from 'features/controlLayers/store/canvasSlice';
import { selectCanvasSlice, selectEntityOrThrow } from 'features/controlLayers/store/selectors';
import { PromptOverlayButtonWrapper } from 'features/parameters/components/Prompts/PromptOverlayButtonWrapper';
import { AddPromptTriggerButton } from 'features/prompt/AddPromptTriggerButton';
import { PromptPopover } from 'features/prompt/PromptPopover';
import { usePrompt } from 'features/prompt/usePrompt';
import { memo, useCallback, useMemo, useRef } from 'react';
import { useTranslation } from 'react-i18next';
const _focusVisible: SystemStyleObject = {
outline: 'none',
};
export const RegionalGuidanceNegativePrompt = memo(() => {
const entityIdentifier = useEntityIdentifierContext('regional_guidance');
const selectPrompt = useMemo(
@ -49,14 +53,25 @@ export const RegionalGuidanceNegativePrompt = memo(() => {
placeholder={t('parameters.negativePromptPlaceholder')}
onChange={onChange}
onKeyDown={onKeyDown}
variant="darkFilled"
paddingRight={30}
variant="outline"
paddingInlineStart={2}
paddingInlineEnd={8}
fontSize="sm"
zIndex="0 !important"
_focusVisible={_focusVisible}
/>
<PromptOverlayButtonWrapper>
<Flex
flexDir="column"
gap={2}
position="absolute"
insetBlockStart={2}
insetInlineEnd={0}
alignItems="center"
justifyContent="center"
>
<RegionalGuidanceDeletePromptButton onDelete={onDeletePrompt} />
<AddPromptTriggerButton isOpen={isOpen} onOpen={onOpen} />
</PromptOverlayButtonWrapper>
</Flex>
</Box>
</PromptPopover>
);

27
invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidancePositivePrompt.tsx
View File

@ -1,17 +1,21 @@
import { Box, Textarea } from '@invoke-ai/ui-library';
import type { SystemStyleObject } from '@invoke-ai/ui-library';
import { Box, Flex, Textarea } from '@invoke-ai/ui-library';
import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { RegionalGuidanceDeletePromptButton } from 'features/controlLayers/components/RegionalGuidance/RegionalGuidanceDeletePromptButton';
import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
import { rgPositivePromptChanged } from 'features/controlLayers/store/canvasSlice';
import { selectCanvasSlice, selectEntityOrThrow } from 'features/controlLayers/store/selectors';
import { PromptOverlayButtonWrapper } from 'features/parameters/components/Prompts/PromptOverlayButtonWrapper';
import { AddPromptTriggerButton } from 'features/prompt/AddPromptTriggerButton';
import { PromptPopover } from 'features/prompt/PromptPopover';
import { usePrompt } from 'features/prompt/usePrompt';
import { memo, useCallback, useMemo, useRef } from 'react';
import { useTranslation } from 'react-i18next';
const _focusVisible: SystemStyleObject = {
outline: 'none',
};
export const RegionalGuidancePositivePrompt = memo(() => {
const entityIdentifier = useEntityIdentifierContext('regional_guidance');
const selectPrompt = useMemo(
@ -49,14 +53,25 @@ export const RegionalGuidancePositivePrompt = memo(() => {
placeholder={t('parameters.positivePromptPlaceholder')}
onChange={onChange}
onKeyDown={onKeyDown}
variant="darkFilled"
paddingRight={30}
variant="outline"
paddingInlineStart={2}
paddingInlineEnd={8}
minH={28}
zIndex="0 !important"
_focusVisible={_focusVisible}
/>
<PromptOverlayButtonWrapper>
<Flex
flexDir="column"
gap={2}
position="absolute"
insetBlockStart={2}
insetInlineEnd={0}
alignItems="center"
justifyContent="center"
>
<RegionalGuidanceDeletePromptButton onDelete={onDeletePrompt} />
<AddPromptTriggerButton isOpen={isOpen} onOpen={onOpen} />
</PromptOverlayButtonWrapper>
</Flex>
</Box>
</PromptPopover>
);

2
invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceSettings.tsx
View File

@ -35,7 +35,7 @@ export const RegionalGuidanceSettings = memo(() => {
{flags.hasPositivePrompt && (
<>
<RegionalGuidancePositivePrompt />
{(flags.hasNegativePrompt || flags.hasIPAdapters) && <Divider />}
{(!flags.hasNegativePrompt && flags.hasIPAdapters) && <Divider />}
</>
)}
{flags.hasNegativePrompt && (