github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

tidy(ui): more efficient dnd overlay styling

Browse Source
This commit is contained in:
psychedelicious
2024-10-28 16:34:03 +10:00
parent 533d48abdb
commit 27fa0e1140
1 changed files with 59 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
invokeai/frontend/web/src/features/dnd/DndDropOverlay.tsx
View File

@@ -1,3 +1,4 @@
import type { SystemStyleObject } from '@invoke-ai/ui-library';
import { Flex, Text } from '@invoke-ai/ui-library';
import type { Dnd } from 'features/dnd/dnd';
import { memo } from 'react';
@@ -8,6 +9,60 @@ type Props = {
withBackdrop?: boolean;
};
const sx = {
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
color: 'base.300',
borderColor: 'base.300',
transitionProperty: 'common',
transitionDuration: '0.1s',
'.dnd-drop-overlay-backdrop': {
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
bg: 'base.900',
opacity: 0.7,
borderRadius: 'base',
alignItems: 'center',
justifyContent: 'center',
transitionProperty: 'inherit',
transitionDuration: 'inherit',
},
'.dnd-drop-overlay-content': {
position: 'absolute',
top: 0.5,
right: 0.5,
bottom: 0.5,
left: 0.5,
opacity: 1,
borderWidth: 1.5,
borderRadius: 'base',
borderStyle: 'dashed',
alignItems: 'center',
justifyContent: 'center',
borderColor: 'inherit',
transitionProperty: 'inherit',
transitionDuration: 'inherit',
},
'.dnd-drop-overlay-label': {
fontSize: 'lg',
fontWeight: 'semibold',
textAlign: 'center',
color: 'inherit',
transitionProperty: 'inherit',
transitionDuration: 'inherit',
},
'&[data-dnd-state="over"]': {
color: 'invokeYellow.300',
borderColor: 'invokeYellow.300',
},
} satisfies SystemStyleObject;
export const DndDropOverlay = memo((props: Props) => {
const { dndState, label, withBackdrop = true } = props;
@@ -16,50 +71,10 @@ export const DndDropOverlay = memo((props: Props) => {
}
return (
<Flex position="absolute" top={0} right={0} bottom={0} left={0}>
<Flex
position="absolute"
top={0}
right={0}
bottom={0}
left={0}
bg={withBackdrop ? 'base.900' : 'transparent'}
opacity={0.7}
borderRadius="base"
alignItems="center"
justifyContent="center"
transitionProperty="common"
transitionDuration="0.1s"
/>
<Flex
position="absolute"
top={0.5}
right={0.5}
bottom={0.5}
left={0.5}
opacity={1}
borderWidth={1.5}
borderColor={dndState === 'over' ? 'invokeYellow.300' : 'base.300'}
borderRadius="base"
borderStyle="dashed"
transitionProperty="common"
transitionDuration="0.1s"
alignItems="center"
justifyContent="center"
>
{label && (
<Text
fontSize="lg"
fontWeight="semibold"
color={dndState === 'over' ? 'invokeYellow.300' : 'base.300'}
transitionProperty="common"
transitionDuration="0.1s"
textAlign="center"
>
{label}
</Text>
)}
<Flex className="dnd-drop-overlay" data-dnd-state={dndState} sx={sx}>
{withBackdrop && <Flex className="dnd-drop-overlay-backdrop" />}
<Flex className="dnd-drop-overlay-content">
{label && <Text className="dnd-drop-overlay-label">{label}</Text>}
</Flex>
</Flex>
);