Skip to content

Commit 415c62c

Browse files
jeisele2jeisele2
committed
merged changes and restyled right click
2 parents 359653f + daf98c9 commit 415c62c

21 files changed

+635
-170
lines changed

‎package-lock.json

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

‎package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"vue-custom-context-menu": "^3.0.1",
2020
"vue-drag-resize": "^1.3.2",
2121
"vue-draggable-resizable": "^2.0.0-rc2",
22+
"vue-loader": "^15.7.0",
2223
"vue-multiselect": "^2.1.6",
2324
"vued3tree": "^3.7.1",
2425
"vuex": "^3.1.1"
@@ -34,7 +35,8 @@
3435
"electron-devtools-installer": "^2.2.4",
3536
"eslint": "^5.10.0",
3637
"eslint-loader": "^2.1.1",
37-
"eslint-plugin-vue": "^5.0.0"
38+
"eslint-plugin-vue": "^5.0.0",
39+
"strip-ansi": "^3.0.1"
3840
},
3941
"engines": {
4042
"node": ">= 8.9.0",

‎quasar.conf.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,11 @@ module.exports = function (ctx) {
5454
'QRouteTab',
5555
'QTabPanels',
5656
'QDialog',
57-
'QSelect'
57+
'QSelect',
58+
'QTabPanel',
59+
'QFab',
60+
'QFabAction',
61+
'QMenu'
5862
],
5963

6064
directives: [

‎src/components/ChildrenMultiselect.vue

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<template>
2-
<div id="child-select" style="min-width: 500px; min-height: 500px;">
2+
<div id="child-select">
33
<br />
44
<multiselect
5+
id="dropdown"
56
placeholder="Select child components"
67
:multiple="true"
78
:close-on-select="false"
@@ -66,5 +67,8 @@ export default {
6667
Add Multiselect CSS. Can be added as a static asset or inside a component. -->
6768
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
6869
<style scoped>
69-
/* your styles */
70+
#child-select {
71+
min-width: 300px;
72+
min-height: 200px;
73+
}
7074
</style>

‎src/components/ComponentDisplay.vue

Lines changed: 60 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<template>
22
<div class="component-display">
3-
<context-menu ref="component-options">
4-
<context-menu-item :action="handleAddChild">Add a Child</context-menu-item>
3+
<!-- <context-menu ref="component-options">
4+
<context-menu-item :action="handleAddChild"><button>Add a Child</button></context-menu-item>
55
<context-menu-item><button>Delete a Child</button></context-menu-item>
6-
</context-menu>
6+
</context-menu> -->
77
<VueDraggableResizable
88
class-name="component-box"
99
v-for="componentData in activeRouteArray"
@@ -21,8 +21,20 @@
2121
v-context-menu="'component-options'"
2222
>
2323
<h3>{{ componentData.componentName }}</h3>
24+
<q-menu context-menu>
25+
<q-list>
26+
<q-item clickable v-ripple @click="handleAddChild">
27+
<q-item-section>Add Children</q-item-section>
28+
<q-item-section avatar><q-icon color="primary" name="add"/></q-item-section>
29+
</q-item>
30+
<q-item clickable v-ripple>
31+
<q-item-section>Delete Children</q-item-section>
32+
<q-item-section avatar><q-icon color="primary" name="delete"/></q-item-section>
33+
</q-item>
34+
</q-list>
35+
</q-menu>
2436
</VueDraggableResizable>
25-
<q-dialog v-model="modalOpen">
37+
<q-dialog id="select-child-modal" v-model="modalOpen">
2638
<ChildrenMultiselect />
2739
</q-dialog>
2840
</div>
@@ -31,6 +43,7 @@
3143
import { mapState, mapActions } from 'vuex'
3244
import VueDraggableResizable from 'vue-draggable-resizable'
3345
import ChildrenMultiselect from '../components/ChildrenMultiselect'
46+
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
3447
3548
export default {
3649
name: 'ComponentDisplay',
@@ -58,6 +71,7 @@ export default {
5871
...mapState(['routes', 'activeRoute', 'activeComponent', 'componentMap']),
5972
// used in VueDraggableResizeable component
6073
activeRouteArray () {
74+
// console.log('active route array method', this.routes[this.activeRoute])
6175
return this.routes[this.activeRoute]
6276
},
6377
// used to delete components
@@ -69,7 +83,7 @@ export default {
6983
}
7084
},
7185
methods: {
72-
...mapActions(['setActiveComponent', 'updateOpenModal']),
86+
...mapActions(['setActiveComponent']),
7387
onResize: function (x, y, width, height) {
7488
this.activeComponentData.x = x
7589
this.activeComponentData.y = y
@@ -95,21 +109,57 @@ export default {
95109
// render modal with childrenmultiselect in it
96110
this.modalOpen = true
97111
}
112+
// @dblclick.native="onDoubleClick(componentData)"
113+
// onDoubleClick (compData) {
114+
// this.setActiveComponent(compData.componentName)
115+
// this.activeComponentData.isActive = true
116+
// }
98117
}
99118
}
100119
</script>
101120

102121
<style scoped>
103122
.component-display {
104-
border: 2px dotted rgb(14, 14, 14);
105-
background-color: rgba(242, 234, 228, 0.61);
106-
height: 70vh;
107-
width: 70vw;
123+
/* border: 3px dashed rgb(159, 122, 122); */
124+
/* height: 500px; */
125+
/* width: 500px; */
126+
/* original is 70vh */
127+
height: 87vh;
128+
width: 100vw;
108129
position: relative;
130+
background-color: rgba(124, 126, 145, 0.44);
131+
/* background-color: #269; */
132+
background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
133+
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
134+
background-image: -webkit-linear-gradient(white 2px, transparent 2px),
135+
-webkit-linear-gradient(0, white 2px, transparent 2px),
136+
-webkit-linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
137+
-webkit-linear-gradient(0, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
138+
background-image: -moz-linear-gradient(white 2px, transparent 2px),
139+
-moz-linear-gradient(0, white 2px, transparent 2px),
140+
-moz-linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
141+
-moz-linear-gradient(0, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
142+
background-image: linear-gradient(white 2px, transparent 2px),
143+
linear-gradient(90deg, white 2px, transparent 2px),
144+
linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
145+
linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
146+
-pie-background: linear-gradient(white 2px, transparent 2px) -2px -2px / 100px,
147+
linear-gradient(90deg, white 2px, transparent 2px) -2px -2px / 100px,
148+
linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px) -1px -1px /
149+
20px,
150+
linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px) -1px -1px /
151+
20px,
152+
#269;
153+
behavior: url(/pie/PIE.htc);
109154
}
110155
111156
.component-box {
112157
color: white;
113-
border: 1px solid salmon;
158+
border: 3px dashed rgb(227, 203, 71);
159+
background-color: rgba(186, 99, 99, 0.529);
160+
}
161+
162+
.select-child-modal {
163+
background-color: red;
114164
}
115165
</style>

‎src/components/CreateComponent.vue

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,33 +13,26 @@
1313
>
1414
</q-input>
1515
</form>
16-
1716
<div class="icon-container">
1817
<Icons @getClickedIcon="addToSelectedElementList" />
1918
</div>
20-
<!-- <ChildrenMultiselect /> -->
19+
<ParentMultiselect />
2120
<br />
22-
<!-- <button
23-
class="button is-primary"
24-
id="add-component-btn"
25-
@click="handleClick"
26-
:disabled="!componentNameInputValue"
27-
>Add Component</button> -->
2821
<q-btn id="add-component-btn" class="primary" color="secondary" label="Create Component" icon-right="add" @click="handleClick" :disabled="!componentNameInputValue" />
2922
</div>
3023
</template>
3124

3225
<script>
3326
import Icons from './Icons'
34-
// import ChildrenMultiselect from '@/components/ChildrenMultiselect';
27+
import ParentMultiselect from '../components/ParentMultiselect'
3528
import { mapState, mapActions } from 'vuex'
3629
// import * as types from '../store/types.js'
3730
3831
export default {
3932
name: 'HomeSidebar',
4033
components: {
41-
// ChildrenMultiselect,
42-
Icons
34+
Icons,
35+
ParentMultiselect
4336
},
4437
computed: {
4538
...mapState(['componentMap', 'selectedElementList']),

‎src/components/Footer.vue

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<template>
2+
<q-footer reveal elevated class="gradient text-white" :style="{ height: `${height}vh` }">
3+
<q-toolbar>
4+
<q-btn flat color="subaccentbtn" round @click="openBottomDrawer">
5+
<i :class="[open ? down : up]"></i>
6+
</q-btn>
7+
<q-toolbar-title>Dashboard</q-toolbar-title>
8+
</q-toolbar>
9+
<q-card>
10+
<q-tabs
11+
v-model="tab"
12+
dense
13+
class="bg-subaccent text-white"
14+
active-color="secondary"
15+
indicator-color="secondary"
16+
align="left"
17+
>
18+
<q-tab name="code" label="Code" />
19+
<q-tab name="tree" label="Tree" />
20+
<q-tab name="html" label="HTML Elements" />
21+
</q-tabs>
22+
23+
<q-tab-panels v-model="tab" animated class="bg-primary text-white">
24+
<q-tab-panel name="code">
25+
<div class="text-h6">Code Snippet</div>Code Snippet Component Here
26+
<br />asdfadsfasdf
27+
</q-tab-panel>
28+
29+
<q-tab-panel name="tree">
30+
<Tree />
31+
</q-tab-panel>
32+
33+
<q-tab-panel name="html">
34+
<div class="text-h6">HTML Elements</div>HTML Element Component Here
35+
</q-tab-panel>
36+
</q-tab-panels>
37+
</q-card>
38+
</q-footer>
39+
</template>
40+
41+
<script>
42+
import Tree from './Tree'
43+
44+
export default {
45+
components: {
46+
Tree
47+
},
48+
data () {
49+
return {
50+
tab: 'code',
51+
open: true,
52+
height: 35,
53+
up: 'fas fa-chevron-up',
54+
down: 'fas fa-chevron-down'
55+
}
56+
},
57+
methods: {
58+
openBottomDrawer () {
59+
this.height === 35 ? (this.height = 6.5) : (this.height = 35)
60+
this.open === true ? this.open = false : this.open = true
61+
}
62+
}
63+
}
64+
</script>
65+
66+
<style lang="stylus">
67+
.q-footer {
68+
// height: 35vh;
69+
transition-timing-function: ease-in;
70+
transition: 0.2s;
71+
}
72+
73+
.q-tab-panel {
74+
background: rgb(69,77,102);
75+
background: linear-gradient(180deg, rgba(69,77,102,1) 0%, rgba(54,60,78,1) 100%);
76+
}
77+
78+
.q-tab-panels {
79+
height: 24vh;
80+
}
81+
82+
.q-tabs {
83+
background: #2c384d;
84+
}
85+
</style>

‎src/components/FooterTabView.vue

Lines changed: 0 additions & 45 deletions
This file was deleted.

0 commit comments

Comments
 (0)