Skip to content

Commit 5dbc32e

Browse files
psychedeliciouspsychedelicious
committed
feat(ui): minor restyle of style preset list
1 parent 23baf61 commit 5dbc32e

File tree

5 files changed

+79
-85
lines changed

5 files changed

+79
-85
lines changed

‎invokeai/frontend/web/src/features/stylePresets/components/StylePresetCreateButton.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,13 @@ export const StylePresetCreateButton = () => {
1717

1818
return (
1919
<IconButton
20+
size="sm"
21+
variant="link"
22+
alignSelf="stretch"
2023
icon={<PiPlusBold />}
2124
tooltip={t('stylePresets.createPromptTemplate')}
2225
aria-label={t('stylePresets.createPromptTemplate')}
2326
onClick={handleClickAddNew}
24-
size="md"
25-
variant="ghost"
26-
w={8}
27-
h={8}
2827
/>
2928
);
3029
};

‎invokeai/frontend/web/src/features/stylePresets/components/StylePresetExportButton.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -53,14 +53,13 @@ export const StylePresetExportButton = () => {
5353

5454
return (
5555
<IconButton
56+
size="sm"
57+
variant="link"
58+
alignSelf="stretch"
5659
onClick={handleClickDownloadCsv}
5760
icon={!isLoading ? <PiDownloadSimpleBold /> : <PiSpinner />}
5861
tooltip={t('stylePresets.exportPromptTemplates')}
5962
aria-label={t('stylePresets.exportPromptTemplates')}
60-
size="md"
61-
variant="link"
62-
w={8}
63-
h={8}
6463
sx={isLoading ? loadingStyles : undefined}
6564
isDisabled={isLoading || presetCount === 0}
6665
/>

‎invokeai/frontend/web/src/features/stylePresets/components/StylePresetImportButton.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -50,13 +50,12 @@ export const StylePresetImportButton = () => {
5050
return (
5151
<>
5252
<IconButton
53+
size="sm"
54+
variant="link"
55+
alignSelf="stretch"
5356
icon={!isLoading ? <PiUploadSimpleBold /> : <PiSpinner />}
5457
tooltip={<TooltipContent />}
5558
aria-label={t('stylePresets.importTemplates')}
56-
size="md"
57-
variant="link"
58-
w={8}
59-
h={8}
6059
sx={isLoading ? loadingStyles : undefined}
6160
isDisabled={isLoading}
6261
{...getRootProps()}

‎invokeai/frontend/web/src/features/stylePresets/components/StylePresetListItem.tsx

Lines changed: 68 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Badge, Flex, IconButton, Text } from '@invoke-ai/ui-library';
1+
import { Badge, Button, Flex, IconButton, Spacer, Text } from '@invoke-ai/ui-library';
22
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
33
import { useDeleteStylePreset } from 'features/stylePresets/components/DeleteStylePresetDialog';
44
import { $stylePresetModalState } from 'features/stylePresets/store/stylePresetModal';
@@ -79,84 +79,80 @@ export const StylePresetListItem = ({ preset }: { preset: StylePresetRecordWithI
7979
);
8080

8181
return (
82-
<Flex
83-
gap={4}
82+
<Button
83+
as={Flex}
84+
role="button"
85+
gap={3}
8486
onClick={handleClickApply}
85-
cursor="pointer"
86-
_hover={{ backgroundColor: 'base.750' }}
87-
py={3}
88-
px={2}
89-
borderRadius="base"
90-
alignItems="flex-start"
87+
p={3}
88+
h="unset"
89+
variant="ghost"
9190
w="full"
91+
alignItems="flex-start"
9292
>
9393
<StylePresetImage presetImageUrl={preset.image} />
94-
<Flex flexDir="column" w="full">
95-
<Flex w="full" justifyContent="space-between" alignItems="flex-start">
96-
<Flex alignItems="center" gap={2}>
97-
<Text fontSize="md" noOfLines={2}>
98-
{preset.name}
99-
</Text>
100-
{activeStylePresetId === preset.id && (
101-
<Badge
102-
color="invokeBlue.400"
103-
borderColor="invokeBlue.700"
104-
borderWidth={1}
105-
bg="transparent"
106-
flexShrink={0}
107-
>
108-
{t('stylePresets.active')}
109-
</Badge>
110-
)}
111-
</Flex>
112-
113-
<Flex alignItems="center" gap={1}>
114-
<IconButton
115-
size="sm"
116-
variant="ghost"
117-
aria-label={t('stylePresets.copyTemplate')}
118-
onClick={handleClickCopy}
119-
icon={<PiCopyBold />}
120-
/>
121-
{preset.type !== 'default' && (
122-
<>
123-
<IconButton
124-
size="sm"
125-
variant="ghost"
126-
aria-label={t('stylePresets.editTemplate')}
127-
onClick={handleClickEdit}
128-
icon={<PiPencilBold />}
129-
/>
130-
<IconButton
131-
size="sm"
132-
variant="ghost"
133-
aria-label={t('stylePresets.deleteTemplate')}
134-
onClick={handleClickDelete}
135-
colorScheme="error"
136-
icon={<PiTrashBold />}
137-
/>
138-
</>
139-
)}
140-
</Flex>
94+
<Flex flexDir="column" w="full" alignItems="flex-start" flexGrow={1} minW={0} gap={2}>
95+
<Flex gap={2} w="full" justifyContent="space-between" alignItems="center" minW={0} minH={8}>
96+
<Text fontSize="md" noOfLines={2} fontWeight="semibold" color="base.100">
97+
{preset.name}
98+
</Text>
99+
{activeStylePresetId === preset.id && (
100+
<Badge color="invokeBlue.400" borderColor="invokeBlue.700" borderWidth={1} bg="transparent" flexShrink={0}>
101+
{t('stylePresets.active')}
102+
</Badge>
103+
)}
104+
<Spacer />
105+
<IconButton
106+
size="sm"
107+
variant="link"
108+
alignSelf="stretch"
109+
aria-label={t('stylePresets.copyTemplate')}
110+
onClick={handleClickCopy}
111+
icon={<PiCopyBold />}
112+
/>
113+
{preset.type !== 'default' && (
114+
<>
115+
<IconButton
116+
size="sm"
117+
variant="link"
118+
alignSelf="stretch"
119+
aria-label={t('stylePresets.editTemplate')}
120+
onClick={handleClickEdit}
121+
icon={<PiPencilBold />}
122+
/>
123+
<IconButton
124+
size="sm"
125+
variant="link"
126+
alignSelf="stretch"
127+
aria-label={t('stylePresets.deleteTemplate')}
128+
onClick={handleClickDelete}
129+
colorScheme="error"
130+
icon={<PiTrashBold />}
131+
/>
132+
</>
133+
)}
141134
</Flex>
142-
143135
{showPromptPreviews && (
144-
<Flex flexDir="column" gap={1}>
145-
<Text fontSize="xs">
146-
<Text as="span" fontWeight="semibold">
147-
{t('stylePresets.positivePrompt')}:
148-
</Text>{' '}
149-
{preset.preset_data.positive_prompt}
150-
</Text>
151-
<Text fontSize="xs">
152-
<Text as="span" fontWeight="semibold">
153-
{t('stylePresets.negativePrompt')}:
154-
</Text>{' '}
155-
{preset.preset_data.negative_prompt}
156-
</Text>
157-
</Flex>
136+
<>
137+
<Flex gap={1} minW={0} fontSize="sm" whiteSpace="normal">
138+
<Text>
139+
{t('stylePresets.positivePrompt')}:{' '}
140+
<Text as="span" fontWeight="normal">
141+
{preset.preset_data.positive_prompt}
142+
</Text>
143+
</Text>
144+
</Flex>
145+
<Flex gap={1} minW={0} fontSize="sm" whiteSpace="normal">
146+
<Text>
147+
{t('stylePresets.negativePrompt')}:{' '}
148+
<Text as="span" fontWeight="normal">
149+
{preset.preset_data.negative_prompt}
150+
</Text>
151+
</Text>
152+
</Flex>
153+
</>
158154
)}
159155
</Flex>
160-
</Flex>
156+
</Button>
161157
);
162158
};

‎invokeai/frontend/web/src/features/stylePresets/components/StylePresetPromptPreviewToggle.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ export const StylePresetPromptPreviewToggle = () => {
1717
return (
1818
<IconButton
1919
size="sm"
20-
variant="ghost"
20+
variant="link"
21+
alignSelf="stretch"
2122
aria-label={t('stylePresets.togglePromptPreviews')}
2223
tooltip={t('stylePresets.togglePromptPreviews')}
2324
onClick={handleToggle}

0 commit comments

Comments
 (0)