Skip to content

Commit d65ceca

Browse files
farazmoallemifarazmoallemi
authored
Merge pull request #4 from ziggrace/sean/vuex
Sean/vuex
2 parents 049d21a + 2c2c71f commit d65ceca

File tree

9 files changed

+592
-90
lines changed

9 files changed

+592
-90
lines changed

‎src/components/ComponentDetails.vue

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
<template>
2+
<div class="container">
3+
<q-card id="store-cards" v-if="this.activeComponentObj">
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" v-model="activeState">
18+
<ul id="stateList">
19+
<li v-for="comp in activeState" :key="comp">
20+
{{ comp }}
21+
</li>
22+
</ul>
23+
</q-tab-panel>
24+
<q-tab-panel name="actions" v-model="activeActions">
25+
<ul id="actionList">
26+
<li v-for="comp in activeActions" :key="comp">
27+
{{ comp }}
28+
</li>
29+
</ul>
30+
</q-tab-panel>
31+
<q-tab-panel name="props" v-model="activeProps">
32+
<ul id="propsList">
33+
<li v-for="comp in activeProps" :key="comp">
34+
{{ comp }}
35+
</li>
36+
</ul>
37+
</q-tab-panel>
38+
</q-tab-panels>
39+
</q-card>
40+
<q-card v-else>Select a component to show details</q-card>
41+
</div>
42+
</template>
43+
44+
<script>
45+
import { mapState } from "vuex";
46+
47+
export default {
48+
name: "ComponentDetails",
49+
computed: {
50+
...mapState(["activeComponentObj"]),
51+
activeState: {
52+
get() {
53+
if (this.activeComponentObj) return this.activeComponentObj.state;
54+
return []
55+
},
56+
},
57+
activeProps: {
58+
get() {
59+
if (this.activeComponentObj) return this.activeComponentObj.props;
60+
return [];
61+
},
62+
},
63+
activeActions: {
64+
get() {
65+
if (this.activeComponentObj) return this.activeComponentObj.actions;
66+
return [];
67+
},
68+
},
69+
// componentActions: {
70+
// get() {
71+
// return this.$store.state.activeComponentObj.actions;
72+
// },
73+
// },
74+
// componentState: {
75+
// get() {
76+
// return this.$store.state.activeComponentObj.state;
77+
// },
78+
// },
79+
// componentProps: {
80+
// get() {
81+
// return this.$store.state.activeComponentObj.props;
82+
// },
83+
// },
84+
},
85+
data() {
86+
return {
87+
tab: "state",
88+
};
89+
},
90+
};
91+
</script>
92+
93+
<style lang="stylus" scoped>
94+
i
95+
font-size 11px
96+
97+
.q-btn
98+
font-size 8px
99+
margin 5px
100+
101+
// styling for the entire footer
102+
.q-footer
103+
transition-timing-function ease-in
104+
transition .2s
105+
background $subsecondary
106+
107+
// changes the footer toolbar height
108+
.q-toolbar
109+
min-height 25px !important
110+
padding 0 6px !important
111+
112+
.q-toolbar__title
113+
font-size 14px
114+
text-transform uppercase
115+
padding 5px
116+
117+
// this class selector does not change anything
118+
.q-tab__label
119+
// font-size not changing
120+
font-size 10px !important
121+
line-height 1.718em
122+
font-weight 500
123+
124+
// changes the tab label styling
125+
#label-text
126+
font-size 4px !important
127+
text-transform capitalize
128+
129+
.q-tab-panel
130+
height 80%
131+
// matchs the code editor bg
132+
background $subprimary
133+
134+
// changes the length of the tab panels
135+
.q-tab-panels
136+
height 80%
137+
padding 0 !important
138+
139+
.q-tabs
140+
background #11120F
141+
142+
.toolbar-background
143+
background black
144+
145+
#store-cards
146+
height 100%
147+
border-radius 0
148+
background #737578
149+
150+
.html-bg
151+
// give html background color of grey
152+
background-color #202122
153+
</style>
154+
155+
156+
let active = (state.routes[state.activeRoute].filter(comp => {
157+
return comp.componentName === state.activeComponent
158+
})[0])
159+
160+
active.props
161+
active.state
162+
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: 9 additions & 9 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'])
@@ -94,7 +94,7 @@ export default {
9494
this.height === 40 ? (this.height = minHeight) : (this.height = 40)
9595
this.open === true ? (this.open = false) : (this.open = true)
9696
},
97-
// method that will handle deselection from active HTML element
97+
// function that will handle deselection from active HTML element
9898
handleHtmlDeselection (event) {
9999
// console.log('target html element: ', event.target)
100100
if (event.target.className !== 'list-group-item') {

‎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)