Feature/new ux bad drop (#440)

This commit is contained in:
Hetu Nandu 2020-08-27 11:33:25 +05:30 committed by GitHub
parent f0a05e8a3f
commit d53dfede0e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -11,14 +11,26 @@ const SPRING_CONFIG = {
friction: 0,
tension: 999,
};
const DropZoneWrapper = styled.div<{ width: number; height: number }>`
const DropZoneWrapper = styled.div<{
width: number;
height: number;
candrop: boolean;
}>`
width: ${props => props.width}px;
height: ${[props => props.height]}px;
position: absolute;
background: ${IntentColors.success};
background: ${props => (props.candrop ? IntentColors.success : "#333")};
${props =>
!props.candrop
? `
background-image: linear-gradient(45deg, #EB2121 8.33%, #33322A 8.33%, #33322A 50%, #EB2121 50%, #EB2121 58.33%, #33322A 58.33%, #33322A 100%);
background-size: 16.97px 16.97px;
`
: ""}
border: 1px dashed ${props => props.theme.colors.textAnchor};
will-change: transform;
opacity: 0.6;
transition: visibility 0s 2s, opacity 2s linear;
z-index: 1;
`;
@ -105,6 +117,7 @@ export const DropZone = forwardRef(
ref={ref}
width={props.width * props.parentColumnWidth}
height={props.height * props.parentRowHeight}
candrop={props.canDrop}
style={{
transform: interpolate(
[X, Y],