Merge pull request #32 from oslabs-beta/David/tutorial

David/tutorial

Author: jdvplus

src/assets/delete-component.png

@@ -48,29 +48,6 @@ import { ref } from "vue";
 const tutorialPage = ref("landing");
 </script>
 
-<!-- OLD OPTIONS API SYNTAX -->
-<!-- <script lang="ts">
-import BasicFunctions from './tutorial/BasicFunctions.vue'
-import AdvancedFunctions from './tutorial/AdvancedFunctions.vue'
-import Landing from './tutorial/Landing.vue'
-import NewVersionInfo from './tutorial/NewVersionInfo.vue'
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  components: {
-    BasicFunctions,
-    AdvancedFunctions,
-    Landing,
-    NewVersionInfo
-  },
-  data() {
-    return {
-      tutorialPage: 'landing' as string,
-    }
-  }
-});
-</script> -->
-
 <style lang="scss" scoped>
 .q-btn {
   font-size: 8px;

src/assets/export.png

@@ -1,5 +1,4 @@
 <template>
-  <!--Typescript option, mock image?, nested HTML elements, import component/limitations -->
   <section id="advancedFunctions">
     <h6 class="tutorialHeading">Advanced Functionality</h6>
     <h class="tutorial-sub-heading">Importing an existing component</h>
@@ -10,11 +9,6 @@
       formats is not currently supported.
     </p>
     <h class="tutorial-sub-heading">Adding Props</h>
-    <img
-      alt="Props sub-menu"
-      src="../../../assets/props.png"
-      class="tut-screenshot"
-    />
     <p class="tutorialContent">
       To add props, select the component and click the Props sub-menu in the
       Update Component menu in the left sidebar. Enter the name of the prop you
@@ -24,7 +18,7 @@
     </p>
     <img
       alt="Add Props"
-      src="../../../assets/add-props.png"
+      src="../../../assets/props.png"
       class="tut-screenshot"
     />
     <h class="tutorial-sub-heading">Adding State or Actions</h>
@@ -43,21 +37,6 @@
       src="../../../assets/state-actions.png"
       class="tut-screenshot"
     />
-    <h class="tutorial-sub-heading">Navigating HTML elements</h>
-    <p class="tutorialContent">
-      To nest HTML elements, select a component, click the double down arrow
-      icon on an HTML element (either in the HTML Elements sub-menu of the
-      Update Component menu in the left sidebar or the HTML Elements sub-menu of
-      the Component Details tab in the right sidebar). Click the icons to add
-      additional HTML elements. To navigate back up a layer, click the up arrow
-      icon. (Note: Certain types of HTML elements cannot be nested, these will
-      not have a double arrow icon.)
-    </p>
-    <img
-      alt="HTML Queue"
-      src="../../../assets/html-queue.png"
-      class="tut-screenshot"
-    />
     <h class="tutorial-sub-heading">TypeScript Mode</h>
     <p class="tutorialContent">
       To turn TypeScript mode on or off, click on the Settings gear icon in the
@@ -87,17 +66,6 @@ const store = useStore();
 const toggleTutorial = () => store.toggleTutorial();
 </script>
 
-<!-- OLD OPTIONS API SYNTAX -->
-<!-- <script>
-import { mapActions } from "vuex";
-
-export default {
-  methods: {
-    ...mapActions(["toggleTutorial"]),
-  },
-};
-</script> -->
-
 <style lang="scss" scoped>
 #advancedFunctions {
   display: flex;

src/assets/import.png

@@ -1,5 +1,4 @@
 <template>
-  <!--Basic functionality here, add component, copy/paste, undo/redo, add html, saving, loading, exporting-->
   <section id="basicFunctions">
     <h6 class="tutorialHeading">Getting Started in OverVue</h6>
     <p class="tutorialContent">
@@ -20,17 +19,6 @@
       in the top navigation bar, all the way to the right, and select "Getting
       Started" to return to the landing page.
     </p>
-    <p class="tutorialContent">
-      Almost any action in OverVue can be reversed with 'undo' or recreated with
-      'redo'
-      <img
-        style="vertical-align: middle"
-        alt="Undo-redo"
-        src="../../../assets/undo_redo.png"
-        class="tut-image"
-      />
-      found on the left side of the top navigation bar.
-    </p>
     <h class="tutorial-sub-heading">Setting Up Your Project</h>
     <p class="tutorialContent">
       Begin by clicking the gear icon
@@ -46,11 +34,6 @@
       Github. Boilerplate for these configurations will be reflected in your
       exported project.
     </p>
-    <p class="tutorialContent">
-      Next, customize your canvas grid by choosing a density for your width and
-      height in the upper left corner of the page. Once you begin prototyping,
-      elements will snap to the grid for easy positioning.
-    </p>
     <h class="tutorial-sub-heading">Creating Components</h>
     <p class="tutorialContent">
       Under the Create Component menu in the left sidebar, set a component name
@@ -64,30 +47,41 @@
       class="tut-screenshot"
     />
     <p class="tutorialContent">
-      To use components from the Vue 3 compatible library, ElementPlus+, you can
-      select elements from the dropdown menu, or search for them by element
-      name. You will then select the corresponding html tag, designated with a
-      prefix of 'e'. Finally, click create component!
+      To use components from the Vue 3 compatible library, Vuetensils, you can 
+      switch the tab from Elements to Vuetensils. Finally, click create component!
     </p>
     <h class="tutorial-sub-heading">Customizing Your Components</h>
     <p class="tutorialContent">
       To capture component styling, be sure to add a class attribute. You can
       further customize your components in the sidebar by adding an id, parents,
       children, props, state, or actions - all of which will be included in your
       exported code. To update a component after its creation, select the
-      component on the canvas and the Update Component Menu will appear in the
+      component on the tree and the Update Component Menu will appear in the
       left sidebar.
     </p>
     <h class="tutorial-sub-heading">Building Out Your Prototype</h>
     <p class="tutorialContent">
-      To manipuilate your prototype, you can drag and drop your components on
-      the grid, and resize them by pulling at the corners. To add comments,
-      click the notepad icon in the left corner of the component. To change
-      color, click the canvas icon and select your color of choice.
+      To manipulate your prototype, you can drag and drop your components on
+      the tree. This will alter the component relationships and the code will
+      reflect the changes. To control the tree view, you focus on the tree background
+      by clicking it, and use keyboard controls to move around and zoom in.
+    </p>
+    <h class="controls">Controls:</h>
+    <p class="tutorialContent">
+      Directional Movement: Arrow Keys
+      <br/>
+      Zoom: Scroll Wheel | Comma ( , ) | Period ( . )
+      <br/>
+      Return to Root: Slash ( / )
     </p>
+    <img
+      alt="Tree View"
+      src="../../../assets/tree.png"
+      class="tut-screenshot"
+    />
     <h class="tutorial-sub-heading">Deleting Components</h>
     <p class="tutorialContent">
-      To delete a component, select it and click ‘Delete Currently Selected’ in
+      To delete a component, select it and click ‘Delete Current Component’ in
       the Update Component menu.
     </p>
     <img
@@ -120,22 +114,6 @@
       src="../../../assets/routes.png"
       class="tut-screenshot"
     />
-    <!-- <h class="tutorial-sub-heading">Uploading mockups</h>
-    <p class="tutorialContent">You can upload a design mockup in the Routes tab of the right sidebar menu (one mockup
-      per route). Select the route in the Routes tab, open the ‘Upload Mockup’ sub-menu and click ‘Upload Mockup’. To
-      clear the image, click the ‘Clear Image’ button.
-    </p>
-    <img alt="Upload Mockup buttons" src="../../../assets/upload-mockups.png" class="tut-screenshot">
-    <h class="tutorial-sub-heading">Project Tree</h>
-    <p class="tutorialContent">You can find a visualization of your app hierarchy in the Project Tree tab of the right
-      sidebar. Routes are blue, components are green. You can also navigate to a component or route by clicking on it in
-      the project tree.
-    </p> -->
-    <img
-      alt="Project Tree"
-      src="../../../assets/project-tree.png"
-      class="tut-screenshot"
-    />
     <h class="tutorial-sub-heading">Saving or Exporting Your Project</h>
     <p class="tutorialContent">
       When you are satisfied with your project, you can save it or export it
@@ -178,7 +156,6 @@
   </section>
 </template>
 
-<!-- COMPOSITION API SYNTAX -->
 <script setup lang="ts">
 import { useStore } from "../../../store/main.js";
 
@@ -189,21 +166,6 @@ const toggleTutorial = () => store.toggleTutorial();
 const nextTab = () => emit("nextTab");
 </script>
 
-<!-- OLD OPTIONS API SYNTAX -->
-<!-- <script>
-import { mapActions } from 'vuex';
-
-export default {
-  emits: ['nextTab'],
-  methods: {
-    ...mapActions(["toggleTutorial"]),
-    nextTab() {
-      this.$emit('nextTab')
-    }
-  }
-}
-</script> -->
-
 <style scoped lang="scss">
 #basicFunctions {
   display: flex;
@@ -232,6 +194,13 @@ export default {
   font-size: 1rem;
 }
 
+.controls {
+  align-self: flex-start;
+  font-size: 1.2rem;
+  margin: 0.75rem;
+  margin-bottom: 0px;
+}
+
 .tut-btn {
   margin: 0.75rem;
   width: 50%;

src/assets/interactive-tree.png

@@ -1,5 +1,4 @@
 <template>
-  <!--Landing page-->
   <section id="welcomeTab">
     <h6 class="tutorialHeading">Welcome to</h6>
     <img
@@ -31,7 +30,6 @@
   </section>
 </template>
 
-<!-- COMPOSITION API SYNTAX -->
 <script setup lang="ts">
 // @ts-nocheck
 // No check for the shell
@@ -47,24 +45,6 @@ const nextTab = () => emit("nextTab");
 const openUrl = (url: string) => shell.openExternal(url, { activate: true });
 </script>
 
-<!-- OLD OPTIONS API SYNTAX -->
-<!-- <script>
-const { ipcRenderer, shell } = window;
-import { mapActions } from 'vuex';
-export default {
-  emits: ['nextTab', 'versionTab'],
-  methods: {
-    ...mapActions(["toggleTutorial"]),
-    nextTab() {
-      this.$emit('nextTab')
-    },
-    openUrl(url) {
-      shell.openExternal(url, { activate: true });
-    }
-  }
-}
-</script> -->
-
 <style lang="scss" scoped>
 #logo {
   width: 325px;