Skip to content

Commit 0ec607d

Browse files
author
john lim
committed
tutorial finished
1 parent ef45f86 commit 0ec607d

File tree

23 files changed

+189
-255
lines changed

23 files changed

+189
-255
lines changed

‎app/electron/main.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -226,6 +226,7 @@ app.on('web-contents-created', (event, contents) => {
226226
'https://reactype.herokuapp.com',
227227
'https://github.com/',
228228
'https://nextjs.org',
229+
'https://developer.mozilla.org'
229230
];
230231
console.log('parsed URL origin', parsedUrl.origin);
231232
// Log and prevent the app from navigating to a new page if that page's origin is not whitelisted
@@ -247,6 +248,7 @@ app.on('web-contents-created', (event, contents) => {
247248
'https://reactype.herokuapp.com',
248249
'https://github.com/',
249250
'https://nextjs.org',
251+
'https://developer.mozilla.org'
250252
];
251253

252254
// Log and prevent the app from redirecting to a new page
@@ -286,6 +288,7 @@ app.on('web-contents-created', (event, contents) => {
286288
'https://reactype.herokuapp.com',
287289
'https://github.com/',
288290
'https://nextjs.org',
291+
'https://developer.mozilla.org'
289292
];
290293
console.log('parsed URL origin', parsedUrl.origin);
291294
// Log and prevent the app from navigating to a new page if that page's origin is not whitelisted

‎app/electron/menu.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ var MenuBuilder = function(mainWindow, appName) {
1616

1717
const openTutorial = () => {
1818
const tutorial = new BrowserWindow({
19-
width: 1224,
20-
height: 1024,
19+
width: 800,
20+
height: 900,
2121
minWidth: 661,
2222
title: 'Tutorial',
2323
webPreferences: {
@@ -27,7 +27,7 @@ var MenuBuilder = function(mainWindow, appName) {
2727
contextIsolation: true,
2828
enableRemoteModule: false,
2929
zoomFactor: 1.0,
30-
devTools: false
30+
// devTools: false
3131
}
3232
});
3333
tutorial.loadURL(`http://localhost:8080/#/tutorial`);

‎app/src/components/bottom/CodePreview.tsx

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React, { useContext, useState, useRef, useEffect } from 'react';
22
import { StateContext } from '../../context/context';
33
import AceEditor from 'react-ace';
4-
import { makeStyles } from '@material-ui/core/styles';
54
import 'ace-builds/src-noconflict/mode-javascript';
65
import 'ace-builds/src-noconflict/theme-monokai';
76
import 'ace-builds/src-noconflict/theme-github';
@@ -13,14 +12,12 @@ import useResizeObserver from '../../tree/useResizeObserver';
1312

1413
const CodePreview = ({ theme, setTheme }) => {
1514
const wrapper = useRef();
16-
//console.log(wrapper.current);
1715
const dimensions = useResizeObserver(wrapper);
1816
const { width, height } =
1917
dimensions || 0;
2018

2119
const [state, dispatch] = useContext(StateContext);
2220
const [divHeight, setDivHeight] = useState(0);
23-
// const classes = useStyles();
2421
const currentComponent = state.components.find(
2522
(elem: Component) => elem.id === state.canvasFocus.componentId
2623
);
@@ -35,7 +32,6 @@ const CodePreview = ({ theme, setTheme }) => {
3532

3633
useEffect(() => {
3734
setDivHeight(height);
38-
//console.log(divHeight);
3935
}, [height])
4036

4137
return (
@@ -47,7 +43,6 @@ const CodePreview = ({ theme, setTheme }) => {
4743
justifyContent: 'center'
4844
}}
4945
>
50-
{/* <h1>{divHeight}</h1> */}
5146
<AceEditor
5247
mode="javascript"
5348
theme={theme}
@@ -57,16 +52,9 @@ const CodePreview = ({ theme, setTheme }) => {
5752
border: '2px solid #33eb91',
5853
borderRadius: '8px'
5954
}}
60-
// onChange={code =>
61-
// this.props.updateCode({
62-
// componentId: this.props.focusComponent.id,
63-
// code
64-
// })
65-
// }
6655
onChange={handleCodeSnipChange}
6756
value={currentComponent.code}
6857
name="Code_div"
69-
// readOnly={this.props.codeReadOnly}
7058
readOnly={false}
7159
editorProps={{ $blockScrolling: true }}
7260
fontSize={16}
@@ -76,6 +64,4 @@ const CodePreview = ({ theme, setTheme }) => {
7664
);
7765
};
7866

79-
// const useStyles = makeStyles(theme => ({}));
80-
8167
export default CodePreview;

‎app/src/components/left/HTMLItem.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,8 @@ const HTMLItem: React.FC<{
6161
>
6262
{Icon && <Icon />}
6363
</span>
64-
<button className={buttonClasses} onClick={() => { handleDelete(id) }} > X </button>
64+
{id > 11 &&
65+
<button className={buttonClasses} onClick={() => { handleDelete(id) }} > X </button> }
6566
</div>
6667
</Grid>
6768
);

‎app/src/context/HTMLTypes.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,15 @@ const HTMLTypes: HTMLType[] = [
9797
placeHolderShort: 'Header 2',
9898
placeHolderLong: '',
9999
icon: HeaderIcon
100+
},
101+
{
102+
id: 5,
103+
tag: 'span',
104+
name: 'Span',
105+
style: { fontSize: '1.5em' },
106+
placeHolderShort: 'Span',
107+
placeHolderLong: '',
108+
icon: HeaderIcon
100109
}
101110
];
102111

‎app/src/public/styles/style.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -248,7 +248,7 @@ RIGHT COLUMN
248248
transition: width 250ms ease-in-out;
249249
width: 100%;
250250
height: 100%;
251-
min-height: 100%;
251+
min-height: 500px;
252252
/* display: flex; */
253253
/* flex-direction: row; */
254254
background-color: #fcfcfc;

‎app/src/tutorial/Canvas.tsx

Lines changed: 18 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
11
import React from 'react';
2-
import { Link, RouteComponentProps } from 'react-router-dom';
3-
4-
// import Grid from '@material-ui/core/Grid';
5-
import { makeStyles } from '@material-ui/core/styles';
62

73
//images
84
import canvas1 from '../../../resources/canvas_tutorial_images/canvas1.png';
@@ -14,28 +10,25 @@ const Canvas: React.FC<{
1410
}> = ({ classes, setPage }) => {
1511
return (
1612
<div className={classes.wrapper}>
17-
<h1 className={classes.title}>Canvas Tutorial</h1>
18-
19-
<div className={classes.wrapper}>
20-
<h1 className={classes.title}>Canvas</h1>
21-
<p className={classes.text}>The canvas is located at the center of the page. </p>
22-
23-
<div className={classes.imgWrapper}>
24-
<img className={classes.img} src={canvas1}/>
25-
</div>
26-
27-
<h1 className={classes.title}>Drag-n-Drop</h1>
28-
<p className={classes.text}>The drag-n-drop functionality is implemented for the canvas to be populated.</p>
29-
<p className={classes.text}>This functionality can be located on the entire left container of the application.</p>
30-
<p className={classes.text}>Select a given HTML tag or a custom HTML tag, click and hold to drag on to a reusable components or page.</p>
31-
32-
<div className={classes.imgWrapper}>
33-
<img className={classes.img} src={drag1}/>
34-
</div>
35-
36-
<p className={classes.text}>Select a reusable component, click and hold to drag on to a page.</p>
37-
<p className={classes.text}>Drag the selected item on to the center canvas.</p>
13+
<h1 className={classes.title}>Canvas</h1>
14+
<hr />
15+
<p className={classes.text}>The canvas is located at the center of the page. </p>
16+
<div className={classes.imgWrapper}>
17+
<img className={classes.img} src={canvas1}/>
18+
</div>
19+
<hr/>
20+
<h1 className={classes.title}>Drag-n-Drop</h1>
21+
<p className={classes.text}>The drag-n-drop functionality is implemented for the canvas to be populated.<br/>
22+
This functionality can be located on the entire left container of the application.<br/>
23+
Select a given <span className={classes.notLink} onClick={() => setPage('HTML_Elements')} >HTML Element</span>, custom <span className={classes.notLink} onClick={() => setPage('HTML_Elements')} >HTML Element</span>, or <span className={classes.notLink} onClick={() => setPage('Reusable_Components')} >reusable component</span>, click and hold to drag on to a reusable components or page.
24+
</p>
25+
<div className={classes.imgWrapper}>
26+
<img src={drag1}/>
3827
</div>
28+
<hr/>
29+
<p className={classes.text}>Select a <span className={classes.notLink} onClick={() => setPage('Reusable_Components')} >reusable component</span>, click and hold to drag on to a page.<br/>
30+
Drag the selected item on to the center canvas.</p>
31+
<hr/>
3932
</div>
4033
);
4134
};

‎app/src/tutorial/CodePreview.tsx

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
11
import React from 'react';
2-
import { Link, RouteComponentProps } from 'react-router-dom';
3-
4-
// import Grid from '@material-ui/core/Grid';
5-
import { makeStyles } from '@material-ui/core/styles';
62

73
const CodePreview: React.FC<{
84
classes: any;
@@ -12,10 +8,10 @@ const CodePreview: React.FC<{
128
<div className={classes.wrapper}>
139
<h1 className={classes.title}>Code Preview</h1>
1410
<div className={classes.wrapper}>
15-
<p className={classes.text}>The code preview is located at the bottom center of the page on the first tab.</p>
16-
<p className={classes.text}>In the preview, the code will load functional components.</p>
17-
<p className={classes.text}>This preview will populate and generate in real-time as you use the drag-n-drop functionality with the canvas.</p>
18-
<p className={classes.text}>To learn more about the canvas, find the tutorial labeled "Canvas".</p>
11+
<p className={classes.text}>The code preview is located at the bottom center of the page on the first tab.<br/>
12+
In the preview, the code will load functional components.<br/>
13+
This preview will populate and generate in real-time as you use the drag-n-drop functionality with the <span className={classes.notLink} onClick={() => setPage('Canvas')} >Canvas</span>.<br/>
14+
To learn more about the canvas, click <span className={classes.notLink} onClick={() => setPage('Canvas')} >"here"</span></p>
1915
</div>
2016
</div>
2117
);

‎app/src/tutorial/ComponentTree.tsx

Lines changed: 9 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,10 @@
11
import React from 'react';
2-
import { Link, RouteComponentProps } from 'react-router-dom';
3-
import AccountTreeIcon from '@material-ui/icons/AccountTree';
42

5-
import { makeStyles } from '@material-ui/core/styles';
6-
import Typography from '@material-ui/core/Typography';
7-
import Container from '@material-ui/core/Container';
83
import tree1 from '../../../resources/tree_tutorial_images/tree1.png';
94
import tree2 from '../../../resources/tree_tutorial_images/tree2.png';
105
import tree3 from '../../../resources/tree_tutorial_images/tree3.png';
116
import tree4 from '../../../resources/tree_tutorial_images/tree4.png';
127
import tree5 from '../../../resources/tree_tutorial_images/tree5.png';
13-
import pages from '../../../resources/tree_tutorial_images/pages.png';
14-
import re_comps from '../../../resources/tree_tutorial_images/re_comps.png';
15-
// import Grid from '@material-ui/core/Grid';
16-
17-
// import ComponentPanel from '../components/left/ComponentPanel';
18-
// import HTMLPanel from '../components/left/HTMLPanel';
19-
20-
// Left-hand portion of the app, where component options are displayed
218

229
const ComponentTree: React.FC<{
2310
classes: any;
@@ -26,29 +13,32 @@ const ComponentTree: React.FC<{
2613
return (
2714
<div className={classes.wrapper}>
2815
<h1 className={classes.title}>React Component Tree</h1>
29-
<h2></h2>
16+
<hr/>
3017
<p className={classes.text}>The tree provides the developer with a visual representation of the component hierarchy. The tree updates in real time as the developer adds or deletes components.</p>
3118
<div className={classes.imgWrapper}>
3219
<img className={classes.img} src={tree1}></img>
3320
</div>
21+
<hr/>
3422
<p className={classes.text}>Each tree begins with a root node. The current page that is selected represents the root node.</p>
3523
<div className={classes.imgWrapper}>
36-
{/* <img className={classes.img} src={pages}></img> */}
3724
<img className={classes.img} src={tree2}></img>
3825
</div>
39-
<p className={classes.text}>Reusable components are shown attached to the current page along with their subtrees of components and HTML elements.</p>
26+
<hr/>
27+
<p className={classes.text}><span className={classes.notLink} onClick={() => setPage('Reusable_Components')} >Reusable Components</span> are shown attached to the current page along with their subtrees of components and <span className={classes.notLink} onClick={() => setPage('HTML_Elements')} >HTML Elements</span>.</p>
4028
<div className={classes.imgWrapper}>
41-
{/* <img className={classes.img} src={re_comps}></img> */}
4229
<img className={classes.img} src={tree3}></img>
4330
</div>
44-
<p className={classes.text}>HTML elements are shown by their tag name.</p>
31+
<hr/>
32+
<p className={classes.text}><span className={classes.notLink} onClick={() => setPage('HTML_Elements')} >HTML Elements</span> are shown by their tag name.</p>
4533
<div className={classes.imgWrapper}>
4634
<img className={classes.img} src={tree4}></img>
4735
</div>
48-
<p className={classes.text}>You can also view the tree for each reusable component.</p>
36+
<hr/>
37+
<p className={classes.text}>You can also view the tree for each <span className={classes.notLink} onClick={() => setPage('Reusable_Components')} >reusable component</span>.</p>
4938
<div className={classes.imgWrapper}>
5039
<img className={classes.img} src={tree5}></img>
5140
</div>
41+
<hr/>
5242
</div>
5343
);
5444
};

‎app/src/tutorial/Customization.tsx

Lines changed: 23 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -5,59 +5,50 @@ import height from '../../../resources/customizing_elements_images/Height.png';
55
import width from '../../../resources/customizing_elements_images/Width.png';
66
import backgroundColor from '../../../resources/customizing_elements_images/BackgroundColor.png';
77

8-
// import Grid from '@material-ui/core/Grid';
9-
10-
// import ComponentPanel from '../components/left/ComponentPanel';
11-
// import HTMLPanel from '../components/left/HTMLPanel';
12-
13-
// Left-hand portion of the app, where component options are displayed
14-
158
const Customization: React.FC<{
169
classes: any;
1710
setPage: Function;
1811
}> = ({ classes, setPage }) => {
1912
return (
20-
<div className="tutorial_styling">
21-
<h1 style={{ color: 'black' }}>Customizing Elements</h1>
13+
<div className={classes.wrapper}>
14+
<h1 className={classes.title}>Customization</h1>
2215
<hr />
2316
<h2>Display</h2>
24-
<br />
17+
<div className={classes.imgWrapper}>
2518
<img src={display} />
26-
<p>
27-
After having moved a page, component, route link, or element into the
19+
</div>
20+
<p className={classes.text}>
21+
After having moved a <span className={classes.notLink} onClick={() => setPage('Pages')} >page</span>, <span className={classes.notLink} onClick={() => setPage('Reusable_Components')} >component</span>, <span className={classes.notLink} onClick={() => setPage('Route_Links')} >route link</span>, or <span className={classes.notLink} onClick={() => setPage('HTML_Elements')} >element</span> into the
2822
canvas, select the one that needs customizing simply by clicking on it.
2923
Then, to give it a display feature of either a block, inline-block, or
30-
flex styling, select from the drop down box.
31-
<br />
32-
<br />
24+
flex styling, select from the drop down box.</p>
25+
<div className={classes.imgWrapper}>
3326
<img src={flex} />
34-
<br />
35-
<br />
36-
If the display option 'flex' is chosen, few more sub-options are
37-
displayed under the display option.
27+
</div>
28+
<p className={classes.text}>
29+
If the display option 'flex' is chosen, few more sub-options are displayed under the display option.
3830
</p>
39-
<br />
4031
<hr />
4132
<h2>Width</h2>
42-
<img src={width} />
43-
<br />
44-
<p>Change the width of each component, route link, or element.</p>
45-
<br />
33+
<div className={classes.imgWrapper}>
34+
<img src={width} />
35+
</div>
36+
<p className={classes.text}>Change the width of each <span className={classes.notLink} onClick={() => setPage('Reusable_Components')} >component</span>, <span className={classes.notLink} onClick={() => setPage('Route_Links')} >route link</span>, or <span className={classes.notLink} onClick={() => setPage('HTML_Elements')} >element</span>.</p>
4637
<hr />
4738
<h2>Height</h2>
48-
<img src={height} />
49-
<br />
50-
<p>Change the height of each component, route link, or element.</p>
51-
<br />
39+
<div className={classes.imgWrapper}>
40+
<img src={height} />
41+
</div>
42+
<p className={classes.text}>Change the height of each <span className={classes.notLink} onClick={() => setPage('Reusable_Components')} >component</span>, <span className={classes.notLink} onClick={() => setPage('Route_Links')} >route link</span>, or <span className={classes.notLink} onClick={() => setPage('HTML_Elements')} >element</span>.</p>
5243
<hr />
5344
<h2>Background Color</h2>
54-
<img src={backgroundColor} />
55-
<br />
56-
<p>
45+
<div className={classes.imgWrapper}>
46+
<img src={backgroundColor} />
47+
</div>
48+
<p className={classes.text}>
5749
Select an element, type in the color you wish to change the background
5850
color to, and click save!
5951
</p>
60-
<br />
6152
<hr />
6253
</div>
6354
);

0 commit comments

Comments
 (0)