Skip to content

Commit 5e34cc6

Browse files
JaceCroweJaceCrowe
committed
html canvas paragraph, ulList, oList, form, img
1 parent f89ba76 commit 5e34cc6

File tree

2 files changed

+71
-48
lines changed

2 files changed

+71
-48
lines changed

‎src/components/Canvas.vue

Lines changed: 68 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@
5353
class="compNoteLogo"
5454
@click="handleAddNotes"
5555
/>
56-
56+
<!-- Rendering HTML Elements for each Component -->
5757
<div v-for="element in this.componentMap[componentData.componentName].htmlList" :key="element.id+ new Date()">
5858
<div v-if="element.text === 'button'"
5959
class="htmlButton"
@@ -76,7 +76,7 @@
7676
</div>
7777
<div v-if="element.text === 'footer'" class="htmlFooter"></div>
7878
<div v-if="element.text === 'h1'"
79-
class="htmlH1"
79+
class="htmlHead"
8080
:style="[element.x !== 0 ? {'top': element.x} : {'top': '10%'},
8181
element.y !== 0 ? {'left': element.y} : {'left': '10%'},
8282
element.w !== 0 ? {'width': element.w} : {'width': '80%'},
@@ -86,7 +86,7 @@
8686
<p class="innerHtmlText" style="font-size: 3em">Lorem Ipsum</p>
8787
</div>
8888
<div v-if="element.text === 'h2'"
89-
class="htmlH2"
89+
class="htmlHead"
9090
:style="[element.x !== 0 ? {'top': element.x} : {'top': '15%'},
9191
element.y !== 0 ? {'left': element.y} : {'left': '15%'},
9292
element.w !== 0 ? {'width': element.w} : {'width': '70%'},
@@ -96,7 +96,7 @@
9696
<p class="innerHtmlText" style="font-size: 2.5em">dolor sit amet</p>
9797
</div>
9898
<div v-if="element.text === 'h3'"
99-
class="htmlH3"
99+
class="htmlHead"
100100
:style="[element.x !== 0 ? {'top': element.x} : {'top': '18%'},
101101
element.y !== 0 ? {'left': element.y} : {'left': '18%'},
102102
element.w !== 0 ? {'width': element.w} : {'width': '60%'},
@@ -106,7 +106,7 @@
106106
<p class="innerHtmlText" style="font-size: 2.2em">consectetur adipiscing elit</p>
107107
</div>
108108
<div v-if="element.text === 'h4'"
109-
class="htmlH4"
109+
class="htmlHead"
110110
:style="[element.x !== 0 ? {'top': element.x} : {'top': '20%'},
111111
element.y !== 0 ? {'left': element.y} : {'left': '20%'},
112112
element.w !== 0 ? {'width': element.w} : {'width': '60%'},
@@ -116,7 +116,7 @@
116116
<p class="innerHtmlText" style="font-size: 2em">sed do eiusmod tempor incididunt</p>
117117
</div>
118118
<div v-if="element.text === 'h5'"
119-
class="htmlH5"
119+
class="htmlHead"
120120
:style="[element.x !== 0 ? {'top': element.x} : {'top': '20%'},
121121
element.y !== 0 ? {'left': element.y} : {'left': '20%'},
122122
element.w !== 0 ? {'width': element.w} : {'width': '60%'},
@@ -126,7 +126,7 @@
126126
<p class="innerHtmlText" style="font-size: 2em">ut labore et dolore magna aliqua</p>
127127
</div>
128128
<div v-if="element.text === 'h6'"
129-
class="htmlH6"
129+
class="htmlHead"
130130
:style="[element.x !== 0 ? {'top': element.x} : {'top': '20%'},
131131
element.y !== 0 ? {'left': element.y} : {'left': '20%'},
132132
element.w !== 0 ? {'width': element.w} : {'width': '60%'},
@@ -136,14 +136,57 @@
136136
<p class="innerHtmlText" style="font-size: 2em">Ut enim ad minim veniam</p>
137137
</div>
138138
<div v-if="element.text === 'navbar'" class="htmlNavbar"></div>
139-
<div v-if="element.text === 'form'" class="htmlForm"></div>
139+
<div v-if="element.text === 'form'"
140+
class="htmlForm"
141+
:style="[element.x !== 0 ? {'top': element.x} : {'top': '50%'},
142+
element.y !== 0 ? {'left': element.y} : {'left': '10%'},
143+
element.w !== 0 ? {'width': element.w} : {'width': '80%'},
144+
element.h !== 0 ? {'height' : element.h} : {'height' : '40%'},
145+
{'background-color': componentData.color}]"
146+
>
147+
<p class="innerHtmlText" style="font-size: 3em">{{element.text}}</p>
148+
</div>
140149
<div v-if="element.text === 'header'" class="htmlHeader"></div>
141-
<div v-if="element.text === 'img'" class="htmlImg"></div>
150+
<div v-if="element.text === 'img'"
151+
class="htmlImg"
152+
:style="[element.x !== 0 ? {'top': element.x} : {'top': '50%'},
153+
element.y !== 0 ? {'left': element.y} : {'left': '10%'},
154+
element.w !== 0 ? {'width': element.w} : {'width': '80%'},
155+
element.h !== 0 ? {'height' : element.h} : {'height' : '40%'},
156+
{'background-color': componentData.color}]"
157+
>
158+
<p class="innerHtmlText" style="font-size: 3em">{{element.text}}</p>
159+
</div>
142160
<input v-if="element.text === 'input'" class="htmlInput"/>
143161
<div v-if="element.text === 'list'" class="htmlList"></div>
144-
<div v-if="element.text === 'list-ol'" class="htmlList-Ol"></div>
145-
<div v-if="element.text === 'list-ul'" class="htmlList-Ul"></div>
146-
<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>
162+
<div v-if="element.text === 'list-ol'"
163+
class="htmlList-Ol"
164+
:style="[element.x !== 0 ? {'top': element.x} : {'top': '50%'},
165+
element.y !== 0 ? {'left': element.y} : {'left': '10%'},
166+
element.w !== 0 ? {'width': element.w} : {'width': '80%'},
167+
element.h !== 0 ? {'height' : element.h} : {'height' : '40%'},
168+
{'background-color': componentData.color}]"
169+
>
170+
</div>
171+
<div v-if="element.text === 'list-ul'"
172+
class="htmlList-Ul"
173+
:style="[element.x !== 0 ? {'top': element.x} : {'top': '50%'},
174+
element.y !== 0 ? {'left': element.y} : {'left': '10%'},
175+
element.w !== 0 ? {'width': element.w} : {'width': '80%'},
176+
element.h !== 0 ? {'height' : element.h} : {'height' : '40%'},
177+
{'background-color': componentData.color}]"
178+
>
179+
</div>
180+
<div v-if="element.text === 'paragraph'"
181+
class="htmlParagraph"
182+
:style="[element.x !== 0 ? {'top': element.x} : {'top': '50%'},
183+
element.y !== 0 ? {'left': element.y} : {'left': '10%'},
184+
element.w !== 0 ? {'width': element.w} : {'width': '80%'},
185+
element.h !== 0 ? {'height' : element.h} : {'height' : '40%'},
186+
{'background-color': componentData.color}]"
187+
>
188+
<p>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>
189+
</div>
147190
</div>
148191
<q-icon v-if="componentData.componentName === this.activeComponent"
149192
size="25px"
@@ -1016,31 +1059,7 @@ color:black;
10161059
background-color: rgba($secondary, .42);
10171060
}
10181061
1019-
.htmlH1{
1020-
position: absolute;
1021-
color: $menutext;
1022-
font-weight: bolder !important;
1023-
}
1024-
1025-
.htmlH2{
1026-
position: absolute;
1027-
color: $menutext;
1028-
font-weight: bolder !important;
1029-
}
1030-
1031-
.htmlH3{
1032-
position: absolute;
1033-
color: $menutext;
1034-
font-weight: bolder !important;
1035-
}
1036-
1037-
.htmlH4{
1038-
position: absolute;
1039-
color: $menutext;
1040-
font-weight: bolder !important;
1041-
}
1042-
1043-
.htmlH5{
1062+
.htmlHead{
10441063
position: absolute;
10451064
color: $menutext;
10461065
font-weight: bolder !important;
@@ -1052,36 +1071,38 @@ color:black;
10521071
font-weight: bolder !important;
10531072
}
10541073
1055-
// .htmlHeader{
1056-
// background-color: rgba($secondary, .42);
1057-
// }
1058-
10591074
.htmlImg{
1060-
background-color: rgba($secondary, .42);
1075+
position: absolute;
1076+
color: $menutext;
10611077
}
10621078
10631079
.htmlInput{
10641080
background-color: rgba($secondary, .42);
10651081
}
10661082
10671083
.htmlLink{
1068-
background-color: rgba($secondary, .42);
1084+
position: absolute;
1085+
color: blue;
10691086
}
10701087
10711088
.htmlList{
1072-
background-color: rgba($secondary, .42);
1089+
position: absolute;
1090+
color: $menutext;
10731091
}
10741092
10751093
.htmlList-ol {
1076-
background-color: rgba($secondary, .42);
1094+
position: absolute;
1095+
color: $menutext;
10771096
}
10781097
10791098
.htmlList-ul{
1080-
background-color: rgba($secondary, .42);
1099+
position: absolute;
1100+
color: $menutext;
10811101
}
10821102
10831103
.htmlParagraph{
1084-
background-color: rgba($secondary, .42);
1104+
position: absolute;
1105+
color: $menutext;
10851106
}
10861107
10871108
.innerHtmlText {

‎src/store/mutations.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -378,6 +378,7 @@ const mutations = {
378378
z:0,
379379
w:0,
380380
h:0,
381+
note: '',
381382
});
382383
},
383384

@@ -396,6 +397,7 @@ const mutations = {
396397
z:0,
397398
w:0,
398399
h:0,
400+
note: '',
399401
});
400402
},
401403

@@ -410,7 +412,7 @@ const mutations = {
410412
z:0,
411413
w:0,
412414
h:0,
413-
415+
note: '',
414416
});
415417
},
416418

0 commit comments

Comments
 (0)