Skip to content

Commit 9ed8c3a

Browse files
JaceCroweJaceCrowe
committed
added ability to change height, width, distance from top and left in the InputHTMLMenu.Vue component, along with proper state, mutations, types, and actions
1 parent c015270 commit 9ed8c3a

File tree

9 files changed

+257
-76
lines changed

9 files changed

+257
-76
lines changed

‎src/components/Canvas.vue

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -55,14 +55,15 @@
5555
class="compNoteLogo"
5656
@click="handleAddNotes" />
5757

58-
<!-- <q-icon "
59-
size="30px"
60-
z-layer="0"
61-
name="edit_note"
62-
class="compNoteLogoEmpty"
63-
@click="handleAddNotes" />
64-
<div v-for="element in this.componentMap[componentData.componentName].htmlList" :key="element.id+ new Date()">
65-
<div v-if="element.text === 'div'" class="htmlDiv"></div>
58+
<div v-for="element in this.componentMap[componentData.componentName].htmlList" :key="element.id+ new Date()" :style="[{'background-color': componentData.color}, {'border': '5px'}]">
59+
<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>
6667
<div v-if="element.text === 'footer'" class="htmlFooter"></div>
6768
<div v-if="element.text === 'navbar'" class="htmlNavbar"></div>
6869
<div v-if="element.text === 'h1'" class="htmlH1">Lorem Ipsum </div>
@@ -79,9 +80,8 @@
7980
<div v-if="element.text === 'list-ol'" class="htmlList-Ol"></div>
8081
<div v-if="element.text === 'list-ul'" class="htmlList-Ul"></div>
8182
<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>
82-
{{this.routes[activeRoute][0].htmlList}}
83+
<!-- {{this.routes[activeRoute][0].htmlList}} -->
8384
</div>
84-
@click="handleAddNotes" /> -->
8585

