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

tidy(ui): clean up ActiveStylePreset markup

Browse Source
This commit is contained in:
psychedelicious 2024-08-21 09:03:22 +10:00
parent 2298be0e6b
commit 4f4ba7b462
3 changed files with 36 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
invokeai/frontend/web/src/features/stylePresets/components/ActiveStylePreset.tsx
View File

@ -1,4 +1,4 @@
import { Badge, Flex, IconButton, Text, Tooltip } from '@invoke-ai/ui-library'; import { Badge, Flex, IconButton, Spacer, Text, Tooltip } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { negativePromptChanged, positivePromptChanged } from 'features/controlLayers/store/controlLayersSlice'; import { negativePromptChanged, positivePromptChanged } from 'features/controlLayers/store/controlLayersSlice';
import { usePresetModifiedPrompts } from 'features/stylePresets/hooks/usePresetModifiedPrompts'; import { usePresetModifiedPrompts } from 'features/stylePresets/hooks/usePresetModifiedPrompts';
@ -69,45 +69,40 @@ export const ActiveStylePreset = () => {
); );
} }
return ( return (
<Flex justifyContent="space-between" flexGrow={1} alignItems="center" gap={2} overflow="hidden"> <Flex w="full" alignItems="center" gap={2} minW={0}>
<StylePresetImage imageWidth={25} presetImageUrl={activeStylePreset.image} /> <StylePresetImage imageWidth={25} presetImageUrl={activeStylePreset.image} />
<Flex flexDir="column" flexGrow={1} overflow="hidden"> <Badge colorScheme="invokeBlue" variant="subtle" justifySelf="flex-start">
<Flex> {activeStylePreset.name}
<Badge colorScheme="invokeBlue" variant="subtle"> </Badge>
{activeStylePreset.name} <Spacer />
</Badge> <Tooltip label={t('stylePresets.toggleViewMode')}>
</Flex> <IconButton
</Flex> onClick={handleToggleViewMode}
<Flex gap={1}> variant="outline"
<Tooltip label={t('stylePresets.toggleViewMode')}> size="sm"
<IconButton aria-label={t('stylePresets.toggleViewMode')}
onClick={handleToggleViewMode} colorScheme={viewMode ? 'invokeBlue' : 'base'}
variant="outline" icon={<PiEyeBold />}
size="sm" />
aria-label={t('stylePresets.toggleViewMode')} </Tooltip>
colorScheme={viewMode ? 'invokeBlue' : 'base'} <Tooltip label={t('stylePresets.flatten')}>
icon={<PiEyeBold />} <IconButton
/> onClick={handleFlattenPrompts}
</Tooltip> variant="outline"
<Tooltip label={t('stylePresets.flatten')}> size="sm"
<IconButton aria-label={t('stylePresets.flatten')}
onClick={handleFlattenPrompts} icon={<PiStackSimpleBold />}
variant="outline" />
size="sm" </Tooltip>
aria-label={t('stylePresets.flatten')} <Tooltip label={t('stylePresets.clearTemplateSelection')}>
icon={<PiStackSimpleBold />} <IconButton
/> onClick={handleClearActiveStylePreset}
</Tooltip> variant="outline"
<Tooltip label={t('stylePresets.clearTemplateSelection')}> size="sm"
<IconButton aria-label={t('stylePresets.clearTemplateSelection')}
onClick={handleClearActiveStylePreset} icon={<PiXBold />}
variant="outline" />
size="sm" </Tooltip>
aria-label={t('stylePresets.clearTemplateSelection')}
icon={<PiXBold />}
/>
</Tooltip>
</Flex>
</Flex> </Flex>
); );
}; };

1
invokeai/frontend/web/src/features/stylePresets/components/StylePresetImage.tsx
View File

@ -21,6 +21,7 @@ const StylePresetImage = ({ presetImageUrl, imageWidth }: { presetImageUrl: stri
/> />
) )
} }
p={2}
> >
<Image <Image
src={presetImageUrl || ''} src={presetImageUrl || ''}

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

@ -29,7 +29,7 @@ export const StylePresetMenuTrigger = () => {
py={2} py={2}
px={3} px={3}
borderRadius="base" borderRadius="base"
gap={1} gap={2}
role="button" role="button"
_hover={_hover} _hover={_hover}
transitionProperty="background-color" transitionProperty="background-color"
@ -37,7 +37,6 @@ export const StylePresetMenuTrigger = () => {
w="full" w="full"
> >
<ActiveStylePreset /> <ActiveStylePreset />
<IconButton aria-label={t('stylePresets.viewList')} variant="ghost" icon={<PiCaretDownBold />} size="sm" /> <IconButton aria-label={t('stylePresets.viewList')} variant="ghost" icon={<PiCaretDownBold />} size="sm" />
</Flex> </Flex>
); );