Skip to content

Commit 179f971

Browse files
ziggraceziggrace
committed
finished MVP LFG
1 parent 2639405 commit 179f971

File tree

9 files changed

+559
-89
lines changed

9 files changed

+559
-89
lines changed

‎src/components/ComponentDetails.vue

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
<template>
2+
<div class="container">
3+
<q-card id="store-cards" v-if="active">
4+
<q-tabs
5+
v-model="tab"
6+
dense
7+
class="bg-subaccent text-white"
8+
active-color="secondary"
9+
indicator-color="secondary"
10+
align="left"
11+
>
12+
<q-tab name="state" label="Component State" id="label-text" />
13+
<q-tab name="actions" label="Component Actions" id="label-text" />
14+
<q-tab name="props" label="Component Props" id="label-text" />
15+
</q-tabs>
16+
<q-tab-panels v-model="tab" animated class="html-bg text-white">
17+
<q-tab-panel name="state">
18+
<ul id="stateList">
19+
<li v-for="state in stateOptions" :key="state">
20+
{{ state }}
21+
</li>
22+
</ul>
23+
</q-tab-panel>
24+
<q-tab-panel name="actions">
25+
<ul id="actionList">
26+
<li v-for="action in actionOptions" :key="action">
27+
{{ action }}
28+
</li>
29+
</ul>
30+
</q-tab-panel>
31+
<q-tab-panel name="props">
32+
<ul id="actionList">
33+
<li v-for="prop in propsOptions" :key="prop">
34+
{{ prop }}
35+
</li>
36+
</ul>
37+
</q-tab-panel>
38+
</q-tab-panels>
39+
</q-card>
40+
<h v-else>Select a component to show details</h>
41+
</div>
42+
</template>
43+
44+
<script>
45+
import { mapState } from "vuex";
46+
47+
export default {
48+
name: "ComponentDetails",
49+
computed: {
50+
...mapState(["activeRoute", "routes", "activeComponent"]),
51+
active() {
52+
// this returns active component
53+
return this.routes[this.activeRoute].filter((comp) => {
54+
return comp.componentName === this.activeComponent;
55+
})[0];
56+
},
57+
actionOptions() {
58+
return this.active.actions;
59+
},
60+
stateOptions() {
61+
return this.active.state;
62+
},
63+
propsOptions() {
64+
return this.active.props;
65+
},
66+
},
67+
data() {
68+
return {
69+
tab: "state",
70+
};
71+
},
72+
};
73+
</script>
74+
75+
<style lang="stylus" scoped>
76+
i
77+
font-size 11px
78+
79+
.q-btn
80+
font-size 8px
81+
margin 5px
82+
83+
// styling for the entire footer
84+
.q-footer
85+
transition-timing-function ease-in
86+
transition .2s
87+
background $subsecondary
88+
89+
// changes the footer toolbar height
90+
.q-toolbar
91+
min-height 25px !important
92+
padding 0 6px !important
93+
94+
.q-toolbar__title
95+
font-size 14px
96+
text-transform uppercase
97+
padding 5px
98+
99+
// this class selector does not change anything
100+
.q-tab__label
101+
// font-size not changing
102+
font-size 10px !important
103+
line-height 1.718em
104+
font-weight 500
105+
106+
// changes the tab label styling
107+
#label-text
108+
font-size 4px !important
109+
text-transform capitalize
110+
111+
.q-tab-panel
112+
height 80%
113+
// matchs the code editor bg
114+
background $subprimary
115+
116+
// changes the length of the tab panels
117+
.q-tab-panels
118+
height 80%
119+
padding 0 !important
120+
121+
.q-tabs
122+
background #11120F
123+
124+
.toolbar-background
125+
background black
126+
127+
#store-cards
128+
height 100%
129+
border-radius 0
130+
background #737578
131+
132+
.html-bg
133+
// give html background color of grey
134+
background-color #202122
135+
</style>
136+
137+
138+
let active = (state.routes[state.activeRoute].filter(comp => {
139+
return comp.componentName === state.activeComponent
140+
})[0])
141+
142+
active.props
143+
active.state
144+
active.actions

