Skip to content

Commit 161a934

Browse files
author
Emma Genesen
committed
updated new user tutorial, reorganized right sidebar; new images for user tutorial and new features still need to be added
1 parent b541aae commit 161a934

File tree

6 files changed

+64
-83
lines changed

6 files changed

+64
-83
lines changed

‎src/components/right-sidebar/ComponentDetails.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ Description:
7878
</q-tab-panel>
7979
</q-tab-panels>
8080
</q-card>
81-
<q-card id="blank-card" v-else>Select a component to show details</q-card>
81+
<q-card id="blank-card" v-else>Create or Select a Component to See Details</q-card>
8282
</div>
8383
</template>
8484

‎src/components/right-sidebar/RightSidebar.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@ Description:
1717
dense
1818
breakpoint="1050"
1919
>
20-
<q-tab name="routes" label="Routes" class="label-text"></q-tab>
21-
<q-tab name="tree" label="Project Tree" class="label-text"></q-tab>
22-
<q-tab name="detail" label="Component Details" class="label-text"></q-tab>
20+
<q-tab name="detail" label="Component Details" class="label-text"></q-tab>
21+
<q-tab name="tree" label="Project Tree" class="label-text"></q-tab>
22+
<q-tab name="routes" label="Routes" class="label-text"></q-tab>
2323
</q-tabs>
2424
<q-tab-panels v-model="tab" animated>
2525
<q-tab-panel name="routes">

‎src/components/right-sidebar/tutorial/AdvancedFunctions.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<section id="advancedFunctions">
44
<h6 class="tutorialHeading">Advanced Functionality</h6>
55
<h class="tutorial-sub-heading">Importing an existing component</h>
6-
<p class="tutorialContent">To import an existing Vue component file, open the Import Component sub-menu in the left sidebar and click 'Import Component'.
6+
<p class="tutorialContent">To import an existing Vue component file, click the import button in the upper right hand corner. Please note: this feature is specifically intended for import of json files saved in-app. Import of other file formats is not currently supported.
77
</p>
88
<h class="tutorial-sub-heading">Adding Props</h>
99
<img alt="Props sub-menu" src="../../../assets/props.png" class="tut-screenshot">
@@ -26,7 +26,7 @@
2626
class="tut-btn"
2727
id="getstarted-btn"
2828
color="secondary"
29-
label="Get Started with OverVue"
29+
label="Get Started Now"
3030
@click="toggleTutorial"
3131
/>
3232
</section>

‎src/components/right-sidebar/tutorial/BasicFunctions.vue

