Skip to content

Commit 599e8f4

Browse files
JaceCroweJaceCrowe
committed
make html elements work on the canvas page, failed to implement drag/resize because of work with active component. Start of css manipulation of each html element
1 parent 1301561 commit 599e8f4

File tree

7 files changed

+299
-66
lines changed

7 files changed

+299
-66
lines changed

‎src/components/Canvas.vue

Lines changed: 133 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,26 @@
4848
name="edit_note"
4949
class="compNoteLogoEmpty"
5050
@click="handleAddNotes" />
51+
<div v-for="element in this.componentMap[componentData.componentName].htmlList" :key="element.id+ new Date()">
52+
<div v-if="element.text === 'div'" class="htmlDiv"></div>
53+
<div v-if="element.text === 'footer'" class="htmlFooter"></div>
54+
<div v-if="element.text === 'navbar'" class="htmlNavbar"></div>
55+
<div v-if="element.text === 'h1'" class="htmlH1">Lorem Ipsum </div>
56+
<div v-if="element.text === 'form'" class="htmlForm"></div>
57+
<div v-if="element.text === 'h2'" class="htmlH2">dolor sit amet</div>
58+
<div v-if="element.text === 'h3'" class="htmlH3">consectetur adipiscing elit</div>
59+
<div v-if="element.text === 'h4'" class="htmlH4">sed do eiusmod tempor incididunt</div>
60+
<div v-if="element.text === 'h5'" class="htmlH5">ut labore et dolore magna aliqua</div>
61+
<div v-if="element.text === 'h6'" class="htmlH6">Ut enim ad minim veniam</div>
62+
<div v-if="element.text === 'header'" class="htmlHeader"></div>
63+
<div v-if="element.text === 'img'" class="htmlImg"></div>
64+
<input v-if="element.text === 'input'" class="htmlInput"/>
65+
<div v-if="element.text === 'list'" class="htmlList"></div>
66+
<div v-if="element.text === 'list-ol'" class="htmlList-Ol"></div>
67+
<div v-if="element.text === 'list-ul'" class="htmlList-Ul"></div>
68+
<p v-if="element.text === 'paragraph'" class="htmlP">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
69+
{{this.routes[activeRoute][0].htmlList}}
70+
</div>
5171
<q-menu context-menu>
5272
<q-list color="black" class="menu">
5373
<q-item clickable v-ripple v-close-popup id="layer-item">
@@ -228,7 +248,9 @@ export default {
228248
"activeComponentObj",
229249
"exportAsTypescript",
230250
"noteModalOpen",
231-
"activeRouteDisplay"
251+
"activeRouteDisplay",
252+
'selectedElementList',
253+
'activeLayer',
232254
]),
233255
// used in VueDraggableResizeable component
234256
activeRouteArray() {
@@ -254,7 +276,6 @@ export default {
254276
);
255277
const relatives = [...val]
256278
//also need to filter out any parents
257-
258279
let parentalLineage = [];
259280
findLineage(relatives)
260281
function findLineage(children){
@@ -333,7 +354,8 @@ export default {
333354
if (this.activeComponent !== e.target.id) {
334355
if (e.target.parentElement?.classList.contains('draggable')){
335356
this.setActiveComponent(e.target.parentElement.id)
336-
} else {
357+
}
358+
else if (typeof `${e.target.id}` !== 'number') {
337359
this.setActiveComponent(e.target.id);
338360
}
339361
}
@@ -718,4 +740,112 @@ li:hover{
718740
margin-bottom: 10px;
719741
}
720742
743+
.htmlButton {
744+
position: absolute;
745+
top: 50%;
746+
left: 30%;
747+
height: 30px;
748+
width: 10%;
749+
margin: .5em;
750+
background-color: $secondary;
751+
}
752+
753+
.htmlDiv {
754+
position: absolute;
755+
top: 50%;
756+
left: 5%;
757+
height: 30%;
758+
width: 70%;
759+
margin: .5em;
760+
background-color: $secondary;
761+
border-radius: 1.5%;
762+
}
763+
764+
.htmlFooter{
765+
position: absolute;
766+
width: 100%;
767+
background-color: $primary;
768+
height: 10%;
769+
top: 90%;
770+
z-index: -1;
771+
border-radius: 1.5%;
772+
}
773+
774+
.htmlForm {
775+
background-color: rgba($secondary, .42);
776+
}
777+
778+
.htmlH1{
779+
position: absolute;
780+
background-color: $primary;
781+
color: $menutext;
782+
font-weight: bolder !important;
783+
font-size: 2.5em;
784+
width: 30%;
785+
height: 10%;
786+
top: 45%;
787+
margin-left: 10%;
788+
}
789+
790+
.htmlH2{
791+
background-color: rgba($secondary, .42);
792+
}
793+
794+
.htmlH3{
795+
background-color: rgba($secondary, .42);
796+
}
797+
798+
.htmlH4{
799+
background-color: rgba($secondary, .42);
800+
}
801+
802+
.htmlH5{
803+
background-color: rgba($secondary, .42);
804+
}
805+
806+
.htmlH6{
807+
background-color: rgba($secondary, .42);
808+
}
809+
810+
// .htmlHeader{
811+
// background-color: rgba($secondary, .42);
812+
// }
813+
814+
.htmlImg{
815+
background-color: rgba($secondary, .42);
816+
}
817+
818+
.htmlInput{
819+
background-color: rgba($secondary, .42);
820+
}
821+
822+
.htmlLink{
823+
background-color: rgba($secondary, .42);
824+
}
825+
826+
.htmlList{
827+
background-color: rgba($secondary, .42);
828+
}
829+
830+
.htmlList-ol {
831+
background-color: rgba($secondary, .42);
832+
}
833+
834+
.htmlList-ul{
835+
background-color: rgba($secondary, .42);
836+
}
837+
838+
.htmlParagraph{
839+
background-color: rgba($secondary, .42);
840+
}
841+
842+
.htmlNavbar{
843+
position: absolute;
844+
width: 100%;
845+
background-color: $primary;
846+
height: 10%;
847+
top: 0%;
848+
z-index: -1;
849+
}
850+
721851
</style>

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

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!-- Menu for inputting information into first layer HTML Elements, giving them class, binding, size, location, color -->
2+
3+
<template>
4+
<q-card id="html_element_card" class="no-shadow">
5+
<div>Here is a card</div>
6+
</q-card>
7+
</template>
8+
9+
<script>
10+
import { mapState } from 'vuex'
11+
export default {
12+
data () {
13+
return {
14+
// tab: 'details',
15+
}
16+
},
17+
computed: {
18+
...mapState([
19+
'activeComponent',
20+
])
21+
},
22+
components: {
23+
}
24+
}
25+
</script>
26+
27+
<style lang="scss">
28+
// give html background color of grey
29+
.html-bg {
30+
background-color: $subprimary;
31+
}
32+
#store-cards {
33+
height: 100%;
34+
border-radius: 0px !important;
35+
background-color: $subprimary;
36+
37+
}
38+
.q-tab-panel {
39+
height: calc(100% - 30px);
40+
// matches the code editor bg
41+
background: $subprimary;
42+
padding: 0px;
43+
border-radius: 0px !important;
44+
// changes the length of the tab panels
45+
}
46+
.q-tab-panels {
47+
height: 100%;
48+
border-radius: 0px !important;
49+
}
50+
.q-tabs {
51+
background: $subprimary;
52+
}
53+
54+
.q-tab__content{
55+
padding: 10px 0;
56+
}
57+
</style>

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

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -105,20 +105,7 @@ export default {
105105
h5:["<h5>", "</h5>"],
106106
h6:["<h6>", "</h6>"],
107107
};
108-
//test//
109-
// function writeClass(componentName) {
110-
// if (this.componentMap[componentName]?.classList?.length > 0) {
111-
// let commentStr = '<!--'
112-
// this.componentMap[componentName].classList.forEach((el) => {
113-
// commentStr += "\n"
114-
// commentStr += el;
115-
// })
116-
// commentStr += '\n-->\n\n'
117-
// return commentStr;
118-
// } else {
119-
// return ''
120-
// }
121-
// };
108+
122109
// Helper function that recursively iterates through the given html element's children and their children's children.
123110
// also adds proper indentation to code snippet
124111
function writeNested(childrenArray, indent) {
@@ -168,7 +155,7 @@ export default {
168155
outputStr += ` \n`;
169156
} else {
170157
outputStr +=
171-
htmlElementMap[el.text][0] + htmlElementMap[el.text][1] + "\n";
158+
htmlElementMap[el.text][0] + htmlElementMap[el.text][1] + "\n";
172159
}
173160
}
174161
}
@@ -302,7 +289,7 @@ export default {
302289
});
303290
},
304291
305-
beforeDestroy() {
292+
beforeUnmount() {
306293
window.removeEventListener("resize", this.getWindowHeight);
307294
},
308295
};

0 commit comments

Comments
 (0)