From ce6fb8ea2915788bce5344ea0ce64a89bf24a7e7 Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Tue, 27 Dec 2022 04:07:40 +1300 Subject: [PATCH] Model Form Styling --- frontend/src/common/components/IAIInput.tsx | 26 ++--- .../src/common/components/IAINumberInput.tsx | 2 +- .../components/ModelManager/AddModel.tsx | 86 ++++++++-------- .../components/ModelManager/ModelEdit.tsx | 98 ++++++++++--------- .../components/ModelManager/ModelList.tsx | 15 ++- .../components/ModelManager/ModelListItem.tsx | 37 +++---- .../ModelManager/ModelManagerModal.tsx | 5 +- .../components/ModelManager/SearchModels.tsx | 28 +++--- .../features/system/components/SiteHeader.tsx | 5 +- 9 files changed, 161 insertions(+), 141 deletions(-) diff --git a/frontend/src/common/components/IAIInput.tsx b/frontend/src/common/components/IAIInput.tsx index 58b63db2f0..4ee501e8a8 100644 --- a/frontend/src/common/components/IAIInput.tsx +++ b/frontend/src/common/components/IAIInput.tsx @@ -6,7 +6,7 @@ interface IAIInputProps extends InputProps { label?: string; width?: string | number; value?: string; - onChange: (e: ChangeEvent) => void; + onChange?: (e: ChangeEvent) => void; } export default function IAIInput(props: IAIInputProps) { @@ -26,17 +26,19 @@ export default function IAIInput(props: IAIInputProps) { isInvalid={isInvalid} isDisabled={isDisabled} > - - {label} - + {label !== '' && ( + + {label} + + )} ); diff --git a/frontend/src/common/components/IAINumberInput.tsx b/frontend/src/common/components/IAINumberInput.tsx index f0d9003d43..c61658ce40 100644 --- a/frontend/src/common/components/IAINumberInput.tsx +++ b/frontend/src/common/components/IAINumberInput.tsx @@ -24,7 +24,7 @@ interface Props extends Omit { labelFontSize?: string | number; width?: string | number; showStepper?: boolean; - value: number; + value?: number; onChange: (v: number) => void; min: number; max: number; diff --git a/frontend/src/features/system/components/ModelManager/AddModel.tsx b/frontend/src/features/system/components/ModelManager/AddModel.tsx index 82f2e03d46..3f67144383 100644 --- a/frontend/src/features/system/components/ModelManager/AddModel.tsx +++ b/frontend/src/features/system/components/ModelManager/AddModel.tsx @@ -1,40 +1,40 @@ import { - Button, Flex, FormControl, FormErrorMessage, FormHelperText, FormLabel, HStack, - Input, Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay, - NumberDecrementStepper, - NumberIncrementStepper, - NumberInput, - NumberInputField, - NumberInputStepper, Text, useDisclosure, VStack, } from '@chakra-ui/react'; import React from 'react'; -import { FaPlus } from 'react-icons/fa'; -import { Field, FieldInputProps, Formik, FormikProps } from 'formik'; -import type { RootState } from 'app/store'; -import { addNewModel } from 'app/socketio/actions'; -import type { InvokeModelConfigProps } from 'app/invokeai'; +import IAIInput from 'common/components/IAIInput'; +import IAINumberInput from 'common/components/IAINumberInput'; import IAICheckbox from 'common/components/IAICheckbox'; import IAIButton from 'common/components/IAIButton'; + import SearchModels from './SearchModels'; + +import { addNewModel } from 'app/socketio/actions'; + import { useAppDispatch, useAppSelector } from 'app/storeHooks'; +import { FaPlus } from 'react-icons/fa'; +import { Field, Formik } from 'formik'; import { useTranslation } from 'react-i18next'; +import type { FieldInputProps, FormikProps } from 'formik'; +import type { RootState } from 'app/store'; +import type { InvokeModelConfigProps } from 'app/invokeai'; + const MIN_MODEL_SIZE = 64; const MAX_MODEL_SIZE = 2048; @@ -128,16 +128,17 @@ export default function AddModel() { isInvalid={!!errors.name && touched.name} isRequired > - + {t('modelmanager:name')} {!!errors.name && touched.name ? ( {errors.name} @@ -154,15 +155,16 @@ export default function AddModel() { isInvalid={!!errors.description && touched.description} isRequired > - + {t('modelmanager:description')} {!!errors.description && touched.description ? ( @@ -181,15 +183,16 @@ export default function AddModel() { isInvalid={!!errors.config && touched.config} isRequired > - + {t('modelmanager:config')} {!!errors.config && touched.config ? ( {errors.config} @@ -206,15 +209,16 @@ export default function AddModel() { isInvalid={!!errors.weights && touched.weights} isRequired > - + {t('modelmanager:modelLocation')} {!!errors.weights && touched.weights ? ( @@ -230,11 +234,17 @@ export default function AddModel() { {/* VAE */} - + {t('modelmanager:vaeLocation')} - + {!!errors.vae && touched.vae ? ( {errors.vae} ) : ( @@ -250,7 +260,7 @@ export default function AddModel() { - + {t('modelmanager:width')} @@ -262,26 +272,20 @@ export default function AddModel() { field: FieldInputProps; form: FormikProps; }) => ( - form.setFieldValue( field.name, Number(value) ) } - > - - - - - - + /> )} @@ -301,7 +305,7 @@ export default function AddModel() { - + {t('modelmanager:height')} @@ -313,26 +317,20 @@ export default function AddModel() { field: FieldInputProps; form: FormikProps; }) => ( - form.setFieldValue( field.name, Number(value) ) } - > - - - - - - + /> )} @@ -349,13 +347,13 @@ export default function AddModel() { - + )} diff --git a/frontend/src/features/system/components/ModelManager/ModelEdit.tsx b/frontend/src/features/system/components/ModelManager/ModelEdit.tsx index 11cbf8e2fe..fcb8d701ba 100644 --- a/frontend/src/features/system/components/ModelManager/ModelEdit.tsx +++ b/frontend/src/features/system/components/ModelManager/ModelEdit.tsx @@ -1,31 +1,34 @@ import { createSelector } from '@reduxjs/toolkit'; -import type { RootState } from 'app/store'; + +import React, { useEffect, useState } from 'react'; +import IAIInput from 'common/components/IAIInput'; +import IAINumberInput from 'common/components/IAINumberInput'; +import IAIButton from 'common/components/IAIButton'; + import { useAppDispatch, useAppSelector } from 'app/storeHooks'; import { systemSelector } from 'features/system/store/systemSelectors'; -import React, { useEffect, useState } from 'react'; -import _ from 'lodash'; -import type { InvokeModelConfigProps } from 'app/invokeai'; + import { - Button, Flex, FormControl, FormErrorMessage, FormHelperText, FormLabel, - Input, - NumberDecrementStepper, - NumberIncrementStepper, - NumberInput, - NumberInputField, - NumberInputStepper, + HStack, Text, VStack, } from '@chakra-ui/react'; + import { Field, Formik } from 'formik'; -import type { FieldInputProps, FormikProps } from 'formik'; import { useTranslation } from 'react-i18next'; import { addNewModel } from 'app/socketio/actions'; +import _ from 'lodash'; + +import type { RootState } from 'app/store'; +import type { FieldInputProps, FormikProps } from 'formik'; +import type { InvokeModelConfigProps } from 'app/invokeai'; + const selector = createSelector( [systemSelector], (system) => { @@ -115,15 +118,16 @@ export default function ModelEdit() { isInvalid={!!errors.description && touched.description} isRequired > - + {t('modelmanager:description')} {!!errors.description && touched.description ? ( {errors.description} @@ -140,11 +144,17 @@ export default function ModelEdit() { isInvalid={!!errors.config && touched.config} isRequired > - + {t('modelmanager:config')} - + {!!errors.config && touched.config ? ( {errors.config} ) : ( @@ -160,11 +170,17 @@ export default function ModelEdit() { isInvalid={!!errors.weights && touched.weights} isRequired > - + {t('modelmanager:modelLocation')} - + {!!errors.weights && touched.weights ? ( {errors.weights} ) : ( @@ -177,11 +193,17 @@ export default function ModelEdit() { {/* VAE */} - + {t('modelmanager:vaeLocation')} - + {!!errors.vae && touched.vae ? ( {errors.vae} ) : ( @@ -192,10 +214,10 @@ export default function ModelEdit() { - + {/* Width */} - + {t('modelmanager:width')} @@ -207,23 +229,17 @@ export default function ModelEdit() { field: FieldInputProps; form: FormikProps; }) => ( - form.setFieldValue(field.name, Number(value)) } - > - - - - - - + /> )} @@ -239,7 +255,7 @@ export default function ModelEdit() { {/* Height */} - + {t('modelmanager:height')} @@ -251,23 +267,17 @@ export default function ModelEdit() { field: FieldInputProps; form: FormikProps; }) => ( - form.setFieldValue(field.name, Number(value)) } - > - - - - - - + /> )} @@ -280,15 +290,15 @@ export default function ModelEdit() { )} - + - + )} diff --git a/frontend/src/features/system/components/ModelManager/ModelList.tsx b/frontend/src/features/system/components/ModelManager/ModelList.tsx index 6e118d1a9f..461403c1c4 100644 --- a/frontend/src/features/system/components/ModelManager/ModelList.tsx +++ b/frontend/src/features/system/components/ModelManager/ModelList.tsx @@ -1,15 +1,20 @@ -import { useState, ChangeEvent, ReactNode } from 'react'; +import { useState } from 'react'; import { Flex, Text } from '@chakra-ui/react'; import { createSelector } from '@reduxjs/toolkit'; -import { RootState } from 'app/store'; -import { SystemState } from 'features/system/store/systemSlice'; +import IAIInput from 'common/components/IAIInput'; + import AddModel from './AddModel'; import ModelListItem from './ModelListItem'; -import _ from 'lodash'; -import IAIInput from 'common/components/IAIInput'; + import { useAppSelector } from 'app/storeHooks'; import { useTranslation } from 'react-i18next'; +import _ from 'lodash'; + +import type { ChangeEvent, ReactNode } from 'react'; +import type { RootState } from 'app/store'; +import type { SystemState } from 'features/system/store/systemSlice'; + const modelListSelector = createSelector( (state: RootState) => state.system, (system: SystemState) => { diff --git a/frontend/src/features/system/components/ModelManager/ModelListItem.tsx b/frontend/src/features/system/components/ModelManager/ModelListItem.tsx index b8eea91952..e5bf0d1bd8 100644 --- a/frontend/src/features/system/components/ModelManager/ModelListItem.tsx +++ b/frontend/src/features/system/components/ModelManager/ModelListItem.tsx @@ -1,17 +1,11 @@ import { EditIcon, DeleteIcon } from '@chakra-ui/icons'; -import { - Button, - Flex, - IconButton, - Spacer, - Text, - Tooltip, -} from '@chakra-ui/react'; +import { Button, Flex, Spacer, Text, Tooltip } from '@chakra-ui/react'; import { ModelStatus } from 'app/invokeai'; import { deleteModel, requestModelChange } from 'app/socketio/actions'; import { RootState } from 'app/store'; import { useAppDispatch, useAppSelector } from 'app/storeHooks'; import IAIAlertDialog from 'common/components/IAIAlertDialog'; +import IAIIconButton from 'common/components/IAIIconButton'; import { setOpenModel } from 'features/system/store/systemSlice'; import React from 'react'; import { useTranslation } from 'react-i18next'; @@ -37,12 +31,13 @@ export default function ModelListItem(props: ModelListItemProps) { dispatch(requestModelChange(name)); }; - const openModel = () => { - dispatch(setOpenModel(name)); + const openModel = () => { + dispatch(setOpenModel(name)); }; const handleModelDelete = () => { dispatch(deleteModel(name)); + dispatch(setOpenModel(null)); }; const statusTextColor = () => { @@ -63,9 +58,8 @@ export default function ModelListItem(props: ModelListItemProps) { - + {status} - - } - size={'sm'} - onClick={openModel} - aria-label="Modify Config" - isDisabled={status === 'active' || isProcessing || !isConnected} - className=" modal-close-btn" - /> + } + size={'sm'} + onClick={openModel} + aria-label="Modify Config" + isDisabled={status === 'active' || isProcessing || !isConnected} + className=" modal-close-btn" + /> } size={'sm'} aria-label={t('modelmanager:deleteConfig')} isDisabled={status === 'active' || isProcessing || !isConnected} className=" modal-close-btn" + style={{ backgroundColor: 'var(--btn-delete-image)' }} /> } > diff --git a/frontend/src/features/system/components/ModelManager/ModelManagerModal.tsx b/frontend/src/features/system/components/ModelManager/ModelManagerModal.tsx index e8505f2d74..1ea9dd51a4 100644 --- a/frontend/src/features/system/components/ModelManager/ModelManagerModal.tsx +++ b/frontend/src/features/system/components/ModelManager/ModelManagerModal.tsx @@ -7,11 +7,14 @@ import { ModalOverlay, useDisclosure, } from '@chakra-ui/react'; -import React, { cloneElement, ReactElement } from 'react'; +import React, { cloneElement } from 'react'; import { useTranslation } from 'react-i18next'; + import ModelEdit from './ModelEdit'; import ModelList from './ModelList'; +import type { ReactElement } from 'react'; + type ModelManagerModalProps = { children: ReactElement; }; diff --git a/frontend/src/features/system/components/ModelManager/SearchModels.tsx b/frontend/src/features/system/components/ModelManager/SearchModels.tsx index 45e0600467..f7f56b48d0 100644 --- a/frontend/src/features/system/components/ModelManager/SearchModels.tsx +++ b/frontend/src/features/system/components/ModelManager/SearchModels.tsx @@ -1,23 +1,29 @@ -import { Box, Flex, VStack } from '@chakra-ui/react'; -import { addNewModel, searchForModels } from 'app/socketio/actions'; -import { RootState } from 'app/store'; +import React from 'react'; import IAICheckbox from 'common/components/IAICheckbox'; -import React, { ReactNode, ChangeEvent } from 'react'; -import { MdFindInPage } from 'react-icons/md'; -import _ from 'lodash'; import IAIButton from 'common/components/IAIButton'; import IAIIconButton from 'common/components/IAIIconButton'; + +import { createSelector } from '@reduxjs/toolkit'; +import { systemSelector } from 'features/system/store/systemSelectors'; +import { Box, Flex, VStack } from '@chakra-ui/react'; +import { useAppDispatch, useAppSelector } from 'app/storeHooks'; +import { useTranslation } from 'react-i18next'; + import { FaPlus } from 'react-icons/fa'; +import { MdFindInPage } from 'react-icons/md'; + +import { addNewModel, searchForModels } from 'app/socketio/actions'; import { setFoundModels, setSearchFolder, } from 'features/system/store/systemSlice'; -import { createSelector } from '@reduxjs/toolkit'; -import { systemSelector } from 'features/system/store/systemSelectors'; import { setShouldShowExistingModelsInSearch } from 'features/options/store/optionsSlice'; -import { FoundModel } from 'app/invokeai'; -import { useAppDispatch, useAppSelector } from 'app/storeHooks'; -import { useTranslation } from 'react-i18next'; + +import _ from 'lodash'; + +import type { RootState } from 'app/store'; +import type { ReactNode, ChangeEvent } from 'react'; +import type { FoundModel } from 'app/invokeai'; const existingModelsSelector = createSelector([systemSelector], (system) => { const { model_list } = system; diff --git a/frontend/src/features/system/components/SiteHeader.tsx b/frontend/src/features/system/components/SiteHeader.tsx index d3ab7ee8a0..3de94de02d 100644 --- a/frontend/src/features/system/components/SiteHeader.tsx +++ b/frontend/src/features/system/components/SiteHeader.tsx @@ -23,6 +23,7 @@ import ModelManagerModal from './ModelManager/ModelManagerModal'; import LanguagePicker from './LanguagePicker'; import { useTranslation } from 'react-i18next'; +import { MdSettings } from 'react-icons/md'; /** * Header, includes color mode toggle, settings button, status message. @@ -120,9 +121,9 @@ const SiteHeader = () => { tooltip={t('common:settingsLabel')} variant="link" data-variant="link" - fontSize={20} + fontSize={22} size={'sm'} - icon={} + icon={} />