Lines changed: 40 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<h6 class="tutorialHeading">Getting Started in OverVue</h6>
55
<p class="tutorialContent">Prototyping in OverVue is designed to be quick and efficient. Learning how to use OverVue
66
will help
7-
you to integrate this tool into your design process for creating Vue applications.
7+
you integrate this tool into your design process to more seemlessly create Vue applications.
88
</p><br>
99
<h class="tutorial-sub-heading">Navigating OverVue</h>
1010
<p class="tutorialContent">If you ever want to navigate back to this page, click the gear icon <img
@@ -14,23 +14,38 @@
1414
</p>
1515
<p class="tutorialContent">Almost any action in OverVue can be reversed with 'undo' or recreated with 'redo' <img
1616
style="vertical-align:middle" alt="Undo-redo" src="../../../assets/undo_redo.png" class="tut-image"> found on
17-
the left side of the top navigation bar. You can also utilize keyboard shortcuts (cmd-z or ctrl-z to undo; cmd-y
18-
or ctrl-y to redo) to accomplish the same thing as clicking the buttons.
17+
the left side of the top navigation bar.
1918
</p>
20-
<p class="tutorialContent">There are three additional buttons on the top navigation bar to utilize: Save, Import and
21-
Export.
19+
<h class="tutorial-sub-heading">Setting Up Your Project</h>
20+
<p class="tutorialContent">Begin by clicking the gear icon <img
21+
style="vertical-align:middle" alt="Gear" src="../../../assets/gear.png" class="tut-image"> to customize your project. Here, you can select Slack login to push project updates to your Slack teams. You can also toggle typescript to make your project typescript compatible, or add Oauth for Google or Github. Boilerplate for these configurations will be reflected in your exported project.
2222
</p>
23-
<p class="tutorialContent">
24-
<img style="vertical-align:middle" alt="save" src="../../../assets/save.png" class="tut-image">Save your OverVue
25-
project progress as a JSON file to access it again later<br>
26-
<img style="vertical-align:middle" alt="import" src="../../../assets/import.png" class="tut-image">Open an
27-
existing JSON project file or import an existing Vue component <br>
28-
<img style="vertical-align:middle" alt="export" src="../../../assets/export.png" class="tut-image">Export
29-
boilerplate code for your whole project or a single component<br>
23+
<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.
3024
</p>
31-
<p class="tutorialContent">In the right sidebar, you'll find the Routes, Project Tree, and Component Details tabs:
25+
<h class="tutorial-sub-heading">Creating Components</h>
26+
<p class="tutorialContent">Under the Create Component menu in the left sidebar, set a component name (required) and
27+
optionally select a parent component, and/or html elements to be nested inside the component (see Advanced
28+
Functionality to add deeper nesting to html elements).
29+
</p>
30+
<img alt="Create Component Menu" src="../../../assets/create_component_box.png" class="tut-screenshot">
31+
<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!
32+
</p>
33+
<h class="tutorial-sub-heading">Customizing Your Components</h>
34+
<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 left sidebar.
35+
</p>
36+
<h class="tutorial-sub-heading">Building Out Your Prototype</h>
37+
<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.
38+
</p>
39+
<h class="tutorial-sub-heading">Deleting Components</h>
40+
<p class="tutorialContent">To delete a component, select it and click ‘Delete Currently Selected’ in the Update
41+
Component menu.
42+
</p>
43+
<img alt="Delete Component button" src="../../../assets/delete-component.png" class="tut-screenshot">
44+
<h class="tutorial-sub-heading">Component Details</h>
45+
<p class="tutorialContent">In the right sidebar, there is a component details tab where you can access details about the active/selected
46+
component. Here, you can toggle between a live updated code snippet, component hierarchy diagram, and project routing visualization.
3247
</p>
33-
<img alt="Right Sidebar tabs" src="../../../assets/rightsidebar.png" class="tut-screenshot">
48+
<img alt="Component Details" src="../../../assets/component-details.png" class="tut-screenshot">
3449
<h class="tutorial-sub-heading">Routes</h>
3550
<p class="tutorialContent">You can find all of your routes in the Routes tab. To add a route, enter the name in the
3651
input field and click the ‘+’, or press enter. Once added, you can click on a route to navigate to it. To delete a
@@ -50,30 +65,19 @@
5065
the project tree.
5166
</p> -->
5267
<img alt="Project Tree" src="../../../assets/project-tree.png" class="tut-screenshot">
53-
<h class="tutorial-sub-heading">Component Details</h>
54-
<p class="tutorialContent">Under the component details tab, you can access details about the active/selected
55-
component - including a code snippet (live generated boilerplate code), the HTML elements, state, actions or props
56-
in the component.
57-
</p>
58-
<img alt="Component Details" src="../../../assets/component-details.png" class="tut-screenshot">
59-
<p class="tutorialContent">In the left sidebar, you’ll find the Component and Store tabs:</p>
60-
61-
<h class="tutorial-sub-heading">Creating a component from scratch</h>
62-
<p class="tutorialContent">Under the Create Component menu in the left sidebar, set a component name (required) and
63-
optionally select a parent component, and/or html elements to be nested inside the component (see Advanced
64-
Functionality to add deeper nesting to html elements).
65-
</p>
66-
<img alt="Create Component Menu" src="../../../assets/create_component_box.png" class="tut-screenshot">
67-
<h class="tutorial-sub-heading">Editing a component</h>
68-
<p class="tutorialContent">To update a component, select the component on the canvas and an Update Component menu
69-
will appear in the left sidebar. To update the name, enter the new name in the field and click enter.
68+
<h class="tutorial-sub-heading">Saving or Exporting Your Project</h>
69+
<p class="tutorialContent">When you are satisfied with your project, you can save it or export it using the buttons in the top right.
7070
</p>
71-
<h class="tutorial-sub-heading">Deleting a component</h>
72-
<p class="tutorialContent">To delete a component, select it and click ‘Delete Currently Selected’ in the Update
73-
Component menu or press the delete key.
71+
<p class="tutorialContent">
72+
<img style="vertical-align:middle" alt="save" src="../../../assets/save.png" class="tut-image">Save your OverVue
73+
project progress as a JSON file to access it again later<br>
74+
<img style="vertical-align:middle" alt="import" src="../../../assets/import.png" class="tut-image">Open an
75+
existing JSON project file or import an existing Vue component <br>
76+
<img style="vertical-align:middle" alt="export" src="../../../assets/export.png" class="tut-image">Export
77+
boilerplate code for your whole project or a single component<br>
7478
</p>
75-
<img alt="Delete Component button" src="../../../assets/delete-component.png" class="tut-screenshot">
76-
<q-btn class="tut-btn" color="secondary" id="version-btn" label="New Features" @click="nextTab" />
79+
<q-btn class="tut-btn" color="secondary" id="version-btn" label="Checkout Our New Features" @click="nextTab" />
80+
<q-btn class="tut-btn closeAction" label="Start Building Now" @click="toggleTutorial" />
7781
</section>
7882
</template>
7983

