Skip to content

Commit 231c02f

Browse files
Dean OhashiDean Ohashi
Dean Ohashi
authored and
Dean Ohashi
committed
Merge branch 'dev' of https://github.com/cs29-wobbegong/prevue2 into moveComponent
2 parents 1b1649c + 313396e commit 231c02f

File tree

12 files changed

+200
-128
lines changed

12 files changed

+200
-128
lines changed

‎src/components/ComponentDisplay.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -101,9 +101,10 @@ export default {
101101
/* height: 500px; */
102102
/* width: 500px; */
103103
/* original is 70vh */
104-
height: 87vh;
105-
width: 100vw;
104+
height: 95vh;
105+
width: 100%;
106106
position: relative;
107+
background: darkslategray;
107108
background-color: rgba(124, 126, 145, 0.44);
108109
/* background-color: #269; */
109110
background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;

‎src/components/Footer.vue‎

Lines changed: 48 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<template>
2-
<q-footer reveal elevated class="gradient text-white" :style="{ height: `${height}vh` }">
2+
<q-footer reveal class="gradient text-white" :style="{ height: `${height}vh` }">
33
<q-toolbar>
4-
<q-btn flat color="subaccentbtn" round @click="openBottomDrawer">
5-
<i :class="[open ? down : up]"></i>
4+
<q-btn flat color="subaccent" round @click="openBottomDrawer">
5+
<i :class="[open ? down : up]" id="btn" ></i>
66
</q-btn>
77
<q-toolbar-title>Dashboard</q-toolbar-title>
88
</q-toolbar>
@@ -15,15 +15,19 @@
1515
indicator-color="secondary"
1616
align="left"
1717
>
18-
<q-tab name="code" label="Code" />
19-
<q-tab name="tree" label="Tree" />
20-
<q-tab name="html" label="HTML Elements" />
18+
<q-tab name="code" label="Code" id="label-text"/>
19+
<q-tab name="detail" label="Component Details" id="label-text"/>
20+
<q-tab name="tree" label="Tree" id="label-text"/>
21+
<q-tab name="html" label="HTML Elements" id="label-text"/>
2122
</q-tabs>
2223

2324
<q-tab-panels v-model="tab" animated class="bg-primary text-white">
2425
<q-tab-panel name="code">
2526
</q-tab-panel>
2627

28+
<q-tab-panel name="detail">
29+
</q-tab-panel>
30+
2731
<q-tab-panel name="tree">
2832
<Tree />
2933
</q-tab-panel>
@@ -56,27 +60,60 @@ export default {
5660
},
5761
methods: {
5862
openBottomDrawer () {
59-
this.height === 35 ? (this.height = 6.5) : (this.height = 35)
63+
let minHeight = (window.outerHeight < 900) ? 4.5 : 2.5
64+
this.height === 35 ? (this.height = minHeight) : (this.height = 35)
6065
this.open === true ? this.open = false : this.open = true
6166
}
6267
}
6368
}
6469
</script>
6570

