Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

WIP: Canvas Fixes: Adhere to Figma Styles

Browse Source
This commit is contained in:
Abhinav Jha 2019-10-01 01:34:03 +05:30
parent 6c942abe2b
commit e23643e5e8
9 changed files with 56 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/client/src/assets/icons/control/delete.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="10" cy="10" r="10" fill="#21282C"/>
<path d="M11.75 5.5H14C14.45 5.5 14.75 5.8 14.75 6.25V7H5V6.25C5 5.8 5.375 5.5 5.75 5.5H8C8.15 4.675 8.975 4 9.875 4C10.775 4 11.6 4.675 11.75 5.5ZM8.75 5.5H11C10.85 5.05 10.325 4.75 9.875 4.75C9.425 4.75 8.9 5.05 8.75 5.5ZM5.75 7.75H14L13.325 15.325C13.325 15.7 12.95 16 12.575 16H7.175C6.8 16 6.5 15.7 6.425 15.325L5.75 7.75Z" fill="#F2FAFF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 497 B

4
app/client/src/assets/icons/control/move.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="10" cy="10" r="10" fill="#21282C"/>
<path d="M16 10L13.3333 12.6667V10.6667H10.6667V13.3333H12.6667L10 16L7.33333 13.3333H9.33333V10.6667H6.66667V12.6667L4 10L6.66667 7.33333V9.33333H9.33333V6.66667H7.33333L10 4L12.6667 6.66667H10.6667V9.33333H13.3333V7.33333L16 10Z" fill="#F2FAFF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 400 B

2
app/client/src/editorComponents/ButtonComponent.tsx
View File

@ -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";

1
app/client/src/editorComponents/ContainerComponent.tsx
View File

@ -13,6 +13,7 @@ export const Container = styled("div")<ContainerProps>`
position: ${props => {
return props.style.positionType === "ABSOLUTE" ? "absolute" : "relative";
}};
align-items: stretch;
`;
const ContainerComponent = (props: ContainerProps) => {

2
app/client/src/editorComponents/DragLayerComponent.tsx
View File

@ -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%;

31
app/client/src/editorComponents/DraggableComponent.tsx
View File

@ -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,
}}
>
<DragHandle ref={drag}>
<Icon icon="drag-handle-horizontal" iconSize={20} />
</DragHandle>
<DragHandle ref={drag}>{moveControlIcon}</DragHandle>
<DeleteControl onClick={deleteWidget}>
<Icon icon="trash" iconSize={20} />
{deleteControlIcon}
</DeleteControl>
{props.children}
</DraggableWrapper>

2
app/client/src/editorComponents/Dropzone.tsx
View File

@ -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;

21
app/client/src/icons/ControlIcons.tsx Normal file
View File

@ -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) => (
<IconWrapper {...props}>
<DeleteIcon />
</IconWrapper>
),
MOVE_CONTROL: (props: IconProps) => (
<IconWrapper {...props}>
<MoveIcon />
</IconWrapper>
),
};

2
app/client/src/pages/Editor/index.tsx
View File

@ -32,7 +32,7 @@ const CanvasContainer = styled.section`
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
z-index: 11;
pointer-events: none;
}
`;