Drastic changes to Tutorial such as adding new Tutorial pages and changing existing pictures/gifs/text to reflect updated application. Fixed circle not appearing next to page name in the Pages panel by making it appear as a red dot.

Co-authored-by: jonocr <[email protected]>
Co-authored-by: xkevinpark <[email protected]>
Co-authored-by: williamdyoon <[email protected]>
Co-authored-by: MadinventorZero <[email protected]>

Author: 5 people

app/electron/main.js

@@ -73,7 +73,7 @@ async function createWindow() {
     webPreferences: {
       zoomFactor: 0.7,
       // enable devtools when in development mode
-      devTools: true,
+      devTools: isDev,
       // crucial security feature - blocks rendering process from having access to node modules
       nodeIntegration: false,
       // web workers will not have access to node
@@ -91,7 +91,6 @@ async function createWindow() {
       nativeWindowOpen: true,
     },
   });
-  win.webContents.openDevTools();
 
   // Splash screen that appears while loading
   const hideSplashscreen = initSplashScreen({

app/src/components/main/renderDemo.css

@@ -4,7 +4,7 @@
 .tst-btn {
   height: 20px;
   width: 100px;
-  background-color: #ffffff;
+  background-color: #000000;
 }
 
 
@@ -18,7 +18,7 @@
 .tst-form {
   position: relative;
   z-index: 1;
-  background: #000000;
+  background: #0099E6;
   max-width: 360px;
   margin: 0 auto 100px;
   padding: 45px;

app/src/components/right/ComponentPanelItem.tsx

@@ -72,6 +72,7 @@ const ComponentPanelItem: React.FC<{
       xs={8}
       style={{
         color: '#262626',
+        display: 'grid',
         backgroundColor: 'transparent',
         border: root
           ? '2px dotted #186BB4'
@@ -80,8 +81,8 @@ const ComponentPanelItem: React.FC<{
         borderColor: '#000000',
       }}
     >
+      {isFocus && <div className={classes.focusMark}></div>}
       <div className="compPanelItem" onClick={handleClick}>
-        {isFocus && <div className={classes.focusMark}></div>}
         <h3 >{name}</h3>
       </div>
     </Grid>
@@ -93,13 +94,11 @@ const useStyles = makeStyles({
     backgroundColor: 'rgba(1,212,109,0.3)'
   },
   focusMark: {
-    backgroundColor: '#808080',
-    position: 'absolute',
+    backgroundColor: 'red',
+    justifySelf: 'left',
     width: '12px',
     height: '12px',
-    borderRadius: '12px',
-    left: '-35px',
-    top: '30px'
+    borderRadius: '25px',
   }
 });
 

app/src/components/right/StatePropsPanel.tsx

@@ -179,7 +179,11 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
             debug
           </MyButton> */}
           <br></br>
-          <MyButton type="submit" onClick={submitNewState}>
+          <MyButton 
+          type="submit" 
+          onClick={submitNewState}
+          className={isThemeLight ? `${classes.addComponentButton} ${classes.lightThemeFontColor}` : `${classes.addComponentButton} ${classes.darkThemeFontColor}`}
+          >
             Save
           </MyButton>
           <br></br>
@@ -289,7 +293,7 @@ const useStyles = makeStyles((theme: Theme) =>
       fontSize: "0.85rem",
     },
     lightThemeFontColor: {
-      color: "#186BB4",
+      color: "#155084",
     },
     darkThemeFontColor: {
       color: "#fff",

app/src/tutorial/Annotations.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import noteButton from '../../../resources/annotations_tutorial_images/NoteButton.gif';
+import annotation from '../../../resources/annotations_tutorial_images/Annotation.gif';
+
+const Annotations: React.FC<{
+  classes: any;
+  setPage: Function;
+}> = ({ classes, setPage }) => {
+  return (
+    <div className={classes.wrapper}>
+      <h1 className={classes.title}>Annotations</h1>
+      <hr />
+      <p className={classes.text}>
+        Write any notes you want for each element or component on the canvas by clicking the Notes button.<br/><br/>
+        <div className={classes.imgWrapper}>
+          <img className={classes.img} src={noteButton}/>
+        </div>
+        <br/>
+        Once clicked, the annotation window will appear where you are able to write text in. To close the annotation window,
+        simply click anywhere outside the window and the notes will be saved. <br></br>
+        Any notes written will persist throughout the project, even when swapping between Root level components.<br/><br/>
+        <div className={classes.imgWrapper}>
+          <img className={classes.img} src={annotation}/>
+        </div>      
+      </p>
+      <hr />
+    </div>
+  );
+};
+
+export default Annotations;

app/src/tutorial/CSSEditor.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import cssEditorTab from '../../../resources/csseditor_tutorial_images/CSSEditorTab.png';
+import cssEdit from '../../../resources/csseditor_tutorial_images/DirectCSSEdit.gif';
+import copyPaste from '../../../resources/csseditor_tutorial_images/CopyPasteCSS.gif';
+
+const CSSEditor: React.FC<{
+  classes: any;
+  setPage: Function;
+}> = ({ classes, setPage }) => {
+  return (
+    <div className={classes.wrapper}>
+      <h1 className={classes.title}>CSS Editor</h1>
+      <hr />
+      <p className={classes.text}>The CSS editor tab is located in the bottom panel of the application and is where the CSS file's
+      code is located.<br/><br/>
+      You are able to freely edit the CSS code directly and have the changes reflected immediately in the demo render panel.
+      You can also copy and paste your own CSS code into the editor to take full control of custom CSS classes.<br/>
+      </p>
+      <div className={classes.imgWrapper}>
+        <img className={classes.img} src={cssEditorTab}/>
+      </div>
+      <hr/>
+      <h1 className={classes.title}>Edit CSS code</h1>
+      <p className={classes.text}>To edit the CSS code in the CSS editor, make the desired changes directly within the editor.<br/>
+      </p>
+      <div className={classes.imgWrapper}>
+        <img className={classes.medImg} src={cssEdit}/>
+      </div><br/>
+      <p className={classes.text}>Or copy and paste your own CSS code directly into the editor.
+      </p><br/>
+      <div className={classes.imgWrapper}>
+        <img className={classes.medImg} src={copyPaste}/>
+      </div>
+      <hr/>
+    </div>
+  );
+};
+
+export default CSSEditor;

app/src/tutorial/Canvas.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
-
-//images
 import canvas1 from '../../../resources/canvas_tutorial_images/canvas1.png';
-import drag1 from '../../../resources/canvas_tutorial_images/drag1.png';
+import drag1 from '../../../resources/canvas_tutorial_images/drag1.gif';
 import undoRedo from '../../../resources/canvas_tutorial_images/undoRedo.gif';
 
 const Canvas: React.FC<{
@@ -22,9 +20,9 @@ const Canvas: React.FC<{
       <h1 className={classes.title}>Drag-n-Drop</h1>
       <p className={classes.text}>The drag and drop functionality is used to populate the canvas with HTML elements and 
       reusable components from the left panel.<br/><br/>
-      To use the drag and drop functionality, select the desired <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> then click and hold it 
+      To use the drag and drop functionality, select the desired <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> then click and hold it 
       to drag it onto the canvas. <br/><br/>
       HTML elements and reusable components can be placed within each other on the canvas to nest them.<br/>
       </p>
@@ -38,30 +36,7 @@ const Canvas: React.FC<{
       <div className={classes.imgWrapper}>
         <img src={undoRedo}/>
       </div>
-      <h1 className={classes.title}>Keyboard Shortcuts</h1>
-        <h2 className={classes.text}>Mac</h2>
-          <ul className={classes.text}>
-            <li>Export Project: Command + e</li>
-            <li>Undo: Command + z</li>
-            <li>Redo: Command + Shift + z</li>
-            <li>Save Project As: Command + s</li>
-            <li>Save Project: Command + shift + s</li>
-            <li>Delete HTML Tag on Canvas: Backspace</li>
-            <li>Delete Project: Command + Backspace</li>
-            <li>Open Project: Command + o</li>
-          </ul>
-        <h2 className={classes.text}>Windows</h2>
-          <ul className={classes.text}>
-            <li>Export Project: Control + e</li>
-            <li>Undo: Control + z</li>
-            <li>Redo: Control + Shift + z</li>
-            <li>Save Project As: Control + s</li>
-            <li>Save Project: Control + shift + s</li>
-            <li>Delete HTML Tag on Canvas: Backspace</li>
-            <li>Delete Project: Control + Backspace</li>
-            <li>Open Project: Control + o</li>
-          </ul>
-        <hr/>
+      <hr/>
     </div>
   );
 };

app/src/tutorial/CodePreview.tsx

@@ -8,12 +8,13 @@ const CodePreview: React.FC<{
   return (
     <div className={classes.wrapper}>
       <h1 className={classes.title}>Code Preview</h1>
-      <div className={classes.wrapper}>
-        <p className={classes.text}>The code preview is located at the bottom center of the page on the first tab.<br/>
-        In the preview, the code will generate for functional components.<br/>
-        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/>
-        To learn more about the canvas, click <span className={classes.notLink} onClick={() => setPage('Canvas')} >"here"</span></p>
-      </div>
+      <hr/>
+        <p className={classes.text}>The code preview is located at the bottom center panel of the page on the fourth tab.<br/><br/>
+        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>
+        , the code preview will populate and generate the corresponding lines of code in real-time.<br/><br/>
+        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/>
+        Code preview will also change depending on whether Classic React / Gatsby.js / Next.js is chosen.<br/><br/>
+        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>
       <div className={classes.imgWrapper} >
         <img className={classes.smallImg} src={codePreview} />
       </div>

app/src/tutorial/ComponentTree.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import tree1 from '../../../resources/tree_tutorial_images/tree1.png';
 import tree2 from '../../../resources/tree_tutorial_images/tree2.png';
 import tree3 from '../../../resources/tree_tutorial_images/tree3.png';
@@ -24,17 +23,17 @@ const ComponentTree: React.FC<{
         <img className={classes.img} src={tree2}></img>
       </div>
       <hr/>
-      <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>
+      <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>
       <div className={classes.imgWrapper}>
         <img className={classes.img} src={tree3}></img>
       </div>
       <hr/>
-      <p className={classes.text}><span className={classes.notLink} onClick={() => setPage('HTML_Elements')} >HTML Elements</span> are shown by their tag name.</p>
+      <p className={classes.text}><span className={classes.notLink} onClick={() => setPage('HTML Elements')} >HTML elements</span> are shown by their tag name.</p>
       <div className={classes.imgWrapper}>
         <img className={classes.img} src={tree4}></img>
       </div>
       <hr/>
-      <p className={classes.text}>You can also view the tree for each <span className={classes.notLink} onClick={() => setPage('Reusable_Components')} >reusable component</span>.</p>
+      <p className={classes.text}>You can also view the tree for each <span className={classes.notLink} onClick={() => setPage('Reusable Components')} >reusable component</span>.</p>
       <div className={classes.imgWrapper}>
         <img className={classes.img} src={tree5}></img>
       </div>