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): replace aspect ratio icon

Browse Source 
closes #5448
This commit is contained in:
psychedelicious 2024-01-09 19:00:35 +11:00 committed by Kent Keirsey
parent 9e1dd8ac9c
commit f19def5f7b
2 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioPreview.tsx
View File

@ -3,7 +3,7 @@ import { useSize } from '@chakra-ui/react-use-size';
import { useImageSizeContext } from 'features/parameters/components/ImageSize/ImageSizeContext';
import { AnimatePresence, motion } from 'framer-motion';
import { useMemo, useRef } from 'react';
import { FaImage } from 'react-icons/fa';
import { PiFrameCorners } from 'react-icons/pi';
import {
BOX_SIZE_CSS_CALC,
@ -76,7 +76,7 @@ export const AspectRatioPreview = () => {
exit={MOTION_ICON_EXIT}
style={ICON_CONTAINER_STYLES}
>
<Icon as={FaImage} color="base.700" boxSize={BOX_SIZE_CSS_CALC} />
<Icon as={PiFrameCorners} color="base.700" boxSize={BOX_SIZE_CSS_CALC} />
</Flex>
)}
</AnimatePresence>

2
invokeai/frontend/web/src/features/parameters/components/ImageSize/constants.ts
View File

@ -5,7 +5,7 @@ import type { AspectRatioID, AspectRatioState } from './types';
// When the aspect ratio is between these two values, we show the icon (experimentally determined)
export const ICON_LOW_CUTOFF = 0.23;
export const ICON_HIGH_CUTOFF = 1 / ICON_LOW_CUTOFF;
export const ICON_SIZE_PX = 48;
export const ICON_SIZE_PX = 64;
export const ICON_PADDING_PX = 16;
export const BOX_SIZE_CSS_CALC = `min(${ICON_SIZE_PX}px, calc(100% - ${ICON_PADDING_PX}px))`;
export const MOTION_ICON_INITIAL = {