Skip to content

Commit 60a9223

Browse files
JaceCroweJaceCrowe
committed
fixed bug of HTML element edit card opening for un-editable elements i.e. footer, navbar, other
1 parent 4a79f9c commit 60a9223

File tree

3 files changed

+101
-121
lines changed

3 files changed

+101
-121
lines changed

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

Lines changed: 100 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,111 +1,117 @@
1-
<!-- Menu for inputting information into first layer HTML Elements, giving them class, binding, size, location, color -->
1+
<!-- Menu for inputting information into first layer HTML Elements, giving them class, binding, size, location, and inner text-->
22

33
<template >
44
<div class="AttributeBox">
55
<div class="AttributeContainer" v-for="element in this.componentMap[this.activeComponent].htmlList"
66
:key="element.id + Date.now()">
77
<p v-if="element.id === this.activeHTML" class="title">Your class {{ element.class.length !== 0 ? 'is ' + element.class : 'has not been stated yet' }}</p>
88
</div>
9-
<div class="formBox">
10-
<q-form autofocus v-on:submit.prevent="submitClass">
11-
<q-input label="Add/Change your class name" filled dark autofocus true hide-bottom-space v-model="classText"
12-
@keyup.enter="submitClass">
13-
<i id="comp-btn" class="fa-solid fa-right-to-bracket"
14-
:disable="classText.length > 0 ? false : true" @click.self="submitClass(classText, this.activeHTML)"></i>
15-
</q-input>
16-
<q-input label="Add Inner Text" filled dark autofocus true hide-bottom-space v-model="noteText" @keyup.enter="submitNote">
17-
<i class="fa-solid fa-right-to-bracket" color="secondary" label="Submit Note"
18-
:disable="noteText.length > 0 ? false : true" @click.self="submitNote(noteText, this.activeHTML)">
19-
</i>
20-
</q-input>
21-
<p class="title">Adjust Height and Elevation:</p>
22-
<q-slider
23-
v-model="heightText"
24-
:min="0"
25-
:max="100"
26-
tabindex="element.h"
27-
vertical
28-
label
29-
label-always
30-
:label-value="'Height:' + heightText"
31-
inner-track-color="primary"
32-
color="secondary"
33-
@change="submitHeight(heightText, this.activeHTML)"
34-
@update:model-value="submitHeight(heightText, this.activeHTML)"
35-
style="float: left; margin-left: 5% "
36-
/>
37-
<q-slider
38-
v-model="topText"
39-
:min="0"
40-
:max="100"
41-
vertical
42-
label
43-
label-always
44-
:label-value="'Elevation:' + topText"
45-
inner-track-color="primary"
46-
color="secondary"
47-
@change="submitTop(topText, this.activeHTML)"
48-
@update:model-value="submitTop(topText, this.activeHTML)"
49-
style="float: left; margin-left: 35%"
50-
/>
51-
<q-slider
52-
v-model="widthText"
53-
:min="0"
54-
:max="100"
55-
label
56-
label-always
57-
:label-value="'Width:' + widthText"
58-
inner-track-color="primary"
59-
color="secondary"
60-
@change="submitWidth(widthText, this.activeHTML)"
61-
@update:model-value="submitWidth(widthText, this.activeHTML)"
62-
style="margin-top: 20%"
63-
/>
64-
<q-slider
65-
v-model="leftText"
66-
:min="0"
67-
:max="100"
68-
label
69-
label-always
70-
:label-value="'Position:' + leftText"
71-
inner-track-color="primary"
72-
color="secondary"
73-
@change="submitLeft(leftText, this.activeHTML)"
74-
@update:model-value="submitLeft(leftText, this.activeHTML)"
75-
style="margin-top: 20%"
76-
/>
77-
<q-input label="Adjust height (0-100)" filled dark autofocus true hide-bottom-space v-model="heightText" @keyup.enter="submitHeight">
78-
<i class="fa-solid fa-right-to-bracket" color="secondary" label="Submit Height"
79-
@click.self="submitHeight(heightText, this.activeHTML)">
80-
</i>
81-
</q-input>
82-
<q-input label="Adjust width (0-100)" filled dark autofocus true hide-bottom-space v-model="widthText" @keyup.enter="submitWidth">
83-
<i class="fa-solid fa-right-to-bracket" color="secondary" label="Submit Width"
84-
@click.self="submitWidth(widthText, this.activeHTML)">
85-
</i>
86-
</q-input>
87-
<q-input label="Adjust Elevation (0-100)" filled dark autofocus true hide-bottom-space v-model="topText" @keyup.enter="submitTop">
88-
<i class="fa-solid fa-right-to-bracket" color="secondary" label="Submit Height"
89-
@click.self="submitTop(topText, this.activeHTML)">
90-
</i>
91-
</q-input>
92-
<q-input label="Adjust Distance (0-100)" filled dark autofocus true hide-bottom-space v-model="leftText" @keyup.enter="submitLeft">
93-
<i class="fa-solid fa-right-to-bracket" color="secondary" label="Submit Position"
94-
@click="submitLeft(leftText, this.activeHTML)">
95-
</i>
96-
</q-input>
97-
<q-btn label="Close HTML Element" class="closeBtn" @click="closeMenu({text: 'reset', id: 'reset' })" />
98-
<!-- setParentLayer -->
99-
</q-form>
9+
<div class="formBox">
10+
<q-form autofocus v-on:submit.prevent="submitClass">
11+
<q-input label="Add/Change your class name" filled dark autofocus true hide-bottom-space v-model="classText"
12+
@keyup.enter="submitClass">
13+
<i id="comp-btn" class="fa-solid fa-right-to-bracket"
14+
:disable="classText.length > 0 ? false : true" @click.self="submitClass(classText, this.activeHTML)"></i>
15+
</q-input>
16+
<div class="AttributeContainer" v-for="element in this.componentMap[this.activeComponent].htmlList"
17+
:key="element.id + Date.now()">
18+
<div v-if="exceptions.includes(element.text) && element.id === this.activeHTML">
19+
<q-input label="Add Inner Text" filled dark autofocus true hide-bottom-space v-model="noteText" @keyup.enter="submitNote">
20+
<i class="fa-solid fa-right-to-bracket" color="secondary" label="Submit Note"
21+
:disable="noteText.length > 0 ? false : true" @click.self="submitNote(noteText, this.activeHTML)">
22+
</i>
23+
</q-input>
24+
<p class="title">Adjust Height and Elevation:</p>
25+
<q-slider
26+
v-model="heightText"
27+
:min="0"
28+
:max="100"
29+
tabindex="element.h"
30+
vertical
31+
label
32+
label-always
33+
:label-value="'Height:' + heightText"
34+
inner-track-color="primary"
35+
color="secondary"
36+
@change="submitHeight(heightText, this.activeHTML)"
37+
@update:model-value="submitHeight(heightText, this.activeHTML)"
38+
style="float: left; margin-left: 5% "
39+
/>
40+
<q-slider
41+
v-model="topText"
42+
:min="0"
43+
:max="100"
44+
vertical
45+
label
46+
label-always
47+
:label-value="'Elevation:' + topText"
48+
inner-track-color="primary"
49+
color="secondary"
50+
@change="submitTop(topText, this.activeHTML)"
51+
@update:model-value="submitTop(topText, this.activeHTML)"
52+
style="float: left; margin-left: 35%"
53+
/>
54+
<q-slider
55+
v-model="widthText"
56+
:min="0"
57+
:max="100"
58+
label
59+
label-always
60+
:label-value="'Width:' + widthText"
61+
inner-track-color="primary"
62+
color="secondary"
63+
@change="submitWidth(widthText, this.activeHTML)"
64+
@update:model-value="submitWidth(widthText, this.activeHTML)"
65+
style="margin-top: 20%"
66+
/>
67+
<q-slider
68+
v-model="leftText"
69+
:min="0"
70+
:max="100"
71+
label
72+
label-always
73+
:label-value="'Position:' + leftText"
74+
inner-track-color="primary"
75+
color="secondary"
76+
@change="submitLeft(leftText, this.activeHTML)"
77+
@update:model-value="submitLeft(leftText, this.activeHTML)"
78+
style="margin-top: 20%"
79+
/>
80+
<q-input label="Adjust height (0-100)" filled dark autofocus true hide-bottom-space v-model="heightText" @keyup.enter="submitHeight">
81+
<i class="fa-solid fa-right-to-bracket" color="secondary" label="Submit Height"
82+
@click.self="submitHeight(heightText, this.activeHTML)">
83+
</i>
84+
</q-input>
85+
<q-input label="Adjust width (0-100)" filled dark autofocus true hide-bottom-space v-model="widthText" @keyup.enter="submitWidth">
86+
<i class="fa-solid fa-right-to-bracket" color="secondary" label="Submit Width"
87+
@click.self="submitWidth(widthText, this.activeHTML)">
88+
</i>
89+
</q-input>
90+
<q-input label="Adjust Elevation (0-100)" filled dark autofocus true hide-bottom-space v-model="topText" @keyup.enter="submitTop">
91+
<i class="fa-solid fa-right-to-bracket" color="secondary" label="Submit Height"
92+
@click.self="submitTop(topText, this.activeHTML)">
93+
</i>
94+
</q-input>
95+
<q-input label="Adjust Distance (0-100)" filled dark autofocus true hide-bottom-space v-model="leftText" @keyup.enter="submitLeft">
96+
<i class="fa-solid fa-right-to-bracket" color="secondary" label="Submit Position"
97+
@click="submitLeft(leftText, this.activeHTML)">
98+
</i>
99+
</q-input>
100+
</div>
101+
</div>
102+
<q-btn label="Close HTML Element" class="closeBtn" @click="closeMenu({text: 'reset', id: 'reset' })" />
103+
</q-form>
104+
</div>
100105
</div>
101-
</div>
106+
102107
</template>
103108

