Skip to content

Commit c2255f1

Browse files
jchan444jchan444
committed
Added new tab left side bat - add Attributes
1 parent e0e3df1 commit c2255f1

File tree

8 files changed

+215
-14
lines changed

8 files changed

+215
-14
lines changed

‎src/components/Canvas.vue

Lines changed: 37 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,17 @@
1212
v-on:click="handleClick"
1313
v-on:click.right="handleRight"
1414
>
15+
16+
<div
17+
class="cssContainer">
1518
<!-- This is the actual component box -->
1619
<!-- https://www.npmjs.com/package/vue-draggable-resizable -->
20+
<p
21+
class="cssContainerText"
22+
>
23+
CSS Container</p>
24+
25+
1726
<vue-draggable-resizable
1827
class-name="component-box"
1928
v-for="componentData in activeRouteArray"
@@ -33,26 +42,28 @@
3342
:onDragStart="recordInitialPosition"
3443
:onResizeStart="recordInitialSize"
3544
:style="{'background-color': componentData.color}"
45+
:parent="true"
3646
>
3747

38-
3948
<div class="component-title">
4049
<p>{{ componentData.componentName }}</p>
4150
</div>
42-
<q-icon v-if="this.componentMap[componentData.componentName]?.noteList?.length > 0"
43-
size="30px"
51+
<q-icon v-if="componentData.componentName === this.activeComponent"
52+
size="25px"
4453
z-layer="0"
4554
name="edit_note"
4655
class="compNoteLogo"
4756
@click="handleAddNotes" />
48-
<q-icon v-else
57+
58+
<!-- <q-icon "
4959
size="30px"
5060
z-layer="0"
5161
name="edit_note"
5262
class="compNoteLogoEmpty"
53-
@click="handleAddNotes" />
54-
<q-icon
55-
size="30px"
63+
@click="handleAddNotes" /> -->
64+
65+
<q-icon v-if="componentData.componentName === this.activeComponent"
66+
size="25px"
5667
z-layer="0"
5768
name="palette"
5869
class="colorLogo"
@@ -165,6 +176,7 @@
165176
@click="this.openNoteModal"
166177
/>
167178
</q-form>
179+
168180
</div>
169181
</div>
170182
</div>
@@ -230,9 +242,10 @@
230242
</template>
231243
</ColorPicker>
232244
</q-dialog>
233-
245+
</div>
234246
</div>
235247
</div>
248+
236249
</template>
237250

238251

