Skip to content

Commit 45811d5

Browse files
katherinek123katherinek123
authored
Merge pull request #11 from oslabs-beta/Johnny
Johnny
2 parents d43111c + 1c60c89 commit 45811d5

File tree

10 files changed

+313
-43
lines changed

10 files changed

+313
-43
lines changed

‎src/components/Canvas.vue

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -451,7 +451,8 @@ export default {
451451
activeComponentData: this.activeComponentData,
452452
}
453453
this.updateColor(payload)
454-
},
454+
this.refresh();
455+
},
455456
456457
// records component's initial size/position in case of resize
457458
recordInitialSize: function (e) {
@@ -478,8 +479,25 @@ export default {
478479
payload.h !== this.initialSize.h
479480
) {
480481
this.updateComponentSize(payload);
482+
481483
}
484+
this.refresh();
482485
},
486+
487+
//refresh function - super ghetto refresh function
488+
refresh() {
489+
const payload = {
490+
activeComponent: this.activeComponent,
491+
routeArray: this.routes[this.activeRoute],
492+
activeComponentData: this.activeComponentData,
493+
z: this.activeComponentData.z,
494+
};
495+
payload.z++;
496+
this.updateComponentLayer(payload);
497+
payload.z--;
498+
this.updateComponentLayer(payload);
499+
},
500+
483501
finishedDrag: function (x, y) {
484502
let payload = {
485503
x: x,
@@ -496,6 +514,7 @@ export default {
496514
}
497515
this.wasDragged = true;
498516
setTimeout(()=>this.wasDragged = false, 100)
517+
this.refresh();
499518
},
500519
onActivated(componentData) {
501520
if (!componentData){
@@ -571,6 +590,7 @@ export default {
571590
activeComponentData: this.activeComponentData,
572591
z: this.activeComponentData.z,
573592
};
593+
574594
if (e.target.innerText === "+") payload.z++;
575595
if (e.target.innerText === "–" && payload.z > 0) payload.z--;
576596
this.updateComponentLayer(payload);

‎src/components/composables/useCreateComponent.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,8 @@ export function useCreateComponent(importObj) {
4141
state: [],
4242
parent: {},
4343
isActive: false,
44+
idDrag: '',
45+
idDrop: '',
4446
color: "#ffffff85",
4547
htmlAttributes:{
4648
class:"",

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

Lines changed: 34 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@
1717
</q-list>
1818
</q-btn-dropdown>
1919

20-
2120
<q-input
2221
@keyup.enter="createAttribute(attributeText)"
2322
color="white"
@@ -35,6 +34,9 @@
3534
</template>
3635
</q-input>
3736

37+
<button v-if = "this.activeComponentObj.htmlAttributes.class !== ''" class = "deleteButton" @click="deleteAttribute('class')" color="primary">Remove class</button>
38+
39+
<button v-if = "this.activeComponentObj.htmlAttributes.id !== ''" class = "deleteButton" @click="deleteAttribute('id')" color="primary">Remove id</button>
3840

3941
<!-- <div>
4042
<q-btn
@@ -61,7 +63,8 @@ export default {
6163
data() {
6264
return {
6365
attributeText: "",
64-
attributeSelection: "ID",
66+
attributeSelection: "id",
67+
deleteText:"",
6568
};
6669
},
6770
computed: {
@@ -94,8 +97,19 @@ export default {
9497
activeComponentData: this.activeComponentData,
9598
})
9699
},
100+
97101
changeAttribute(attribute) {
98102
this.attributeSelection = attribute;
103+
},
104+
105+
deleteAttribute(attribute) {
106+
this.editAttribute({
107+
attribute: attribute,
108+
value: "",
109+
activeComponent: this.activeComponent,
110+
routeArray: this.routes[this.activeRoute],
111+
activeComponentData: this.activeComponentData,
112+
})
99113
}
100114
},
101115
};
@@ -110,9 +124,23 @@ export default {
110124
}
111125
112126
.input-add {
113-
position:absolute;
114-
margin-left: 7em;
115-
bottom:-60%;
116-
// padding:20px;
127+
// position:absolute;
128+
// margin-left: 7em;
129+
// bottom:-100%;
130+
margin-top:1em;
131+
margin-bottom: -1em;
117132
}
133+
.deleteButton{
134+
width:100px;
135+
height:30px;
136+
background-color:rgba(204, 190, 190, 0.164);
137+
color: $menutext;
138+
margin-right:2em;
139+
}
140+
141+
.deleteButton:hover{
142+
cursor: pointer;
143+
}
144+
145+
118146
</style>

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

Lines changed: 43 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,30 @@ Description:
55
-->
66

77
<template>
8-
<section class="html-queue">
8+
<section class="html-queue" @dragover="dragOver($event), false">
99
<div
1010
group="people"
1111
class="list-group"
1212
>
13+
1314
<div
14-
:class="activeHTML === element[2] ? 'list-group-item-selected' : 'list-group-item'"
1515
@dblclick.self="setActiveElement(element)"
1616
v-for="(element) in renderList" :key="element[1] + Date.now()"
17+
@dragenter="dragEnter($event, element[2])"
1718
>
18-
<i v-if='activeComponent === "" || exceptions.includes(element[0]) '></i>
19-
<i v-else class="fas fa fa-angle-double-down fa-md" @click="setLayer({text: element[0], id: element[2]})"></i>
20-
{{ element[0] }}
21-
<i class="fas fa fa-trash fa-md" @click.self="deleteElement([element[1],element[2]])"></i>
19+
<div
20+
:class="activeHTML === element[2] ? 'list-group-item-selected' : 'list-group-item'"
21+
@dblclick.self="setActiveElement(element)"
22+
@dragstart="startDrag($event, element[2])"
23+
@dragend="endDrag($event)"
24+
draggable="true"
25+
>
26+
<i v-if='activeComponent === "" || exceptions.includes(element[0]) '></i>
27+
<i v-else class="fas fa fa-angle-double-down fa-md" @click="setLayer({text: element[0], id: element[2]})"></i>
28+
{{ element[0] }}
29+
<i class="fas fa fa-trash fa-md" @click.self="deleteElement([element[1],element[2]])"></i>
30+
</div>
2231
</div>
23-
2432
</div>
2533
</section>
2634
</template>
@@ -78,7 +86,7 @@ export default {
7886
7987
},
8088
methods: {
81-
...mapActions(['setActiveHTML', 'setActiveLayer', 'upOneLayer']),
89+
...mapActions(['setActiveHTML', 'setActiveLayer', 'upOneLayer', 'setSelectedIdDrag', 'setIdDrag', 'setSelectedIdDrop', 'setIdDrop', 'dragDropSortHtmlElements', 'dragDropSortSelectedHtmlElements']),
8290
deleteElement (id) {
8391
if (this.activeComponent === '') this.$store.dispatch(deleteSelectedElement, id[0])
8492
else this.$store.dispatch(deleteFromComponentHtmlList, id[1])
@@ -95,7 +103,33 @@ export default {
95103
if (this.activeLayer.id !== '') {
96104
this.upOneLayer(this.activeLayer.id)
97105
}
98-
}
106+
},
107+
//METHODS FOR DRAG-AND-DROP
108+
startDrag (event, id) {
109+
//add a class of 'currentlyDragging' to the HTML element that you are currently dragging
110+
event.target.classList.add('currentlyDragging')
111+
const dragId = id;
112+
if (this.activeComponent === '') this.setSelectedIdDrag(dragId)
113+
else this.setIdDrag(dragId)
114+
},
115+
dragEnter (event, id) {
116+
event.preventDefault();
117+
const dropId = id;
118+
if (this.activeComponent === '') this.setSelectedIdDrop(dropId)
119+
else this.setIdDrop(dropId)
120+
},
121+
dragOver (event) {
122+
//needed stop the dragend animation so endDrag is invoked automatically
123+
event.preventDefault();
124+
},
125+
endDrag (event) {
126+
//remove the 'currentlyDragging' class after the HTML is dropped
127+
event.preventDefault();
128+
event.target.classList.remove('currentlyDragging')
129+
//invoke the action that will use the idDrag and idDrop to sort the HtmlList
130+
if (this.activeComponent === '') this.dragDropSortSelectedHtmlElements()
131+
else this.dragDropSortHtmlElements()
132+
},
99133
},
100134
watch: {
101135
activeComponent: function () {

‎src/components/right-sidebar/CodeSnippet.vue

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,7 @@ Description:
1111
<div class="top-p" v-if="this.activeComponent === ''">
1212
Select a component
1313
</div>
14-
<div v-else>{{ `${this.activeComponent}.vue` }}</div> <button class="refreshCode">
15-
<q-icon
16-
size="25px"
17-
z-layer="0"
18-
name="refresh"
19-
@click="this.snippetInvoke" />
20-
</button>
14+
<div v-else>{{ `${this.activeComponent}.vue` }}</div>
2115
<prism-editor v-model="code" :highlight="highlighter" line-numbers class="my-editor" readonly />
2216
</div>
2317
</template>
@@ -80,13 +74,19 @@ export default {
8074
// Creates beginner boilerplate
8175
createTemplate(componentName) {
8276
let templateTagStr = this.writeTemplateTag(componentName);
83-
console.log(this.activeComponentObj)
84-
// if(this.activeComponentObj.htmlAttributes.class !== "") return `<template>\n <div class = "${this.activeComponentObj.htmlAttributes.class}">\n${templateTagStr} </div>\n</template>`;
85-
// else return `<template>\n <div>\n${templateTagStr} </div>\n</template>`;
8677
78+
//if/else statement to determine if there are class and id attributes present in the html element
79+
if (this.activeComponentObj.htmlAttributes.class !== "" && this.activeComponentObj.htmlAttributes.id !== "") {
80+
return `<template>\n <div id = "${this.activeComponentObj.htmlAttributes.id}" class = "${this.activeComponentObj.htmlAttributes.class}">\n${templateTagStr} </div>\n</template>`;
81+
} else if (this.activeComponentObj.htmlAttributes.class !== "" && this.activeComponentObj.htmlAttributes.id === "") {
82+
return `<template>\n <div class = "${this.activeComponentObj.htmlAttributes.class}">\n${templateTagStr} </div>\n</template>`;
83+
} else if (this.activeComponentObj.htmlAttributes.class === "" && this.activeComponentObj.htmlAttributes.id !== "")
84+
return `<template>\n <div id = "${this.activeComponentObj.htmlAttributes.id}">\n${templateTagStr} </div>\n</template>`;
85+
else return `<template>\n <div>\n${templateTagStr} </div>\n</template>`;
8786
},
8887
// Creates <template> boilerplate
8988
writeTemplateTag(componentName) {
89+
// console.log(this.activeComponentObj)
9090
// create reference object
9191
const htmlElementMap = {
9292
div: ["<div", "</div>"],
@@ -249,14 +249,13 @@ export default {
249249
styleString += `.${this.activeComponentObj.htmlAttributes.class} {\nbackground-color: ${this.activeComponentObj.color};
250250
width: ${this.activeComponentObj.w}px;
251251
height: ${this.activeComponentObj.h}px;
252-
z-index: ${this.activeComponentObj.z}px;
252+
z-index: ${this.activeComponentObj.z};
253253
}\n`
254254
}
255255
256256
for (const html of htmlArray) {
257257
if (html.class === ' ') styleString = "";
258258
if (html.class) {
259-
console.log(this.activeComponentObj)
260259
styleString += `.${html.class} {\n
261260
}\n`
262261
}

0 commit comments

Comments
 (0)