8686
<q-icon v-if="componentData.componentName === this.activeComponent"
8787
size="25px"
@@ -310,20 +310,20 @@ export default {
310310
},
311311
mounted() {
312312
// when component is mounted, add ability to delete
313-
window.addEventListener("keyup", (event) => {
314-
if (event.key === "Backspace") {
315-
if (this.activeComponent !== '' && this.noteModalOpen === false) {
316-
this.$store.dispatch("deleteActiveComponent");
317-
}
318-
}
319-
});
320-
window.addEventListener("keyup", (event) => {
321-
if (event.key === "Delete") {
322-
if (this.activeComponent !== '' && this.noteModalOpen === false) {
323-
this.$store.dispatch("deleteActiveComponent");
324-
}
325-
}
326-
});
313+
// window.addEventListener("keyup", (event) => {
314+
// if (event.key === "Backspace") {
315+
// if (this.activeComponent !== '' && this.noteModalOpen === false) {
316+
// this.$store.dispatch("deleteActiveComponent");
317+
// }
318+
// }
319+
// });
320+
// window.addEventListener("keyup", (event) => {
321+
// if (event.key === "Delete") {
322+
// if (this.activeComponent !== '' && this.noteModalOpen === false) {
323+
// this.$store.dispatch("deleteActiveComponent");
324+
// }
325+
// }
326+
// });
327327
// listener for the copy
328328
window.addEventListener("copy", () => {
329329
// if there is an activeComponent, copy info to state using dispatch
@@ -938,10 +938,10 @@ color:black;
938938
939939
.htmlDiv {
940940
position: absolute;
941-
top: 50%;
942-
left: 5%;
941+
top: 30%;
942+
left: 6%;
943943
height: 30%;
944-
width: 70%;
944+
width: 80%;
945945
margin: .5em;
946946
background-color: $secondary;
947947
border-radius: 1.5%;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ export default {
6969
VueMultiselect,
7070
},
7171
computed: {
72-
...mapState(["selectedActions", "userActions", "componentMap", "activeComponent"]),
72+
...mapState(["selectedActions", "userActions", "componentMap", "activeComponent",]),
7373
actionOptions() {
7474
return this.userActions;
7575
},

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export default {
2525
components: {
2626
CreateMenu,
2727
UpdateMenu,
28-
}
28+
},
2929
}
3030
</script>
3131

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

Lines changed: 133 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,153 @@
11
<!-- Menu for inputting information into first layer HTML Elements, giving them class, binding, size, location, color -->
22

3-
<template>
4-
<q-card id="html_element_card" class="no-shadow">
5-
<div>Here is a card</div>
6-
</q-card>
3+
<template >
4+
<div id="html_element_card" class="no-shadow">
5+
<h1>Here is a card</h1>
6+
<div class="AttributeBox">
7+
<p class="title">Add attributes to: {{ this.activeComponent }}</p>
8+
<div class="AttributeContainer" v-for="element in this.componentMap[this.activeComponent].htmlList"
9+
:key="element.id + Date.now()">
10+
<p v-if="element.id === this.activeHTML">Your class is - {{ element.class }}</p>
11+
</div>
12+
<div class="formBox">
13+
<q-form autofocus v-on:submit.prevent="submitClass">
14+
<p class="title">Add Class Name:</p>
15+
<q-input label="Add your class here" filled dark autofocus true hide-bottom-space v-model="classText"
16+
@keyup.enter="submitClass"></q-input>
17+
<q-btn id="comp-btn" class="sidebar-btn" color="secondary" label="Submit Attribute"
18+
:disable="classText.length > 0 ? false : true" @click="submitClass(classText, this.activeHTML)" />
19+
20+
<p class="title">Change Height:</p>
21+
<q-input label="Adjust height (0-100)" filled dark autofocus true hide-bottom-space v-model="heightText"
22+
@keyup.enter="submitHeight"></q-input>
23+
<q-btn id="comp-btn" class="sidebar-btn" color="secondary" label="Submit Height"
24+
:disable="heightText.length > 0 ? false : true" @click="submitHeight(heightText, this.activeHTML)" />
25+
26+
<p class="title">Change Width:</p>
27+
<q-input label="Adjust width (0-100)" filled dark autofocus true hide-bottom-space v-model="widthText"
28+
@keyup.enter="submitWidth"></q-input>
29+
<q-btn id="comp-btn" class="sidebar-btn" color="secondary" label="Submit Width"
30+
:disable="widthText.length > 0 ? false : true" @click="submitWidth(widthText, this.activeHTML)" />
31+
32+
<p class="title">Change Elevation:</p>
33+
<q-input label="Adjust Elevation (0-100)" filled dark autofocus true hide-bottom-space v-model="topText"
34+
@keyup.enter="submitTop"></q-input>
35+
<q-btn id="comp-btn" class="sidebar-btn" color="secondary" label="Submit Height"
36+
:disable="topText.length > 0 ? false : true" @click="submitTop(topText, this.activeHTML)" />
37+
38+
<p class="title">Change Left Distance:</p>
39+
<q-input label="Adjust Distance (0-100)" filled dark autofocus true hide-bottom-space v-model="leftText"
40+
@keyup.enter="submitLeft"></q-input>
41+
<q-btn id="comp-btn" class="sidebar-btn" color="secondary" label="Submit Left"
42+
:disable="leftText.length > 0 ? false : true" @click="submitLeft(leftText, this.activeHTML)" />
43+
<q-btn label="Close" @click="this.openAttributeModal" />
44+
</q-form>
45+
</div>
46+
</div>
47+
</div>
748
</template>
849

950
<script>
10-
import { mapState } from 'vuex'
51+
import { mapState, mapActions } from 'vuex'
1152
export default {
1253
data () {
1354
return {
55+
attributeModal : "false",
56+
classText: '',
57+
heightText: '30',
58+
widthText: '30',
59+
topText: '30',
60+
leftText: '30',
61+
62+
1463
// tab: 'details',
1564
}
1665
},
1766
computed: {
1867
...mapState([
1968
'activeComponent',
69+
'selectedElementList',
70+
'componentMap',
71+
'activeComponent',
72+
'activeHTML',
73+
'activeLayer',
74+
'attributeModalOpen'
2075
])
2176
},
2277
components: {
78+
},
79+
methods: {
80+
...mapActions([
81+
'setActiveHTML',
82+
'setActiveLayer',
83+
'openAttributeModal',
84+
'addActiveComponentClass',
85+
'addActiveComponentHeight',
86+
'addActiveComponentWidth',
87+
'addActiveComponentTop',
88+
'addActiveComponentLeft',
89+
]),
90+
submitClass(element, idNum) {
91+
if (element === '') {
92+
return;
93+
}
94+
let payload = {
95+
class: element,
96+
id: idNum
97+
}
98+
this.addActiveComponentClass(payload);
99+
this.classText = '';
100+
},
101+
submitHeight(element, idNum) {
102+
if (element === '') {
103+
return;
104+
}
105+
let payload = {
106+
height: element,
107+
id: idNum
108+
}
109+
this.addActiveComponentHeight(payload);
110+
this.classText = '';
111+
},
112+
submitWidth(element, idNum) {
113+
if (element === '') {
114+
return;
115+
}
116+
let payload = {
117+
width: element,
118+
id: idNum
119+
}
120+
this.addActiveComponentWidth(payload);
121+
this.widthText = '';
122+
},
123+
submitTop(element, idNum) {
124+
if (element === '') {
125+
return;
126+
}
127+
let payload = {
128+
top: element,
129+
id: idNum
130+
}
131+
this.addActiveComponentTop(payload);
132+
this.topText = '';
133+
},
134+
submitLeft(element, idNum) {
135+
if (element === '') {
136+
return;
137+
}
138+
let payload = {
139+
left: element,
140+
id: idNum
141+
}
142+
this.addActiveComponentLeft(payload);
143+
this.leftText = '';
144+
},
145+
146+
},
147+
watch: {
148+
attributeModalOpen() {
149+
this.attributeModal = this.attributeModalOpen;
150+
},
23151
}
24152
}
25153
</script>

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

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ Description:
88
<template>
99
<div class="edit-component-div">
1010
<div>
11+
<InputHTMLMenu v-model="attributeModal" v-if="attributeModal === true"/>
1112
<button class="menu-link" @click="resetActiveComponent"><i class="fa fa-arrow-left" aria-hidden="true"></i>&nbsp; &nbsp; Create Component Menu</button>
1213
<q-card class="no-shadow" dark flat>
1314
<q-expansion-item default-opened label="Update Component">
@@ -134,6 +135,8 @@ import PropsSubMenu from "./PropsSubMenu.vue";
134135
import StateSubMenu from "./StateSubMenu.vue";
135136
import ActionsSubMenu from "./ActionsSubMenu.vue";
136137
import AttributesSubMenu from "./AttributesSubMenu.vue";
138+
import InputHTMLMenu from './InputHTMLMenu.vue'
139+
137140
138141
const cloneDeep = require("lodash.clonedeep");
139142
const { fs, ipcRenderer } = window;
@@ -144,6 +147,7 @@ export default {
144147
value: "",
145148
newName: "",
146149
childrenSelected: [],
150+
attributeModal: false,
147151
};
148152
},
149153
components: {
@@ -153,7 +157,8 @@ export default {
153157
PropsSubMenu,
154158
StateSubMenu,
155159
ActionsSubMenu,
156-
AttributesSubMenu
160+
AttributesSubMenu,
161+
InputHTMLMenu,
157162
},
158163
computed: {
159164
...mapState([
@@ -163,6 +168,7 @@ export default {
163168
"activeComponentObj",
164169
"componentMap",
165170
"exportAsTypescript",
171+
'attributeModalOpen',
166172
]),
167173
168174
activeRouteDisplay() {
@@ -224,7 +230,8 @@ export default {
224230
"addToSelectedElementList",
225231
"addToComponentElementList",
226232
"addNestedHTML",
227-
"addNestedNoActive"
233+
"addNestedNoActive",
234+
"openAttributeModal",
228235
]),
229236
useExportComponentBound(){
230237
useExportComponent.bind(this)();
@@ -294,6 +301,11 @@ export default {
294301
this.setActiveComponent(this.activeComponent);
295302
},
296303
},
304+
watch: {
305+
attributeModalOpen() {
306+
this.attributeModal = this.attributeModalOpen;
307+
},
308+
}
297309
};
298310
</script>
299311

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

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -60,13 +60,10 @@ Description:
6060
<i class="fas fa fa-trash fa-md" @click.self="deleteElement([element[1], element[2]])"></i>
6161
</div>
6262
</div> -->
63-
6463
<!-- attribute pop-up -->
65-
<q-dialog v-model="attributeModal">
66-
<!-- @update:model-value="setActiveElement" -->
64+
<!-- <q-dialog v-model="attributeModal">
6765
<div class="AttributeBox">
6866
<p class="title">Add attributes to: {{ this.activeComponent }}</p>
69-
<!--attribute child-->
7067
<div class="AttributeContainer" v-for="element in this.componentMap[this.activeComponent].htmlList"
7168
:key="element.id + Date.now()">
7269
<p v-if="element.id === this.activeHTML">Your class is - {{ element.class }}</p>
@@ -83,7 +80,7 @@ Description:
8380
</q-form>
8481
</div>
8582
</div>
86-
</q-dialog>
83+
</q-dialog> -->
8784
</section>
8885
</template>
8986

‎src/store/actions.js

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,12 +48,20 @@ const actions = {
4848
commit(types.DELETE_ACTIVE_COMPONENT_CLASS, payload)
4949
},
5050

51-
[types.updateHTMLElementPosition]: ({ commit }, payload) => {
52-
commit(types.UPDATE_HTMLELEMENT_POSITION, payload);
51+
[types.addActiveComponentHeight]: ({ commit }, payload) => {
52+
commit(types.ADD_ACTIVE_COMPONENT_HEIGHT, payload);
5353
},
5454

55-
[types.updateHTMLElementSize]: ({ commit }, payload) => {
56-
commit(types.UPDATE_HTMLELEMENT_SIZE, payload);
55+
[types.addActiveComponentWidth]: ({ commit }, payload) => {
56+
commit(types.ADD_ACTIVE_COMPONENT_WIDTH, payload);
57+
},
58+
59+
[types.addActiveComponentTop]: ({ commit }, payload) => {
60+
commit(types.ADD_ACTIVE_COMPONENT_TOP, payload);
61+
},
62+
63+
[types.addActiveComponentLeft]: ({ commit }, payload) => {
64+
commit(types.ADD_ACTIVE_COMPONENT_LEFT, payload);
5765
},
5866
//
5967
[types.registerComponent]: ({ state, commit }, payload) => {

0 commit comments

Comments
 (0)