Skip to content

Commit 3ff0595

Browse files
MrBeeAreWhyMrBeeAreWhy
committed
Tutorial pages now pop up on app load. Functionality added allowing user to close tutorial immediately or proceed through the pages. The tutorial is stateful so it can be opened and closed through state.showTutorial as a boolean. Additionally fixed the EditDelteComponents child selection box to prevent recursion (no child becoming parent of grandparent etc.) and refactored the lineage code significantly. Also very significantly adjusted the update children mutation as it was unnecessarily bloated
1 parent badf89a commit 3ff0595

File tree

13 files changed

+342
-74
lines changed

13 files changed

+342
-74
lines changed

‎src/components/dashboard_items/Dashboard.vue

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ Description:
66
-->
77

88
<template>
9-
<q-card id="dashboard-cards" class="bord">
9+
<span v-if="showTutorial === false">
10+
<q-card id="dashboard-cards" class="bord" >
1011
<q-tabs
1112
v-model="tab"
1213
class="bg-subaccent text-white"
@@ -23,10 +24,10 @@ Description:
2324
style="border-right: 3px solid black"
2425
><i class="fas fa-code"></i
2526
></q-tab>
26-
<q-tab name="tree" label="Project Tree" id="label-text"
27+
<q-tab name="tree" label="Project Tree" id="label-text" style="border-right: 3px solid black"
2728
><i class="fas fa-code-branch fa-flip-vertical"
2829
/></q-tab>
29-
<q-tab name="routes" label="Routes" id="label-text"
30+
<q-tab name="routes" label="Routes" id="label-text" style="border-right: 3px solid black"
3031
><i class="fas fa-project-diagram"></i
3132
></q-tab>
3233
</q-tabs>
@@ -43,26 +44,33 @@ Description:
4344
</q-tab-panel>
4445
</q-tab-panels>
4546
</q-card>
47+
</span>
48+
<span v-else>
49+
<GetStarted />
50+
</span>
4651
</template>
4752

4853
<script>
4954
import { mapState, mapActions } from "vuex";
5055
import Tree from "./Tree.vue";
5156
import ComponentDetails from "./ComponentDetails.vue";
5257
import RouteDisplay from "./RouteDisplay.vue";
58+
import GetStarted from "./GetStarted.vue";
5359
5460
export default {
5561
components: {
5662
Tree,
5763
ComponentDetails,
5864
RouteDisplay,
65+
GetStarted,
5966
},
6067
computed: {
6168
...mapState([
6269
"activeComponent",
6370
"componentNameInputValue",
6471
"selectedElementList",
6572
"activeHTML",
73+
"showTutorial",
6674
]),
6775
},
6876
data() {

‎src/components/dashboard_items/GetStarted.vue

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
<template>
2+
<q-card id="dashboard-cards" class="board" >
3+
<q-tabs
4+
v-model="tutorialPage"
5+
class="bg-subaccent text-white"
6+
active-color="secondary"
7+
indicator-color="secondary"
8+
align="left"
9+
dense
10+
breakpoint="950"
11+
>
12+
<q-tab
13+
name="landing"
14+
label="Welcome to Overvue"
15+
id="label-text"
16+
style="border-right: 3px solid black"
17+
>
18+
</q-tab>
19+
<q-tab
20+
name="basics"
21+
label="Basic Functions"
22+
id="label-text"
23+
style="border-right: 3px solid black"
24+
>
25+
</q-tab>
26+
<q-tab
27+
name="advanced"
28+
label="Advanced Functions"
29+
id="label-text"
30+
style="border-right: 3px solid black"
31+
>
32+
</q-tab>
33+
</q-tabs>
34+
<q-tab-panels v-model="tutorialPage" animated class="html-bg text-white">
35+
<q-tab-panel name="landing">
36+
<Landing @nextTab="tutorialPage = 'basics'"/>
37+
</q-tab-panel>
38+
<q-tab-panel name="basics">
39+
<BasicFunctions @nextTab="tutorialPage = 'advanced'"/>
40+
</q-tab-panel>
41+
<q-tab-panel name="advanced">
42+
<AdvancedFunctions />
43+
</q-tab-panel>
44+
</q-tab-panels>
45+
</q-card>
46+
</template>
47+
48+
<script>
49+
import BasicFunctions from './tutorial/BasicFunctions.vue'
50+
import AdvancedFunctions from './tutorial/AdvancedFunctions.vue'
51+
import Landing from './tutorial/Landing.vue'
52+
53+
export default {
54+
components: {
55+
BasicFunctions,
56+
AdvancedFunctions,
57+
Landing,
58+
},
59+
data(){
60+
return {
61+
tutorialPage: 'landing'
62+
}
63+
}
64+
}
65+
66+
</script>
67+
68+
<style lang="scss" scoped>
69+
i {
70+
font-size: 11px;
71+
}
72+
73+
.home-sidebar {
74+
margin: 1rem;
75+
justify-content: center;
76+
border-radius: 5px;
77+
padding: 0px;
78+
background: $subsecondary;
79+
}
80+
81+
.q-btn {
82+
font-size: 8px;
83+
margin: 5px;
84+
}
85+
86+
.q-toolbar__title {
87+
font-size: 14px;
88+
text-transform: uppercase;
89+
padding: 5px;
90+
}
91+
92+
/* this class selector does not change anything */
93+
.q-tab__label {
94+
/* // font-size not changing */
95+
font-size: 10px !important;
96+
line-height: 1.718em;
97+
font-weight: 500;
98+
}
99+
100+
/* // changes the tab label styling */
101+
#label-text {
102+
font-size: 4px !important;
103+
text-transform: capitalize;
104+
}
105+
106+
.q-tab-panel {
107+
/* // matchs the code editor bg */
108+
background: $subprimary;
109+
}
110+
111+
.q-tab-panels {
112+
padding: 0px !important;
113+
border-top: 3px solid black;
114+
}
115+
116+
.q-tabs {
117+
background: #11120f;
118+
}
119+
120+
.toolbar-background {
121+
background: black;
122+
}
123+
124+
#dashboard-cards {
125+
display: flex;
126+
flex-direction: column;
127+
height: 100%;
128+
border-radius: 0px;
129+
background: #737578;
130+
}
131+
.html-bg {
132+
/* // give html background color of grey */
133+
background-color: #202122;
134+
}
135+
136+
.inner-div {
137+
height: 100%;
138+
}
139+
140+
.board {
141+
border-left: 3px solid black;
142+
border-right: 3px solid black;
143+
}
144+
</style>

