Skip to content

Commit 74f1733

Browse files
andrewjcho84andrewjcho84
authored
Merge pull request #14 from oslabs-beta/staging-faast
Staging faast
2 parents 5b7a761 + dd16241 commit 74f1733

File tree

10 files changed

+513
-106
lines changed

10 files changed

+513
-106
lines changed

‎src/components/left/ComponentPanelItemNew.tsx

Lines changed: 28 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,32 @@
11
import React, { useContext } from 'react';
22
import Grid from '@material-ui/core/Grid';
3+
import { makeStyles } from '@material-ui/core/styles';
34
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();
1330
const [state, dispatch] = useContext(stateContext);
1431
// useDrag hook allows components in left panel to be drag source
1532
const [{ isDragging }, drag] = useDrag({
@@ -41,17 +58,18 @@ const ComponentPanelItem: React.FC<{
4158
// this is experimental for version: BLADERUNNER THEME
4259
backgroundColor: 'transparent',
4360
// minWidth: '340px',
44-
height: '80px',
61+
height: '75px',
4562
marginBottom: '15px',
4663
border: root
4764
? '2px dotted rgba(255,255,255, 0.45)'
48-
: '2px solid rgba(255,255,255, 1)',
49-
borderRadius: root ? '' : '8px'
65+
: '2px solid rgba(255,255,255, 0.75)',
66+
borderRadius: '8px'
5067
}}
51-
>
68+
>
5269
<div className="compPanelItem" onClick={handleClick}>
70+
{isFocus && <div className={classes.focusMark}></div>}
5371
<h3>
54-
{id} {name}
72+
{name}
5573
</h3>
5674
</div>
5775
</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: 37 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,32 @@
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';
145
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 => {
29+
const classes = useStyles();
1730
const options = HTMLTypes.map(option => {
1831
const [{ isDragging }, drag] = useDrag({
1932
item: {
@@ -30,39 +43,32 @@ const HTMLPanel = (): JSX.Element => {
3043
return (
3144
<Grid
3245
item
33-
ref={drag}
3446
xs={5}
3547
key={`html-${option.name}`}
36-
style={{
37-
color: 'white',
38-
// this is experimental for version: BLADERUNNER THEME
39-
backgroundColor: 'transparent',
40-
// minWidth: '340px',
41-
minHeight: '80px',
42-
marginBottom: '15px',
43-
border: '2px dotted rgba(255,255,255, 0.45)',
44-
borderRadius: '8px'
45-
}}
4648
>
47-
<h3>
48-
{option.name}
49+
<div ref={drag} className={classes.HTMLPanelItem}>
50+
<h3>
51+
{option.name}
52+
53+
</h3>
4954
<span
50-
style={{
51-
verticalAlign: '-webkit-baseline-middle',
52-
marginLeft: '5px'
53-
}}
54-
>
55-
{<option.icon />}
56-
</span>
57-
</h3>
55+
style={{
56+
verticalAlign: 'middle',
57+
display: 'inline-block',
58+
marginLeft: '5px'
59+
}}
60+
>
61+
{<option.icon />}
62+
</span>
63+
</div>
5864
</Grid>
5965
);
6066
});
6167

6268
return (
6369
<div>
6470
<h4> HTML Elements</h4>
65-
<Grid container direction="row" justify="center" alignItems="center">
71+
<Grid container spacing={1} direction="row" justify="center" alignItems="center">
6672
{options}
6773
</Grid>
6874
</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'

‎src/components/main/CanvasNew.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -94,9 +94,9 @@ function Canvas() {
9494

9595
const defaultCanvasStyle = {
9696
width: '100%',
97-
height: '100%',
97+
minHeight: '100%',
9898
backgroundColor: isOver ? 'lightyellow' : 'white',
99-
border: '2px Solid black',
99+
border: '3px solid #01d46d',
100100
borderStyle: isOver ? 'dotted' : 'solid'
101101
};
102102

‎src/containers/AppContainer.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import Tutorial from '../components/main/Tutorial';
66
import LeftContainer from './LeftContainer';
77
import LeftContainerNew from './LeftContainerNew';
88
import MainContainer from './MainContainer';
9-
import RightContainer from './RightContainer';
9+
import RightContainer from './RightContainerNew';
1010
import theme from '../theme';
1111
import {
1212
ComponentInt,

0 commit comments

Comments
 (0)