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

@@ -39,7 +39,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

@@ -11,6 +11,7 @@ import Tooltip from '@material-ui/core/Tooltip';
 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';
@@ -248,17 +249,16 @@ class LeftContainer extends Component<PropsInt, StateInt> {
             />
           </Grid>
           <Grid item xs={4}>
-            <Button
-              variant="fab"
-              mini
+            <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

@@ -136,7 +136,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;
 }
 
@@ -218,7 +218,7 @@ RIGHT COLUMN
   /* display: flex;
   flex-direction: row; */
   background-color: #fcfcfc;
-  box-shadow: 0 -5px 7px 2px rgb(255, 0, 0);
+  /* box-shadow: 0 -5px 7px 2px rgb(255, 0, 0); */
 }
 
 .htmlattr {

src/reducers/componentReducer.ts

@@ -1,8 +1,4 @@
-import {
-  ComponentInt,
-  ChildInt,
-  ApplicationStateInt
-} from "../utils/interfaces";
+import { ComponentInt, ChildInt, ApplicationStateInt } from '../utils/interfaces';
 
 import {
   LOAD_INIT_DATA,
@@ -27,8 +23,8 @@ import {
   ADD_PROP,
   DELETE_PROP,
   UPDATE_HTML_ATTR,
-  UPDATE_CHILDREN_SORT
-} from "../actionTypes";
+  UPDATE_CHILDREN_SORT,
+} from '../actionTypes';
 
 import {
   addComponent,
@@ -48,16 +44,16 @@ import {
   addProp,
   deleteProp,
   updateHtmlAttr,
-  updateChildrenSort
-} from "../utils/componentReducer.util";
-import cloneDeep from "../utils/cloneDeep";
+  updateChildrenSort,
+} from '../utils/componentReducer.util';
+import cloneDeep from '../utils/cloneDeep';
 
 const appComponent: ComponentInt = {
   id: 1,
   stateful: false,
-  title: "App",
+  title: 'App',
   // parentIds: [],
-  color: "#FF6D00",
+  color: '#FF6D00',
   // draggable: true,
   // childrenIds: [],
   // selectableParents: [],
@@ -67,12 +63,12 @@ const appComponent: ComponentInt = {
     x: 25,
     y: 25,
     width: 600,
-    height: 400
+    height: 400,
   },
 
   childrenArray: [],
   nextChildId: 1,
-  focusChildId: 0
+  focusChildId: 0,
 };
 
 const initialApplicationFocusChild: ChildInt = {
@@ -82,15 +78,15 @@ const initialApplicationFocusChild: ChildInt = {
     x: 25,
     y: 25,
     width: 600,
-    height: 400
+    height: 400,
   },
   // draggable: true,
   childType: null,
   childSort: 0,
   childComponentId: 0,
   color: null,
   htmlElement: null,
-  HTMLInfo: null
+  HTMLInfo: null,
 };
 
 const initialApplicationState: ApplicationStateInt = {
@@ -104,9 +100,8 @@ const initialApplicationState: ApplicationStateInt = {
   initialApplicationFocusChild,
   focusChild: cloneDeep(initialApplicationFocusChild),
   components: [appComponent],
-  appDir: "",
+  appDir: '',
   loading: false,
-  componentTree: { name: "App", attributes: {}, children: {} }
 };
 
 const componentReducer = (state = initialApplicationState, action: any) => {
@@ -116,9 +111,9 @@ const componentReducer = (state = initialApplicationState, action: any) => {
         ...state,
         ...action.payload.data,
         loading: false,
-        appDir: "",
+        appDir: '',
         successOpen: false,
-        errorOpen: false
+        errorOpen: false,
       };
     case ADD_COMPONENT:
       return addComponent(state, action.payload);

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[]) {