github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-02-12 12:35:01 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): minor restyle of style preset list

Browse Source
This commit is contained in:
psychedelicious
2025-06-27 14:26:19 +10:00
parent 23baf61e51
commit 5dbc32e06e
5 changed files with 79 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
invokeai/frontend/web/src/features/stylePresets/components/StylePresetCreateButton.tsx
View File

@@ -17,14 +17,13 @@ export const StylePresetCreateButton = () => {
return (
<IconButton
size="sm"
variant="link"
alignSelf="stretch"
icon={<PiPlusBold />}
tooltip={t('stylePresets.createPromptTemplate')}
aria-label={t('stylePresets.createPromptTemplate')}
onClick={handleClickAddNew}
size="md"
variant="ghost"
w={8}
h={8}
/>
);
};

7
invokeai/frontend/web/src/features/stylePresets/components/StylePresetExportButton.tsx
View File

@@ -53,14 +53,13 @@ export const StylePresetExportButton = () => {
return (
<IconButton
size="sm"
variant="link"
alignSelf="stretch"
onClick={handleClickDownloadCsv}
icon={!isLoading ? <PiDownloadSimpleBold /> : <PiSpinner />}
tooltip={t('stylePresets.exportPromptTemplates')}
aria-label={t('stylePresets.exportPromptTemplates')}
size="md"
variant="link"
w={8}
h={8}
sx={isLoading ? loadingStyles : undefined}
isDisabled={isLoading || presetCount === 0}
/>

7
invokeai/frontend/web/src/features/stylePresets/components/StylePresetImportButton.tsx
View File

@@ -50,13 +50,12 @@ export const StylePresetImportButton = () => {
return (
<>
<IconButton
size="sm"
variant="link"
alignSelf="stretch"
icon={!isLoading ? <PiUploadSimpleBold /> : <PiSpinner />}
tooltip={<TooltipContent />}
aria-label={t('stylePresets.importTemplates')}
size="md"
variant="link"
w={8}
h={8}
sx={isLoading ? loadingStyles : undefined}
isDisabled={isLoading}
{...getRootProps()}

140
invokeai/frontend/web/src/features/stylePresets/components/StylePresetListItem.tsx
View File

@@ -1,4 +1,4 @@
import { Badge, Flex, IconButton, Text } from '@invoke-ai/ui-library';
import { Badge, Button, Flex, IconButton, Spacer, Text } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { useDeleteStylePreset } from 'features/stylePresets/components/DeleteStylePresetDialog';
import { $stylePresetModalState } from 'features/stylePresets/store/stylePresetModal';
@@ -79,84 +79,80 @@ export const StylePresetListItem = ({ preset }: { preset: StylePresetRecordWithI
);
return (
<Flex
gap={4}
<Button
as={Flex}
role="button"
gap={3}
onClick={handleClickApply}
cursor="pointer"
_hover={{ backgroundColor: 'base.750' }}
py={3}
px={2}
borderRadius="base"
alignItems="flex-start"
p={3}
h="unset"
variant="ghost"
w="full"
alignItems="flex-start"
>
<StylePresetImage presetImageUrl={preset.image} />
<Flex flexDir="column" w="full">
<Flex w="full" justifyContent="space-between" alignItems="flex-start">
<Flex alignItems="center" gap={2}>
<Text fontSize="md" noOfLines={2}>
{preset.name}
</Text>
{activeStylePresetId === preset.id && (
<Badge
color="invokeBlue.400"
borderColor="invokeBlue.700"
borderWidth={1}
bg="transparent"
flexShrink={0}
>
{t('stylePresets.active')}
</Badge>
)}
</Flex>
<Flex alignItems="center" gap={1}>
<IconButton
size="sm"
variant="ghost"
aria-label={t('stylePresets.copyTemplate')}
onClick={handleClickCopy}
icon={<PiCopyBold />}
/>
{preset.type !== 'default' && (
<>
<IconButton
size="sm"
variant="ghost"
aria-label={t('stylePresets.editTemplate')}
onClick={handleClickEdit}
icon={<PiPencilBold />}
/>
<IconButton
size="sm"
variant="ghost"
aria-label={t('stylePresets.deleteTemplate')}
onClick={handleClickDelete}
colorScheme="error"
icon={<PiTrashBold />}
/>
</>
)}
</Flex>
<Flex flexDir="column" w="full" alignItems="flex-start" flexGrow={1} minW={0} gap={2}>
<Flex gap={2} w="full" justifyContent="space-between" alignItems="center" minW={0} minH={8}>
<Text fontSize="md" noOfLines={2} fontWeight="semibold" color="base.100">
{preset.name}
</Text>
{activeStylePresetId === preset.id && (
<Badge color="invokeBlue.400" borderColor="invokeBlue.700" borderWidth={1} bg="transparent" flexShrink={0}>
{t('stylePresets.active')}
</Badge>
)}
<Spacer />
<IconButton
size="sm"
variant="link"
alignSelf="stretch"
aria-label={t('stylePresets.copyTemplate')}
onClick={handleClickCopy}
icon={<PiCopyBold />}
/>
{preset.type !== 'default' && (
<>
<IconButton
size="sm"
variant="link"
alignSelf="stretch"
aria-label={t('stylePresets.editTemplate')}
onClick={handleClickEdit}
icon={<PiPencilBold />}
/>
<IconButton
size="sm"
variant="link"
alignSelf="stretch"
aria-label={t('stylePresets.deleteTemplate')}
onClick={handleClickDelete}
colorScheme="error"
icon={<PiTrashBold />}
/>
</>
)}
</Flex>
{showPromptPreviews && (
<Flex flexDir="column" gap={1}>
<Text fontSize="xs">
<Text as="span" fontWeight="semibold">
{t('stylePresets.positivePrompt')}:
</Text>{' '}
{preset.preset_data.positive_prompt}
</Text>
<Text fontSize="xs">
<Text as="span" fontWeight="semibold">
{t('stylePresets.negativePrompt')}:
</Text>{' '}
{preset.preset_data.negative_prompt}
</Text>
</Flex>
<>
<Flex gap={1} minW={0} fontSize="sm" whiteSpace="normal">
<Text>
{t('stylePresets.positivePrompt')}:{' '}
<Text as="span" fontWeight="normal">
{preset.preset_data.positive_prompt}
</Text>
</Text>
</Flex>
<Flex gap={1} minW={0} fontSize="sm" whiteSpace="normal">
<Text>
{t('stylePresets.negativePrompt')}:{' '}
<Text as="span" fontWeight="normal">
{preset.preset_data.negative_prompt}
</Text>
</Text>
</Flex>
</>
)}
</Flex>
</Flex>
</Button>
);
};

3
invokeai/frontend/web/src/features/stylePresets/components/StylePresetPromptPreviewToggle.tsx
View File

@@ -17,7 +17,8 @@ export const StylePresetPromptPreviewToggle = () => {
return (
<IconButton
size="sm"
variant="ghost"
variant="link"
alignSelf="stretch"
aria-label={t('stylePresets.togglePromptPreviews')}
tooltip={t('stylePresets.togglePromptPreviews')}
onClick={handleToggle}