merged with Tolga styling

Author: ChristianEdwardPadilla

src/components/CodePreview.tsx

@@ -17,7 +17,7 @@ class CodePreview extends Component<Props> {
 
     return (
       <Fragment>
-        <SortChildren />
+        {/* <SortChildren /> */}
         <div
           style={{
             width: '500px',

src/components/HTMLComponentPanel.jsx

@@ -71,6 +71,9 @@ class HTMLComponentPanel extends Component {
                   margin: 0,
                   padding: 0,
                 }}
+                onClick={() => {
+                  this.handleCreateHTMLChild('Image');
+                }}
               />
             </div>
           </Grid>
@@ -96,6 +99,9 @@ class HTMLComponentPanel extends Component {
                 color: 'white',
                 fontSize: '80%',
               }}
+              onClick={() => {
+                this.handleCreateHTMLChild('Form');
+              }}
             />
           </Grid>
           <Grid item xs={4}>
@@ -120,6 +126,9 @@ class HTMLComponentPanel extends Component {
                 color: 'white',
                 fontSize: '80%',
               }}
+              onClick={() => {
+                this.handleCreateHTMLChild('Button');
+              }}
             />
           </Grid>
           <Grid item xs={4}>
@@ -144,6 +153,9 @@ class HTMLComponentPanel extends Component {
                 color: 'white',
                 fontSize: '80%',
               }}
+              onClick={() => {
+                this.handleCreateHTMLChild('Link');
+              }}
             />
           </Grid>
           <Grid item xs={4}>
@@ -168,6 +180,9 @@ class HTMLComponentPanel extends Component {
                 color: 'white',
                 fontSize: '80%',
               }}
+              onClick={() => {
+                this.handleCreateHTMLChild('List');
+              }}
             />
           </Grid>
           <Grid
@@ -203,6 +218,9 @@ class HTMLComponentPanel extends Component {
                 padding: '0px',
                 margin: '0px',
               }}
+              onClick={() => {
+                this.handleCreateHTMLChild('Paragraph');
+              }}
             />
           </Grid>
         </Grid>

src/components/LeftColExpansionPanel.jsx

@@ -47,7 +47,7 @@ const LeftColExpansionPanel = props => {
       <Grid item xs={9}>
         <div
           className={classes.root}
-          style={!isFocused() ? {} : { boxShadow: '0 10px 10px rgba(0,0,0,0.45)' }}
+          style={!isFocused() ? {} : { boxShadow: '0 10px 10px rgba(0,0,0,0.25)' }}
         >
           <Grid item xs={12} style={{ color: "red" }}>
             <List style={{ color: "red" }}>

src/containers/LeftContainer.tsx

@@ -10,6 +10,7 @@ import GetAppIcon from '@material-ui/icons/GetApp';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
+import Fab from '@material-ui/core/Fab';
 import LeftColExpansionPanel from '../components/LeftColExpansionPanel';
 import HTMLComponentPanel from '../components/HTMLComponentPanel';
 import * as actions from '../actions/components';
@@ -227,17 +228,16 @@ class LeftContainer extends Component<PropsInt, StateInt> {
             />
           </Grid>
           <Grid item xs={4}>
-            <Button
-              variant="fab"
-              mini
-              color="primary"
+            <Fab
+              size="small"
+              color="secondary"
               className={classes.button}
               aria-label="Add"
               onClick={this.handleAddComponent}
               disabled={!this.state.componentName}
             >
               <AddIcon />
-            </Button>
+            </Fab>
           </Grid>
         </Grid>
         <div className="expansionPanel">{componentsExpansionPanel}</div>

src/public/styles/style.css

@@ -123,7 +123,7 @@ h1 {
   border-right: 1px solid grey;
   border-bottom: 1px solid grey; */
   background-color: #212121;
-  box-shadow: 0 5px 7px -2px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 5px 7px -2px rgba(0, 0, 0, 0.1);
   z-index: 10;
 }
 
@@ -205,7 +205,7 @@ RIGHT COLUMN
   /* display: flex;
   flex-direction: row; */
   background-color: #fcfcfc;
-  box-shadow: 0 -5px 7px 2px rgba(0, 0, 0, 0.1);
+  /* box-shadow: 0 -5px 7px 2px rgb(255, 0, 0); */
 }
 
 .htmlattr {

src/reducers/componentReducer.ts

@@ -1,3 +1,5 @@
+import { ComponentInt, ChildInt, ApplicationStateInt } from '../utils/interfaces';
+
 import {
   LOAD_INIT_DATA,
   ADD_COMPONENT,
@@ -43,18 +45,18 @@ import {
   deleteProp,
   updateHtmlAttr,
   updateChildrenSort,
-} from '../utils/componentReducer.util.ts';
-import cloneDeep from '../utils/cloneDeep.ts';
+} from '../utils/componentReducer.util';
+import cloneDeep from '../utils/cloneDeep';
 
 const appComponent = {
   id: 1,
   stateful: false,
   title: 'App',
-  parentIds: [],
+  // parentIds: [],
   color: '#FF6D00',
-  draggable: true,
-  childrenIds: [],
-  selectableParents: [],
+  // draggable: true,
+  // childrenIds: [],
+  // selectableParents: [],
   props: [],
   nextPropId: 1,
   position: {
@@ -80,6 +82,11 @@ const initialApplicationFocusChild = {
   },
   draggable: true,
   childType: null,
+  childSort: 0,
+  childComponentId: 0,
+  color: null,
+  htmlElement: null,
+  HTMLInfo: null,
 };
 
 const initialApplicationState = {
@@ -95,7 +102,6 @@ const initialApplicationState = {
   components: [appComponent],
   appDir: '',
   loading: false,
-  componentTree: { name: 'App', attributes: {}, children: {} },
 };
 
 const componentReducer = (state = initialApplicationState, action) => {

src/utils/Interfaces.ts

@@ -55,7 +55,6 @@ export interface ApplicationStateInt {
   components: ComponentsInt;
   appDir: string;
   loading: boolean;
-  componentTree: object;
 }
 
 function findComponentById(id: number, components: ComponentInt[]) {