Skip to content

Commit c426c11

Browse files
jeffreysuljeffreysul
authored
Merge pull request #1 from oslabs-beta/left-drawer-redesign
left drawer partially changed, new components added
2 parents 02f3c0e + 6a8ed10 commit c426c11

File tree

8 files changed

+559
-32130
lines changed

8 files changed

+559
-32130
lines changed

‎package-lock.json

Lines changed: 320 additions & 32055 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/App.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ const cloneDeep = require('lodash.clonedeep')
1010
const throttle = require('lodash.throttle')
1111
import { defaultState } from './store/state/index.js'
1212
13+
1314
// use this to make sure these actions don't count as things you "undo"
1415
const ignoredActions = new Set([
1516
'setActiveComponent',

‎src/components/ComponentDisplay.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ Description:
1010
:style="mockBg"
1111
v-on:click="handleClick"
1212
>
13+
<!-- https://www.npmjs.com/package/vue-draggable-resizable -->
1314
<VueDraggableResizable
1415
class-name="component-box"
1516
v-for="componentData in activeRouteArray"

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

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<!-- Component Tab Container that holds components for creating components, editing and deleting, and adding props.
2+
Functionality includes: if active component is selected, will switch view to editing mode. If not, it will be in create mode -->
3+
<template>
4+
<q-card id="store-cards">
5+
<!-- display component name if there is active component selected -->
6+
<!-- <q-tabs
7+
v-model="tab"
8+
dense
9+
class="bg-subaccent text-white"
10+
active-color="secondary"
11+
indicator-color="secondary"
12+
>
13+
<q-tab name="details" label="details"/>
14+
<q-tab name="vuex" label="vuex"/>
15+
</q-tabs>
16+
<q-tab-panels v-model="tab" animated class="html-bg text-white" >
17+
<q-tab-panel name="details">
18+
<CreateComponent v-if="activeComponent === ''"></CreateComponent>
19+
<EditDeleteComponents v-if="activeComponent !== ''"></EditDeleteComponents>
20+
</q-tab-panel>
21+
<q-tab-panel name="vuex">
22+
<h6>Vuex Mapping State and Actions</h6>
23+
</q-tab-panel>
24+
</q-tab-panels> -->
25+
<CreateComponent v-if="activeComponent === ''"/>
26+
<EditDeleteComponents v-if="activeComponent !== ''"/>
27+
</q-card>
28+
</template>
29+
30+
<script>
31+
import CreateComponent from './CreateComponent.vue'
32+
import EditDeleteComponents from './EditDeleteComponents.vue'
33+
import { mapState } from 'vuex'
34+
35+
export default {
36+
data () {
37+
return {
38+
// tab: 'details',
39+
}
40+
},
41+
computed: {
42+
...mapState([
43+
'activeComponent',
44+
])
45+
},
46+
47+
components: {
48+
CreateComponent,
49+
EditDeleteComponents,
50+
}
51+
}
52+
</script>
53+
54+
<style lang="stylus">
55+
56+
// give html background color of grey
57+
.html-bg
58+
background-color: #202122
59+
60+
#store-cards
61+
height: 100%
62+
border-radius: 0px
63+
background-color: #202122
64+
65+
.q-tab-panel
66+
height 100%
67+
// matchs the code editor bg
68+
background $subprimary
69+
70+
// changes the length of the tab panels
71+
.q-tab-panels
72+
height 100%
73+
padding 0 !important
74+
75+
.q-tabs
76+
background #11120F
77+
78+
</style>

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

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,16 @@ Description:
33
Handles create component menu on left-side
44
Functionality includes: creating a component, preventing users from entering invalid component file names
55
-->
6+
<!-- 4.0 adjustment: conditional render to switch between new comp name input and editing active comp name, moved from EditDeleteComponents -->
67
<template>
78
<div class="home-sidebar drawer-menu">
89
<br />
910
<form
1011
v-on:submit.prevent="createComponent"
1112
>
13+
<!-- will render if creating new component -->
1214
<q-input
15+
v-if="activeComponent === ''"
1316
standout="bg-secondary text-white"
1417
bottom-slots
1518
v-on:keyup.delete.stop
@@ -18,6 +21,7 @@ Description:
1821
dense
1922
class="input-add"
2023
></q-input>
24+
2125
</form>
2226
<div class="icon-container">
2327
<Icons
@@ -28,10 +32,11 @@ Description:
2832
@activeLayer="addNestedNoActive"
2933
/>
3034
</div>
31-
<ParentMultiselect />
35+
<ParentMultiselect v-if="activeComponent === ''"></ParentMultiselect>
3236
<br />
3337

3438
<q-btn
39+
v-if="activeComponent ===''"
3540
id="add-component-btn"
3641
color="secondary"
3742
label="Create Component"
@@ -42,8 +47,8 @@ Description:
4247
</template>
4348

4449
<script>
45-
import Icons from './Icons'
46-
import ParentMultiselect from './ParentMultiselect.vue'
50+
import Icons from '../Icons'
51+
import ParentMultiselect from '../ParentMultiselect.vue'
4752
import { mapState, mapActions } from 'vuex'
4853
4954
export default {
@@ -76,7 +81,8 @@ export default {
7681
'setActiveComponent',
7782
'addToComponentElementList',
7883
'addNestedHTML',
79-
'addNestedNoActive'
84+
'addNestedNoActive',
85+
'editComponentName',
8086
]),
8187
8288
createComponent () {
@@ -107,8 +113,8 @@ export default {
107113
this.registerComponent(component)
108114
this.setActiveComponent(component.componentName)
109115
}
110-
}
111-
}
116+
},
117+
},
112118
}
113119
114120
</script>
@@ -123,7 +129,7 @@ export default {
123129
width: 90%;
124130
}
125131
.home-sidebar {
126-
margin: 1rem;
132+
margin: 0.5rem;
127133
padding: 0.5rem;
128134
border-radius: 5px;
129135
}

