Skip to content

Commit b4b0701

Browse files
deanfchungdeanfchung
committed
ready to make pull request
2 parents 7699410 + 7a5dbbc commit b4b0701

File tree

15 files changed

+1163
-46
lines changed

15 files changed

+1163
-46
lines changed

‎package-lock.json

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

‎package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,20 @@
1616
"localforage": "^1.7.3",
1717
"mousetrap": "^1.6.3",
1818
"quasar": "^1.0.0",
19+
"vue-drag-resize": "^1.3.2",
1920
"vue-draggable-resizable": "^2.0.0-rc2",
2021
"vue-loader": "^15.7.0",
2122
"vue-multiselect": "^2.1.6",
22-
"vued3tree": "^3.7.1"
23+
"vued3tree": "^3.7.1",
24+
"vuex": "^3.1.1"
2325
},
2426
"devDependencies": {
2527
"@quasar/app": "^1.0.0",
2628
"@vue/eslint-config-standard": "^4.0.0",
2729
"babel-eslint": "^10.0.1",
2830
"devtron": "^1.4.0",
2931
"electron": "^5.0.6",
32+
"electron-builder": "^20.44.4",
3033
"electron-debug": "^3.0.1",
3134
"electron-devtools-installer": "^2.2.4",
3235
"eslint": "^5.10.0",

‎quasar.conf.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@ module.exports = function (ctx) {
147147
},
148148

149149
electron: {
150-
// bundler: 'builder', // or 'packager'
150+
bundler: 'builder', // or 'packager'
151151

152152
extendWebpack (cfg) {
153153
// do something with Electron main process Webpack cfg

‎src/components/ComponentDisplay.vue

Lines changed: 36 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@
99
:w="componentData.w"
1010
:h="componentData.h"
1111
:parent="true"
12+
class-name-resizable="my-resizable-class"
1213
@activated="onActivated(componentData)"
1314
@deactivated="onDeactivated(componentData)"
1415
@dragging="onDrag"
1516
@resizing="onResize"
16-
@dblclick.native="onDoubleClick(componentData)"
1717
>
1818
<h3>{{ componentData.componentName }}</h3>
1919
</VueDraggableResizable>
@@ -22,6 +22,7 @@
2222
<script>
2323
import { mapState, mapActions } from 'vuex'
2424
import VueDraggableResizable from 'vue-draggable-resizable'
25+
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
2526
2627
export default {
2728
name: 'ComponentDisplay',
@@ -59,7 +60,7 @@ export default {
5960
}
6061
},
6162
methods: {
62-
...mapActions(['setActiveComponent', 'updateOpenModal']),
63+
...mapActions(['setActiveComponent']),
6364
onResize: function (x, y, width, height) {
6465
this.activeComponentData.x = x
6566
this.activeComponentData.y = y
@@ -76,26 +77,52 @@ export default {
7677
},
7778
onDeactivated () {
7879
this.activeComponentData.isActive = false
79-
},
80-
onDoubleClick (compData) {
81-
this.setActiveComponent(compData.componentName)
82-
this.activeComponentData.isActive = true
8380
}
81+
// @dblclick.native="onDoubleClick(componentData)"
82+
// onDoubleClick (compData) {
83+
// this.setActiveComponent(compData.componentName)
84+
// this.activeComponentData.isActive = true
85+
// }
8486
}
8587
}
8688
</script>
8789

8890
<style scoped>
8991
.component-display {
90-
border: 2px dotted rgb(14, 14, 14);
91-
background-color: rgba(242, 234, 228, 0.61);
92+
/* border: 3px dashed rgb(159, 122, 122); */
93+
/* height: 500px; */
94+
/* width: 500px; */
9295
height: 70vh;
9396
width: 70vw;
9497
position: relative;
98+
background-color: rgba(124, 126, 145, 0.44);
99+
/* background-color: #269; */
100+
background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
101+
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
102+
background-image: -webkit-linear-gradient(white 2px, transparent 2px),
103+
-webkit-linear-gradient(0, white 2px, transparent 2px),
104+
-webkit-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
105+
-webkit-linear-gradient(0, rgba(255,255,255,.3) 1px, transparent 1px);
106+
background-image: -moz-linear-gradient(white 2px, transparent 2px),
107+
-moz-linear-gradient(0, white 2px, transparent 2px),
108+
-moz-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
109+
-moz-linear-gradient(0, rgba(255,255,255,.3) 1px, transparent 1px);
110+
background-image: linear-gradient(white 2px, transparent 2px),
111+
linear-gradient(90deg, white 2px, transparent 2px),
112+
linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
113+
linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
114+
-pie-background: linear-gradient(white 2px, transparent 2px) -2px -2px / 100px,
115+
linear-gradient(90deg, white 2px, transparent 2px) -2px -2px / 100px,
116+
linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px) -1px -1px / 20px,
117+
linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px) -1px -1px / 20px,
118+
#269;
119+
behavior: url(/pie/PIE.htc);
95120
}
96121
97122
.component-box {
98123
color: white;
99-
border: 1px solid salmon;
124+
border: 3px dashed rgb(227, 203, 71);
125+
background-color: rgba(186, 99, 99, 0.529);
100126
}
127+
101128
</style>

‎src/components/CreateComponent.vue

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -16,29 +16,23 @@
1616
<div class="icon-container">
1717
<Icons @getClickedIcon="addToSelectedElementList" />
1818
</div>
19-
<!-- <ChildrenMultiselect /> -->
19+
<ParentMultiselect />
2020
<br />
21-
<!-- <button
22-
class="button is-primary"
23-
id="add-component-btn"
24-
@click="handleClick"
25-
:disabled="!componentNameInputValue"
26-
>Add Component</button> -->
2721
<q-btn id="add-component-btn" class="primary" color="secondary" label="Create Component" icon-right="add" @click="handleClick" :disabled="!componentNameInputValue" />
2822
</div>
2923
</template>
3024

3125
<script>
3226
import Icons from './Icons'
33-
// import ChildrenMultiselect from '@/components/ChildrenMultiselect';
27+
import ParentMultiselect from '../components/ParentMultiselect'
3428
import { mapState, mapActions } from 'vuex'
3529
// import * as types from '../store/types.js'
3630
3731
export default {
3832
name: 'HomeSidebar',
3933
components: {
40-
// ChildrenMultiselect,
41-
Icons
34+
Icons,
35+
ParentMultiselect
4236
},
4337
computed: {
4438
...mapState(['componentMap', 'selectedElementList']),

‎src/components/Footer.vue

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template>
2+
<q-footer reveal elevated class="primary text-white">
3+
<q-toolbar>
4+
<q-btn push color="secondary" round icon="keyboard_arrow_up" />
5+
<q-toolbar-title>Dashboard</q-toolbar-title>
6+
<FooterTabView />
7+
</q-toolbar>
8+
</q-footer>
9+
</template>
10+
11+
<script>
12+
import FooterTabView from './FooterTabView'
13+
14+
export default {
15+
components: {
16+
FooterTabView
17+
}
18+
}
19+
</script>
20+
21+
<style lang="stylus">
22+
.q-footer {
23+
height: 20vh;
24+
}
25+
</style>

‎src/components/FooterTabView.vue

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
<q-tabs
44
v-model="tab"
55
dense
6-
class="text-grey"
7-
active-color="primary"
6+
class="text-white"
7+
active-color="secondary"
88
indicator-color="primary"
99
align="justify"
1010
narrow-indicator
@@ -35,6 +35,7 @@
3535

3636
<script>
3737
export default {
38+
name: 'FooterTabView.vue',
3839
data () {
3940
return {
4041
tab: 'tree'

‎src/components/HomeSideDropDownItems/ComponentList.vue

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<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>
10+
</template>
11+
12+
<script>
13+
import { mapState } from 'vuex'
14+
15+
export default {
16+
el: '#comp-list',
17+
computed: {
18+
...mapState(['componentMap']),
19+
componentMap () {
20+
return Object.keys(this.componentMap)
21+
}
22+
}
23+
}
24+
</script>
25+
26+
<style>
27+
</style>

‎src/components/ParentMultiselect.vue

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<template>
2+
<div id="parent-select">
3+
<br />
4+
<multiselect
5+
placeholder="Choose Parent (if applicable)"
6+
:multiple="false"
7+
:close-on-select="true"
8+
:options="options"
9+
@input="handleSelect"
10+
:max-height="150"
11+
:option-height="20"
12+
:searchable="false"
13+
></multiselect>
14+
</div>
15+
</template>
16+
17+
<script>
18+
import { mapState, mapActions } from 'vuex'
19+
import Multiselect from 'vue-multiselect'
20+
21+
export default {
22+
name: 'ParentMultiselect',
23+
components: {
24+
Multiselect
25+
},
26+
computed: {
27+
...mapState([
28+
'routes',
29+
'componentMap',
30+
'activeComponent'
31+
]),
32+
options () {
33+
const routes = Object.keys(this.routes)
34+
const exceptions = new Set(['App', ...routes])
35+
return Object.keys(this.componentMap).filter(component => {
36+
if (!exceptions.has(component)) return component
37+
})
38+
}
39+
},
40+
methods: {
41+
...mapActions([
42+
'setActiveComponent',
43+
'parentSelected'
44+
]),
45+
handleSelect (value) {
46+
// Set Active Component to selected Parent
47+
this.setActiveComponent(value)
48+
// Set parentSelected to true IF VALUE IS A VALID PARENT (not null)
49+
this.parentSelected(true)
50+
}
51+
}
52+
}
53+
</script>
54+
55+
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
56+
<style scoped>
57+
58+
</style>

‎src/components/TopMenuBar.vue

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,3 +87,17 @@
8787
</q-bar>
8888
</div>
8989
</template>
90+
91+
<script>
92+
export default {
93+
name: 'TopMenuBar',
94+
components: {
95+
QMenu,
96+
QItem,
97+
QSeparator,
98+
QItemSection,
99+
QList,
100+
QBtn
101+
}
102+
}
103+
</script>

0 commit comments

Comments
 (0)