diff --git a/app/client/src/components/designSystems/appsmith/BaseComponent.tsx b/app/client/src/components/designSystems/appsmith/BaseComponent.tsx index 5daa2dcc1e..df8670eab4 100644 --- a/app/client/src/components/designSystems/appsmith/BaseComponent.tsx +++ b/app/client/src/components/designSystems/appsmith/BaseComponent.tsx @@ -10,7 +10,7 @@ export interface ComponentProps { widgetId: string; widgetName?: string; isDisabled?: boolean; - isVisibile?: boolean; + isVisible?: boolean; backgroundColor?: Color; } diff --git a/app/client/src/components/designSystems/appsmith/ContainerComponent.tsx b/app/client/src/components/designSystems/appsmith/ContainerComponent.tsx index 41c941f769..eb3352bd15 100644 --- a/app/client/src/components/designSystems/appsmith/ContainerComponent.tsx +++ b/app/client/src/components/designSystems/appsmith/ContainerComponent.tsx @@ -1,7 +1,7 @@ import React, { forwardRef, Ref, ReactNode } from "react"; import styled from "styled-components"; import { ComponentProps } from "./BaseComponent"; -import { getBorderCSSShorthand } from "constants/DefaultTheme"; +import { getBorderCSSShorthand, invisible } from "constants/DefaultTheme"; import { Color } from "constants/Colors"; const StyledContainerComponent = styled.div` @@ -19,6 +19,7 @@ const StyledContainerComponent = styled.div` width: 100%; background: ${props => props.backgroundColor}; position: relative; + ${props => (!props.isVisible ? invisible : "")}; }`; /* eslint-disable react/display-name */ diff --git a/app/client/src/components/designSystems/syncfusion/TableComponent.tsx b/app/client/src/components/designSystems/syncfusion/TableComponent.tsx index 5d038ddbf2..c5d20b02a2 100644 --- a/app/client/src/components/designSystems/syncfusion/TableComponent.tsx +++ b/app/client/src/components/designSystems/syncfusion/TableComponent.tsx @@ -82,7 +82,7 @@ const TableComponent = memo( e.preventDefault(); e.stopPropagation(); } - + /* eslint-disable react-hooks/exhaustive-deps */ useEffect(() => { if (grid.current && grid.current.element) { const header = grid.current.getHeaderContent(); diff --git a/app/client/src/components/editorComponents/DragLayerComponent.tsx b/app/client/src/components/editorComponents/DragLayerComponent.tsx index ddb0ac2caa..76245b25f0 100644 --- a/app/client/src/components/editorComponents/DragLayerComponent.tsx +++ b/app/client/src/components/editorComponents/DragLayerComponent.tsx @@ -79,6 +79,15 @@ const DragLayerComponent = (props: DragLayerProps) => { return null; } + /* + When the parent offsets are not updated, we don't need to show the dropzone, as the dropzone + will be rendered at an incorrect coordinates. + We can be sure that the parent offset has been calculated + when the coordiantes are not [0,0]. + */ + + const isParentOffsetCalculated = + props.parentOffset.x > 0 && props.parentOffset.y > 0; return ( { columnWidth={props.parentColumnWidth} setBounds={props.onBoundsUpdate} /> - - {props.visible && props.isOver && currentOffset && ( - - )} + {props.visible && + props.isOver && + currentOffset && + isParentOffsetCalculated && ( + + )} ); }; diff --git a/app/client/src/components/editorComponents/Dropzone.tsx b/app/client/src/components/editorComponents/Dropzone.tsx index 12d13cf96d..6b18d1335e 100644 --- a/app/client/src/components/editorComponents/Dropzone.tsx +++ b/app/client/src/components/editorComponents/Dropzone.tsx @@ -9,8 +9,8 @@ import { useSpring, animated, interpolate, config } from "react-spring"; const SPRING_CONFIG = { ...config.gentle, clamp: true, - friction: 1, - tension: 170, + friction: 0, + tension: 999, }; const DropZoneWrapper = styled.div<{ width: number; height: number }>` width: ${props => props.width}px; @@ -65,14 +65,12 @@ export const DropZone = (props: DropZoneProps) => { const [{ X, Y }, setXY] = useSpring(() => ({ X: props.currentOffset.x - props.parentOffset.x, Y: props.currentOffset.y - props.parentOffset.y, - reset: true, config: SPRING_CONFIG, })); const [{ snappedX, snappedY }, setSnappedXY] = useSpring(() => ({ snappedX: props.currentOffset.x - props.parentOffset.x, snappedY: props.currentOffset.y - props.parentOffset.y, - reset: true, config: SPRING_CONFIG, })); diff --git a/app/client/src/components/editorComponents/ResizableComponent.tsx b/app/client/src/components/editorComponents/ResizableComponent.tsx index 67e0863912..a6787c63de 100644 --- a/app/client/src/components/editorComponents/ResizableComponent.tsx +++ b/app/client/src/components/editorComponents/ResizableComponent.tsx @@ -217,7 +217,10 @@ export const ResizableComponent = memo((props: ResizableComponentProps) => { bottomLeft: canResize, }} > - + {props.children} diff --git a/app/client/src/components/editorComponents/ResizableContainer.tsx b/app/client/src/components/editorComponents/ResizableContainer.tsx index cb28b27edc..e37dce03ed 100644 --- a/app/client/src/components/editorComponents/ResizableContainer.tsx +++ b/app/client/src/components/editorComponents/ResizableContainer.tsx @@ -2,12 +2,14 @@ import { Rnd } from "react-rnd"; import styled, { css } from "styled-components"; import { ContainerWidgetProps } from "widgets/ContainerWidget"; import { WidgetProps } from "widgets/BaseWidget"; +import { invisible } from "constants/DefaultTheme"; export type ResizableComponentProps = ContainerWidgetProps & { paddingOffset: number; }; interface ResizeBorderDotDivProps { isfocused: boolean; + visible: boolean; } const borderCSS = css` @@ -27,6 +29,7 @@ const borderCSS = css` `; export const ResizeBorderDotDiv = styled.div` + ${props => (!props.visible ? invisible : "")} ${borderCSS} &:after { left: -${props => props.theme.spaces[2]}px; diff --git a/app/client/src/constants/DefaultTheme.tsx b/app/client/src/constants/DefaultTheme.tsx index 20423371bc..f9408c6088 100644 --- a/app/client/src/constants/DefaultTheme.tsx +++ b/app/client/src/constants/DefaultTheme.tsx @@ -63,6 +63,12 @@ export const BlueprintControlTransform = css` } `; +export const invisible = css` + && > * { + opacity: 0.6; + } +`; + export const BlueprintCSSTransform = css` &&&& { .${Classes.BUTTON} { diff --git a/app/client/src/pages/UserAuth/Login.tsx b/app/client/src/pages/UserAuth/Login.tsx index 55432ead33..097a2b6eec 100644 --- a/app/client/src/pages/UserAuth/Login.tsx +++ b/app/client/src/pages/UserAuth/Login.tsx @@ -72,7 +72,7 @@ type LoginFormProps = { emailValue: string } & InjectedFormProps< >; export const Login = (props: LoginFormProps) => { - const { error, pristine, valid } = props; + const { error, valid } = props; const location = useLocation(); const queryParams = new URLSearchParams(location.search); @@ -90,7 +90,7 @@ export const Login = (props: LoginFormProps) => { return ( - {showError && pristine && ( + {showError && (