‎src/components/home_sidebar_items/EditDeleteComponents.vue renamed to ‎src/components/home_sidebar_items/ComponentTab/EditDeleteComponents.vue

Lines changed: 93 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -6,66 +6,89 @@ Description:
66
-->
77

88
<template>
9-
<div class="edit-sidebar">
10-
<q-input
11-
@keyup.enter.native="editCompName(newName)"
12-
standout="bg-secondary text-white"
13-
bottom-slots
14-
v-on:keyup.delete.stop
15-
v-model="newName"
16-
label="Edit name"
9+
<div class="home-sidebar drawer-menu">
10+
<q-tabs
11+
v-model="tab"
1712
dense
18-
class="input-add"
13+
class="bg-subaccent text-white"
14+
active-color="secondary"
15+
indicator-color="secondary"
1916
>
20-
<template v-slot:append>
21-
<q-btn
22-
round
17+
<q-tab name="details" label="details"/>
18+
<q-tab name="vuex" label="vuex"/>
19+
</q-tabs>
20+
<q-tab-panels v-model="tab" animated class="html-bg text-white" >
21+
<q-tab-panel name="details">
22+
<br/>
23+
<multiselect
24+
class="multiselect"
25+
v-model="value"
26+
:options="options"
27+
:searchable="true"
28+
:close-on-select="true"
29+
:max-height="90"
30+
:option-height="20"
31+
@input="handleSelect(value)"
32+
placeholder="Select a component"
33+
>
34+
<span slot="noResult">No components found.</span>
35+
</multiselect>
36+
<br/>
37+
<q-input
38+
@keyup.enter.native="editCompName(newName)"
39+
standout="bg-secondary text-white"
40+
bottom-slots
41+
v-on:keyup.delete.stop
42+
v-model="newName"
43+
label="Edit name"
2344
dense
24-
flat
25-
icon="fas fa-edit"
26-
@click="editCompName(newName)"
27-
/>
28-
</template>
29-
</q-input>
30-
<multiselect
31-
class="multiselect"
32-
v-model="value"
33-
:options="options"
34-
:searchable="true"
35-
:close-on-select="true"
36-
:max-height="90"
37-
:option-height="20"
38-
@input="handleSelect(value)"
39-
@open="resetActiveComponent"
40-
placeholder="Select a component"
41-
>
42-
<span slot="noResult">No components found.</span>
43-
</multiselect>
44-
<br/>
45-
<p class="editName" v-if="this.activeComponentObj">
45+
class="input-add"
46+
>
47+
<template v-slot:append>
48+
<q-btn
49+
round
50+
dense
51+
flat
52+
icon="fas fa-edit"
53+
@click="editCompName(newName)"
54+
/>
55+
</template>
56+
</q-input>
57+
<br/>
58+
<multiselect
59+
v-model="testModel"
60+
placeholder="Add/Remove Children"
61+
:multiple="true"
62+
:close-on-select="false"
63+
:options="childOptions"
64+
@input="handleAddChild"
65+
:max-height="90"
66+
:option-height="20"
67+
:searchable="false"
68+
/>
69+
</q-tab-panel>
70+
<q-tab-panel name="vuex">
71+
<h6>Vuex Mapping State and Actions</h6>
72+
</q-tab-panel>
73+
</q-tab-panels>
74+
<!-- moved this to createComponent -->
75+
<!-- <br/> -->
76+
<!-- removed text that displays what componenet is selected -->
77+
<!-- <p class="editName" v-if="this.activeComponentObj">
4678
Currently selected component: {{ this.activeComponentObj.componentName }}
47-
</p>
79+
</p> -->
80+
<!-- removed delete button for now -->
4881
<!-- <p class="editName" v-else>Select a component</p> -->
49-
<q-btn id="deleteButton" @click="deleteSelectedComp(activeComponentData)" label = 'Delete currently selected'/>
50-
<br/>
82+
<!-- <q-btn id="deleteButton" @click="deleteSelectedComp(activeComponentData)" label = 'Delete currently selected'/> -->
83+
<!-- <br/>
5184
<div v-if="this.activeComponentData">
52-
<br/>
85+
<br/> -->
5386
<!-- @input="selectParent"
5487
@open="resetActiveComponent" -->
55-
<multiselect
56-
v-model="testModel"
57-
placeholder="Add/Remove Children"
58-
:multiple="true"
59-
:close-on-select="false"
60-
:options="childOptions"
61-
@input="handleAddChild"
62-
:max-height="90"
63-
:option-height="20"
64-
:searchable="false"
65-
/>
66-
<br/>
88+
89+
<!-- <br/> -->
6790

