Development

src/components/MainContainerHeader.jsx → src/components/ApplicationActions.jsx

@@ -1,53 +1,52 @@
-import React from 'react';
+import React from "react";
 // import PropTypes from 'prop-types';
-import Button from '@material-ui/core/Button';
-import ZoomInIcon from '@material-ui/icons/ZoomIn';
-import ZoomOutIcon from '@material-ui/icons/ZoomOut';
-import ImageSearchIcon from '@material-ui/icons/ImageSearch';
-import OpenWithIcon from '@material-ui/icons/OpenWith';
-import KeyboardArrowLeftIcon from '@material-ui/icons/KeyboardArrowLeft';
-import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight';
-import DeleteOutlineIcon from '@material-ui/icons/DeleteOutline';
-import GetAppIcon from '@material-ui/icons/GetApp';
-import { withStyles } from '@material-ui/core/styles';
-import Tooltip from '@material-ui/core/Tooltip';
+import Button from "@material-ui/core/Button";
+import ZoomInIcon from "@material-ui/icons/ZoomIn";
+import ZoomOutIcon from "@material-ui/icons/ZoomOut";
+import ImageSearchIcon from "@material-ui/icons/ImageSearch";
+import OpenWithIcon from "@material-ui/icons/OpenWith";
+import KeyboardArrowLeftIcon from "@material-ui/icons/KeyboardArrowLeft";
+import KeyboardArrowRightIcon from "@material-ui/icons/KeyboardArrowRight";
+import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline";
+import GetAppIcon from "@material-ui/icons/GetApp";
+import { withStyles } from "@material-ui/core/styles";
+import Tooltip from "@material-ui/core/Tooltip";
 
 const styles = () => ({
   iconSmall: {
-    fontSize: 10,
+    fontSize: 10
   },
   button: {
     // borderRight: '1px solid grey',
-    borderRadius: '0px',
-    backgroundColor: '#212121',
+    borderRadius: "0px",
+    backgroundColor: "#212121",
 
-    '&:hover > span > svg': {
-      color: '#1de9b6',
-      transition: 'all .2s ease',
+    "&:hover > span > svg": {
+      color: "#1de9b6",
+      transition: "all .2s ease"
     },
-    '&:hover': {
-      backgroundColor: '#212121',
+    "&:hover": {
+      backgroundColor: "#212121"
     },
-    '&:disabled': {
-      backgroundColor: '#424242',
+    "&:disabled": {
+      backgroundColor: "#424242"
     },
 
-    '&:disabled > span > svg': {
-      color: '#eee',
-      opacity: '0.3',
-    },
+    "&:disabled > span > svg": {
+      color: "#eee",
+      opacity: "0.3"
+    }
   },
   light: {
-    color: '#eee',
+    color: "#eee"
     // opacity: '0.7',
   },
   dark: {
-    color: '#1de9b6',
-  },
+    color: "#1de9b6"
+  }
 });
 
-
-const MainContainerHeader = (props) => {
+const MainContainerHeader = props => {
   const {
     classes,
     image,
@@ -56,7 +55,7 @@ const MainContainerHeader = (props) => {
     totalComponents,
     showGenerateAppModal,
     collapseColumn,
-    rightColumnOpen,
+    rightColumnOpen
   } = props;
 
   return (
@@ -74,14 +73,18 @@ const MainContainerHeader = (props) => {
             </Button>
           </div>
         </Tooltip>
-        <Tooltip title={image ? 'update image' : 'upload image'}>
+        <Tooltip title={image ? "update image" : "upload image"}>
           <div>
-            <Button color="default" className={classes.button} onClick={updateImage}>
+            <Button
+              color="default"
+              className={classes.button}
+              onClick={updateImage}
+            >
               <ImageSearchIcon className={classes.light} />
             </Button>
           </div>
         </Tooltip>
-        <Tooltip title={'export'}>
+        <Tooltip title={"export"}>
           <div>
             <Button
               color="default"

src/components/GrandchildRectangle.jsx

@@ -1,14 +1,17 @@
-import React, { Component } from 'react';
-import { Rect, Group } from 'react-konva';
+import React, { Component } from "react";
+import { Rect, Group } from "react-konva";
 
 class GrandchildRectangle extends Component {
   getComponentColor(componentId) {
-    const color = this.props.components.find(comp => comp.id == componentId).color;
+    const color = this.props.components.find(comp => comp.id == componentId)
+      .color;
     return color;
   }
 
   getPseudoChild() {
-    return this.props.components.find(comp => comp.id === this.props.childComponentId);
+    return this.props.components.find(
+      comp => comp.id === this.props.childComponentId
+    );
   }
 
   render() {
@@ -25,7 +28,7 @@ class GrandchildRectangle extends Component {
       width,
       height,
       focusChild,
-      components,
+      components
     } = this.props;
 
     // the Group is responsible for dragging of all children
@@ -51,17 +54,21 @@ class GrandchildRectangle extends Component {
           scaleY={1}
           width={width}
           height={height}
-          stroke={childType === 'COMP' ? this.getComponentColor(childComponentId) : '#000000'}
+          stroke={
+            childType === "COMP"
+              ? this.getComponentColor(childComponentId)
+              : "#000000"
+          }
           // fill={color}
           // opacity={0.8}
           strokeWidth={4}
           strokeScaleEnabled={false}
           draggable={false}
         />
-        {childType === 'COMP'
-          && components
+        {childType === "COMP" &&
+          components
             .find(comp => comp.title === childComponentName)
-            .childrenArray.filter(child => child.childId !== '-1')
+            .childrenArray.filter(child => child.childId !== "-1")
             .map((grandchild, i) => (
               <GrandchildRectangle
                 key={i}
@@ -72,17 +79,21 @@ class GrandchildRectangle extends Component {
                 childComponentId={grandchild.childComponentId}
                 focusChild={focusChild}
                 childId={childId}
-                width={grandchild.position.width * (width / this.getPseudoChild().position.width)}
+                width={
+                  grandchild.position.width *
+                  (width / this.getPseudoChild().position.width)
+                }
                 height={
-                  grandchild.position.height * (height / this.getPseudoChild().position.height)
+                  grandchild.position.height *
+                  (height / this.getPseudoChild().position.height)
                 }
                 x={
-                  (grandchild.position.x - this.getPseudoChild().position.x)
-                  * (width / this.getPseudoChild().position.width)
+                  (grandchild.position.x - this.getPseudoChild().position.x) *
+                  (width / this.getPseudoChild().position.width)
                 }
                 y={
-                  (grandchild.position.y - this.getPseudoChild().position.y)
-                  * (height / this.getPseudoChild().position.height)
+                  (grandchild.position.y - this.getPseudoChild().position.y) *
+                  (height / this.getPseudoChild().position.height)
                 }
               />
             ))}

src/components/HTMLComponentPanel.jsx

@@ -11,12 +11,11 @@ import LinkIcon from "@material-ui/icons/Link";
 import ListIcon from "@material-ui/icons/List";
 import ParagraphIcon from "@material-ui/icons/LocalParking";
 import theme from "../components/theme";
-import Typography from '@material-ui/core/Typography';
+import Typography from "@material-ui/core/Typography";
 import Grid from "@material-ui/core/Grid";
 import Paper from "@material-ui/core/Paper";
 // import {HTMLelements,getSize} from "../utils/htmlElements.util";
 
-
 class HTMLComponentPanel extends Component {
   state = {
     HtmlComponentName: ""
@@ -33,12 +32,12 @@ class HTMLComponentPanel extends Component {
   };
 
   render() {
-    const { addChild } = this.props;
+    const { addChild, classes } = this.props;
     return (
-      <Paper className={"htmlPanelz"}>
-        <Typography variant="title" component="h3">
-         Add HTML elements
-         </Typography>
+      <div className={classes.htmlPanel}>
+        <Typography variant="title" component="h4">
+          Add HTML elements
+        </Typography>
         {/* <TextField
           id="title-input"
           label="Add HTML component"
@@ -123,13 +122,29 @@ class HTMLComponentPanel extends Component {
             </IconButton>
           </Grid>
         </Grid>
-      </Paper>
+      </div>
     );
   }
 }
 
-function styles() {
-  return {};
+function styles(theme) {
+  return {
+    htmlPanel: {
+      width: "100%",
+      height: "33%",
+      flexGrow: 1,
+      backgroundColor: "#333333",
+      // position: "absolute",
+      // marginTop: 10,
+      bottom: 0
+      // // marginRight: "20px",
+      // // marginLeft: "20px",
+      // // marginBottom: "20px",
+      // bottom: "0px",
+      // left: "0px",
+      // right: "0px"
+    }
+  };
 }
 
 export default withStyles(styles)(HTMLComponentPanel);