66-
<style lang="stylus">
71+
<style lang="stylus" scoped>
72+
i {
73+
font-size: 11px;
74+
}
75+
.q-btn {
76+
background: $secondary;
77+
font-size: 8px;
78+
margin: 5px;
79+
}
80+
// styling for the entire footer
6781
.q-footer {
6882
// height: 35vh;
6983
transition-timing-function: ease-in;
7084
transition: 0.2s;
85+
background: #313131;
86+
}
87+
// changes the footer toolbar height
88+
.q-toolbar {
89+
min-height: 25px !important;
90+
padding: 0 6px !important;
91+
}
92+
.q-toolbar__title {
93+
font-size 14px;
94+
text-transform: uppercase;
95+
// font-weight: 700;
96+
padding: 5px;
97+
}
98+
// this class selector does not change anything
99+
.q-tab__label {
100+
// font-size not changing
101+
font-size: 10px !important;
102+
line-height: 1.718em;
103+
font-weight: 500;
104+
}
105+
// changes the tab label styling
106+
#label-text {
107+
font-size: 4px !important;
108+
text-transform: capitalize;
71109
}
72-
73110
.q-tab-panel {
74111
background: rgb(69,77,102);
75112
background: linear-gradient(180deg, rgba(69,77,102,1) 0%, rgba(54,60,78,1) 100%);
76113
}
77-
114+
// changes the length of the tab panels
78115
.q-tab-panels {
79-
height: 24vh;
116+
height: 31vh;
80117
}
81118
82119
.q-tabs {

‎src/components/HomeSideDropDown.vue‎

Lines changed: 12 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -5,44 +5,17 @@
55
<q-card>
66
<q-card-section>
77
<div class="input-container">
8-
<!--
9-
<q-input
10-
standout="bg-teal text-white"
11-
bottom-slots
12-
v-model="text"
13-
label="Add Component"
14-
:dense="dense"
15-
class="input-add"
16-
>
17-
18-
<template v-slot:append>
19-
<q-btn round dense flat icon="add" />
20-
</template>
21-
</q-input>
22-
-->
23-
<a v-for="componentData in activeRouteDisplay"
24-
:key="componentData.componentName"
25-
v-on:click="onActivated(componentData)"
26-
>
27-
<q-list bordered separator>
28-
<q-item clickable v-ripple>
29-
<q-item-section>{{componentData.componentName}}</q-item-section>
30-
31-
</q-item>
32-
33-
</q-list>
34-
</a>
8+
<ComponentList />
359
</div>
3610
</q-card-section>
3711
</q-card>
3812
</q-expansion-item>
39-
4013
<q-expansion-item dense dense-toggle expand-separator label="Routes">
4114
<q-card>
4215
<q-card-section>
4316
<div class="input-container">
4417
<RouteDisplay />
45-
<br>
18+
<br />
4619
</div>
4720
</q-card-section>
4821
</q-card>
@@ -52,42 +25,7 @@
5225
<q-card>
5326
<q-card-section>
5427
<div class="input-container">
55-
<q-input
56-
standout="bg-teal text-white"
57-
bottom-slots
58-
v-model="text"
59-
label="Add Vuex"
60-
:dense="dense"
61-
class="input-add"
62-
>
63-
<template v-slot:append>
64-
<q-btn round dense flat icon="add" />
65-
</template>
66-
</q-input>
67-
<q-input
68-
standout="bg-teal text-white"
69-
bottom-slots
70-
v-model="text"
71-
label="Add Action"
72-
:dense="dense"
73-
class="input-add"
74-
>
75-
<template v-slot:append>
76-
<q-btn round dense flat icon="add" />
77-
</template>
78-
</q-input>
79-
<q-input
80-
standout="bg-teal text-white"
81-
bottom-slots
82-
v-model="text"
83-
label="Add Mutation"
84-
:dense="dense"
85-
class="input-add"
86-
>
87-
<template v-slot:append>
88-
<q-btn round dense flat icon="add" />
89-
</template>
90-
</q-input>
28+
<VuexForm />
9129
</div>
9230
</q-card-section>
9331
</q-card>
@@ -97,45 +35,23 @@
9735
</template>
9836
<script>
9937
import RouteDisplay from '../components/RouteDisplay'
100-
import { mapState, mapActions } from 'vuex'
38+
import ComponentList from './HomeSideDropDownItems/ComponentList'
39+
import VuexForm from './HomeSideDropDownItems/VuexForm'
10140
10241
export default {
10342
components: {
104-
RouteDisplay
105-
},
106-
computed: {
107-
...mapState(['routes', 'activeRoute', 'activeComponent', 'componentMap']),
108-
// used in VueDraggableResizeable component
109-
activeRouteDisplay () {
110-
// console.log('active route array method', this.routes[this.activeRoute])
111-
let component = this.routes[this.activeRoute]
112-
// console.log('component:', component)
113-
return component
114-
},
115-
activeComponentData () {
116-
// find out what this does
117-
return this.activeRouteDisplay.filter(componentData => {
118-
return componentData.componentName === this.activeComponent
119-
})[0]
120-
}
121-
},
122-
methods: {
123-
...mapActions(['setActiveComponent']),
124-
onActivated (componentData) {
125-
this.setActiveComponent(componentData.componentName)
126-
this.activeComponentData.isActive = true
127-
console.log('this.activeComponent', this.activeComponent)
128-
}
43+
RouteDisplay,
44+
VuexForm,
45+
ComponentList
12946
}
13047
}
13148
</script>
13249

13350
<style lang="stylus" scoped>
13451
.input-add {
135-
margin: 0em 1em 0em 1em;
136-
}
52+
margin: 0em 1em 0em 1em;
53+
}
13754
.input-container {
138-
margin-top: 1rem;
139-
}
140-
55+
margin-top: 1rem;
56+
}
14157
</style>

