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

Make control sizes configurable

Browse Source
This commit is contained in:
Abhinav Jha 2019-10-02 01:45:02 +05:30
parent fc2676487b
commit 59b3eb1d7b
1 changed files with 12 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,6 +7,10 @@ import { ContainerProps, FocusContext } from "./ContainerComponent";
import { ControlIcons } from "../icons/ControlIcons"; import { ControlIcons } from "../icons/ControlIcons";
import { theme } from "../constants/DefaultTheme"; import { theme } from "../constants/DefaultTheme";
// FontSizes array in DefaultTheme.tsx
// Change this to toggle the size of delete and move handles.
const CONTROL_THEME_FONTSIZE_INDEX = 6;
const DraggableWrapper = styled.div<{ show: boolean }>` const DraggableWrapper = styled.div<{ show: boolean }>`
& > div.control { & > div.control {
display: ${props => (props.show ? "block" : "none")}; display: ${props => (props.show ? "block" : "none")};
@ -18,8 +22,8 @@ const DraggableWrapper = styled.div<{ show: boolean }>`
const DragHandle = styled.div` const DragHandle = styled.div`
position: absolute; position: absolute;
left: -${props => props.theme.spaces[4]}px; left: -${props => props.theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX] / 2}px;
top: -${props => props.theme.spaces[4]}px; top: -${props => props.theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX] / 2}px;
cursor: move; cursor: move;
display: none; display: none;
cursor: grab; cursor: grab;
@ -28,21 +32,21 @@ const DragHandle = styled.div`
const DeleteControl = styled.div` const DeleteControl = styled.div`
position: absolute; position: absolute;
right: -${props => props.theme.spaces[4]}px; right: -${props => props.theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX] / 2}px;
top: -${props => props.theme.spaces[4]}px; top: -${props => props.theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX] / 2}px;
display: none; display: none;
cursor: pointer; cursor: pointer;
z-index: 11; z-index: 11;
`; `;
const moveControlIcon = ControlIcons.MOVE_CONTROL({ const moveControlIcon = ControlIcons.MOVE_CONTROL({
width: theme.fontSizes[6], width: theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX],
height: theme.fontSizes[6], height: theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX],
}); });
const deleteControlIcon = ControlIcons.DELETE_CONTROL({ const deleteControlIcon = ControlIcons.DELETE_CONTROL({
width: theme.fontSizes[6], width: theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX],
height: theme.fontSizes[6], height: theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX],
}); });
type DraggableComponentProps = WidgetProps & ContainerProps; type DraggableComponentProps = WidgetProps & ContainerProps;