Skip to content

Commit 873fdbf

Browse files
apaparianapaparian
authored
Merge pull request #10 from oslabs-beta/bryan/getStarted
Bryan/get started
2 parents e1970f2 + ce29f61 commit 873fdbf

File tree

13 files changed

+333
-122
lines changed

13 files changed

+333
-122
lines changed

‎src/components/dashboard_items/Dashboard.vue

Lines changed: 9 additions & 1 deletion
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"
@@ -39,26 +40,33 @@ Description:
3940
</q-tab-panel>
4041
</q-tab-panels>
4142
</q-card>
43+
</span>
44+
<span v-else>
45+
<GetStarted />
46+
</span>
4247
</template>
4348

4449
<script>
4550
import { mapState, mapActions } from "vuex";
4651
import Tree from "./Tree.vue";
4752
import ComponentDetails from "./ComponentDetails.vue";
4853
import RouteDisplay from "./RouteDisplay.vue";
54+
import GetStarted from "./GetStarted.vue";
4955
5056
export default {
5157
components: {
5258
Tree,
5359
ComponentDetails,
5460
RouteDisplay,
61+
GetStarted,
5562
},
5663
computed: {
5764
...mapState([
5865
"activeComponent",
5966
"componentNameInputValue",
6067
"selectedElementList",
6168
"activeHTML",
69+
"showTutorial",
6270
]),
6371
},
6472
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 & 52 deletions
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,
@@ -165,57 +166,6 @@ export default {
165166
}
166167
}
167168
}
168-
169-
// export default {
170-
// methods: {
171-
// // Called by transformToTree, formats componentMap
172-
// formatComponentMap(compMap) {
173-
// let result = [];
174-
// // Id to apply to each component, in accordance with Vue3Tree syntax
175-
// let id = 1;
176-
// const values = Object.values(compMap);
177-
// values.forEach((compData) => {
178-
// result.push({
179-
// id: id++,
180-
// label: compData.componentName, // previously was labeled 'name'
181-
// nodes: compData.children, // previously was labeled 'children'
182-
// });
183-
// });
184-
// return result;
185-
// },
186-
// // Called by buildTree, transforms componentMap
187-
// // we need to change this to clean the data and transform it to something usable by vue3tree
188-
// transformToTree(data) {
189-
// let result = {};
190-
// const temp = {};
191-
// const formattedData = this.formatComponentMap(data);
192-
// formattedData.forEach((component) => {
193-
// if (!temp[component.label]) {
194-
// temp[component.label] = { label: component.label, nodes: [] };
195-
// result = temp;
196-
// }
197-
// component.nodes.forEach((child) => {
198-
// if (!temp[child]) temp[child] = { label: child, nodes: [] };
199-
// temp[component.label].nodes.push(temp[child]);
200-
// });
201-
// });
202-
// return result;
203-
// },
204-
// // Called by computedTree, calls transformToTree
205-
// buildTree() {
206-
// let build = this.transformToTree(this.componentMap);
207-
// return build["App"];
208-
// },
209-
// },
210-
// watch: {
211-
// componentMap: {
212-
// deep: true,
213-
// handler() {
214-
// this.buildTree();
215-
// },
216-
// },
217-
// },
218-
// };
219169
</script>
220170

221171
<style lang="scss" scoped>

‎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
@@ -80,6 +80,7 @@ export default {
8080
"activeHTML",
8181
"userActions",
8282
"userState",
83+
"userProps",
8384
]),
8485
componentNameInputValue: {
8586
get() {
@@ -103,6 +104,7 @@ export default {
103104
"openProject",
104105
"createAction",
105106
"createState",
107+
"createProp",
106108
]),
107109
108110
createComponent(importObj) {
@@ -120,6 +122,11 @@ export default {
120122
this.createState(importObj.state[i])
121123
}
122124
}
125+
for (let i = 0; i < importObj.props.length; i++){
126+
if (!this.userProps.includes(importObj.props[i])){
127+
this.createProp(importObj.props[i])
128+
}
129+
}
123130
}
124131
125132
if (!this.componentNameInputValue.replace(/[^a-z0-9-_.]/gi, "") && imported === false) {

0 commit comments

Comments
 (0)