‎src/components/DashboardVuexStore.vue

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
<template>
2+
<div class="container">
3+
<q-card id="store-cards">
4+
<q-tabs
5+
v-model="tab"
6+
dense
7+
class="bg-subaccent text-white"
8+
active-color="secondary"
9+
indicator-color="secondary"
10+
align="left"
11+
>
12+
<q-tab name="state" label="Store State" id="label-text" />
13+
<q-tab name="actions" label="Store Actions" id="label-text" />
14+
</q-tabs>
15+
<q-tab-panels v-model="tab" animated class="html-bg text-white">
16+
<q-tab-panel name="state">
17+
<ul id="stateList">
18+
<li v-for="state in stateOptions" v-bind:key="state">
19+
{{ state }}
20+
</li>
21+
</ul>
22+
</q-tab-panel>
23+
<q-tab-panel name="actions">
24+
<ul id="actionList">
25+
<li v-for="action in actionOptions" :key="action">
26+
{{ action }}
27+
</li>
28+
</ul>
29+
</q-tab-panel>
30+
</q-tab-panels>
31+
</q-card>
32+
</div>
33+
</template>
34+
35+
<script>
36+
import { mapState } from "vuex";
37+
38+
export default {
39+
name: "VuexStore",
40+
computed: {
41+
...mapState(["userActions", "userState"]),
42+
actionOptions() {
43+
return this.userActions;
44+
},
45+
stateOptions() {
46+
return this.userState;
47+
},
48+
},
49+
data() {
50+
return {
51+
tab: "state",
52+
};
53+
},
54+
};
55+
</script>
56+
57+
<style lang="stylus" scoped>
58+
i
59+
font-size 11px
60+
61+
.q-btn
62+
font-size 8px
63+
margin 5px
64+
65+
// styling for the entire footer
66+
.q-footer
67+
transition-timing-function ease-in
68+
transition .2s
69+
background $subsecondary
70+
71+
// changes the footer toolbar height
72+
.q-toolbar
73+
min-height 25px !important
74+
padding 0 6px !important
75+
76+
.q-toolbar__title
77+
font-size 14px
78+
text-transform uppercase
79+
padding 5px
80+
81+
// this class selector does not change anything
82+
.q-tab__label
83+
// font-size not changing
84+
font-size 10px !important
85+
line-height 1.718em
86+
font-weight 500
87+
88+
// changes the tab label styling
89+
#label-text
90+
font-size 4px !important
91+
text-transform capitalize
92+
93+
.q-tab-panel
94+
height 80%
95+
// matchs the code editor bg
96+
background $subprimary
97+
98+
// changes the length of the tab panels
99+
.q-tab-panels
100+
height 80%
101+
padding 0 !important
102+
103+
.q-tabs
104+
background #11120F
105+
106+
.toolbar-background
107+
background black
108+
109+
#store-cards
110+
height 100%
111+
border-radius 0
112+
background #737578
113+
114+
.html-bg
115+
// give html background color of grey
116+
background-color #202122
117+
</style>

‎src/components/Footer.vue

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@ Description:
2828
<q-tab name="tree" label="Project Tree" id="label-text" />
2929
<q-tab name="html" label="HTML Elements" id="label-text" />
3030
<q-tab name="store" label="Vuex Store" id="label-text" />
31-
<q-tab name="comp vuex" label="Component: Vuex" id="label-text" />
3231

3332
</q-tabs>
3433

@@ -38,7 +37,7 @@ Description:
3837
</q-tab-panel>
3938
<!-- Work in Progress -->
4039
<q-tab-panel name="detail">
41-
<div class="text-h6">Hello</div>World
40+
<ComponentDetails/>
4241
</q-tab-panel>
4342
<!----------------------->
4443
<q-tab-panel name="tree">
@@ -48,11 +47,8 @@ Description:
4847
<q-tab-panel name="html" :style="{height: `${height}vh`}">
4948
<HomeQueue />
5049
</q-tab-panel>
51-
<q-tab-panel name="detail">
52-
<div class="text-h6">Vuex</div>Component Info Here
53-
</q-tab-panel>
54-
<q-tab-panel name="detail">
55-
<div class="text-h6">Vuex</div>Component Info Here
50+
<q-tab-panel name="store">
51+
<VuexStore/>
5652
</q-tab-panel>
5753
</q-tab-panels>
5854
</q-card>
@@ -64,12 +60,16 @@ import { mapState, mapActions } from 'vuex'
6460
import Tree from './Tree'
6561
import HomeQueue from './HomeQueue'
6662
import CodeSnippet from './CodeSnippet'
63+
import VuexStore from './DashboardVuexStore.vue'
64+
import ComponentDetails from './ComponentDetails'
6765
6866
export default {
6967
components: {
7068
Tree,
7169
HomeQueue,
72-
CodeSnippet
70+
CodeSnippet,
71+
VuexStore,
72+
ComponentDetails
7373
},
7474
computed: {
7575
...mapState(['activeComponent', 'componentNameInputValue', 'selectedElementList', 'activeHTML'])

‎src/components/HomeSideDropDownItems/ComponentList.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,3 +127,6 @@ export default {
127127
justify-content: space-between;
128128
}
129129
</style>
130+
131+
132+

0 commit comments

Comments
 (0)