68-
<section id="counter" style="color: white"> Layer:
91+
<!-- <section id="counter" style="color: white"> Layer:
6992
<q-btn
7093
class="btn"
7194
color="transparent"
@@ -147,10 +170,10 @@ Description:
147170
<a
148171
v-for="prop in this.activeComponentData.props"
149172
:key="prop"
150-
>
173+
> -->
151174
<!-- v-on:click="onActivated(prop)" -->
152175

153-
<q-list v-if="showProps" class="list-item" dense bordered separator>
176+
<!-- <q-list v-if="showProps" class="list-item" dense bordered separator>
154177
<q-item clickable v-ripple class="list-item">
155178
<q-item-section>
156179
<div class="component-container">
@@ -164,19 +187,20 @@ Description:
164187
</q-list>
165188
</a>
166189
</div>
167-
<p v-else> <br/> Select Component to Enable Edit </p>
190+
<p v-else> <br/> Select Component to Enable Edit </p> -->
168191
</div>
169192
</template>
170193

171194
<script>
172195
import { mapState, mapActions } from 'vuex'
173196
import Multiselect from 'vue-multiselect'
174197
import { ToggleButton } from 'vue-js-toggle-button'
175-
import HTMLQueue from '../dashboard_items/HTMLQueue.vue'
198+
import HTMLQueue from '../../dashboard_items/HTMLQueue.vue'
176199
177200
export default {
178201
data () {
179202
return {
203+
tab: 'details',
180204
value: '',
181205
testModel: [],
182206
newName: '',
@@ -322,11 +346,11 @@ export default {
322346
},
323347
324348
// Deselects active component
325-
resetActiveComponent () {
326-
if (this.activeComponent !== '') {
327-
this.setActiveComponent('')
328-
}
329-
},
349+
// resetActiveComponent () {
350+
// if (this.activeComponent !== '') {
351+
// this.setActiveComponent('')
352+
// }
353+
// },
330354
331355
// edit name of selected component
332356
editCompName (name) {
@@ -402,4 +426,13 @@ p {
402426
hr {
403427
border: 1px solid grey
404428
}
429+
430+
.q-tab-panel {
431+
height: 100%;
432+
}
433+
434+
.q-tab-panels {
435+
height: 100%;
436+
padding: 0 !important;
437+
}
405438
</style>

‎src/components/home_sidebar_items/HomeSideDropDown.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ Description:
3535

3636
<script>
3737
import RouteDisplay from './RouteDisplay.vue'
38-
import EditDeleteComponents from './EditDeleteComponents.vue'
38+
import EditDeleteComponents from './ComponentTab/EditDeleteComponents.vue'
3939
import VuexForm from './VuexForm.vue'
4040
4141
export default {

0 commit comments

Comments
 (0)