‎src/components/right-sidebar/tutorial/Landing.vue

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,14 @@
33
<section id="welcomeTab">
44
<h6 class="tutorialHeading">Welcome to</h6>
55
<img alt="OverVue" src="../../../assets/overvue_layeredlogo.png" id="logo">
6-
<q-btn class="tut-btn" color="secondary" label="View the Readme"
7-
@click="openUrl('https://github.com/open-source-labs/OverVue#readme')" />
8-
<p id="new-text">New to OverVue?</p>
9-
<q-btn class="tut-btn" color="secondary" label="Explore Functionality" @click="nextTab" />
106
<p id="new-text"></p>
11-
<q-btn class="tut-btn closeAction" label="Close" @click="toggleTutorial" />
7+
<q-btn class="tut-btn closeAction" label="Start Building Now" @click="toggleTutorial" />
8+
<p id="new-text"></p>
9+
<p id="new-text"></p>
10+
<p id="new-text">New To Overvue?</p>
11+
<q-btn class="tut-btn" color="secondary" label="New User Tutorial" @click="nextTab" />
12+
<q-btn class="tut-btn" color="secondary" label="Official Documentation"
13+
@click="openUrl('https://www.overvue.org/')" />
1214
</section>
1315
</template>
1416

‎src/components/right-sidebar/tutorial/NewVersionInfo.vue

Lines changed: 11 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,20 @@
11
<template>
22
<section id="newFeatures">
3-
<h6 class="infoHeading">What's New?</h6>
3+
<h6 class="infoHeading">What's New in OverVue 8.0?</h6>
44

5-
<p class="info-sub-heading">Drag and Drop for HTML Tags </p>
6-
<p class="infoContent">Choose HTML tags to include in the component. Click on a tag and drag to the desired
7-
position. </p>
5+
<p class="info-sub-heading">Improved Prototyping with Snap to Grid Positioning</p>
6+
<p class="infoContent">Level up your prototyping with snap to grid positioning and component sizing that is exported as CSS grid styling in exported SFC's. Overvue 8.0 also fixes bugs that led to conditional application of color and position styling in previous versions. </p>
87

9-
<p class="info-sub-heading">Component Customization</p>
10-
<p class="infoContent">Assign a class to the HTML tag. To change the color of the component, click on the palette
11-
icon
12-
<img style="vertical-align:middle" alt="save" src="../../../assets/tinypalatte.png" class="tut-image">
13-
in the top left corner of the component. To alter the size of the component, click and drag on the white
14-
squares surrounding the component. <br> To access advanced styling options, double click the purple HTML <img
15-
style="vertical-align:middle" alt="save" src="../../../assets/HTMLtag.png" class="html-tag"> button. Here, you
16-
may freely adjust the Purple HTML elements to your liking.
17-
<br> <img style="vertical-align:middle" alt="save" src="../../../assets/zindex-1.png" class="z-index">
18-
There is also an option to change the z-index.
19-
</p>
20-
21-
<p class="info-sub-heading">Added Scoped Tags</p>
22-
<p class="infoContent">Style tags are automatically available as stylistic changes are made to the component. The
23-
tags can be found under the Code Snippet tab, towards the bottom.</p>
8+
<p class="info-sub-heading">Augmented Component Creation with Element+ Component Library</p>
9+
<p class="infoContent">Take advantage of the popular, Vue 3.0 compatible component library, Element+. Manipulate these components in app, and rest easy knowing exported code includes both the library elements, and their necessary dependencies.</p>
2410

25-
<p class="info-sub-heading">Add class, id, and v-model Attributes </p>
26-
<p class="infoContent">There are multiple ways to add attributes.
27-
One method is to click on the Component Attributes drop down button. Specify the attribute by selecting either id or
28-
class. Click the <img style="vertical-align:middle" alt="save" src="../../../assets/plussign.png"
29-
class="tut-image"> or enter to apply the attribute. <br>
30-
Another method is to double click the purple HTML tag.<img style="vertical-align:middle" alt="save"
31-
src="../../../assets/HTMLtag.png" class="html-tag">
32-
Above the styling options are inputs for class, two-way
33-
binding,
34-
and inner text. Make sure to click on the submit icon <img style="vertical-align:middle" alt="save"
35-
src="../../../assets/inputButton.png" class="tut-image"> located inside the input to apply your changes.
11+
<p class="info-sub-heading">OAuth</p>
12+
<p class="infoContent"> You can now opt-in to add boilerplate code for OAuth with Google or Github to your project. In the exported code, take advantage of Firebase to seemlessly configure OAuth for your organization.
3613
</p>
37-
38-
<p class="info-sub-heading">Ability to Nest Components</p>
39-
<p class="infoContent">Create a new component. Navigate to the component you wish to be the parent, and add the
40-
child component to the drop down button of <img style="vertical-align:middle" alt="save"
41-
src="../../../assets/add:removeChild.png" class="z-index"> Add/remove children. </p>
42-
<q-btn class="tut-btn" color="secondary" id="advanced-btn" label="Advanced Functionality" @click="nextTab" />
14+
<p class="info-sub-heading">Testing</p>
15+
<p class="infoContent">All exported projects now come with boilerplate configuration files and unit test templates so you can easily implement testing with Jest and Vue Test Utils.</p>
16+
<q-btn class="tut-btn" color="secondary" id="advanced-btn" label="Investigate Advanced Functionality" @click="nextTab" />
17+
<q-btn class="tut-btn closeAction" label="Start Building Now" @click="toggleTutorial" />
4318
</section>
4419
</template>
4520

0 commit comments

Comments
 (0)