Skip to content

Commit eae7805

Browse files
katherinek123katherinek123
authored
Merge pull request #32 from oslabs-beta/jace/sandbox
Jace/sandbox
2 parents 9239603 + 99a09a3 commit eae7805

File tree

12 files changed

+845
-108
lines changed

12 files changed

+845
-108
lines changed

‎src/components/Canvas.vue‎

Lines changed: 275 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -7,37 +7,222 @@
77
<template>
88
<!-- the background Canvas grid -->
99
<div class="component-display grid-bg" :style="mockBg" v-on:click="handleClick" v-on:click.right="handleRight">
10-
11-
<div class="cssContainer">
12-
<!-- This is the actual component box -->
13-
<!-- https://www.npmjs.com/package/vue-draggable-resizable -->
14-
<p class="cssContainerText">
15-
CSS Container</p>
16-
17-
18-
<vue-draggable-resizable class-name="component-box" v-for="componentData in activeRouteArray" ref="boxes"
19-
:key="componentData.componentName" :id="componentData.componentName" :x="componentData.x" :y="componentData.y"
20-
:z="componentData.z" :w="componentData.w" :h="componentData.h" :preventDeactivation="true"
21-
@activated="onActivated(componentData)" @deactivated="onDeactivated(componentData)" @dragstop="finishedDrag"
22-
@resizestop="finishedResize" :onDragStart="recordInitialPosition" :onResizeStart="recordInitialSize"
23-
:style="{ 'background-color': componentData.color }" :parent="true">
24-
25-
<div class="component-title">
26-
<p>{{ componentData.componentName }}</p>
27-
</div>
28-
<q-icon v-if="componentData.componentName === this.activeComponent" size="25px" z-layer="0" name="edit_note"
29-
class="compNoteLogo" @click="handleAddNotes" />
30-
31-
<!-- <q-icon "
32-
size="30px"
10+
<div class="cssContainer">
11+
<!-- This is the actual component box -->
12+
<!-- https://www.npmjs.com/package/vue-draggable-resizable -->
13+
<p class="cssContainerText">
14+
CSS Container</p>
15+
<vue-draggable-resizable
16+
class-name="component-box"
17+
v-for="componentData in activeRouteArray"
18+
ref="boxes"
19+
:key="componentData.componentName"
20+
:id="componentData.componentName"
21+
:x="componentData.x"
22+
:y="componentData.y"
23+
:z="componentData.z"
24+
:w="componentData.w"
25+
:h="componentData.h"
26+
:preventDeactivation="true"
27+
@activated="onActivated(componentData)"
28+
@deactivated="onDeactivated(componentData)"
29+
@dragstop="finishedDrag"
30+
@resizestop="finishedResize"
31+
:onDragStart="recordInitialPosition"
32+
:onResizeStart="recordInitialSize"
33+
:style="{'background-color': componentData.color}"
34+
:parent="true"
35+
>
36+
37+
<div class="component-title">
38+
<p>{{ componentData.componentName }}</p>
39+
</div>
40+
<q-icon v-if="componentData.componentName === this.activeComponent"
41+
size="25px"
3342
z-layer="0"
3443
name="edit_note"
35-
class="compNoteLogoEmpty"
36-
@click="handleAddNotes" /> -->
37-
38-
<q-icon v-if="componentData.componentName === this.activeComponent" size="25px" z-layer="0" name="palette"
39-
class="colorLogo" @click="handleEditColor" />
40-
44+
class="compNoteLogo"
45+
@click="handleAddNotes"
46+
/>
47+
<!-- Rendering HTML Elements for each Component -->
48+
<div v-for="element in this.componentMap[componentData.componentName].htmlList" :key="element.id+ new Date()">
49+
<div v-if="element.text === 'button'"
50+
class="htmlButton"
51+
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '70%'},
52+
element.y !== 0 ? {'left': element.y + '%'} : {'left': '60%'},
53+
element.w !== 0 ? {'width': element.w + '%'} : {'width': '25%'},
54+
element.h !== 0 ? {'height' : element.h + '%'} : {'height' : '10%'},
55+
element.z !== 0 ? {'z-index' : element.z + '%'} : {'z-index' : '0'},
56+
{'background-color': componentData.color}]"
57+
>
58+
<p class="innerHtmlText">{{element.note !== '' ? element.note : element.text}}</p>
59+
</div>
60+
<div v-if="element.text === 'div'"
61+
class="htmlDiv"
62+
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '10%'},
63+
element.y !== 0 ? {'left': element.y + '%'} : {'left': '10%'},
64+
element.w !== 0 ? {'width': element.w + '%'} : {'width': '80%'},
65+
element.h !== 0 ? {'height' : element.h + '%'} : {'height' : '75%'},
66+
element.z !== 0 ? {'z-index' : element.z} : {'z-index' : '0'},
67+
{'background-color': componentData.color}]"
68+
>
69+
<p class="innerHtmlText" style="font-size: 3em">{{element.note !== '' ? element.note : element.text}}</p>
70+
</div>
71+
<div v-if="element.text === 'footer'" class="htmlFooter"></div>
72+
<div v-if="element.text === 'form'"
73+
class="htmlGeneral"
74+
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '50%'},
75+
element.y !== 0 ? {'left': element.y + '%'} : {'left': '10%'},
76+
element.w !== 0 ? {'width': element.w + '%'} : {'width': '80%'},
77+
element.h !== 0 ? {'height' : element.h + '%'} : {'height' : '40%'},
78+
element.z !== 0 ? {'z-index' : element.z} : {'z-index' : '0'},
79+
{'background-color': componentData.color}]"
80+
>
81+
<p class="innerHtmlText" style="font-size: 3em">{{element.note !== '' ? element.note : element.text}}</p>
82+
</div>
83+
<div v-if="element.text === 'h1'"
84+
class="htmlHead"
85+
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '10%'},
86+
element.y !== 0 ? {'left': element.y + '%'} : {'left': '5%'},
87+
element.w !== 0 ? {'width': element.w + '%'} : {'width': '90%'},
88+
element.h !== 0 ? {'height' : element.h + '%'} : {'height' : '20%'},
89+
element.z !== 0 ? {'z-index' : element.z} : {'z-index' : '0'},
90+
{'background-color': componentData.color}]"
91+
>
92+
<p class="innerHtmlText" style="font-size: 4em">{{element.note !== '' ? element.note :element.text}}</p>
93+
</div>
94+
<div v-if="element.text === 'h2'"
95+
class="htmlHead"
96+
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '15%'},
97+
element.y !== 0 ? {'left': element.y + '%'} : {'left': '10%'},
98+
element.w !== 0 ? {'width': element.w + '%'} : {'width': '80%'},
99+
element.h !== 0 ? {'height' : element.h + '%'} : {'height' : '15%'},
100+
element.z !== 0 ? {'z-index' : element.z} : {'z-index' : '0'},
101+
{'background-color': componentData.color}]"
102+
>
103+
<p class="innerHtmlText" style="font-size: 3em">{{element.note !== '' ? element.note : element.text}}</p>
104+
</div>
105+
<div v-if="element.text === 'h3'"
106+
class="htmlHead"
107+
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '18%'},
108+
element.y !== 0 ? {'left': element.y + '%'} : {'left': '15%'},
109+
element.w !== 0 ? {'width': element.w} + '%' : {'width': '70%'},
110+
element.h !== 0 ? {'height' : element.h + '%'} : {'height' : '12%'},
111+
element.z !== 0 ? {'z-index' : element.z} : {'z-index' : '0'},
112+
{'background-color': componentData.color}]"
113+
>
114+
<p class="innerHtmlText" style="font-size: 2.5em">{{element.note !== '' ? element.note : element.text }}</p>
115+
</div>
116+
<div v-if="element.text === 'h4'"
117+
class="htmlHead"
118+
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '20%'},
119+
element.y !== 0 ? {'left': element.y + '%'} : {'left': '20%'},
120+
element.w !== 0 ? {'width': element.w + '%'} : {'width': '60%'},
121+
element.h !== 0 ? {'height' : element.h + '%'} : {'height' : '10%'},
122+
element.z !== 0 ? {'z-index' : element.z} : {'z-index' : '0'},
123+
{'background-color': componentData.color}]"
124+
>
125+
<p class="innerHtmlText" style="font-size: 2em">{{element.note !== '' ? element.note : element.text}}</p>
126+
</div>
127+
<div v-if="element.text === 'h5'"
128+
class="htmlHead"
129+
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '20%'},
130+
element.y !== 0 ? {'left': element.y + '%'} : {'left': '25%'},
131+
element.w !== 0 ? {'width': element.w + '%'} : {'width': '50%'},
132+
element.h !== 0 ? {'height' : element.h + '%'} : {'height' : '8%'},
133+
element.z !== 0 ? {'z-index' : element.z} : {'z-index' : '0'},
134+
{'background-color': componentData.color}]"
135+
>
136+
<p class="innerHtmlText" style="font-size: 1.5em">{{element.note !== '' ? element.note : element.text}}</p>
137+
</div>
138+
<div v-if="element.text === 'h6'"
139+
class="htmlHead"
140+
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '20%'},
141+
element.y !== 0 ? {'left': element.y + '%'} : {'left': '30%'},
142+
element.w !== 0 ? {'width': element.w + '%'} : {'width': '40%'},
143+
element.h !== 0 ? {'height' : element.h + '%'} : {'height' : '5%'},
144+
element.z !== 0 ? {'z-index' : element.z} : {'z-index' : '0'},
145+
{'background-color': componentData.color}]"
146+
>
147+
<p class="innerHtmlText" style="font-size: 1em">{{element.note !== '' ? element.note : element.text}}</p>
148+
</div>
149+
<div v-if="element.text === 'header'" class="htmlHeader"></div>
150+
<div v-if="element.text === 'img'"
151+
class="htmlGeneral"
152+
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '20%'},
153+
element.y !== 0 ? {'left': element.y + '%'} : {'left': '20%'},
154+
element.w !== 0 ? {'width': element.w + '%'} : {'width': '40%'},
155+
element.h !== 0 ? {'height' : element.h + '%'} : {'height' : '40%'},
156+
element.z !== 0 ? {'z-index' : element.z} : {'z-index' : '0'},
157+
{'background-color': componentData.color}]"
158+
>
159+
<p class="innerHtmlText" style="font-size: 3em">{{element.note !== '' ? element.note : element.text}}</p>
160+
</div>
161+
<input v-if="element.text === 'input'" class="htmlInput"/>
162+
<div v-if="element.text === 'list'"
163+
class="htmlList"
164+
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '30%'},
165+
element.y !== 0 ? {'left': element.y + '%'} : {'left': '30%'},
166+
element.w !== 0 ? {'width': element.w + '%'} : {'width': '60%'},
167+
element.h !== 0 ? {'height' : element.h + '%'} : {'height' : '10%'},
168+
element.z !== 0 ? {'z-index' : element.z} : {'z-index' : '0'},
169+
{'background-color': componentData.color}]"
170+
>
171+
<p class="innerHtmlText" style="font-size: 2em">{{element.note !== '' ? element.note : element.text}}</p>
172+
</div>
173+
<div v-if="element.text === 'list-ol'"
174+
class="htmlGeneral"
175+
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '20%'},
176+
element.y !== 0 ? {'left': element.y + '%'} : {'left': '10%'},
177+
element.w !== 0 ? {'width': element.w + '%'} : {'width': '80%'},
178+
element.h !== 0 ? {'height' : element.h + '%'} : {'height' : '40%'},
179+
element.z !== 0 ? {'z-index' : element.z} : {'z-index' : '0'},
180+
{'background-color': componentData.color}]"
181+
>
182+
<p class="innerHtmlText" style="font-size: 1.2em">{{element.note !== '' ? element.note : element.text}}
183+
<ol>
184+
<li>1</li>
185+
<li>2</li>
186+
<li>3</li>
187+
</ol>
188+
</p>
189+
</div>
190+
<div v-if="element.text === 'list-ul'"
191+
class="htmlGeneral"
192+
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '20%'},
193+
element.y !== 0 ? {'left': element.y + '%'} : {'left': '10%'},
194+
element.w !== 0 ? {'width': element.w + '%'} : {'width': '80%'},
195+
element.h !== 0 ? {'height' : element.h + '%'} : {'height' : '40%'},
196+
element.z !== 0 ? {'z-index' : element.z} : {'z-index' : '0'},
197+
{'background-color': componentData.color}]"
198+
>
199+
<p class="innerHtmlText" style="font-size: 1.5em">{{element.note !== '' ? element.note : element.text}}
200+
<ol>
201+
<li>-</li>
202+
<li>-</li>
203+
<li>-</li>
204+
</ol>
205+
</p>
206+
</div>
207+
<div v-if="element.text === 'paragraph'"
208+
class="htmlGeneral"
209+
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '50%'},
210+
element.y !== 0 ? {'left': element.y + '%'} : {'left': '10%'},
211+
element.w !== 0 ? {'width': element.w + '%'} : {'width': '80%'},
212+
element.h !== 0 ? {'height' : element.h + '%'} : {'height' : '40%'},
213+
element.z !== 0 ? {'z-index' : element.z} : {'z-index' : '0'},
214+
{'background-color': componentData.color}]"
215+
>
216+
<p>{{element.note !== '' ? element.note : element.text }}</p>
217+
</div>
218+
<div v-if="element.text === 'navbar'" class="htmlNavbar"></div>
219+
</div>
220+
<q-icon v-if="componentData.componentName === this.activeComponent"
221+
size="25px"
222+
z-layer="0"
223+
name="palette"
224+
class="colorLogo"
225+
@click="handleEditColor" />
41226
<!-- start of right click function-->
42227
<q-menu context-menu>
43228
<q-list color="black" class="menu">
@@ -113,7 +298,6 @@
113298
</div>
114299
</q-dialog>
115300