‎src/components/dashboard_items/Tree.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ Description:
4040
</template>
4141

4242
<script>
43-
import { mapState, mapActions } from "vuex";
43+
import { mapState } from "vuex";
4444
import VueTree from "@ssthouse/vue3-tree-chart";
4545
import "@ssthouse/vue3-tree-chart/dist/vue3-tree-chart.css";
4646
@@ -152,6 +152,7 @@ export default {
152152
watch: {
153153
componentMap: {
154154
handler(){
155+
console.log(this.componentMap)
155156
this.treeData = this.buildTree(this.componentMap);
156157
},
157158
deep: true,

‎src/components/dashboard_items/tutorial/AdvancedFunctions.vue

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<template>
2+
<!--Typescript option, mock image?, nested HTML elements, import component/limitations -->
3+
Advanced Functions Here!
4+
<q-btn
5+
id="tut-btn"
6+
color="secondary"
7+
label="Get Started with OverVue"
8+
@click="toggleTutorial"
9+
/>
10+
</template>
11+
12+
<script>
13+
import { mapActions } from 'vuex';
14+
15+
export default {
16+
methods: {
17+
...mapActions(["toggleTutorial"]),
18+
}
19+
}
20+
</script>
21+
22+
<style scoped>
23+
#tut-btn {
24+
height: 15px;
25+
margin: 0 0.75rem;
26+
width: 50%;
27+
}
28+
</style>

‎src/components/dashboard_items/tutorial/BasicFunctions.vue

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<template>
2+
<!--Basic functionality here, add component, copy/paste, undo/redo, add html, saving, loading, exporting-->
3+
Basic Functions Here!
4+
<q-btn
5+
id="tut-btn"
6+
color="secondary"
7+
label="Advanced Functionality"
8+
@click="nextTab"
9+
/>
10+
</template>
11+
12+
<script>
13+
import { mapActions } from 'vuex';
14+
15+
export default {
16+
emits: ['nextTab'],
17+
methods: {
18+
...mapActions(["toggleTutorial"]),
19+
nextTab(){
20+
this.$emit('nextTab')
21+
}
22+
}
23+
}
24+
</script>
25+
26+
<style scoped>
27+
#tut-btn {
28+
height: 15px;
29+
margin: 0 0.75rem;
30+
width: 50%;
31+
}
32+
</style>

‎src/components/dashboard_items/tutorial/Landing.vue

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<template>
2+
<!--Landing page-->
3+
Welcome to OverVue!
4+
<q-btn
5+
id="tut-btn"
6+
color="secondary"
7+
label="Learn More"
8+
@click="nextTab"
9+
/>
10+
<q-btn
11+
id="tut-btn"
12+
color="secondary"
13+
label="Close Tutorial"
14+
@click="toggleTutorial"
15+
/>
16+
</template>
17+
18+
<script>
19+
import { mapActions } from 'vuex';
20+
export default {
21+
emits: ['nextTab'],
22+
methods: {
23+
...mapActions(["toggleTutorial"]),
24+
nextTab(){
25+
this.$emit('nextTab')
26+
}
27+
}
28+
}
29+
</script>
30+
31+
<style scoped>
32+
33+
#tut-btn {
34+
height: 15px;
35+
margin: 0 0.75rem;
36+
width: 50%;
37+
}
38+
39+
</style>

‎src/components/home_sidebar_items/ComponentTab/CreateComponent.vue

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ export default {
6666
"activeHTML",
6767
"userActions",
6868
"userState",
69+
"userProps",
6970
]),
7071
componentNameInputValue: {
7172
get() {
@@ -89,6 +90,7 @@ export default {
8990
"openProject",
9091
"createAction",
9192
"createState",
93+
"createProp",
9294
]),
9395
9496
createComponent(importObj) {
@@ -106,6 +108,11 @@ export default {
106108
this.createState(importObj.state[i])
107109
}
108110
}
111+
for (let i = 0; i < importObj.props.length; i++){
112+
if (!this.userProps.includes(importObj.props[i])){
113+
this.createProp(importObj.props[i])
114+
}
115+
}
109116
}
110117
111118
if (!this.componentNameInputValue.replace(/[^a-z0-9-_.]/gi, "") && imported === false) {

0 commit comments

Comments
 (0)