Skip to content

Commit 1f59877

Browse files
LOLDragoonLOLDragoon
committed
fixed conflicts
2 parents d41b1aa + 0f4c084 commit 1f59877

File tree

14 files changed

+214
-89
lines changed

14 files changed

+214
-89
lines changed

‎src/App.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,6 @@ let redoMixin = {
138138
store: this.$store
139139
}
140140
this.$store.commit('EMPTY_STATE', payload)
141-
console.log(this.$store)
142141
this.doneAction.forEach(action => {
143142
//console.log('In the loop', this.$store)
144143
// this.$store.commit(`${mutation.type}`, mutation.payload);

‎src/components/ComponentDisplay.vue

Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@
1818
@deactivated="onDeactivated(componentData)"
1919
@dragging="onDrag"
2020
@resizing="onResize"
21-
@dblclick.native="onDoubleClick(componentData)"
2221
@dragstop="finishedDrag"
2322
@resizestop="finishedResize"
2423
:onDragStart="recordInitialPosition"
@@ -177,7 +176,7 @@ export default {
177176
console.log('mockBg is working', this.imagePath[this.activeRoute])
178177
return this.imagePath[this.activeRoute]
179178
? {
180-
background: `url("${this.userImage}") center/contain no-repeat`
179+
background: `url("${this.userImage}") center/contain no-repeat rgba(223, 218, 218, 0.886)`,
181180
}
182181
: {}
183182
}
@@ -346,12 +345,6 @@ export default {
346345
// console.log("We just clicked without making a new active component")
347346
// }
348347
},
349-
onDoubleClick (compData) {
350-
if (!(componentData.componentName === this.activeComponent)) {
351-
this.setActiveComponent(componentData.componentName)
352-
}
353-
this.activeComponentData.isActive = true
354-
},
355348
handleAddChild () {
356349
// render modal with childrenmultiselect in it
357350
this.modalOpen = true
@@ -374,11 +367,6 @@ export default {
374367
if (e.target.innerText === '-' && payload.z > 0) payload.z--
375368
this.updateComponentLayer(payload)
376369
},
377-
// @dblclick.native="onDoubleClick(componentData)"
378-
// onDoubleClick (compData) {
379-
// this.setActiveComponent(compData.componentName)
380-
// this.activeComponentData.isActive = true
381-
// }
382370
handleClick (event) {
383371
if (event.target.className === 'component-display grid-bg') {
384372
if (!(this.activeComponent === '')) this.setActiveComponent('')
@@ -395,11 +383,9 @@ export default {
395383
top: -18px;
396384
left: 2px;
397385
color: black;
386+
-webkit-text-stroke: 0.4px white;
398387
font-weight: 800;
399-
/* background: rgba(0, 0, 0, 0.678); */
400-
/* width: 1rem; */
401388
line-height: 1.2;
402-
/* margin: 10px; */
403389
z-index: -1;
404390
}
405391
.component-children {

‎src/components/ExportProject.vue

Lines changed: 46 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -143,14 +143,55 @@ export default {
143143
input: ['<input />', ''],
144144
navbar: ['<nav>', '</nav>']
145145
}
146+
147+
/* Function to loop through nested elements */
148+
function writeNested (childrenArray, indent) {
149+
if (!childrenArray.length) {
150+
return ''
151+
}
152+
let indented = indent + ' '
153+
let nestedString = ''
154+
155+
childrenArray.forEach(child => {
156+
nestedString += indented
157+
// console.log(child)
158+
if (!child.text) {
159+
nestedString += `<${child}/>\n`
160+
} else {
161+
if (child.children.length) {
162+
nestedString += htmlElementMap[child.text][0]
163+
nestedString += '\n'
164+
nestedString += writeNested(child.children, indented)
165+
nestedString += indented + htmlElementMap[child.text][1]
166+
nestedString += '\n'
167+
} else {
168+
nestedString += htmlElementMap[child.text][0] + htmlElementMap[child.text][1] + '\n'
169+
}
170+
}
171+
})
172+
return nestedString
173+
}
174+
146175
// loop to iterate through compName arr
147176
let htmlArr = this.componentMap[compName].htmlList
148-
let outputStr = ''
177+
let outputStr = ``
149178
for (let el of htmlArr) {
150-
outputStr += '\t\t'
151-
outputStr += htmlElementMap[el.text][0]
152-
outputStr += htmlElementMap[el.text][1]
153-
outputStr += `\n`
179+
// console.log(el)
180+
if (!el.text) {
181+
outputStr += ` <${el}/>\n`
182+
} else {
183+
outputStr += ` `
184+
if (el.children.length) {
185+
outputStr += htmlElementMap[el.text][0]
186+
outputStr += '\n'
187+
outputStr += writeNested(el.children, ` `)
188+
outputStr += ` `
189+
outputStr += htmlElementMap[el.text][1]
190+
outputStr += ` \n`
191+
} else {
192+
outputStr += htmlElementMap[el.text][0] + htmlElementMap[el.text][1] + '\n'
193+
}
194+
}
154195
}
155196
console.log(`outputStr from writeTemplateTag: ${outputStr}`)
156197
return outputStr
@@ -199,15 +240,6 @@ export default {
199240
} else {
200241
// console.log(`else (if compName === 'App'`);
201242
str += `<div>\n`
202-
children.forEach(name => {
203-
str += `\t\t<${
204-
// name.componentName
205-
name
206-
}>\n\t\t</${
207-
// name.componentName
208-
name
209-
}>\n`
210-
})
211243
}
212244
// writes the html tag boilerplate
213245
let templateTagStr = this.writeTemplateTag(compName)

‎src/components/Footer.vue

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
<q-tab name="html" label="HTML Elements" id="label-text" />
2323
</q-tabs>
2424

25-
<q-tab-panels v-model="tab" animated class="bg-primary text-white full-footer">
25+
<q-tab-panels v-model="tab" animated class="html-bg text-white" >
2626
<q-tab-panel name="code">
2727
<CodeSnippet />
2828
</q-tab-panel>
@@ -35,7 +35,7 @@
3535
<Tree />
3636
</q-tab-panel>
3737

38-
<q-tab-panel name="html">
38+
<q-tab-panel name="html" :style="{height: `${height}vh`}">
3939
<HomeQueue />
4040
</q-tab-panel>
4141
</q-tab-panels>
@@ -172,14 +172,18 @@ i {
172172
background: black;
173173
}
174174
175-
.full-footer {
176-
// height: 100vh;
177-
padding-bottom: 0px;
178-
}
175+
// .full-footer {
176+
// // height: 100vh;
177+
178+
// }
179179
180180
#footer-cards {
181181
height: 100%;
182182
border-radius: 0px;
183183
background: #737578;
184184
}
185+
.html-bg {
186+
// give html background color of grey
187+
background-color: #202122;
188+
}
185189
</style>

‎src/components/HomeQueue.vue

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,10 @@
1414
@end="drag = false"
1515
>
1616
<div :class="activeHTML === element[2] ? 'list-group-item-selected' : 'list-group-item'" @dblclick.self="setActiveElement(element)" v-for="(element) in renderList" :key="element[1] + Date.now()">
17-
<i class="fas fa fa-angle-double-down fa-md" @click="setLayer({text: element[0], id: element[2]})"></i>
17+
<!-- <i class="fas fa fa-angle-double-down fa-md" @click="setLayer({text: element[0], id: element[2]})"></i> -->
18+
<i v-if='activeComponent === "" ' class="fas fa fa-angle-double-down fa-md" id="unavailable"></i>
19+
<i v-else class="fas fa fa-angle-double-down fa-md" @click="setLayer({text: element[0], id: element[2]})"></i>
20+
<!-- <i class="fas fa fa-angle-double-down fa-md" @click="setLayer({text: element[0], id: element[2]})"></i> -->
1821
{{ element[0] }}
1922
<i class="fas fa fa-trash fa-md" @click.self="deleteElement([element[1],element[2]])"></i>
2023
</div>
@@ -137,7 +140,7 @@ export default {
137140

138141
<style lang="stylus" scoped>
139142
.home-queue {
140-
height: 100%;
143+
padding-bottom: 40px;
141144
}
142145
li {
143146
list-style-type: none;
@@ -149,6 +152,7 @@ li {
149152
.list-group-item {
150153
display: inline-block;
151154
margin: 2px 1.5%;
155+
min-width: 175px;
152156
width: 30%;
153157
border-radius: 0.5cm;
154158
border: 2px solid $secondary;
@@ -161,6 +165,7 @@ li {
161165
.list-group-item-selected {
162166
display: inline-block;
163167
margin: 2px 1.5%;
168+
min-width: 175px;
164169
width: 30%;
165170
border-radius: 0.5cm;
166171
border: 2px solid white;
@@ -177,12 +182,17 @@ li {
177182
178183
.fa-trash {
179184
position: relative;
180-
left: 20px;
181-
185+
// left: 20px;
186+
top: 2px;
187+
right: 35px;
188+
float: right;
182189
}
183190
.fa-angle-double-down {
184191
position: relative;
185-
right: 20px;
192+
// right: 20px;
193+
top: 2px;
194+
left: 35px;
195+
float: left;
186196
}
187197
188198
.fa-angle-double-down:hover {
@@ -199,6 +209,11 @@ li {
199209
color: #41B883;
200210
}
201211
212+
#unavailable {
213+
color: grey;
214+
cursor: default
215+
}
216+
202217
hr {
203218
border: 1px solid grey
204219
}

‎src/components/HomeSideDropDown.vue

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,18 @@
22
<div class="q-pa-md" style="max-width: 350px">
33
<q-list padding bordered class="rounded-borders drawer-menu">
44
<q-expansion-item dense dense-toggle expand-separator label="Components">
5-
<q-card>
6-
<q-card-section>
7-
<div class="input-container">
8-
<ComponentList />
9-
</div>
10-
</q-card-section>
11-
</q-card>
5+
<q-card>
6+
<q-card-section>
7+
<div class="input-container" style='height: 130px'>
8+
<ComponentList />
9+
</div>
10+
</q-card-section>
11+
</q-card>
1212
</q-expansion-item>
1313
<q-expansion-item dense dense-toggle expand-separator label="Routes">
1414
<q-card>
1515
<q-card-section>
16-
<div class="input-container">
16+
<div class="input-container" style='height: 150px'>
1717
<RouteDisplay />
1818
<br />
1919
</div>
@@ -48,13 +48,15 @@ export default {
4848
</script>
4949

5050
<style lang="stylus">
51+
5152
.input-add {
5253
margin: 0em 1em 0em 1em;
5354
}
5455
5556
.input-container {
5657
margin-top: 1rem;
5758
background: $subsecondary;
59+
overflow-y: auto;
5860
}
5961
6062
.red {

‎src/components/HomeSideDropDownItems/ComponentList.vue

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
<template>
22
<div class="home-sidebar">
33
<multiselect
4-
class='multiselect'
5-
v-model="value"
6-
:options='options'
7-
:searchable="true"
4+
class='multiselect'
5+
v-model="value"
6+
:options='options'
7+
:searchable="true"
88
:close-on-select="true"
99
:max-height="90"
1010
:option-height="20"
1111
@input="handleSelect(value)"
12+
@open="resetActiveComponent"
1213
placeholder="Select a component">
1314
<span slot='noResult'>No components found.</span>
1415
</multiselect>
@@ -55,7 +56,7 @@ export default {
5556
...mapState(['routes', 'activeRoute', 'activeComponent']),
5657
activeRouteDisplay () {
5758
let component = this.routes[this.activeRoute]
58-
console.log(component)
59+
console.log('component', component)
5960
return component
6061
},
6162
activeComponentData () {
@@ -87,6 +88,11 @@ export default {
8788
this.setActiveComponent(componentName)
8889
this.value = ''
8990
this.activeComponentData.isActive = true
91+
},
92+
resetActiveComponent () {
93+
if (this.activeComponent !== '') {
94+
this.setActiveComponent('')
95+
}
9096
}
9197
}
9298
}

‎src/components/ParentMultiselect.vue

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
:close-on-select="true"
99
:options="options"
1010
@input="handleSelect"
11+
@open="resetActiveComponent"
1112
:max-height="90"
1213
:option-height="20"
1314
:searchable="true"
@@ -44,14 +45,19 @@ export default {
4445
methods: {
4546
...mapActions([
4647
// 'addParent',
47-
'parentSelected'
48+
'parentSelected', 'setActiveComponent'
4849
]),
4950
handleSelect (value) {
5051
// Set Active Component to selected Parent
5152
// this.setActiveComponent(value)
5253
// this.addParent(value)
5354
// Set parentSelected to true IF VALUE IS A VALID PARENT (not null)
5455
this.parentSelected(value)
56+
},
57+
resetActiveComponent () {
58+
if (this.activeComponent !== '') {
59+
this.setActiveComponent('')
60+
}
5561
}
5662
},
5763
watch: {

0 commit comments

Comments
 (0)