104109
<script>
105110
import { mapState, mapActions } from 'vuex'
106111
export default {
107112
data () {
108113
return {
114+
exceptions: ['div','button','form','img','list','paragraph','list-ol','list-ul','input','h1','h2','h3','h4','h5','h6'],
109115
attributeModal : "false",
110116
classText: '',
111117
heightText: '',
@@ -142,7 +148,7 @@ export default {
142148
'clearActiveHTML'
143149
]),
144150
submitClass(element, idNum) {
145-
console.log(this.activeLayer)
151+
console.log(this.componentMap)
146152
if (element === '') {
147153
return;
148154
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ Description:
6464
</div>
6565
<br />
6666
</q-expansion-item>
67-
<InputHTMLMenu v-model="attributeModal" v-if="attributeModal === true && this.activeLayer.lineage.length === 0" class="htmlElement-selected"/>
67+
<InputHTMLMenu v-model="attributeModal" v-if="attributeModal === true && this.activeLayer.lineage.length === 0 " class="htmlElement-selected"/>
6868
<q-expansion-item group="accordion" label="HTML Attributes">
6969
<AttributesSubMenu />
7070
</q-expansion-item>

‎src/store/mutations.js

Lines changed: 0 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -333,7 +333,6 @@ const mutations = {
333333
},
334334

335335
// *** HTML ELEMENTS *** //////////////////////////////////////////////
336-
//jacetice
337336
[types.ADD_NESTED_HTML]: (state, payload) => {
338337
const componentName = state.activeComponent;
339338
const { activeHTML } = state;
@@ -420,31 +419,6 @@ const mutations = {
420419
});
421420
},
422421

423-
// [types.UPDATE_HTMLELEMENT_POSITION]: (state, payload) => {
424-
425-
// const htmlList = state.componentMap[0].htmlList;
426-
// // .filter(
427-
// // (element) => element.id === payload.activeHTML)
428-
// console.log('this update position const');
429-
// console.log(htmlList)
430-
431-
432-
// // updatedHTMLElement.x = payload.x;
433-
// // updatedHTMLElement.y = payload.y;
434-
// },
435-
436-
// [types.UPDATE_HTMLELEMENT_SIZE]: (state, payload) => {
437-
// const updatedHTMLElement = state.routes[state.activeRoute].filter(
438-
// (element) => element.componentName === payload.activeComponent)[0];
439-
// console.log('this update size const' + updatedHTMLElement.x);
440-
// console.log('this update size pay' + payload.x)
441-
// updatedHTMLElement.h = payload.h;
442-
// updatedHTMLElement.w = payload.w;
443-
// updatedHTMLElement.x = payload.x;
444-
// updatedHTMLElement.y = payload.y;
445-
// },
446-
447-
448422
[types.DELETE_FROM_COMPONENT_HTML_LIST]: (state, id) => {
449423
const componentName = state.activeComponent;
450424
const htmlList = state.componentMap[componentName].htmlList.slice(0);

0 commit comments

Comments
 (0)