Skip to content

Commit cb6d385

Browse files
authored
Merge pull request #7 from Linhatran/UI
UI
2 parents 3a21028 + 95119dd commit cb6d385

File tree

11 files changed

+173
-174
lines changed

11 files changed

+173
-174
lines changed

app/src/components/bottom/BottomPanel.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React, { useContext } from 'react';
2-
// import StateContext from '../../context/context';
32
import BottomTabs from './BottomTabs';
43
import { Resizable } from 're-resizable';
54

@@ -12,9 +11,9 @@ const BottomPanel = () => {
1211
enable={{
1312
top: true
1413
}}
15-
minHeight={'25%'}
14+
minHeight={'50%'}
1615
>
17-
<div className="bottom-panel">
16+
<div className="bottom-panel" >
1817
<BottomTabs />
1918
</div>
2019
</Resizable>

app/src/components/bottom/BottomTabs.tsx

Lines changed: 39 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import { emitKeypressEvents } from 'readline';
1010
import NativeSelect from '@material-ui/core/NativeSelect';
1111
import FormControl from '@material-ui/core/FormControl';
1212
import { styleContext } from '../../containers/AppContainer';
13+
import MenuItem from '@material-ui/core/MenuItem';
14+
import Select from '@material-ui/core/Select';
1315

1416
const BottomTabs = () => {
1517
// state that controls which tab the user is on
@@ -20,11 +22,17 @@ const BottomTabs = () => {
2022
const [theme, setTheme] = useState('solarized_light');
2123
const { style } = useContext(styleContext);
2224

25+
2326
// breaks if handleChange is commented out
2427
const handleChange = (event: React.ChangeEvent, value: number) => {
2528
setTab(value);
2629
};
27-
30+
// Allows users to toggle project between "next.js" and "Classic React"
31+
// When a user changes the project type, the code of all components is rerendered
32+
const handleProjectChange = event => {
33+
const projectType = event.target.value;
34+
dispatch({ type: 'CHANGE PROJECT TYPE', payload: { projectType } });
35+
};
2836
const { components, HTMLTypes } = state;
2937

3038
const changeTheme = e => {
@@ -33,7 +41,7 @@ const BottomTabs = () => {
3341

3442
return (
3543
<div className={classes.root} style={style}>
36-
<Box display="flex" justifyContent="space-between">
44+
<Box display="flex" justifyContent="space-between" alignItems="center" paddingBottom="10px" paddingRight="10px">
3745
<Tabs
3846
value={tab}
3947
onChange={handleChange}
@@ -53,39 +61,22 @@ const BottomTabs = () => {
5361
label="Component Tree"
5462
/>
5563
</Tabs>
56-
{/* Removed all style={{ backgroundColor: '#252526' }} from within each option tag. Its functionality was not apparent on page. */}
57-
<FormControl>
58-
<div className="flex-container">
59-
<div className="flex1"></div>
60-
<NativeSelect
61-
className="flex2"
62-
style={{ color: '#091833' }}
63-
value={theme}
64-
onChange={changeTheme}
64+
<div className={classes.projectTypeWrapper}>
65+
<FormControl size='small'>
66+
<Select
67+
variant="outlined"
68+
labelId="project-type-label"
69+
id="demo-simple-select"
70+
className={classes.projectSelector}
71+
value={state.projectType}
72+
onChange={handleProjectChange}
6573
>
66-
<option value={'github'}>
67-
Github
68-
</option>
69-
<option value={'monokai'}>
70-
Monokai
71-
</option>
72-
<option
73-
value={'solarized_dark'}
74-
>
75-
Solarized Dark
76-
</option>
77-
<option
78-
value={'solarized_light'}
79-
>
80-
Solarized Light
81-
</option>
82-
<option value={'terminal'}>
83-
Terminal
84-
</option>
85-
86-
</NativeSelect>
87-
</div>
88-
</FormControl>
74+
<MenuItem value={'Classic React'}>Classic React</MenuItem>
75+
<MenuItem value={'Gatsby.js'}>Gatsby.js</MenuItem>
76+
<MenuItem value={'Next.js'}>Next.js</MenuItem>
77+
</Select>
78+
</FormControl>
79+
</div>
8980
</Box>
9081
{tab === 0 && <CodePreview theme={theme} setTheme={setTheme} />}
9182
{tab === 1 && <Tree data={components} />}
@@ -99,7 +90,8 @@ const useStyles = makeStyles(theme => ({
9990
backgroundColor: '#3ea3d6',
10091
height: '100%',
10192
color: '#091921',
102-
boxShadow: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)'
93+
boxShadow: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)',
94+
10395
},
10496
bottomHeader: {
10597
flex: 1,
@@ -154,6 +146,18 @@ const useStyles = makeStyles(theme => ({
154146
switch: {
155147
marginRight: '10px',
156148
marginTop: '2px'
149+
},
150+
projectTypeWrapper: {
151+
// width: '300px',
152+
// width: '100%',
153+
marginTop: '10px',
154+
marginBotton: '10px'
155+
},
156+
projectSelector: {
157+
backgroundColor: 'rgba(255,255,255,0.15)',
158+
// width: '300px',
159+
// width: '100%',
160+
color: '#fff'
157161
}
158162
}));
159163

app/src/components/bottom/CodePreview.tsx

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,6 @@ const CodePreview: React.FC<{
2929
const handleCodeSnipChange = val => {
3030
currentComponent.code = val;
3131
};
32-
33-
const changeTheme = e => {
34-
setTheme(e.target.value);
35-
};
36-
3732
useEffect(() => {
3833
setDivHeight(height);
3934
}, [height])
@@ -42,25 +37,22 @@ const CodePreview: React.FC<{
4237
<div
4338
ref={wrapper}
4439
style={{
45-
height: '90%',
40+
height: '100%',
4641
maxWidth: '100%',
47-
justifyContent: 'center'
42+
justifyContent: 'center',
43+
4844
}}
4945
>
5046
<AceEditor
5147
mode="javascript"
5248
theme={theme}
5349
width="100%"
5450
height="100%"
55-
style={{
56-
// border: '2px solid #33eb91',
57-
// borderRadius: '8px'
58-
}}
5951
onChange={handleCodeSnipChange}
6052
value={currentComponent.code}
6153
name="Code_div"
6254
readOnly={false}
63-
editorProps={{ $blockScrolling: true }}
55+
// editorProps={{ $blockScrolling: false }}
6456
fontSize={16}
6557
tabSize={2}
6658
/>

0 commit comments

Comments
 (0)