@@ -438,7 +451,6 @@ export default {
438451
activeComponentData: this.activeComponentData,
439452
}
440453
this.updateColor(payload)
441-
442454
},
443455
444456
// records component's initial size/position in case of resize
@@ -752,6 +764,21 @@ li:hover{
752764
$secondary;
753765
behavior: url(/pie/PIE.htc);
754766
}
767+
768+
.cssContainer {
769+
margin:6.1%;
770+
border: 1px solid black;
771+
width: 1000px;
772+
height:900px;
773+
}
774+
.cssContainerText {
775+
position:absolute;
776+
font-size: 3em;
777+
margin-top: -4%;
778+
margin-left: 23%;
779+
color:black;
780+
}
781+
755782
.menu {
756783
margin-bottom: 0px !important;
757784
}
@@ -771,7 +798,7 @@ li:hover{
771798
border-radius: 4px;
772799
position: absolute;
773800
top: 4px;
774-
left: 40px;
801+
left: 32px;
775802
}
776803
777804
.colorLogo:hover{

‎src/components/composables/useCreateComponent.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,11 @@ export function useCreateComponent(importObj) {
4141
state: [],
4242
parent: {},
4343
isActive: false,
44-
color: "#ffffff85"
44+
color: "#ffffff85",
45+
htmlAttributes:{
46+
class:"test",
47+
id:"",
48+
}
4549
};
4650

4751
if (imported === true){

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

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
<template>
2+
<div>
3+
4+
<q-btn-dropdown class="attributeDropDown" color="primary" :label="attributeSelection">
5+
<q-list>
6+
<q-item clickable v-close-popup @click="changeAttribute('id')">
7+
<q-item-section>
8+
<q-item-label>ID</q-item-label>
9+
</q-item-section>
10+
</q-item>
11+
12+
<q-item clickable v-close-popup @click="changeAttribute('class')">
13+
<q-item-section>
14+
<q-item-label>Class</q-item-label>
15+
</q-item-section>
16+
</q-item>
17+
</q-list>
18+
</q-btn-dropdown>
19+
20+
21+
<q-input
22+
@keyup.enter="createAttribute(attributeText)"
23+
color="white"
24+
dark
25+
outlined
26+
bottom-slots
27+
v-model="attributeText"
28+
label="Enter Label"
29+
dense
30+
class="input-add"
31+
v-on:keyup.delete.stop
32+
>
33+
<template v-slot:append>
34+
<q-btn flat icon="add" @click="createAttribute(attributeText)" />
35+
</template>
36+
</q-input>
37+
38+
39+
<!-- <div>
40+
<q-btn
41+
v-if="selectProps.length"
42+
id="add-props-btn"
43+
class="add-btn"
44+
color="secondary"
45+
label="Add Prop(s)"
46+
@click="addPropsToComp"
47+
/>
48+
</div> -->
49+
</div>
50+
</template>
51+
52+
<script>
53+
import { mapState, mapActions } from "vuex";
54+
import VueMultiselect from "vue-multiselect";
55+
56+
export default {
57+
name: "AttributesSubMenu",
58+
components: {
59+
VueMultiselect,
60+
},
61+
data() {
62+
return {
63+
attributeText: "",
64+
attributeSelection: "ID",
65+
};
66+
},
67+
computed: {
68+
...mapState([
69+
"selectedProps",
70+
"userProps",
71+
"activeComponentObj",
72+
"activeComponent",
73+
"routes",
74+
]),
75+
},
76+
77+
methods: {
78+
...mapActions([
79+
"editAttribute",
80+
"activeRoute",
81+
"activeComponentData"
82+
]),
83+
// Prevent Delete on changes to searchable multiselect
84+
stopDelete(e) {
85+
if (e.code === "Backspace") e.stopPropogation();
86+
},
87+
88+
createAttribute(attributeText) {
89+
this.editAttribute({
90+
attribute: this.attributeSelection,
91+
value: attributeText,
92+
activeComponent: this.activeComponent,
93+
routeArray: this.routes[this.activeRoute],
94+
activeComponentData: this.activeComponentData,
95+
})
96+
},
97+
changeAttribute(attribute) {
98+
this.attributeSelection = attribute;
99+
}
100+
},
101+
};
102+
</script>
103+
104+
<style lang="scss" scoped>
105+
106+
.attributeDropDown {
107+
margin-top: 15px;
108+
padding-right: 10px;
109+
font-size: 1em;
110+
}
111+
112+
.input-add {
113+
position:absolute;
114+
margin-left: 7em;
115+
bottom:-60%;
116+
// padding:20px;
117+
}
118+
</style>

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,9 @@ Description:
6262
</div>
6363
<br />
6464
</q-expansion-item>
65+
<q-expansion-item group="accordion" label="HTML Attributes">
66+
<AttributesSubMenu />
67+
</q-expansion-item>
6568
<!-- Props item that has AddProps component in it -->
6669
<q-expansion-item group="accordion" label="Props">
6770
<PropsSubMenu />
@@ -100,6 +103,7 @@ Description:
100103
<q-expansion-item group="accordion" label="Actions">
101104
<ActionsSubMenu />
102105
</q-expansion-item>
106+
103107
</q-list>
104108
<q-btn
105109
id="exportButton"
@@ -129,6 +133,7 @@ import Icons from "./Icons.vue";
129133
import PropsSubMenu from "./PropsSubMenu.vue";
130134
import StateSubMenu from "./StateSubMenu.vue";
131135
import ActionsSubMenu from "./ActionsSubMenu.vue";
136+
import AttributesSubMenu from "./AttributesSubMenu.vue";
132137
133138
const cloneDeep = require("lodash.clonedeep");
134139
const { fs, ipcRenderer } = window;
@@ -148,6 +153,7 @@ export default {
148153
PropsSubMenu,
149154
StateSubMenu,
150155
ActionsSubMenu,
156+
AttributesSubMenu
151157
},
152158
computed: {
153159
...mapState([

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

Lines changed: 34 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,13 @@ Description:
1111
<div class="top-p" v-if="this.activeComponent === ''">
1212
Select a component
1313
</div>
14-
<div v-else>{{ `${this.activeComponent}.vue` }}</div>
14+
<div v-else>{{ `${this.activeComponent}.vue` }}</div> <button class="refreshCode">
15+
<q-icon
16+
size="25px"
17+
z-layer="0"
18+
name="refresh"
19+
@click="this.snippetInvoke" />
20+
</button>
1521
<prism-editor v-model="code" :highlight="highlighter" line-numbers class="my-editor" readonly />
1622
</div>
1723
</template>
@@ -74,7 +80,9 @@ export default {
7480
// Creates beginner boilerplate
7581
createTemplate(componentName) {
7682
let templateTagStr = this.writeTemplateTag(componentName);
77-
return `<template>\n <div>\n${templateTagStr} </div>\n</template>`;
83+
if(this.activeComponentObj.htmlAttributes.class !== "") return `<template>\n <div class = "${this.activeComponentObj.htmlAttributes.class}">\n${templateTagStr} </div>\n</template>`;
84+
else return `<template>\n <div>\n${templateTagStr} </div>\n</template>`;
85+
7886
},
7987
// Creates <template> boilerplate
8088
writeTemplateTag(componentName) {
@@ -235,10 +243,21 @@ export default {
235243
236244
let htmlArray = this.componentMap[componentName].htmlList;
237245
let styleString = "";
246+
247+
if(this.activeComponentObj.htmlAttributes.class !== "") {
248+
styleString += `.${this.activeComponentObj.htmlAttributes.class} {\nbackground-color: ${this.activeComponentObj.color};
249+
width: ${this.activeComponentObj.w}px;
250+
height: ${this.activeComponentObj.h}px;
251+
z-index: ${this.activeComponentObj.z}px;
252+
}\n`
253+
}
254+
238255
for (const html of htmlArray) {
239256
if (html.class === ' ') styleString = "";
240257
if (html.class) {
241-
styleString += `.${html.class} {\n}\n`
258+
console.log(this.activeComponentObj)
259+
styleString += `.${html.class} {\n
260+
}\n`
242261
}
243262
}
244263
@@ -330,5 +349,17 @@ export default {
330349
.prism-editor__textarea:focus {
331350
outline: none;
332351
}
352+
353+
.refreshCode {
354+
position:absolute;
355+
background-color:black;
356+
color: $secondary;
357+
bottom:96%;
358+
right:5%;
359+
}
360+
.refreshCode:hover {
361+
cursor:pointer;
362+
}
363+
333364
</style>
334365

‎src/store/actions.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -215,6 +215,11 @@ const actions = {
215215
commit(types.ADD_PROPS_TO_COMPONENT, payload);
216216
},
217217

218+
//edit parent attribute
219+
[types.editAttribute]: ({ commit }, payload) => {
220+
commit(types.EDIT_ATTRIBUTE, payload);
221+
},
222+
218223
[types.createState]: ({ commit }, payload) => {
219224
commit(types.CREATE_STATE, payload);
220225
},

‎src/store/mutations.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -635,6 +635,14 @@ const mutations = {
635635
updatedComponent.color = payload.color
636636
},
637637

638+
[types.EDIT_ATTRIBUTE]: (state, payload) => {
639+
const updatedComponent = state.routes[state.activeRoute].filter(
640+
(element) => element.componentName === payload.activeComponent
641+
)[0];
642+
console.log(updatedComponent)
643+
updatedComponent.htmlAttributes[payload.attribute] = payload.value
644+
},
645+
638646
[types.UPDATE_COMPONENT_LAYER]: (state, payload) => {
639647
const updatedComponent = state.routes[state.activeRoute].filter(
640648
(element) => element.componentName === payload.activeComponent

‎src/store/types.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export const ADD_PARENT = 'ADD_PARENT'
1212
export const ADD_PROJECT = 'ADD_PROJECT'
1313
export const ADD_PROPS_SELECTED = 'ADD_PROPS_SELECTED'
1414
export const ADD_PROPS_TO_COMPONENT = 'ADD_PROPS_TO_COMPONENT'
15+
export const EDIT_ATTRIBUTE = 'EDIT_ATTRIBUTE'
1516
export const ADD_ROUTE = 'ADD_ROUTE'
1617
export const ADD_ROUTE_TO_COMPONENT_MAP = 'ADD_ROUTE_TO_COMPONENT_MAP'
1718
export const ADD_STATE_SELECTED = 'ADD_STATE_SELECTED'
@@ -96,6 +97,7 @@ export const addProject = 'addProject'
9697
export const addRouteToRouteMap = 'addRouteToRouteMap'
9798
export const addPropsSelected = 'addPropsSelected'
9899
export const addPropsToComponent = 'addPropsToComponent'
100+
export const editAttribute = 'editAttribute'
99101
export const addStateSelected = 'addStateSelected'
100102
export const addStateToComponent = 'addStateToComponent'
101103
export const addToComponentElementList = 'addToComponentElementList'

0 commit comments

Comments
 (0)