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

feat(ui): aspect ratio styling

Browse Source
This commit is contained in:
psychedelicious 2023-07-09 22:13:38 +10:00
parent 50218f1595
commit 0e178c3bb7
2 changed files with 37 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamAspectRatio.tsx
View File

@ -1,9 +1,8 @@
import { Flex } from '@chakra-ui/react'; import { ButtonGroup, Flex } from '@chakra-ui/react';
import { RootState } from 'app/store/store'; import { RootState } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIButton from 'common/components/IAIButton'; import IAIButton from 'common/components/IAIButton';
import { setAspectRatio } from 'features/ui/store/uiSlice'; import { setAspectRatio } from 'features/ui/store/uiSlice';
import { ReactNode } from 'react';
const aspectRatios = [ const aspectRatios = [
{ name: 'Free', value: null }, { name: 'Free', value: null },
@ -12,10 +11,6 @@ const aspectRatios = [
{ name: '3:2', value: 3 / 2 }, { name: '3:2', value: 3 / 2 },
]; ];
export const roundToEight = (number: number) => {
return Math.round(number / 8) * 8;
};
export default function ParamAspectRatio() { export default function ParamAspectRatio() {
const aspectRatio = useAppSelector( const aspectRatio = useAppSelector(
(state: RootState) => state.ui.aspectRatio (state: RootState) => state.ui.aspectRatio
@ -23,27 +18,20 @@ export default function ParamAspectRatio() {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const renderAspectRatios = () => {
const aspectRatiosToRender: ReactNode[] = [];
aspectRatios.forEach((ratio) => {
aspectRatiosToRender.push(
<IAIButton
key={ratio.name}
size="sm"
width="max-content"
isChecked={aspectRatio === ratio.value}
onClick={() => dispatch(setAspectRatio(ratio.value))}
>
{ratio.name}
</IAIButton>
);
});
return aspectRatiosToRender;
};
return ( return (
<Flex gap={2} w="100%"> <Flex gap={2} flexGrow={1}>
{renderAspectRatios()} <ButtonGroup isAttached>
{aspectRatios.map((ratio) => (
<IAIButton
key={ratio.name}
size="sm"
isChecked={aspectRatio === ratio.value}
onClick={() => dispatch(setAspectRatio(ratio.value))}
>
{ratio.name}
</IAIButton>
))}
</ButtonGroup>
</Flex> </Flex>
); );
} }

31
invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamSize.tsx
View File

@ -1,4 +1,4 @@
import { Flex, Text } from '@chakra-ui/react'; import { Flex, Spacer, Text } from '@chakra-ui/react';
import { RootState } from 'app/store/store'; import { RootState } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
@ -13,17 +13,32 @@ export default function ParamSize() {
); );
return ( return (
<Flex <Flex
gap={2} sx={{
bg="base.900" gap: 2,
p={4} p: 4,
borderRadius={4} borderRadius: 4,
flexDirection="column" flexDirection: 'column',
w="100%" w: 'full',
bg: 'base.150',
_dark: {
bg: 'base.750',
},
}}
> >
<Flex alignItems="center" gap={2}> <Flex alignItems="center" gap={2}>
<Text fontSize={14} width="full" color="base.300"> <Text
sx={{
fontSize: 'sm',
width: 'full',
color: 'base.700',
_dark: {
color: 'base.300',
},
}}
>
{t('parameters.aspectRatio')} {t('parameters.aspectRatio')}
</Text> </Text>
<Spacer />
<ParamAspectRatio /> <ParamAspectRatio />
</Flex> </Flex>
<Flex gap={2} flexDirection="column"> <Flex gap={2} flexDirection="column">