Skip to content

Commit 11c6e6d

Browse files
williamdyoonwilliamdyoon
committed
Merge branch 'buddhajjigae-style-feature' into CaretDevelopment
2 parents 7e1a800 + 9a1263c commit 11c6e6d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+276
-100
lines changed

‎app/electron/main.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,11 @@ async function createWindow() {
7272
// icon: path.join(__dirname, '../src/public/icons/png/256x256.png'),
7373
webPreferences: {
7474
zoomFactor: 0.7,
75+
<<<<<<< HEAD
7576
// enable devtools when in development mode
77+
=======
78+
// enable devtools when in development mode
79+
>>>>>>> ee444f746bb8ccba4e3ebe3909002bf3ac26fdb1
7680
devTools: isDev,
7781
// crucial security feature - blocks rendering process from having access to node modules
7882
nodeIntegration: false,

‎app/src/components/right/ComponentPanelItem.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ const ComponentPanelItem: React.FC<{
7474
style={{
7575
display: 'grid',
7676
color: '#262626',
77+
display: 'grid',
7778
backgroundColor: 'transparent',
7879
border: root
7980
? '2px dotted #186BB4'
@@ -83,7 +84,11 @@ const ComponentPanelItem: React.FC<{
8384
margin: '5px 0px'
8485
}}
8586
>
87+
<<<<<<< HEAD
8688
{isFocus && <div className={classes.focusMark}></div>}
89+
=======
90+
{isFocus && <div className={classes.focusMark}></div>}
91+
>>>>>>> ee444f746bb8ccba4e3ebe3909002bf3ac26fdb1
8792
<div className="compPanelItem" onClick={handleClick}>
8893
<h3 >{name}</h3>
8994
</div>

‎app/src/components/right/StatePropsPanel.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,11 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
168168
<FormHelperText>Required</FormHelperText>
169169
</FormControl>
170170
<br></br>
171-
<MyButton type="submit" onClick={submitNewState}>
171+
<MyButton
172+
type="submit"
173+
onClick={submitNewState}
174+
className={isThemeLight ? `${classes.addComponentButton} ${classes.lightThemeFontColor}` : `${classes.addComponentButton} ${classes.darkThemeFontColor}`}
175+
>
172176
Save
173177
</MyButton>
174178
<br></br>
@@ -278,7 +282,7 @@ const useStyles = makeStyles((theme: Theme) =>
278282
fontSize: "0.85rem",
279283
},
280284
lightThemeFontColor: {
281-
color: "#186BB4",
285+
color: "#155084",
282286
},
283287
darkThemeFontColor: {
284288
color: "#fff",

‎app/src/tutorial/Annotations.tsx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react';
2+
import noteButton from '../../../resources/annotations_tutorial_images/NoteButton.gif';
3+
import annotation from '../../../resources/annotations_tutorial_images/Annotation.gif';
4+
5+
const Annotations: React.FC<{
6+
classes: any;
7+
setPage: Function;
8+
}> = ({ classes, setPage }) => {
9+
return (
10+
<div className={classes.wrapper}>
11+
<h1 className={classes.title}>Annotations</h1>
12+
<hr />
13+
<p className={classes.text}>
14+
Write any notes you want for each element or component on the canvas by clicking the Notes button.<br/><br/>
15+
<div className={classes.imgWrapper}>
16+
<img className={classes.img} src={noteButton}/>
17+
</div>
18+
<br/>
19+
Once clicked, the annotation window will appear where you are able to write text in. To close the annotation window,
20+
simply click anywhere outside the window and the notes will be saved. <br></br>
21+
Any notes written will persist throughout the project, even when swapping between Root level components.<br/><br/>
22+
<div className={classes.imgWrapper}>
23+
<img className={classes.img} src={annotation}/>
24+
</div>
25+
</p>
26+
<hr />
27+
</div>
28+
);
29+
};
30+
31+
export default Annotations;

‎app/src/tutorial/CSSEditor.tsx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from 'react';
2+
import cssEditorTab from '../../../resources/csseditor_tutorial_images/CSSEditorTab.png';
3+
import cssEdit from '../../../resources/csseditor_tutorial_images/DirectCSSEdit.gif';
4+
import copyPaste from '../../../resources/csseditor_tutorial_images/CopyPasteCSS.gif';
5+
6+
const CSSEditor: React.FC<{
7+
classes: any;
8+
setPage: Function;
9+
}> = ({ classes, setPage }) => {
10+
return (
11+
<div className={classes.wrapper}>
12+
<h1 className={classes.title}>CSS Editor</h1>
13+
<hr />
14+
<p className={classes.text}>The CSS editor tab is located in the bottom panel of the application and is where the CSS file's
15+
code is located.<br/><br/>
16+
You are able to freely edit the CSS code directly and have the changes reflected immediately in the demo render panel.
17+
You can also copy and paste your own CSS code into the editor to take full control of custom CSS classes.<br/>
18+
</p>
19+
<div className={classes.imgWrapper}>
20+
<img className={classes.img} src={cssEditorTab}/>
21+
</div>
22+
<hr/>
23+
<h1 className={classes.title}>Edit CSS code</h1>
24+
<p className={classes.text}>To edit the CSS code in the CSS editor, make the desired changes directly within the editor.<br/>
25+
</p>
26+
<div className={classes.imgWrapper}>
27+
<img className={classes.medImg} src={cssEdit}/>
28+
</div><br/>
29+
<p className={classes.text}>Or copy and paste your own CSS code directly into the editor.
30+
</p><br/>
31+
<div className={classes.imgWrapper}>
32+
<img className={classes.medImg} src={copyPaste}/>
33+
</div>
34+
<hr/>
35+
</div>
36+
);
37+
};
38+
39+
export default CSSEditor;

‎app/src/tutorial/Canvas.tsx

Lines changed: 5 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import React from 'react';
2-
3-
//images
42
import canvas1 from '../../../resources/canvas_tutorial_images/canvas1.png';
5-
import drag1 from '../../../resources/canvas_tutorial_images/drag1.png';
3+
import drag1 from '../../../resources/canvas_tutorial_images/drag1.gif';
64
import undoRedo from '../../../resources/canvas_tutorial_images/undoRedo.gif';
75

86
const Canvas: React.FC<{
@@ -22,9 +20,9 @@ const Canvas: React.FC<{
2220
<h1 className={classes.title}>Drag-n-Drop</h1>
2321
<p className={classes.text}>The drag and drop functionality is used to populate the canvas with HTML elements and
2422
reusable components from the left panel.<br/><br/>
25-
To use the drag and drop functionality, select the desired <span className={classes.notLink} onClick={() => setPage('HTML_Elements')}>
26-
HTML Element</span>, custom <span className={classes.notLink} onClick={() => setPage('HTML_Elements')}>HTML Element</span>, or
27-
<span className={classes.notLink} onClick={() => setPage('Reusable_Components')}> reusable component</span> then click and hold it
23+
To use the drag and drop functionality, select the desired <span className={classes.notLink} onClick={() => setPage('HTML Elements')}>
24+
HTML element</span>, custom <span className={classes.notLink} onClick={() => setPage('HTML Elements')}>HTML element</span>, or
25+
<span className={classes.notLink} onClick={() => setPage('Reusable Components')}> reusable component</span> then click and hold it
2826
to drag it onto the canvas. <br/><br/>
2927
HTML elements and reusable components can be placed within each other on the canvas to nest them.<br/>
3028
</p>
@@ -38,30 +36,7 @@ const Canvas: React.FC<{
3836
<div className={classes.imgWrapper}>
3937
<img src={undoRedo}/>
4038
</div>
41-
<h1 className={classes.title}>Keyboard Shortcuts</h1>
42-
<h2 className={classes.text}>Mac</h2>
43-
<ul className={classes.text}>
44-
<li>Export Project: Command + e</li>
45-
<li>Undo: Command + z</li>
46-
<li>Redo: Command + Shift + z</li>
47-
<li>Save Project As: Command + s</li>
48-
<li>Save Project: Command + shift + s</li>
49-
<li>Delete HTML Tag on Canvas: Backspace</li>
50-
<li>Delete Project: Command + Backspace</li>
51-
<li>Open Project: Command + o</li>
52-
</ul>
53-
<h2 className={classes.text}>Windows</h2>
54-
<ul className={classes.text}>
55-
<li>Export Project: Control + e</li>
56-
<li>Undo: Control + z</li>
57-
<li>Redo: Control + Shift + z</li>
58-
<li>Save Project As: Control + s</li>
59-
<li>Save Project: Control + shift + s</li>
60-
<li>Delete HTML Tag on Canvas: Backspace</li>
61-
<li>Delete Project: Control + Backspace</li>
62-
<li>Open Project: Control + o</li>
63-
</ul>
64-
<hr/>
39+
<hr/>
6540
</div>
6641
);
6742
};

‎app/src/tutorial/CodePreview.tsx

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,13 @@ const CodePreview: React.FC<{
88
return (
99
<div className={classes.wrapper}>
1010
<h1 className={classes.title}>Code Preview</h1>
11-
<div className={classes.wrapper}>
12-
<p className={classes.text}>The code preview is located at the bottom center of the page on the first tab.<br/>
13-
In the preview, the code will generate for functional components.<br/>
14-
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/>
15-
To learn more about the canvas, click <span className={classes.notLink} onClick={() => setPage('Canvas')} >"here"</span></p>
16-
</div>
11+
<hr/>
12+
<p className={classes.text}>The code preview is located at the bottom center panel of the page on the fourth tab.<br/><br/>
13+
The code preview will generate the lines of code for functional components. As you drag and drop elements or components onto the <span className={classes.notLink} onClick={() => setPage('Canvas')} >canvas</span>
14+
, the code preview will populate and generate the corresponding lines of code in real-time.<br/><br/>
15+
Adding a <span className={classes.notLink} onClick={() => setPage('States')} >state</span> will also generate the corresponding line of code for the state in the code preview.<br/><br/>
16+
Code preview will also change depending on whether Classic React / Gatsby.js / Next.js is chosen.<br/><br/>
17+
To learn more about the <span className={classes.notLink} onClick={() => setPage('Canvas')} >canvas</span>, click <span className={classes.notLink} onClick={() => setPage('Canvas')} >"here"</span></p>
1718
<div className={classes.imgWrapper} >
1819
<img className={classes.smallImg} src={codePreview} />
1920
</div>

‎app/src/tutorial/ComponentTree.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React from 'react';
2-
32
import tree1 from '../../../resources/tree_tutorial_images/tree1.png';
43
import tree2 from '../../../resources/tree_tutorial_images/tree2.png';
54
import tree3 from '../../../resources/tree_tutorial_images/tree3.png';
@@ -24,17 +23,17 @@ const ComponentTree: React.FC<{
2423
<img className={classes.img} src={tree2}></img>
2524
</div>
2625
<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>
26+
<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>
2827
<div className={classes.imgWrapper}>
2928
<img className={classes.img} src={tree3}></img>
3029
</div>
3130
<hr/>
32-
<p className={classes.text}><span className={classes.notLink} onClick={() => setPage('HTML_Elements')} >HTML Elements</span> are shown by their tag name.</p>
31+
<p className={classes.text}><span className={classes.notLink} onClick={() => setPage('HTML Elements')} >HTML elements</span> are shown by their tag name.</p>
3332
<div className={classes.imgWrapper}>
3433
<img className={classes.img} src={tree4}></img>
3534
</div>
3635
<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>
36+
<p className={classes.text}>You can also view the tree for each <span className={classes.notLink} onClick={() => setPage('Reusable Components')} >reusable component</span>.</p>
3837
<div className={classes.imgWrapper}>
3938
<img className={classes.img} src={tree5}></img>
4039
</div>

‎app/src/tutorial/Customization.tsx

Lines changed: 25 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import React from 'react';
22
import display from '../../../resources/customizing_elements_images/Display.png';
3-
import flex from '../../../resources/customizing_elements_images/Flex.png';
43
import height from '../../../resources/customizing_elements_images/Height.png';
54
import width from '../../../resources/customizing_elements_images/Width.png';
65
import backgroundColor from '../../../resources/customizing_elements_images/BackgroundColor.png';
6+
import text from '../../../resources/customizing_elements_images/Text.png';
7+
import link from '../../../resources/customizing_elements_images/Link.png';
8+
import cssClasses from '../../../resources/customizing_elements_images/CSS-Classes.png';
79

810
const Customization: React.FC<{
911
classes: any;
@@ -16,9 +18,10 @@ const Customization: React.FC<{
1618
<p className={classes.text}>
1719
Customize your HTML elements on the canvas with the below features. Any changes <br/>
1820
made in the <span className={classes.notLink} onClick={() => setPage('Customization')}>
19-
Customization</span> panel will be reflected immediately in the <span className={classes.notLink} onClick={() => setPage('Code_Preview')}>
20-
Code Preview </span> and Demo Render. See your changes in real time to decide what's best!<br/><br/>
21+
customization</span> panel will be reflected immediately in the <span className={classes.notLink} onClick={() => setPage('Code Preview')}>
22+
code preview </span> and demo render panel. See your changes in real time to decide what's best!<br/><br/>
2123
To customize an HTML element, drag it onto the canvas and select it on the canvas. Then use the desired cusotmization feature.
24+
Once done, press the save button to save your customization changes.
2225
</p>
2326
<hr />
2427
<h2>Display</h2>
@@ -33,31 +36,27 @@ const Customization: React.FC<{
3336
,{' '}
3437
<span
3538
className={classes.notLink}
36-
onClick={() => setPage('Reusable_Components')}
39+
onClick={() => setPage('Reusable Components')}
3740
>
3841
component
3942
</span>
4043
,{' '}
4144
<span
4245
className={classes.notLink}
43-
onClick={() => setPage('Route_Links')}
46+
onClick={() => setPage('Route Links')}
4447
>
4548
route link
4649
</span>
4750
, or{' '}
4851
<span
4952
className={classes.notLink}
50-
onClick={() => setPage('HTML_Elements')}
53+
onClick={() => setPage('HTML Elements')}
5154
>
5255
element
5356
</span>{' '}
5457
into the canvas, select the one that needs customizing simply by
55-
clicking on it. Then, to give it block,
56-
inline-block, or flex styling, select from the drop down box in the right container.
58+
clicking on it.
5759
</p>
58-
<div className={classes.imgWrapper}>
59-
<img src={flex} />
60-
</div>
6160
<p className={classes.text}>
6261
If the display option 'flex' is chosen, a few more sub-options are
6362
displayed under the display option.
@@ -71,21 +70,21 @@ const Customization: React.FC<{
7170
Change the width of each{' '}
7271
<span
7372
className={classes.notLink}
74-
onClick={() => setPage('Reusable_Components')}
73+
onClick={() => setPage('Reusable Components')}
7574
>
7675
component
7776
</span>
7877
,{' '}
7978
<span
8079
className={classes.notLink}
81-
onClick={() => setPage('Route_Links')}
80+
onClick={() => setPage('Route Links')}
8281
>
8382
route link
8483
</span>
8584
, or{' '}
8685
<span
8786
className={classes.notLink}
88-
onClick={() => setPage('HTML_Elements')}
87+
onClick={() => setPage('HTML Elements')}
8988
>
9089
element
9190
</span>
@@ -100,21 +99,21 @@ const Customization: React.FC<{
10099
Change the height of each{' '}
101100
<span
102101
className={classes.notLink}
103-
onClick={() => setPage('Reusable_Components')}
102+
onClick={() => setPage('Reusable Components')}
104103
>
105104
component
106105
</span>
107106
,{' '}
108107
<span
109108
className={classes.notLink}
110-
onClick={() => setPage('Route_Links')}
109+
onClick={() => setPage('Route Links')}
111110
>
112111
route link
113112
</span>
114113
, or{' '}
115114
<span
116115
className={classes.notLink}
117-
onClick={() => setPage('HTML_Elements')}
116+
onClick={() => setPage('HTML Elements')}
118117
>
119118
element
120119
</span>
@@ -126,32 +125,35 @@ const Customization: React.FC<{
126125
<img src={backgroundColor} />
127126
</div>
128127
<p className={classes.text}>
129-
Select an element, type in the color you wish to change the background
130-
color to, and click save.
128+
Select an element and type in the color you wish to change the background
129+
color to and then click save.
131130
</p>
132131
<hr />
133132
<h2>Text</h2>
134133
<div className={classes.imgWrapper}>
135-
<img src={backgroundColor} />
134+
<img src={text} />
136135
</div>
137136
<p className={classes.text}>
138137
Add HTML text to a selected element on the canvas by typing in the desired text.
139138
</p>
140139
<hr />
141140
<h2>Link</h2>
142141
<div className={classes.imgWrapper}>
143-
<img src={backgroundColor} />
142+
<img src={link} />
144143
</div>
145144
<p className={classes.text}>
146145
Add a hyperlink to a selected element on the canvas by typing in the url.
147146
</p>
148147
<hr />
149148
<h2>CSS Classes</h2>
150149
<div className={classes.imgWrapper}>
151-
<img src={backgroundColor} />
150+
<img src={cssClasses} />
152151
</div>
153152
<p className={classes.text}>
154-
Change the CSS class of a selected element on the canvas by typing in the class name.
153+
Change the CSS class of a selected element on the canvas by typing in the class name. <br/>
154+
ReactType also comes with a default CSS file that is shown in the <span className={classes.notLink} onClick={() => setPage('CSS Editor')} >CSS editor</span>.
155+
Add your own CSS classes to the <span className={classes.notLink} onClick={() => setPage('CSS Editor')} >CSS editor</span> or make changes to it to use
156+
custom CSS classes.
155157
</p>
156158
<hr />
157159
</div>

‎app/src/tutorial/HtmlElements.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const HtmlElements: React.FC<{
3333
In order to save custom tags across multiple projects, we recommend creating custom tags first, then saving multiple projects with the custom tags. This will allow access to custom tags across multiple projects.</p>
3434
<hr/>
3535
<h2>Customization</h2>
36-
<p className={classes.text}>Add attributes to elements in the generated code in the code preview. When making changes/editing the code, please make sure not to add anymore components/elements to the canvas. This should be the final step before exporting your project. Please see <span className={classes.notLink} onClick={() => setPage('Code_Preview')}>Code Preview</span> for more details on when/how to make changes to your code in ReacType.</p>
36+
<p className={classes.text}>Add attributes to elements in the generated code in the code preview. When making changes/editing the code, please make sure not to add anymore components/elements to the canvas. This should be the final step before exporting your project. Please see <span className={classes.notLink} onClick={() => setPage('Code Preview')}>Code Preview</span> for more details on when/how to make changes to your code in ReacType.</p>
3737
<div className={classes.imgWrapper} >
3838
<img className={classes.img} src={codeSnippet} />
3939
</div>

0 commit comments

Comments
 (0)