From 1e547ef91217128e8a08bb0fd93698265bf8b863 Mon Sep 17 00:00:00 2001 From: Mary Hipp Date: Mon, 12 Aug 2024 11:59:25 -0400 Subject: [PATCH] UI more pr feedback --- .../components/StylePresetListItem.tsx | 5 +- .../components/StylePresetMenuTrigger.tsx | 11 +-- .../hooks/usePresetModifiedPrompts.ts | 2 +- .../features/stylePresets/store/isMenuOpen.ts | 6 ++ .../stylePresets/store/stylePresetSlice.ts | 7 +- .../src/features/stylePresets/store/types.ts | 1 - .../stylePresets/util/getViewModeChunks.tsx | 3 +- .../ParametersPanelCanvas.tsx | 29 +++--- .../ParametersPanelTextToImage.tsx | 93 ++++++++++--------- .../ParametersPanelUpscale.tsx | 24 ++--- .../services/api/endpoints/stylePresets.ts | 10 +- 11 files changed, 95 insertions(+), 96 deletions(-) create mode 100644 invokeai/frontend/web/src/features/stylePresets/store/isMenuOpen.ts diff --git a/invokeai/frontend/web/src/features/stylePresets/components/StylePresetListItem.tsx b/invokeai/frontend/web/src/features/stylePresets/components/StylePresetListItem.tsx index be14dd0e7d..3506e8430d 100644 --- a/invokeai/frontend/web/src/features/stylePresets/components/StylePresetListItem.tsx +++ b/invokeai/frontend/web/src/features/stylePresets/components/StylePresetListItem.tsx @@ -1,11 +1,12 @@ import { Badge, ConfirmationAlertDialog, Flex, IconButton, Text, useDisclosure } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { $isMenuOpen } from 'features/stylePresets/store/isMenuOpen'; import { isModalOpenChanged, prefilledFormDataChanged, updatingStylePresetIdChanged, } from 'features/stylePresets/store/stylePresetModalSlice'; -import { activeStylePresetIdChanged, isMenuOpenChanged } from 'features/stylePresets/store/stylePresetSlice'; +import { activeStylePresetIdChanged } from 'features/stylePresets/store/stylePresetSlice'; import { toast } from 'features/toast/toast'; import type { MouseEvent } from 'react'; import { useCallback } from 'react'; @@ -46,7 +47,7 @@ export const StylePresetListItem = ({ preset }: { preset: StylePresetRecordWithI const handleClickApply = useCallback(async () => { dispatch(activeStylePresetIdChanged(preset.id)); - dispatch(isMenuOpenChanged(false)); + $isMenuOpen.set(false); }, [dispatch, preset.id]); const handleClickDelete = useCallback( diff --git a/invokeai/frontend/web/src/features/stylePresets/components/StylePresetMenuTrigger.tsx b/invokeai/frontend/web/src/features/stylePresets/components/StylePresetMenuTrigger.tsx index c39cb6d2dd..ac623a4963 100644 --- a/invokeai/frontend/web/src/features/stylePresets/components/StylePresetMenuTrigger.tsx +++ b/invokeai/frontend/web/src/features/stylePresets/components/StylePresetMenuTrigger.tsx @@ -1,6 +1,6 @@ import { Flex, IconButton } from '@invoke-ai/ui-library'; -import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { isMenuOpenChanged } from 'features/stylePresets/store/stylePresetSlice'; +import { useStore } from '@nanostores/react'; +import { $isMenuOpen } from 'features/stylePresets/store/isMenuOpen'; import { useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import { PiCaretDownBold } from 'react-icons/pi'; @@ -8,13 +8,12 @@ import { PiCaretDownBold } from 'react-icons/pi'; import { ActiveStylePreset } from './ActiveStylePreset'; export const StylePresetMenuTrigger = () => { - const isMenuOpen = useAppSelector((s) => s.stylePreset.isMenuOpen); - const dispatch = useAppDispatch(); + const isMenuOpen = useStore($isMenuOpen); const { t } = useTranslation(); const handleToggle = useCallback(() => { - dispatch(isMenuOpenChanged(!isMenuOpen)); - }, [dispatch, isMenuOpen]); + $isMenuOpen.set(!isMenuOpen); + }, [isMenuOpen]); return ( { return presetPrompt.includes(PRESET_PLACEHOLDER) - ? presetPrompt.replace(new RegExp(PRESET_PLACEHOLDER), currentPrompt) + ? presetPrompt.replace(PRESET_PLACEHOLDER, currentPrompt) : `${currentPrompt} ${presetPrompt}`; }; diff --git a/invokeai/frontend/web/src/features/stylePresets/store/isMenuOpen.ts b/invokeai/frontend/web/src/features/stylePresets/store/isMenuOpen.ts new file mode 100644 index 0000000000..f94d708fad --- /dev/null +++ b/invokeai/frontend/web/src/features/stylePresets/store/isMenuOpen.ts @@ -0,0 +1,6 @@ +import { atom } from 'nanostores'; + +/** + * Tracks whether or not the style preset menu is open. + */ +export const $isMenuOpen = atom(false); diff --git a/invokeai/frontend/web/src/features/stylePresets/store/stylePresetSlice.ts b/invokeai/frontend/web/src/features/stylePresets/store/stylePresetSlice.ts index 2e288250fe..45f770dd9b 100644 --- a/invokeai/frontend/web/src/features/stylePresets/store/stylePresetSlice.ts +++ b/invokeai/frontend/web/src/features/stylePresets/store/stylePresetSlice.ts @@ -5,7 +5,6 @@ import type { PersistConfig } from 'app/store/store'; import type { StylePresetState } from './types'; const initialState: StylePresetState = { - isMenuOpen: false, activeStylePresetId: null, searchTerm: '', viewMode: false, @@ -15,9 +14,6 @@ export const stylePresetSlice = createSlice({ name: 'stylePreset', initialState: initialState, reducers: { - isMenuOpenChanged: (state, action: PayloadAction) => { - state.isMenuOpen = action.payload; - }, activeStylePresetIdChanged: (state, action: PayloadAction) => { state.activeStylePresetId = action.payload; }, @@ -30,8 +26,7 @@ export const stylePresetSlice = createSlice({ }, }); -export const { isMenuOpenChanged, activeStylePresetIdChanged, searchTermChanged, viewModeChanged } = - stylePresetSlice.actions; +export const { activeStylePresetIdChanged, searchTermChanged, viewModeChanged } = stylePresetSlice.actions; /* eslint-disable-next-line @typescript-eslint/no-explicit-any */ const migrateStylePresetState = (state: any): any => { diff --git a/invokeai/frontend/web/src/features/stylePresets/store/types.ts b/invokeai/frontend/web/src/features/stylePresets/store/types.ts index c533dd6b06..50ec7fad7e 100644 --- a/invokeai/frontend/web/src/features/stylePresets/store/types.ts +++ b/invokeai/frontend/web/src/features/stylePresets/store/types.ts @@ -12,7 +12,6 @@ export type PrefilledFormData = { }; export type StylePresetState = { - isMenuOpen: boolean; activeStylePresetId: string | null; searchTerm: string; viewMode: boolean; diff --git a/invokeai/frontend/web/src/features/stylePresets/util/getViewModeChunks.tsx b/invokeai/frontend/web/src/features/stylePresets/util/getViewModeChunks.tsx index 748c6528e1..79832ca6a9 100644 --- a/invokeai/frontend/web/src/features/stylePresets/util/getViewModeChunks.tsx +++ b/invokeai/frontend/web/src/features/stylePresets/util/getViewModeChunks.tsx @@ -3,7 +3,8 @@ export const getViewModeChunks = (currentPrompt: string, presetPrompt?: string): if (!presetPrompt || !presetPrompt.length) { return ['', currentPrompt, '']; } - const chunks = presetPrompt.split(PRESET_PLACEHOLDER); + const [firstPart, ...remainingParts] = presetPrompt.split(PRESET_PLACEHOLDER); + const chunks = [firstPart, remainingParts.join(PRESET_PLACEHOLDER)]; if (chunks.length === 1) { return ['', currentPrompt, chunks[0] ?? '']; } else { diff --git a/invokeai/frontend/web/src/features/ui/components/ParametersPanels/ParametersPanelCanvas.tsx b/invokeai/frontend/web/src/features/ui/components/ParametersPanels/ParametersPanelCanvas.tsx index 6a0bc3fce5..d98a736e3b 100644 --- a/invokeai/frontend/web/src/features/ui/components/ParametersPanels/ParametersPanelCanvas.tsx +++ b/invokeai/frontend/web/src/features/ui/components/ParametersPanels/ParametersPanelCanvas.tsx @@ -1,4 +1,5 @@ import { Box, Flex } from '@invoke-ai/ui-library'; +import { useStore } from '@nanostores/react'; import { useAppSelector } from 'app/store/storeHooks'; import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants'; import { Prompts } from 'features/parameters/components/Prompts/Prompts'; @@ -11,6 +12,7 @@ import { ImageSettingsAccordion } from 'features/settingsAccordions/components/I import { RefinerSettingsAccordion } from 'features/settingsAccordions/components/RefinerSettingsAccordion/RefinerSettingsAccordion'; import { StylePresetMenu } from 'features/stylePresets/components/StylePresetMenu'; import { StylePresetMenuTrigger } from 'features/stylePresets/components/StylePresetMenuTrigger'; +import { $isMenuOpen } from 'features/stylePresets/store/isMenuOpen'; import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'; import type { CSSProperties } from 'react'; import { memo } from 'react'; @@ -22,7 +24,7 @@ const overlayScrollbarsStyles: CSSProperties = { const ParametersPanelCanvas = () => { const isSDXL = useAppSelector((s) => s.generation.model?.base === 'sdxl'); - const isMenuOpen = useAppSelector((s) => s.stylePreset.isMenuOpen); + const isMenuOpen = useStore($isMenuOpen); return ( @@ -30,25 +32,24 @@ const ParametersPanelCanvas = () => { - {isMenuOpen ? ( + {isMenuOpen && ( - ) : ( - - - - - - - - {isSDXL && } - - - )} + + + + + + + + {isSDXL && } + + + diff --git a/invokeai/frontend/web/src/features/ui/components/ParametersPanels/ParametersPanelTextToImage.tsx b/invokeai/frontend/web/src/features/ui/components/ParametersPanels/ParametersPanelTextToImage.tsx index 5b466c6966..166005663f 100644 --- a/invokeai/frontend/web/src/features/ui/components/ParametersPanels/ParametersPanelTextToImage.tsx +++ b/invokeai/frontend/web/src/features/ui/components/ParametersPanels/ParametersPanelTextToImage.tsx @@ -1,5 +1,6 @@ import type { ChakraProps } from '@invoke-ai/ui-library'; import { Box, Flex, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library'; +import { useStore } from '@nanostores/react'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants'; import { ControlLayersPanelContent } from 'features/controlLayers/components/ControlLayersPanelContent'; @@ -15,6 +16,7 @@ import { ImageSettingsAccordion } from 'features/settingsAccordions/components/I import { RefinerSettingsAccordion } from 'features/settingsAccordions/components/RefinerSettingsAccordion/RefinerSettingsAccordion'; import { StylePresetMenu } from 'features/stylePresets/components/StylePresetMenu'; import { StylePresetMenuTrigger } from 'features/stylePresets/components/StylePresetMenuTrigger'; +import { $isMenuOpen } from 'features/stylePresets/store/isMenuOpen'; import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'; import type { CSSProperties } from 'react'; @@ -61,7 +63,7 @@ const ParametersPanelTextToImage = () => { ); const ref = useRef(null); - const isMenuOpen = useAppSelector((s) => s.stylePreset.isMenuOpen); + const isMenuOpen = useStore($isMenuOpen); return ( @@ -69,57 +71,56 @@ const ParametersPanelTextToImage = () => { - {isMenuOpen ? ( + {isMenuOpen && ( - ) : ( - - - - - - - {t('common.settingsLabel')} - - - {controlLayersTitle} - - - - - - - - {activeTabName !== 'generation' && } - {activeTabName === 'canvas' && } - {isSDXL && } - - - - - - - - - - )} + + + + + + + {t('common.settingsLabel')} + + + {controlLayersTitle} + + + + + + + + {activeTabName !== 'generation' && } + {activeTabName === 'canvas' && } + {isSDXL && } + + + + + + + + + + diff --git a/invokeai/frontend/web/src/features/ui/components/ParametersPanels/ParametersPanelUpscale.tsx b/invokeai/frontend/web/src/features/ui/components/ParametersPanels/ParametersPanelUpscale.tsx index 7807d7f4ef..af9e0dd2ef 100644 --- a/invokeai/frontend/web/src/features/ui/components/ParametersPanels/ParametersPanelUpscale.tsx +++ b/invokeai/frontend/web/src/features/ui/components/ParametersPanels/ParametersPanelUpscale.tsx @@ -1,5 +1,5 @@ import { Box, Flex } from '@invoke-ai/ui-library'; -import { useAppSelector } from 'app/store/storeHooks'; +import { useStore } from '@nanostores/react'; import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants'; import { Prompts } from 'features/parameters/components/Prompts/Prompts'; import QueueControls from 'features/queue/components/QueueControls'; @@ -8,6 +8,7 @@ import { GenerationSettingsAccordion } from 'features/settingsAccordions/compone import { UpscaleSettingsAccordion } from 'features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleSettingsAccordion'; import { StylePresetMenu } from 'features/stylePresets/components/StylePresetMenu'; import { StylePresetMenuTrigger } from 'features/stylePresets/components/StylePresetMenuTrigger'; +import { $isMenuOpen } from 'features/stylePresets/store/isMenuOpen'; import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'; import type { CSSProperties } from 'react'; import { memo } from 'react'; @@ -18,29 +19,28 @@ const overlayScrollbarsStyles: CSSProperties = { }; const ParametersPanelUpscale = () => { - const isMenuOpen = useAppSelector((s) => s.stylePreset.isMenuOpen); + const isMenuOpen = useStore($isMenuOpen); return ( - {isMenuOpen ? ( + {isMenuOpen && ( - ) : ( - - - - - - - - )} + + + + + + + + diff --git a/invokeai/frontend/web/src/services/api/endpoints/stylePresets.ts b/invokeai/frontend/web/src/services/api/endpoints/stylePresets.ts index 05f6cbe150..c7419c10c8 100644 --- a/invokeai/frontend/web/src/services/api/endpoints/stylePresets.ts +++ b/invokeai/frontend/web/src/services/api/endpoints/stylePresets.ts @@ -44,9 +44,8 @@ export const stylePresetsApi = api.injectEndpoints({ if (image) { formData.append('image', image); } - formData.append('name', name); - formData.append('positive_prompt', positive_prompt); - formData.append('negative_prompt', negative_prompt); + + formData.append('data', JSON.stringify({ name, positive_prompt, negative_prompt })); return { url: buildStylePresetsUrl(), @@ -70,10 +69,7 @@ export const stylePresetsApi = api.injectEndpoints({ if (image) { formData.append('image', image); } - - formData.append('name', name); - formData.append('positive_prompt', positive_prompt); - formData.append('negative_prompt', negative_prompt); + formData.append('data', JSON.stringify({ name, positive_prompt, negative_prompt })); return { url: buildStylePresetsUrl(`i/${id}`),