‎src/components/HomeSideDropDownItems/ComponentList.vue‎

Lines changed: 63 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,77 @@
11
<template>
2-
<ul id="comp-list" class="component-list">
3-
<h3>hello world</h3>
4-
<li
5-
v-for="item in componentMap"
6-
:key="item.indexOf()"
7-
class="component-container"
8-
>{{ component }} </li>
9-
</ul>
2+
<div class="home-sidebar">
3+
<a
4+
v-for="componentData in activeRouteDisplay"
5+
:key="componentData.componentName"
6+
v-on:click="onActivated(componentData)"
7+
>
8+
<q-list dense bordered separator>
9+
<q-item clickable v-ripple>
10+
<q-item-section>
11+
<div class="component-container">
12+
<div class="component-info">
13+
<q-item-label overline class="component">{{componentData.componentName}}</q-item-label>
14+
<q-item-label>Child Components Here</q-item-label>
15+
<!-- {{componentData.componentName}} -->
16+
</div>
17+
<q-btn round flat icon="delete_forever" />
18+
</div>
19+
</q-item-section>
20+
</q-item>
21+
</q-list>
22+
</a>
23+
</div>
1024
</template>
1125

1226
<script>
13-
import { mapState } from 'vuex'
27+
/**
28+
* TODO: Needs functionality to delete component, and (maybe) show child components
29+
*/
30+
import { mapState, mapActions } from 'vuex'
1431
1532
export default {
16-
el: '#comp-list',
1733
computed: {
18-
...mapState(['componentMap']),
19-
componentMap () {
20-
return Object.keys(this.componentMap)
34+
...mapState(['routes', 'activeRoute', 'activeComponent']),
35+
activeRouteDisplay () {
36+
let component = this.routes[this.activeRoute]
37+
return component
38+
},
39+
activeComponentData () {
40+
return this.activeRouteDisplay.filter(componentData => {
41+
return componentData.componentName === this.activeComponent
42+
})[0]
43+
}
44+
},
45+
methods: {
46+
...mapActions(['setActiveComponent']),
47+
onActivated (componentData) {
48+
this.setActiveComponent(componentData.componentName)
49+
this.activeComponentData.isActive = true
50+
console.log('this.activeComponent', this.activeComponent)
2151
}
2252
}
2353
}
2454
</script>
2555

2656
<style>
57+
/* modifies entire container */
58+
.home-sidebar {
59+
margin: 1rem;
60+
padding-bottom: 1rem;
61+
border-radius: 5px;
62+
}
63+
/* modifies top label */
64+
.component {
65+
text-transform: uppercase;
66+
}
67+
/* modifies each list element */
68+
.q-list {
69+
margin-bottom: 0.5rem;
70+
border-radius: 5px;
71+
}
72+
/* modifies content in list element */
73+
.component-container {
74+
display: flex;
75+
justify-content: space-between;
76+
}
2777
</style>

‎src/components/HomeSideDropDownItems/VuexForm.vue‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<template>
2+
<div class="input-container">
3+
<q-input
4+
standout="bg-teal text-white"
5+
bottom-slots
6+
v-model="text"
7+
label="Add Vuex"
8+
:dense="dense"
9+
class="input-add"
10+
>
11+
<template v-slot:append>
12+
<q-btn round dense flat icon="add" />
13+
</template>
14+
</q-input>
15+
<q-input
16+
standout="bg-teal text-white"
17+
bottom-slots
18+
v-model="text"
19+
label="Add Action"
20+
:dense="dense"
21+
class="input-add"
22+
>
23+
<template v-slot:append>
24+
<q-btn round dense flat icon="add" />
25+
</template>
26+
</q-input>
27+
<q-input
28+
standout="bg-teal text-white"
29+
bottom-slots
30+
v-model="text"
31+
label="Add Mutation"
32+
:dense="dense"
33+
class="input-add"
34+
>
35+
<template v-slot:append>
36+
<q-btn round dense flat icon="add" />
37+
</template>
38+
</q-input>
39+
</div>
40+
</template>
41+
42+
<style lang="stylus" scoped>
43+
.input-add {
44+
margin: 0em 1em 0em 1em;
45+
}
46+
</style>

0 commit comments

Comments
 (0)