116-
117301
<!--color selector-->
118302
<q-dialog v-model="colorModal" @update:model-value="handleEditColor">
119303
<!--may need to change starting to be current state?-->
@@ -231,6 +415,9 @@ export default {
231415
"activeComponentObj",
232416
"exportAsTypescript",
233417
"noteModalOpen",
418+
"activeRouteDisplay",
419+
'selectedElementList',
420+
'activeLayer',
234421
"colorModalOpen",
235422
"activeRouteDisplay"
236423
]),
@@ -258,7 +445,6 @@ export default {
258445
);
259446
const relatives = [...val]
260447
//also need to filter out any parents
261-
262448
let parentalLineage = [];
263449
findLineage(relatives)
264450
function findLineage(children) {
@@ -339,7 +525,8 @@ export default {
339525
if (this.activeComponent !== e.target.id) {
340526
if (e.target.parentElement?.classList.contains('draggable')) {
341527
this.setActiveComponent(e.target.parentElement.id)
342-
} else {
528+
}
529+
else if (typeof `${e.target.id}` !== 'number') {
343530
this.setActiveComponent(e.target.id);
344531
}
345532
}
@@ -818,6 +1005,62 @@ li:hover {
8181005
margin-bottom: 10px;
8191006
}
8201007
1008+
.htmlButton {
1009+
position: absolute;
1010+
margin: .5em;
1011+
border-style: solid;
1012+
border: 2em;
1013+
border-radius: 1.5%;
1014+
}
1015+
1016+
.htmlDiv {
1017+
position: absolute;
1018+
margin: .5em;
1019+
border-radius: 1.5%;
1020+
border-style: solid;
1021+
}
1022+
1023+
.htmlFooter{
1024+
position: absolute;
1025+
width: 100%;
1026+
height: 10%;
1027+
top: 90%;
1028+
z-index: -1;
1029+
border-radius: 1.5%;
1030+
background-color: $primary;
1031+
}
1032+
1033+
.htmlGeneral{
1034+
position: absolute;
1035+
color: $menutext;
1036+
border-radius: 1.5%;
1037+
border-style: solid;
1038+
}
1039+
1040+
.htmlHead{
1041+
position: absolute;
1042+
color: $menutext;
1043+
font-weight: bolder !important;
1044+
text-overflow: clip;
1045+
}
1046+
1047+
.innerHtmlText {
1048+
position: absolute;
1049+
text-align: center;
1050+
opacity: 0.5;
1051+
overflow: hidden;
1052+
text-overflow: clip;
1053+
}
1054+
1055+
.htmlNavbar{
1056+
position: absolute;
1057+
width: 100%;
1058+
background-color: $primary;
1059+
height: 10%;
1060+
top: 0%;
1061+
z-index: -1;
1062+
}
1063+
8211064
.sr-only {
8221065
position: absolute;
8231066
overflow: hidden;
@@ -830,7 +1073,6 @@ li:hover {
8301073
white-space: nowrap;
8311074
}
8321075
833-
8341076
.colorPicker {
8351077
color: black;
8361078
background: rgba(177, 171, 171, 0.562);

‎src/components/left-sidebar/ComponentTab/ActionsSubMenu.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ export default {
6969
VueMultiselect,
7070
},
7171
computed: {
72-
...mapState(["selectedActions", "userActions", "componentMap", "activeComponent"]),
72+
...mapState(["selectedActions", "userActions", "componentMap", "activeComponent",]),
7373
actionOptions() {
7474
return this.userActions;
7575
},

‎src/components/left-sidebar/ComponentTab/ComponentTab.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export default {
2525
components: {
2626
CreateMenu,
2727
UpdateMenu,
28-
}
28+
},
2929
}
3030
</script>
3131

‎src/components/left-sidebar/ComponentTab/CreateMenu.vue‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@ export default {
8181
"selectedElementList",
8282
"activeComponent",
8383
"activeHTML",
84+
"attributeModalOpen",
8485
"userActions",
8586
"userState",
8687
"userProps",
@@ -114,6 +115,11 @@ export default {
114115
useCreateComponent.bind(this)({}) //invokes composable
115116
},
116117
},
118+
watch: {
119+
attributeModalOpen() {
120+
this.attributeModal = this.attributeModalOpen;
121+
},
122+
}
117123
};
118124
</script>
119125

0 commit comments

Comments
 (0)