Skip to content

Commit f89ba76

Browse files
JaceCroweJaceCrowe
committed
moveable div, button, H1-6
1 parent 9ed8c3a commit f89ba76

File tree

3 files changed

+217
-118
lines changed

3 files changed

+217
-118
lines changed

‎src/components/Canvas.vue

Lines changed: 106 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,6 @@
2121
class="cssContainerText"
2222
>
2323
CSS Container</p>
24-
25-
2624
<vue-draggable-resizable
2725
class-name="component-box"
2826
v-for="componentData in activeRouteArray"
@@ -53,36 +51,100 @@
5351
z-layer="0"
5452
name="edit_note"
5553
class="compNoteLogo"
56-
@click="handleAddNotes" />
54+
@click="handleAddNotes"
55+
/>
5756

58-
<div v-for="element in this.componentMap[componentData.componentName].htmlList" :key="element.id+ new Date()" :style="[{'background-color': componentData.color}, {'border': '5px'}]">
57+
<div v-for="element in this.componentMap[componentData.componentName].htmlList" :key="element.id+ new Date()">
58+
<div v-if="element.text === 'button'"
59+
class="htmlButton"
60+
:style="[element.x !== 0 ? {'top': element.x} : {'top': '70%'},
61+
element.y !== 0 ? {'left': element.y} : {'left': '60%'},
62+
element.w !== 0 ? {'width': element.w} : {'width': '25%'},
63+
element.h !== 0 ? {'height' : element.h} : {'height' : '10%'},
64+
{'background-color': componentData.color}]">
65+
<p class="innerHtmlText">{{element.text}}</p>
66+
</div>
5967
<div v-if="element.text === 'div'"
60-
class="htmlDiv"
61-
:style="[element.x !== 0 ? {'top': element.x} : {'top': '50%'},
62-
element.y !== 0 ? {'width': element.y} : {'left': '10%'},
63-
element.w !== 0 ? {'width': element.w} : {'width': '80%'},
64-
element.h !== 0 ? {'height' : element.h} : {'height' : '40%'}
65-
]"
66-
>{{this.activeComponent}}</div>
68+
class="htmlDiv"
69+
:style="[element.x !== 0 ? {'top': element.x} : {'top': '50%'},
70+
element.y !== 0 ? {'left': element.y} : {'left': '10%'},
71+
element.w !== 0 ? {'width': element.w} : {'width': '80%'},
72+
element.h !== 0 ? {'height' : element.h} : {'height' : '40%'},
73+
{'background-color': componentData.color}]"
74+
>
75+
<p class="innerHtmlText" style="font-size: 3em">{{element.text}}</p>
76+
</div>
6777
<div v-if="element.text === 'footer'" class="htmlFooter"></div>
78+
<div v-if="element.text === 'h1'"
79+
class="htmlH1"
80+
:style="[element.x !== 0 ? {'top': element.x} : {'top': '10%'},
81+
element.y !== 0 ? {'left': element.y} : {'left': '10%'},
82+
element.w !== 0 ? {'width': element.w} : {'width': '80%'},
83+
element.h !== 0 ? {'height' : element.h} : {'height' : '20%'},
84+
{'background-color': componentData.color}]"
85+
>
86+
<p class="innerHtmlText" style="font-size: 3em">Lorem Ipsum</p>
87+
</div>
88+
<div v-if="element.text === 'h2'"
89+
class="htmlH2"
90+
:style="[element.x !== 0 ? {'top': element.x} : {'top': '15%'},
91+
element.y !== 0 ? {'left': element.y} : {'left': '15%'},
92+
element.w !== 0 ? {'width': element.w} : {'width': '70%'},
93+
element.h !== 0 ? {'height' : element.h} : {'height' : '15%'},
94+
{'background-color': componentData.color}]"
95+
>
96+
<p class="innerHtmlText" style="font-size: 2.5em">dolor sit amet</p>
97+
</div>
98+
<div v-if="element.text === 'h3'"
99+
class="htmlH3"
100+
:style="[element.x !== 0 ? {'top': element.x} : {'top': '18%'},
101+
element.y !== 0 ? {'left': element.y} : {'left': '18%'},
102+
element.w !== 0 ? {'width': element.w} : {'width': '60%'},
103+
element.h !== 0 ? {'height' : element.h} : {'height' : '12%'},
104+
{'background-color': componentData.color}]"
105+
>
106+
<p class="innerHtmlText" style="font-size: 2.2em">consectetur adipiscing elit</p>
107+
</div>
108+
<div v-if="element.text === 'h4'"
109+
class="htmlH4"
110+
:style="[element.x !== 0 ? {'top': element.x} : {'top': '20%'},
111+
element.y !== 0 ? {'left': element.y} : {'left': '20%'},
112+
element.w !== 0 ? {'width': element.w} : {'width': '60%'},
113+
element.h !== 0 ? {'height' : element.h} : {'height' : '10%'},
114+
{'background-color': componentData.color}]"
115+
>
116+
<p class="innerHtmlText" style="font-size: 2em">sed do eiusmod tempor incididunt</p>
117+
</div>
118+
<div v-if="element.text === 'h5'"
119+
class="htmlH5"
120+
:style="[element.x !== 0 ? {'top': element.x} : {'top': '20%'},
121+
element.y !== 0 ? {'left': element.y} : {'left': '20%'},
122+
element.w !== 0 ? {'width': element.w} : {'width': '60%'},
123+
element.h !== 0 ? {'height' : element.h} : {'height' : '10%'},
124+
{'background-color': componentData.color}]"
125+
>
126+
<p class="innerHtmlText" style="font-size: 2em">ut labore et dolore magna aliqua</p>
127+
</div>
128+
<div v-if="element.text === 'h6'"
129+
class="htmlH6"
130+
:style="[element.x !== 0 ? {'top': element.x} : {'top': '20%'},
131+
element.y !== 0 ? {'left': element.y} : {'left': '20%'},
132+
element.w !== 0 ? {'width': element.w} : {'width': '60%'},
133+
element.h !== 0 ? {'height' : element.h} : {'height' : '10%'},
134+
{'background-color': componentData.color}]"
135+
>
136+
<p class="innerHtmlText" style="font-size: 2em">Ut enim ad minim veniam</p>
137+
</div>
68138
<div v-if="element.text === 'navbar'" class="htmlNavbar"></div>
69-
<div v-if="element.text === 'h1'" class="htmlH1">Lorem Ipsum </div>
70139
<div v-if="element.text === 'form'" class="htmlForm"></div>
71-
<div v-if="element.text === 'h2'" class="htmlH2">dolor sit amet</div>
72-
<div v-if="element.text === 'h3'" class="htmlH3">consectetur adipiscing elit</div>
73-
<div v-if="element.text === 'h4'" class="htmlH4">sed do eiusmod tempor incididunt</div>
74-
<div v-if="element.text === 'h5'" class="htmlH5">ut labore et dolore magna aliqua</div>
75-
<div v-if="element.text === 'h6'" class="htmlH6">Ut enim ad minim veniam</div>
76140
<div v-if="element.text === 'header'" class="htmlHeader"></div>
77141
<div v-if="element.text === 'img'" class="htmlImg"></div>
78142
<input v-if="element.text === 'input'" class="htmlInput"/>
79143
<div v-if="element.text === 'list'" class="htmlList"></div>
80144
<div v-if="element.text === 'list-ol'" class="htmlList-Ol"></div>
81145
<div v-if="element.text === 'list-ul'" class="htmlList-Ul"></div>
82146
<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>
83-
<!-- {{this.routes[activeRoute][0].htmlList}} -->
84147
</div>
85-
86148
<q-icon v-if="componentData.componentName === this.activeComponent"
87149
size="25px"
88150
z-layer="0"
@@ -928,33 +990,26 @@ color:black;
928990
929991
.htmlButton {
930992
position: absolute;
931-
top: 50%;
932-
left: 30%;
933-
height: 30px;
934-
width: 10%;
935993
margin: .5em;
936-
background-color: $secondary;
994+
border-style: solid;
995+
border: 2em;
937996
}
938997
939998
.htmlDiv {
940999
position: absolute;
941-
top: 30%;
942-
left: 6%;
943-
height: 30%;
944-
width: 80%;
9451000
margin: .5em;
946-
background-color: $secondary;
9471001
border-radius: 1.5%;
1002+
border-style: solid;
9481003
}
9491004
9501005
.htmlFooter{
9511006
position: absolute;
9521007
width: 100%;
953-
background-color: $primary;
9541008
height: 10%;
9551009
top: 90%;
9561010
z-index: -1;
9571011
border-radius: 1.5%;
1012+
background-color: $primary;
9581013
}
9591014
9601015
.htmlForm {
@@ -963,34 +1018,38 @@ color:black;
9631018
9641019
.htmlH1{
9651020
position: absolute;
966-
background-color: $primary;
9671021
color: $menutext;
9681022
font-weight: bolder !important;
969-
font-size: 2.5em;
970-
width: 30%;
971-
height: 10%;
972-
top: 45%;
973-
margin-left: 10%;
9741023
}
9751024
9761025
.htmlH2{
977-
background-color: rgba($secondary, .42);
1026+
position: absolute;
1027+
color: $menutext;
1028+
font-weight: bolder !important;
9781029
}
9791030
9801031
.htmlH3{
981-
background-color: rgba($secondary, .42);
1032+
position: absolute;
1033+
color: $menutext;
1034+
font-weight: bolder !important;
9821035
}
9831036
9841037
.htmlH4{
985-
background-color: rgba($secondary, .42);
1038+
position: absolute;
1039+
color: $menutext;
1040+
font-weight: bolder !important;
9861041
}
9871042
9881043
.htmlH5{
989-
background-color: rgba($secondary, .42);
1044+
position: absolute;
1045+
color: $menutext;
1046+
font-weight: bolder !important;
9901047
}
9911048
9921049
.htmlH6{
993-
background-color: rgba($secondary, .42);
1050+
position: absolute;
1051+
color: $menutext;
1052+
font-weight: bolder !important;
9941053
}
9951054
9961055
// .htmlHeader{
@@ -1025,6 +1084,12 @@ color:black;
10251084
background-color: rgba($secondary, .42);
10261085
}
10271086
1087+
.innerHtmlText {
1088+
position: absolute;
1089+
text-align: center;
1090+
opacity: 0.5;
1091+
}
1092+
10281093
.htmlNavbar{
10291094
position: absolute;
10301095
width: 100%;
@@ -1045,7 +1110,6 @@ color:black;
10451110
white-space: nowrap;
10461111
}
10471112
1048-
10491113
.colorPicker {
10501114
color: black;
10511115
background: rgba(177, 171, 171, 0.562);

0 commit comments

Comments
 (0)