latest work

Author: fredosauce

src/components/left/ComponentPanelItemNew.tsx

@@ -1,15 +1,32 @@
 import React from 'react';
 import Grid from '@material-ui/core/Grid';
-
+import { makeStyles } from '@material-ui/core/styles';
 import { useDrag } from 'react-dnd';
 import { ItemTypes } from '../../constants/ItemTypes';
 
+const useStyles = makeStyles({
+  activeFocus: {
+    backgroundColor: 'rgba(1,212,109,0.3)'
+  },
+  focusMark: {
+    backgroundColor: '#01d46d',
+    position: 'absolute',
+    width: '12px',
+    height: '12px',
+    borderRadius: '12px',
+    left: '-35px',
+    top: '30px'
+  }
+})
+
 const ComponentPanelItem: React.FC<{
-  name: String;
-  id: Number;
-  root: Boolean;
+  name: string;
+  id: number;
+  root: boolean;
   focusClick: any;
-}> = ({ name, id, root, focusClick }) => {
+  isFocus: boolean
+}> = ({ name, id, root, focusClick, isFocus }) => {
+  const classes = useStyles();
   // useDrag hook allows components in left panel to be drag source
   const [{ isDragging }, drag] = useDrag({
     item: {
@@ -33,17 +50,18 @@ const ComponentPanelItem: React.FC<{
         // this is experimental for version: BLADERUNNER THEME
         backgroundColor: 'transparent',
         // minWidth: '340px',
-        height: '80px',
+        height: '75px',
         marginBottom: '15px',
         border: root
           ? '2px dotted rgba(255,255,255, 0.45)'
-          : '2px solid rgba(255,255,255, 1)',
-        borderRadius: root ? '' : '8px'
+          : '2px solid rgba(255,255,255, 0.75)',
+        borderRadius: '8px'
       }}
-    >
+    > 
       <div className="compPanelItem" onClick={focusClick}>
+        {isFocus && <div className={classes.focusMark}></div>}
         <h3>
-          {id} {name}
+          {name}
         </h3>
       </div>
     </Grid>

src/components/left/ComponentPanelNew.tsx

@@ -14,35 +14,34 @@ import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles({
   inputField: {
-    marginRight: '10px',
-    borderColor: 'white'
+    marginRight: '15px',
+    // width: '245px'
   },
   inputWrapper: {
-    height: '120px',
+    height: '110px',
     textAlign: 'center',
     display: 'flex',
-    justifyContent: 'space-evenly'
+    justifyContent: 'flex-end'
   },
   panelWrapper: {
     marginTop: '35px',
     width: '100%'
   },
   panelWrapperList: {
-    height: '850px',
-    overflowY: 'scroll'
+    height: '675px',
+    overflowY: 'auto',
+    marginLeft: '-15px'
   },
   input: {
     color: '#fff',
-    marginBottom: '10px',
     borderRadius: '5px',
     paddingLeft: '15px',
-    paddingTop: '5px',
-    paddingBottom: '5px',
     paddingRight: '10px',
     whiteSpace: 'nowrap',
     overflowX: 'hidden',
     textOverflow: 'ellipsis',
-    border: '1px solid #33eb91'
+    border: '1px solid rgba(51,235,145,0.75)',
+    backgroundColor: 'rgba(255,255,255,0.15)'
   },
   inputLabel: {
     fontSize: '14px',
@@ -52,7 +51,9 @@ const useStyles = makeStyles({
   },
   btnGroup: {
     display: 'flex',
-    flexDirection: 'column'
+    flexDirection: 'column',
+    paddingTop: '10px',
+    marginRight: '10px'
   },
   button: {
     fontSize: '1rem'
@@ -62,41 +63,15 @@ const useStyles = makeStyles({
     fontSize: '0.85rem'
   },
   compPanelItem: {
+    color: 'red',
     '&:hover': {
       cursor: 'pointer',
       backgroundColor: 'red'
     }
-  }
+  },
+  
 });
 
-const initialState: any = {
-  components: [
-    {
-      id: 1,
-      name: 'index',
-      style: {},
-      nextChildId: 1,
-      children: []
-    },
-    {
-      id: 2,
-      name: 'Article',
-      style: {},
-      nextChildId: 1,
-      children: []
-    },
-    {
-      id: 3,
-      name: 'Section',
-      style: {},
-      nextChildId: 1,
-      children: []
-    }
-  ],
-  rootComponents: [1],
-  canvasFocus: { componentId: 1, childId: null },
-  nextComponentId: 4
-};
 
 const ComponentPanel = (): JSX.Element => {
   const classes = useStyles();
@@ -173,20 +148,25 @@ const ComponentPanel = (): JSX.Element => {
     resetError();
   };
 
-  // const reportFocus = (targetId: Number) => {
-  //   const focusTarget = state.components.filter(comp => {
-  //     return comp.id === targetId;
-  //   });
-  //   console.log('FOCUSING ON COMPONENT: ');
-  //   console.log(focusTarget[0]);
-  // };
+  const isFocus = (targetId: Number) => {
+    return state.canvasFocus.componentId === targetId ? true : false;
+  }
+
+  const setFocus = (targetId: Number) => {
+    const focusTarget = state.components.filter(comp => {
+      return comp.id === targetId;
+    });
+    //placeholder for switching focus
+    console.log('FOCUSING ON COMPONENT: ');
+    console.log(focusTarget[0]);
+  };
 
   return (
     <div className={classes.panelWrapper}>
       <div className={classes.inputWrapper}>
         <TextField
           color={'primary'}
-          label="COMPONENT NAME"
+          label="Component Name"
           variant="outlined"
           className={classes.inputField}
           InputProps={{ className: classes.input }}
@@ -202,9 +182,9 @@ const ComponentPanel = (): JSX.Element => {
             color="primary"
             onClick={handleNameSubmit}
           >
-            CREATE
+            ADD
           </Button>
-          <FormControlLabel
+          {/* <FormControlLabel
             control={
               <Switch
                 checked={isRoot}
@@ -214,19 +194,19 @@ const ComponentPanel = (): JSX.Element => {
             }
             className={classes.rootToggle}
             label="ROOT"
-          />
+          /> */}
         </div>
       </div>
       <div className={classes.panelWrapperList}>
         <Grid container direction="row" justify="center" alignItems="center">
           {state.components.map(comp => (
             <ComponentPanelItem
-              className={classes.compPanelItem}
+              isFocus={isFocus(comp.id)}
               key={`comp-${comp.id}`}
               name={comp.name}
               id={comp.id}
               root={state.rootComponents.includes(comp.id)}
-              focusClick={() => reportFocus(comp.id)}
+              focusClick={() => setFocus(comp.id)}
             />
           ))}
         </Grid>

src/components/left/HTMLPanelNew.tsx

@@ -39,7 +39,7 @@ const HTMLPanel = (): JSX.Element => {
           // this is experimental for version: BLADERUNNER THEME
           backgroundColor: 'transparent',
           // minWidth: '340px',
-          minHeight: '80px',
+          minHeight: '60px',
           marginBottom: '15px',
           border: '2px dotted rgba(255,255,255, 0.45)',
           borderRadius: '8px'

src/containers/AppContainer.tsx

@@ -6,7 +6,7 @@ import Tutorial from '../components/main/Tutorial';
 import LeftContainer from './LeftContainer';
 import LeftContainerNew from './LeftContainerNew';
 import MainContainer from './MainContainer';
-import RightContainer from './RightContainer';
+import RightContainer from './RightContainerNew';
 import theme from '../theme';
 import {
   ComponentInt,