Skip to content

Commit d91eb75

Browse files
drewngyendrewngyen
committed
fixed resize in component display and added extra height to footer
1 parent b94135e commit d91eb75

File tree

6 files changed

+146
-28
lines changed

6 files changed

+146
-28
lines changed

‎src/components/ComponentDisplay.vue‎

Lines changed: 82 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@
1313
@deactivated="onDeactivated(componentData)"
1414
@dragging="onDrag"
1515
@resizing="onResize"
16-
@dblclick.native="onDoubleClick(componentData)"
1716
>
1817
<h3>{{ componentData.componentName }}</h3>
1918
</VueDraggableResizable>
@@ -22,6 +21,7 @@
2221
<script>
2322
import { mapState, mapActions } from 'vuex'
2423
import VueDraggableResizable from 'vue-draggable-resizable'
24+
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
2525
2626
export default {
2727
name: 'ComponentDisplay',
@@ -58,7 +58,7 @@ export default {
5858
}
5959
},
6060
methods: {
61-
...mapActions(['setActiveComponent', 'updateOpenModal']),
61+
...mapActions(['setActiveComponent']),
6262
onResize: function (x, y, width, height) {
6363
this.activeComponentData.x = x
6464
this.activeComponentData.y = y
@@ -75,11 +75,12 @@ export default {
7575
},
7676
onDeactivated () {
7777
this.activeComponentData.isActive = false
78-
},
79-
onDoubleClick (compData) {
80-
this.setActiveComponent(compData.componentName)
81-
this.activeComponentData.isActive = true
8278
}
79+
// @dblclick.native="onDoubleClick(componentData)"
80+
// onDoubleClick (compData) {
81+
// this.setActiveComponent(compData.componentName)
82+
// this.activeComponentData.isActive = true
83+
// }
8384
}
8485
}
8586
</script>
@@ -88,13 +89,86 @@ export default {
8889
.component-display {
8990
border: 2px dotted rgb(14, 14, 14);
9091
background-color: rgba(242, 234, 228, 0.61);
91-
height: 70vh;
92-
width: 70vw;
92+
height: 500px;
93+
width: 500px;
94+
/* height: 70vh; */
95+
/* width: 70vw; */
9396
position: relative;
9497
}
9598
9699
.component-box {
97100
color: white;
98101
border: 1px solid salmon;
99102
}
103+
.my-handle-class {
104+
position: absolute;
105+
background-color: pink;
106+
border: 1px solid black;
107+
border-radius: 50%;
108+
height: 14px;
109+
width: 14px;
110+
-webkit-transition: all 300ms linear;
111+
-ms-transition: all 300ms linear;
112+
transition: all 300ms linear;
113+
}
114+
115+
.my-handle-class-tl {
116+
top: -14px;
117+
left: -14px;
118+
cursor: nw-resize;
119+
}
120+
121+
.my-handle-class-tm {
122+
top: -14px;
123+
left: 50%;
124+
margin-left: -7px;
125+
cursor: n-resize;
126+
}
127+
128+
.my-handle-class-tr {
129+
top: -14px;
130+
right: -14px;
131+
cursor: ne-resize;
132+
}
133+
134+
.my-handle-class-ml {
135+
top: 50%;
136+
margin-top: -7px;
137+
left: -14px;
138+
cursor: w-resize;
139+
}
140+
141+
.my-handle-class-mr {
142+
top: 50%;
143+
margin-top: -7px;
144+
right: -14px;
145+
cursor: e-resize;
146+
}
147+
148+
.my-handle-class-bl {
149+
bottom: -14px;
150+
left: -14px;
151+
cursor: sw-resize;
152+
}
153+
154+
.my-handle-class-bm {
155+
bottom: -14px;
156+
left: 50%;
157+
margin-left: -7px;
158+
cursor: s-resize;
159+
}
160+
161+
.my-handle-class-br {
162+
bottom: -14px;
163+
right: -14px;
164+
cursor: se-resize;
165+
}
166+
167+
.my-handle-class-tl:hover,
168+
.my-handle-class-tr:hover,
169+
.my-handle-class-bl:hover,
170+
.my-handle-class-br:hover {
171+
background-color: red;
172+
transform: scale(1.4);
173+
}
100174
</style>

‎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: 2 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

‎src/components/HomeSideDropDown.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
<q-btn round dense flat icon="add" />
1818
</template>
1919
</q-input>
20+
<ComponentList />
2021
</div>
2122
</q-card-section>
2223
</q-card>
@@ -82,10 +83,12 @@
8283
</template>
8384
<script>
8485
import RouteDisplay from '../components/RouteDisplay'
86+
import ComponentList from './HomeSideDropDownItems/ComponentList'
8587
8688
export default {
8789
components: {
88-
RouteDisplay
90+
RouteDisplay,
91+
ComponentList
8992
}
9093
}
9194
</script>

‎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/layouts/MyLayout.vue‎

Lines changed: 6 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,11 @@
11
<template>
22
<q-layout view="hHh LpR lFf">
3-
43
<q-header elevated class="bg-primary text-black">
54
<q-toolbar>
65
<q-btn dense flat round icon="menu" @click="left = !left" />
76

87
<q-toolbar-title>
9-
<q-avatar>
10-
</q-avatar>
11-
PreVue 2.0
8+
<q-avatar></q-avatar>PreVue 2.0
129
</q-toolbar-title>
1310
</q-toolbar>
1411
</q-header>
@@ -24,33 +21,25 @@
2421
<q-page-container>
2522
<router-view />
2623
</q-page-container>
27-
28-
<q-footer reveal elevated class="bg-grey-8 text-white">
29-
<q-toolbar>
30-
<q-toolbar-title>
31-
Dashboard
32-
</q-toolbar-title>
33-
<FooterTabView />
34-
</q-toolbar>
35-
</q-footer>
36-
24+
<Footer />
3725
</q-layout>
3826
</template>
3927

4028
<script>
4129
import HomeSideDropDown from '../components/HomeSideDropDown'
42-
import FooterTabView from '../components/FooterTabView'
30+
import Footer from '../components/Footer'
4331
import CreateComponent from '../components/CreateComponent'
4432
4533
export default {
4634
data () {
4735
return {
48-
left: true
36+
left: true,
37+
bottom: true
4938
}
5039
},
5140
components: {
5241
HomeSideDropDown,
53-
FooterTabView,
42+
Footer,
5443
CreateComponent
5544
}
5645
}

0 commit comments

Comments
 (0)