diff --git a/app/client/src/assets/icons/control/delete.svg b/app/client/src/assets/icons/control/delete.svg new file mode 100644 index 0000000000..09b3855266 --- /dev/null +++ b/app/client/src/assets/icons/control/delete.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/client/src/assets/icons/control/move.svg b/app/client/src/assets/icons/control/move.svg new file mode 100644 index 0000000000..3cd36f1c26 --- /dev/null +++ b/app/client/src/assets/icons/control/move.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/client/src/editorComponents/ButtonComponent.tsx b/app/client/src/editorComponents/ButtonComponent.tsx index 2fb5efa485..da9669b6c9 100644 --- a/app/client/src/editorComponents/ButtonComponent.tsx +++ b/app/client/src/editorComponents/ButtonComponent.tsx @@ -1,4 +1,4 @@ -import * as React from "react"; +import React from "react"; import { Button, MaybeElement } from "@blueprintjs/core"; import { TextComponentProps } from "./TextComponent"; import { Container } from "./ContainerComponent"; diff --git a/app/client/src/editorComponents/ContainerComponent.tsx b/app/client/src/editorComponents/ContainerComponent.tsx index 10826cc822..c9e9b04808 100644 --- a/app/client/src/editorComponents/ContainerComponent.tsx +++ b/app/client/src/editorComponents/ContainerComponent.tsx @@ -13,6 +13,7 @@ export const Container = styled("div")` position: ${props => { return props.style.positionType === "ABSOLUTE" ? "absolute" : "relative"; }}; + align-items: stretch; `; const ContainerComponent = (props: ContainerProps) => { diff --git a/app/client/src/editorComponents/DragLayerComponent.tsx b/app/client/src/editorComponents/DragLayerComponent.tsx index a84dd0e23a..b3b7b8f6b8 100644 --- a/app/client/src/editorComponents/DragLayerComponent.tsx +++ b/app/client/src/editorComponents/DragLayerComponent.tsx @@ -8,7 +8,7 @@ import { OccupiedSpace } from "../widgets/ContainerWidget"; const WrappedDragLayer = styled.div` position: absolute; pointer-events: none; - z-index: 100; + z-index: 10; left: 0; top: 0; width: 100%; diff --git a/app/client/src/editorComponents/DraggableComponent.tsx b/app/client/src/editorComponents/DraggableComponent.tsx index 27e3986196..59c7eb1af0 100644 --- a/app/client/src/editorComponents/DraggableComponent.tsx +++ b/app/client/src/editorComponents/DraggableComponent.tsx @@ -1,10 +1,11 @@ import React from "react"; -import { Icon } from "@blueprintjs/core"; import styled from "styled-components"; import { WidgetProps, WidgetOperations } from "../widgets/BaseWidget"; import { useDrag, DragPreviewImage, DragSourceMonitor } from "react-dnd"; import blankImage from "../assets/images/blank.png"; import { ContainerProps } from "./ContainerComponent"; +import { ControlIcons } from "../icons/ControlIcons"; +import { theme } from "../constants/DefaultTheme"; const DraggableWrapper = styled.div` &:hover > div { @@ -14,19 +15,33 @@ const DraggableWrapper = styled.div` const DragHandle = styled.div` position: absolute; - left: ${props => props.theme.spaces[2]}px; - top: -${props => props.theme.spaces[8]}px; + left: -${props => props.theme.spaces[4]}px; + top: -${props => props.theme.spaces[4]}px; cursor: move; display: none; + cursor: pointer; + z-index: 11; `; const DeleteControl = styled.div` position: absolute; - right: ${props => props.theme.spaces[2]}px; - top: -${props => props.theme.spaces[8]}px; + right: -${props => props.theme.spaces[4]}px; + top: -${props => props.theme.spaces[4]}px; display: none; + cursor: pointer; + z-index: 11; `; +const moveControlIcon = ControlIcons.MOVE_CONTROL({ + width: theme.fontSizes[6], + height: theme.fontSizes[6], +}); + +const deleteControlIcon = ControlIcons.DELETE_CONTROL({ + width: theme.fontSizes[6], + height: theme.fontSizes[6], +}); + type DraggableComponentProps = WidgetProps & ContainerProps; const DraggableComponent = (props: DraggableComponentProps) => { @@ -57,11 +72,9 @@ const DraggableComponent = (props: DraggableComponentProps) => { : 0, }} > - - - + {moveControlIcon} - + {deleteControlIcon} {props.children} diff --git a/app/client/src/editorComponents/Dropzone.tsx b/app/client/src/editorComponents/Dropzone.tsx index c52da957ac..5d17ac892b 100644 --- a/app/client/src/editorComponents/Dropzone.tsx +++ b/app/client/src/editorComponents/Dropzone.tsx @@ -5,7 +5,7 @@ import { snapToGrid } from "../utils/helpers"; const DropZoneWrapper = styled.div` position: absolute; - z-index: 100; + z-index: 10; background: ${props => props.theme.colors.hover}; border: 1px dashed ${props => props.theme.colors.textAnchor}; opacity: 0.7; diff --git a/app/client/src/icons/ControlIcons.tsx b/app/client/src/icons/ControlIcons.tsx new file mode 100644 index 0000000000..b69acedcd5 --- /dev/null +++ b/app/client/src/icons/ControlIcons.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import { IconProps, IconWrapper } from "../constants/IconConstants"; +import { ReactComponent as DeleteIcon } from "../assets/icons/control/delete.svg"; +import { ReactComponent as MoveIcon } from "../assets/icons/control/move.svg"; + +/* eslint-disable react/display-name */ + +export const ControlIcons: { + [id: string]: Function; +} = { + DELETE_CONTROL: (props: IconProps) => ( + + + + ), + MOVE_CONTROL: (props: IconProps) => ( + + + + ), +}; diff --git a/app/client/src/pages/Editor/index.tsx b/app/client/src/pages/Editor/index.tsx index fc55ebcace..9c0a334015 100644 --- a/app/client/src/pages/Editor/index.tsx +++ b/app/client/src/pages/Editor/index.tsx @@ -32,7 +32,7 @@ const CanvasContainer = styled.section` right: 0; bottom: 0; left: 0; - z-index: 1000; + z-index: 11; pointer-events: none; } `;