From 6fb1136f020c9f87bd5cf3a38ffcc6124f9ae7a9 Mon Sep 17 00:00:00 2001 From: Preet Sidhu Date: Mon, 6 Mar 2023 15:47:47 +0530 Subject: [PATCH] Fix: revert color change (#21161) ## Description Revert an unwanted color change. ## Type of change > Please delete options that are not relevant. - Bug fix (non-breaking change which fixes an issue) ## Checklist: ### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [ ] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [ ] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag --- .../ResizeStyledComponents.autolayout.tsx | 188 ---------- app/client/src/constants/Colors.tsx | 3 +- .../src/resizable/resize/index.autolayout.tsx | 352 ------------------ 3 files changed, 1 insertion(+), 542 deletions(-) delete mode 100644 app/client/src/components/editorComponents/ResizeStyledComponents.autolayout.tsx delete mode 100644 app/client/src/resizable/resize/index.autolayout.tsx diff --git a/app/client/src/components/editorComponents/ResizeStyledComponents.autolayout.tsx b/app/client/src/components/editorComponents/ResizeStyledComponents.autolayout.tsx deleted file mode 100644 index 6f95de4ec2..0000000000 --- a/app/client/src/components/editorComponents/ResizeStyledComponents.autolayout.tsx +++ /dev/null @@ -1,188 +0,0 @@ -import { Colors } from "constants/Colors"; -import { invisible } from "constants/DefaultTheme"; -import { WIDGET_PADDING } from "constants/WidgetConstants"; -import styled, { css } from "styled-components"; - -const EDGE_RESIZE_HANDLE_WIDTH = 12; -const CORNER_RESIZE_HANDLE_WIDTH = 10; - -export const VisibilityContainer = styled.div<{ - visible: boolean; - padding: number; - reduceOpacity: boolean; -}>` - ${(props) => (!props.visible ? invisible : "")} - height: 100%; - width: 100%; - ${({ reduceOpacity }) => - reduceOpacity && - css` - opacity: 0.25; - `} -`; - -const VerticalResizeIndicators = css<{ - showLightBorder: boolean; - isHovered: boolean; -}>` - &::after { - position: absolute; - content: ""; - width: 7px; - height: 16px; - border-radius: 50%/16%; - background: ${Colors.GREY_1}; - top: calc(50% - 8px); - left: calc(50% - 2.5px); - border: ${(props) => { - return `1px solid ${props.isHovered ? Colors.WATUSI : "#F86A2B"}`; - }}; - outline: 1px solid ${Colors.GREY_1}; - } - &:hover::after { - background: #f86a2b; - } -`; - -const HorizontalResizeIndicators = css<{ - showLightBorder: boolean; - isHovered: boolean; -}>` - &::after { - position: absolute; - content: ""; - width: 16px; - height: 7px; - border-radius: 16%/50%; - border: ${(props) => { - return `1px solid ${props.isHovered ? Colors.WATUSI : "#F86A2B"}`; - }}; - background: ${Colors.GREY_1}; - top: calc(50% - 2.5px); - left: calc(50% - 8px); - outline: 1px solid ${Colors.GREY_1}; - } - &:hover::after { - background: #f86a2b; - } -`; - -export const EdgeHandleStyles = css<{ - showAsBorder: boolean; - showLightBorder: boolean; - disableDot: boolean; - isHovered: boolean; -}>` - position: absolute; - width: ${EDGE_RESIZE_HANDLE_WIDTH}px; - height: ${EDGE_RESIZE_HANDLE_WIDTH}px; - &::before { - position: absolute; - background: "transparent"; - content: ""; - } -`; - -export const VerticalHandleStyles = css<{ - showAsBorder: boolean; - showLightBorder: boolean; - disableDot: boolean; - isHovered: boolean; -}>` - ${EdgeHandleStyles} - ${(props) => - props.showAsBorder || props.disableDot ? "" : VerticalResizeIndicators} - top:${~(WIDGET_PADDING - 1) + 1}px; - height: calc(100% + ${2 * WIDGET_PADDING - 1}px); - ${(props) => - props.showAsBorder || props.disableDot ? "" : "cursor: col-resize;"} - &:before { - left: 50%; - bottom: 0px; - top: 0; - width: 1px; - } -`; - -export const HorizontalHandleStyles = css<{ - showAsBorder: boolean; - showLightBorder: boolean; - disableDot: boolean; - isHovered: boolean; -}>` - ${EdgeHandleStyles} - ${(props) => - props.showAsBorder || props.disableDot ? "" : HorizontalResizeIndicators} - left: ${~WIDGET_PADDING + 1}px; - width: calc(100% + ${2 * WIDGET_PADDING}px); - ${(props) => - props.showAsBorder || props.disableDot ? "" : "cursor: row-resize;"} - &:before { - top: 50%; - right: 0px; - left: 0px; - height: 1px; - } -`; - -export const LeftHandleStyles = styled.div` - ${VerticalHandleStyles} - left: ${-EDGE_RESIZE_HANDLE_WIDTH / 2 - WIDGET_PADDING + 1}px; -`; - -export const RightHandleStyles = styled.div` - ${VerticalHandleStyles}; - right: ${-EDGE_RESIZE_HANDLE_WIDTH / 2 - WIDGET_PADDING + 3}px; - height: calc(100% + ${2 * WIDGET_PADDING}px); -`; - -export const TopHandleStyles = styled.div` - ${HorizontalHandleStyles}; - top: ${-EDGE_RESIZE_HANDLE_WIDTH / 2 - WIDGET_PADDING + 1}px; -`; - -export const BottomHandleStyles = styled.div` - ${HorizontalHandleStyles}; - bottom: ${-EDGE_RESIZE_HANDLE_WIDTH / 2 - WIDGET_PADDING + 3}px; -`; - -export const CornerHandleStyles = css` - position: absolute; - z-index: 3; - width: ${CORNER_RESIZE_HANDLE_WIDTH}px; - height: ${CORNER_RESIZE_HANDLE_WIDTH}px; -`; - -export const BottomRightHandleStyles = styled.div<{ - showAsBorder: boolean; -}>` - ${CornerHandleStyles}; - bottom: -${CORNER_RESIZE_HANDLE_WIDTH / 2}px; - right: -${CORNER_RESIZE_HANDLE_WIDTH / 2}px; - ${(props) => (!props.showAsBorder ? "cursor: se-resize;" : "")} -`; - -export const BottomLeftHandleStyles = styled.div<{ - showAsBorder: boolean; -}>` - ${CornerHandleStyles}; - left: -${CORNER_RESIZE_HANDLE_WIDTH / 2}px; - bottom: -${CORNER_RESIZE_HANDLE_WIDTH / 2}px; - ${(props) => (!props.showAsBorder ? "cursor: sw-resize;" : "")} -`; -export const TopLeftHandleStyles = styled.div<{ - showAsBorder: boolean; -}>` - ${CornerHandleStyles}; - left: -${CORNER_RESIZE_HANDLE_WIDTH / 2}px; - top: -${CORNER_RESIZE_HANDLE_WIDTH / 2}px; - ${(props) => (!props.showAsBorder ? "cursor: nw-resize;" : "")} -`; -export const TopRightHandleStyles = styled.div<{ - showAsBorder: boolean; -}>` - ${CornerHandleStyles}; - right: -${CORNER_RESIZE_HANDLE_WIDTH / 2}px; - top: -${CORNER_RESIZE_HANDLE_WIDTH / 2}px; - ${(props) => (!props.showAsBorder ? "cursor: ne-resize;" : "")} -`; diff --git a/app/client/src/constants/Colors.tsx b/app/client/src/constants/Colors.tsx index 9096428d85..3ad9d09a0c 100644 --- a/app/client/src/constants/Colors.tsx +++ b/app/client/src/constants/Colors.tsx @@ -69,13 +69,12 @@ export const Colors = { BUTTER_CUP: "#F7AF22", BLUE_CHARCOAL: "#23292E", TROUT: "#4C565E", - JAFFA_DARK: "#F86A2B", + JAFFA_DARK: "#EF7541", BURNING_ORANGE: "#FF7742", TIA_MARIA: "#CB4810", SOLID_MERCURY: "#E5E5E5", TROUT_DARK: "#535B62", ALABASTER: "#F9F8F8", - // WATUSI: "#FF9B4E", WATUSI: "#FFE0D2", GRAY: "#858282", GRAY2: "#939090", diff --git a/app/client/src/resizable/resize/index.autolayout.tsx b/app/client/src/resizable/resize/index.autolayout.tsx deleted file mode 100644 index 38038932ea..0000000000 --- a/app/client/src/resizable/resize/index.autolayout.tsx +++ /dev/null @@ -1,352 +0,0 @@ -import { isHandleResizeAllowed } from "components/editorComponents/ResizableUtils"; -import React, { ReactNode, useEffect, useState } from "react"; -import { Spring } from "react-spring"; -import { useDrag } from "react-use-gesture"; -import { ReflowDirection } from "reflow/reflowTypes"; -import { ResizeWrapper } from "resizable/resizenreflow"; -import { StyledComponent } from "styled-components"; -import PerformanceTracker, { - PerformanceTransactionName, -} from "utils/PerformanceTracker"; - -const getSnappedValues = ( - x: number, - y: number, - snapGrid: { x: number; y: number }, -) => { - return { - x: Math.round(x / snapGrid.x) * snapGrid.x, - y: Math.round(y / snapGrid.y) * snapGrid.y, - }; -}; - -type ResizableHandleProps = { - allowResize: boolean; - showLightBorder?: boolean; - isHovered: boolean; - disableDot: boolean; - dragCallback: (x: number, y: number) => void; - component: StyledComponent<"div", Record>; - onStart: () => void; - onStop: () => void; - snapGrid: { - x: number; - y: number; - }; -}; - -function ResizableHandle(props: ResizableHandleProps) { - const bind = useDrag( - ({ first, last, dragging, movement: [mx, my], memo }) => { - if (!props.allowResize) { - return; - } - const snapped = getSnappedValues(mx, my, props.snapGrid); - if (dragging && memo && (snapped.x !== memo.x || snapped.y !== memo.y)) { - props.dragCallback(snapped.x, snapped.y); - } - if (first) { - props.onStart(); - } - if (last) { - props.onStop(); - } - return snapped; - }, - ); - const propsToPass = { - ...bind(), - showAsBorder: !props.allowResize, - disableDot: props.disableDot, - isHovered: props.isHovered, - }; - - return ; -} - -type ResizableProps = { - allowResize: boolean; - handles: { - left?: StyledComponent<"div", Record>; - top?: StyledComponent<"div", Record>; - bottom?: StyledComponent<"div", Record>; - right?: StyledComponent<"div", Record>; - bottomRight?: StyledComponent<"div", Record>; - topLeft?: StyledComponent<"div", Record>; - topRight?: StyledComponent<"div", Record>; - bottomLeft?: StyledComponent<"div", Record>; - }; - componentWidth: number; - componentHeight: number; - children: ReactNode; - onStart: () => void; - onStop: ( - size: { width: number; height: number }, - position: { x: number; y: number }, - ) => void; - snapGrid: { x: number; y: number }; - enableVerticalResize: boolean; - enableHorizontalResize: boolean; - isColliding: ( - size: { width: number; height: number }, - position: { x: number; y: number }, - ) => boolean; - className?: string; - resizeDualSides?: boolean; - widgetId: string; - showLightBorder?: boolean; - zWidgetType?: string; -}; - -export const Resizable = function Resizable(props: ResizableProps) { - // Performance tracking start - const sentryPerfTags = props.zWidgetType - ? [{ name: "widget_type", value: props.zWidgetType }] - : []; - PerformanceTracker.startTracking( - PerformanceTransactionName.SHOW_RESIZE_HANDLES, - { widgetId: props.widgetId }, - true, - sentryPerfTags, - ); - - useEffect(() => { - PerformanceTracker.stopTracking( - PerformanceTransactionName.SHOW_RESIZE_HANDLES, - ); - }); - //end - const [pointerEvents, togglePointerEvents] = useState(true); - const [newDimensions, set] = useState({ - width: props.componentWidth, - height: props.componentHeight, - x: 0, - y: 0, - reset: false, - }); - - const { resizeDualSides } = props; - const multiplier = resizeDualSides ? 2 : 1; - - const setNewDimensions = (rect: { - width: number; - height: number; - x: number; - y: number; - }) => { - const { height, width, x, y } = rect; - const shouldUpdateHeight = - props.componentHeight !== height && props.enableVerticalResize; - if (!shouldUpdateHeight) rect.height = props.componentHeight; - - const shouldUpdateWidth = - props.componentWidth !== width && props.enableHorizontalResize; - if (!shouldUpdateWidth) rect.width = props.componentWidth; - - const isColliding = props.isColliding({ width, height }, { x, y }); - if (!isColliding) { - set({ ...rect, reset: false }); - } - }; - - useEffect(() => { - set({ - width: props.componentWidth, - height: props.componentHeight, - x: 0, - y: 0, - reset: true, - }); - }, [props.componentHeight, props.componentWidth]); - - const handles = []; - - if (props.handles.left) { - handles.push({ - dragCallback: (x: number) => { - setNewDimensions({ - width: props.componentWidth - multiplier * x, - height: newDimensions.height, - x: resizeDualSides ? newDimensions.x : x, - y: newDimensions.y, - }); - }, - component: props.handles.left, - handleDirection: ReflowDirection.LEFT, - }); - } - - if (props.handles.top) { - handles.push({ - dragCallback: (x: number, y: number) => { - setNewDimensions({ - width: newDimensions.width, - height: props.componentHeight - multiplier * y, - y: resizeDualSides ? newDimensions.y : y, - x: newDimensions.x, - }); - }, - component: props.handles.top, - handleDirection: ReflowDirection.TOP, - }); - } - - if (props.handles.right) { - handles.push({ - dragCallback: (x: number) => { - setNewDimensions({ - width: props.componentWidth + multiplier * x, - height: newDimensions.height, - x: newDimensions.x, - y: newDimensions.y, - }); - }, - component: props.handles.right, - handleDirection: ReflowDirection.RIGHT, - }); - } - - if (props.handles.bottom) { - handles.push({ - dragCallback: (x: number, y: number) => { - setNewDimensions({ - width: newDimensions.width, - height: props.componentHeight + multiplier * y, - x: newDimensions.x, - y: newDimensions.y, - }); - }, - component: props.handles.bottom, - handleDirection: ReflowDirection.BOTTOM, - }); - } - - if (props.handles.topLeft) { - handles.push({ - dragCallback: (x: number, y: number) => { - setNewDimensions({ - width: props.componentWidth - x, - height: props.componentHeight - y, - x: x, - y: y, - }); - }, - component: props.handles.topLeft, - }); - } - - if (props.handles.topRight) { - handles.push({ - dragCallback: (x: number, y: number) => { - setNewDimensions({ - width: props.componentWidth + x, - height: props.componentHeight - y, - x: newDimensions.x, - y: y, - }); - }, - component: props.handles.topRight, - }); - } - - if (props.handles.bottomRight) { - handles.push({ - dragCallback: (x: number, y: number) => { - setNewDimensions({ - width: props.componentWidth + x, - height: props.componentHeight + y, - x: newDimensions.x, - y: newDimensions.y, - }); - }, - component: props.handles.bottomRight, - }); - } - - if (props.handles.bottomLeft) { - handles.push({ - dragCallback: (x: number, y: number) => { - setNewDimensions({ - width: props.componentWidth - x, - height: props.componentHeight + y, - x, - y: newDimensions.y, - }); - }, - component: props.handles.bottomLeft, - }); - } - const onResizeStop = () => { - togglePointerEvents(true); - props.onStop( - { - width: newDimensions.width, - height: newDimensions.height, - }, - { - x: newDimensions.x, - y: newDimensions.y, - }, - ); - }; - const showResizeBoundary = props.enableHorizontalResize; - const renderHandles = handles.map((handle, index) => { - const disableDot = - !showResizeBoundary || - !isHandleResizeAllowed( - props.enableHorizontalResize, - props.enableVerticalResize, - handle.handleDirection, - ); - return ( - { - togglePointerEvents(false); - props.onStart(); - }} - onStop={onResizeStop} - snapGrid={props.snapGrid} - /> - ); - }); - - return ( - - {(_props) => ( - - {props.children} - {props.enableHorizontalResize && renderHandles} - - )} - - ); -}; - -export default Resizable;