Skip to content

Commit dd16241

Browse files
andrewjcho84andrewjcho84
authored
Merge pull request #13 from fredosauce/working
Add Left Panel refinements, Right Panel functionality
2 parents 37582f6 + 62640bc commit dd16241

20 files changed

+899
-336
lines changed

‎src/components/AppNew.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import '../public/styles/styleNew.css';
44
import { DndProvider } from 'react-dnd';
55
import { HTML5Backend } from 'react-dnd-html5-backend';
66
import AppContainer from '../containers/AppContainer';
7-
import { initialState, stateContext } from '../context/context';
7+
import { stateContext } from '../context/context';
8+
import initialState from '../context/initialState';
89
import reducer from '../reducers/componentReducerNew';
910
// import { Context, State } from '../interfaces/InterfacesNew';
1011

‎src/components/left/ComponentPanelItemNew.tsx

Lines changed: 40 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,53 @@
1-
import React from 'react';
1+
import React, { useContext } from 'react';
22
import Grid from '@material-ui/core/Grid';
3-
3+
import { makeStyles } from '@material-ui/core/styles';
4+
import { stateContext } from '../../context/context';
45
import { useDrag } from 'react-dnd';
56
import { ItemTypes } from '../../constants/ItemTypes';
67

8+
const useStyles = makeStyles({
9+
activeFocus: {
10+
backgroundColor: 'rgba(1,212,109,0.3)'
11+
},
12+
focusMark: {
13+
backgroundColor: '#01d46d',
14+
position: 'absolute',
15+
width: '12px',
16+
height: '12px',
17+
borderRadius: '12px',
18+
left: '-35px',
19+
top: '30px'
20+
}
21+
})
22+
723
const ComponentPanelItem: React.FC<{
8-
name: String;
9-
id: Number;
10-
root: Boolean;
11-
focusClick: any;
12-
}> = ({ name, id, root, focusClick }) => {
24+
name: string;
25+
id: number;
26+
root: boolean;
27+
isFocus: boolean
28+
}> = ({ name, id, root, isFocus }) => {
29+
const classes = useStyles();
30+
const [state, dispatch] = useContext(stateContext);
1331
// useDrag hook allows components in left panel to be drag source
1432
const [{ isDragging }, drag] = useDrag({
1533
item: {
1634
type: ItemTypes.INSTANCE,
1735
newInstance: true,
1836
instanceType: 'Component',
19-
instanceId: id
37+
instanceTypeId: id
2038
},
2139
canDrag: !root,
2240
collect: (monitor: any) => ({
2341
isDragging: !!monitor.isDragging()
2442
})
2543
});
44+
45+
const handleClick = () => {
46+
dispatch({
47+
type: 'CHANGE FOCUS',
48+
payload: { componentId: id, childId: null }
49+
});
50+
};
2651
return (
2752
<Grid
2853
item
@@ -33,17 +58,18 @@ const ComponentPanelItem: React.FC<{
3358
// this is experimental for version: BLADERUNNER THEME
3459
backgroundColor: 'transparent',
3560
// minWidth: '340px',
36-
height: '80px',
61+
height: '75px',
3762
marginBottom: '15px',
3863
border: root
3964
? '2px dotted rgba(255,255,255, 0.45)'
40-
: '2px solid rgba(255,255,255, 1)',
41-
borderRadius: root ? '' : '8px'
65+
: '2px solid rgba(255,255,255, 0.75)',
66+
borderRadius: '8px'
4267
}}
43-
>
44-
<div className="compPanelItem" onClick={focusClick}>
68+
>
69+
<div className="compPanelItem" onClick={handleClick}>
70+
{isFocus && <div className={classes.focusMark}></div>}
4571
<h3>
46-
{id} {name}
72+
{name}
4773
</h3>
4874
</div>
4975
</Grid>

‎src/components/left/ComponentPanelNew.tsx

Lines changed: 31 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -14,35 +14,34 @@ import { makeStyles } from '@material-ui/core/styles';
1414

1515
const useStyles = makeStyles({
1616
inputField: {
17-
marginRight: '10px',
18-
borderColor: 'white'
17+
1918
},
2019
inputWrapper: {
21-
height: '120px',
20+
height: '110px',
2221
textAlign: 'center',
2322
display: 'flex',
24-
justifyContent: 'space-evenly'
23+
justifyContent: 'flex-end'
2524
},
2625
panelWrapper: {
2726
marginTop: '35px',
2827
width: '100%'
2928
},
3029
panelWrapperList: {
31-
height: '850px',
32-
overflowY: 'scroll'
30+
maxHeight: '675px',
31+
minHeight: '120px',
32+
overflowY: 'auto',
33+
marginLeft: '-15px'
3334
},
3435
input: {
3536
color: '#fff',
36-
marginBottom: '10px',
3737
borderRadius: '5px',
3838
paddingLeft: '15px',
39-
paddingTop: '5px',
40-
paddingBottom: '5px',
4139
paddingRight: '10px',
4240
whiteSpace: 'nowrap',
4341
overflowX: 'hidden',
4442
textOverflow: 'ellipsis',
45-
border: '1px solid #33eb91'
43+
border: '1px solid rgba(51,235,145,0.75)',
44+
backgroundColor: 'rgba(255,255,255,0.15)'
4645
},
4746
inputLabel: {
4847
fontSize: '14px',
@@ -52,7 +51,9 @@ const useStyles = makeStyles({
5251
},
5352
btnGroup: {
5453
display: 'flex',
55-
flexDirection: 'column'
54+
flexDirection: 'column',
55+
paddingTop: '10px',
56+
marginLeft: '10px'
5657
},
5758
button: {
5859
fontSize: '1rem'
@@ -61,42 +62,9 @@ const useStyles = makeStyles({
6162
color: '#01d46d',
6263
fontSize: '0.85rem'
6364
},
64-
compPanelItem: {
65-
'&:hover': {
66-
cursor: 'pointer',
67-
backgroundColor: 'red'
68-
}
69-
}
65+
7066
});
7167

72-
const initialState: any = {
73-
components: [
74-
{
75-
id: 1,
76-
name: 'index',
77-
style: {},
78-
nextChildId: 1,
79-
children: []
80-
},
81-
{
82-
id: 2,
83-
name: 'Article',
84-
style: {},
85-
nextChildId: 1,
86-
children: []
87-
},
88-
{
89-
id: 3,
90-
name: 'Section',
91-
style: {},
92-
nextChildId: 1,
93-
children: []
94-
}
95-
],
96-
rootComponents: [1],
97-
canvasFocus: { componentId: 1, childId: null },
98-
nextComponentId: 4
99-
};
10068

10169
const ComponentPanel = (): JSX.Element => {
10270
const classes = useStyles();
@@ -173,20 +141,25 @@ const ComponentPanel = (): JSX.Element => {
173141
resetError();
174142
};
175143

176-
// const reportFocus = (targetId: Number) => {
177-
// const focusTarget = state.components.filter(comp => {
178-
// return comp.id === targetId;
179-
// });
180-
// console.log('FOCUSING ON COMPONENT: ');
181-
// console.log(focusTarget[0]);
182-
// };
144+
const isFocus = (targetId: Number) => {
145+
return state.canvasFocus.componentId === targetId ? true : false;
146+
}
147+
148+
const setFocus = (targetId: Number) => {
149+
const focusTarget = state.components.filter(comp => {
150+
return comp.id === targetId;
151+
});
152+
//placeholder for switching focus
153+
console.log('FOCUSING ON COMPONENT: ');
154+
console.log(focusTarget[0]);
155+
};
183156

184157
return (
185158
<div className={classes.panelWrapper}>
186159
<div className={classes.inputWrapper}>
187160
<TextField
188161
color={'primary'}
189-
label="COMPONENT NAME"
162+
label="Component Name"
190163
variant="outlined"
191164
className={classes.inputField}
192165
InputProps={{ className: classes.input }}
@@ -202,9 +175,9 @@ const ComponentPanel = (): JSX.Element => {
202175
color="primary"
203176
onClick={handleNameSubmit}
204177
>
205-
CREATE
178+
ADD
206179
</Button>
207-
<FormControlLabel
180+
{/* <FormControlLabel
208181
control={
209182
<Switch
210183
checked={isRoot}
@@ -214,19 +187,19 @@ const ComponentPanel = (): JSX.Element => {
214187
}
215188
className={classes.rootToggle}
216189
label="ROOT"
217-
/>
190+
/> */}
218191
</div>
219192
</div>
220193
<div className={classes.panelWrapperList}>
221194
<Grid container direction="row" justify="center" alignItems="center">
222195
{state.components.map(comp => (
223196
<ComponentPanelItem
224-
className={classes.compPanelItem}
197+
isFocus={isFocus(comp.id)}
225198
key={`comp-${comp.id}`}
226199
name={comp.name}
227200
id={comp.id}
228201
root={state.rootComponents.includes(comp.id)}
229-
focusClick={() => reportFocus(comp.id)}
202+
focusClick={() => setFocus(comp.id)}
230203
/>
231204
))}
232205
</Grid>

‎src/components/left/HTMLPanelNew.tsx

Lines changed: 39 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,40 @@
11
import React from 'react';
2-
import { withStyles, Theme } from '@material-ui/core/styles';
3-
import ImageIcon from '@material-ui/icons/Image';
4-
import ParagraphIcon from '@material-ui/icons/LocalParking';
5-
import FormIcon from '@material-ui/icons/Description';
6-
import HeaderIcon from '@material-ui/icons/TextFormat';
7-
import ButtonIcon from '@material-ui/icons/EditAttributes';
8-
import LinkIcon from '@material-ui/icons/Link';
9-
import ListIcon from '@material-ui/icons/List';
102
import Grid from '@material-ui/core/Grid';
11-
import Typography from '@material-ui/core/Typography';
123
import { useDrag } from 'react-dnd';
134
import { ItemTypes } from '../../constants/ItemTypes';
14-
import HTMLTypes from '../../HTMLTypes';
5+
import HTMLTypes from '../../context/HTMLTypes';
6+
import { makeStyles } from '@material-ui/core/styles';
7+
8+
const useStyles = makeStyles({
9+
HTMLPanelItem: {
10+
color: 'white',
11+
// this is experimental for version: BLADERUNNER THEME
12+
backgroundColor: 'transparent',
13+
// minWidth: '340px',
14+
minHeight: '60px',
15+
marginBottom: '10px',
16+
marginRight: '5px',
17+
marginLeft: '5px',
18+
border: '2px dotted rgba(255,255,255, 0.45)',
19+
borderRadius: '8px',
20+
cursor: 'grab',
21+
'& > h3': {
22+
display: 'inline-block',
23+
paddingTop: '18px'
24+
}
25+
}
26+
})
1527

1628
const HTMLPanel = (): JSX.Element => {
17-
console.log(HTMLTypes);
29+
const classes = useStyles();
1830
const options = HTMLTypes.map(option => {
1931
const [{ isDragging }, drag] = useDrag({
2032
item: {
2133
type: ItemTypes.INSTANCE,
2234
newInstance: true,
2335
instanceType: 'HTML Element',
2436
name: option.name,
25-
instanceId: option.id
37+
instanceTypeId: option.id
2638
},
2739
collect: (monitor: any) => ({
2840
isDragging: !!monitor.isDragging()
@@ -31,39 +43,32 @@ const HTMLPanel = (): JSX.Element => {
3143
return (
3244
<Grid
3345
item
34-
ref={drag}
3546
xs={5}
3647
key={`html-${option.name}`}
37-
style={{
38-
color: 'white',
39-
// this is experimental for version: BLADERUNNER THEME
40-
backgroundColor: 'transparent',
41-
// minWidth: '340px',
42-
minHeight: '80px',
43-
marginBottom: '15px',
44-
border: '2px dotted rgba(255,255,255, 0.45)',
45-
borderRadius: '8px'
46-
}}
4748
>
48-
<h3>
49-
{option.name}
49+
<div ref={drag} className={classes.HTMLPanelItem}>
50+
<h3>
51+
{option.name}
52+
53+
</h3>
5054
<span
51-
style={{
52-
verticalAlign: '-webkit-baseline-middle',
53-
marginLeft: '5px'
54-
}}
55-
>
56-
{<option.icon />}
57-
</span>
58-
</h3>
55+
style={{
56+
verticalAlign: 'middle',
57+
display: 'inline-block',
58+
marginLeft: '5px'
59+
}}
60+
>
61+
{<option.icon />}
62+
</span>
63+
</div>
5964
</Grid>
6065
);
6166
});
6267

6368
return (
6469
<div>
6570
<h4> HTML Elements</h4>
66-
<Grid container direction="row" justify="center" alignItems="center">
71+
<Grid container spacing={1} direction="row" justify="center" alignItems="center">
6772
{options}
6873
</Grid>
6974
</div>

‎src/components/main/CanvasContainerNew.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import Canvas from './CanvasNew';
44
// The CanvasContainer sets the boundaries on the width/height of the canvas
55
function CanvasContainer() {
66
const canvasContainerStyle = {
7-
width: '1000px',
87
height: '100%',
8+
width: '100%',
99
backgroundColor: 'lightgrey',
1010
border: '2px Solid grey',
1111
overflowY: 'auto'

0 commit comments

Comments
 (0)