added code for z-index

Author: jchan444

src/components/Canvas.vue

@@ -70,6 +70,7 @@
             element.y !== 0 ? {'left': element.y} : {'left': '10%'},
             element.w !== 0 ? {'width': element.w} : {'width': '80%'},
             element.h !== 0 ? {'height' : element.h} : {'height' : '40%'},
+            element.z !== 0 ? {'z-index' : element.z} : {'z-index' : '0'},
             {'background-color': componentData.color}]"
         >
           <p class="innerHtmlText" style="font-size: 3em">{{element.text}}</p> 

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

@@ -88,6 +88,28 @@
               @click="submitLeft(leftText, this.activeHTML)">
             </i>
           </q-input>
+
+          <q-item id="layer-item" filled dark autofocus true hide-bottom-space color="secondary">
+            <q-item-section v-model="z" class="layer">Component Layer = {{z}}</q-item-section>
+            <q-btn
+              class="minorAction"
+              color="transparent"
+              text-color="primary"
+              label="&ndash;"
+              @click="(e) => handleLayer(e)"
+            />
+            <p id="counter">{{ z }}</p>
+            <q-btn
+              class="minorAction"
+              color="transparent"
+              text-color="primary"
+              label="+"
+              @click="(e) => handleLayer(e)"
+            />
+          </q-item>
+          
+
+
           <q-btn label="Close" @click="this.openAttributeModal" />
         </q-form>
       </div>
@@ -105,6 +127,7 @@ export default {
       widthText: '0',
       topText: '0',
       leftText: '0',
+      z: '0',
     }
   },
   computed: {
@@ -115,7 +138,11 @@ export default {
       'activeComponent', 
       'activeHTML', 
       'activeLayer', 
-      'attributeModalOpen'
+      'attributeModalOpen',
+      'activeRoute',
+      'routes',
+      'activeComponentData',
+      'activeComponentObj',
     ])
   },
   components: {
@@ -130,6 +157,7 @@ export default {
       'addActiveComponentWidth',
       'addActiveComponentTop',
       'addActiveComponentLeft',
+      'updateHTMLLayer',
       ]),
     submitClass(element, idNum) {
       if (element === '') {
@@ -187,13 +215,43 @@ export default {
       this.leftText = '';
     },
 
+    handleLayer(e) {
+      e.preventDefault();
+
+    let htmlZ;
+
+    this.activeComponentObj.htmlList.forEach( element => {
+      if (element.id === this.activeHTML) {
+        htmlZ = element.z;
+      }
+    })
+
+      const payload = {
+        activeHTML: this.activeHTML,
+        z: htmlZ,
+      };
+      
+      if (e.target.innerText === "+")  {
+        payload.z++;
+        this.z++;
+      }
+      if (e.target.innerText === "–" && payload.z > 0)  {
+        payload.z--;
+        this.z--;
+      }
+      this.updateHTMLLayer(payload);
+      console.log('here')
+      console.log(this.activeHTML)
   },
+
   watch: {
     attributeModalOpen() {
       this.attributeModal = this.attributeModalOpen;
     },
   }
 }
+
+}
 </script>
 
 <style lang="scss">
@@ -212,4 +270,14 @@ export default {
 .title {
   font-size: 1.3em
 }
+
+.minorAction {
+  margin-right:5px;
+  margin-left: 5px;
+  width:2em;
+  height: 1.5em;
+}
+#counter {
+padding-top:5px;
+}
 </style>

src/components/right-sidebar/CodeSnippet.vue

@@ -256,7 +256,6 @@ z-index: ${this.activeComponentObj.z};
 }\n`
       }
 
-    console.log(htmlArray)
       for (const html of htmlArray) {
         if (html.class === ' ') styleString = "";
         if (html.class) {

src/components/right-sidebar/HTMLQueue.vue

@@ -115,7 +115,7 @@ export default {
         if (this.activeComponent === '') return this.selectedElementList.map((el, index) => [el.text, index, el.id])
         // change activeComponent's htmlList into an array of arrays ([element/component name, index in state])
         if (this.activeComponent !== '' && this.activeLayer.id === '') {
-          let sortedHTML = this.componentMap[this.activeComponent].htmlList.map((el, index) => [el.text, index, el.id]).filter(el => {
+          let sortedHTML = this.componentMap[this.activeComponent].htmlList.map((el, index) => [el.text, index, el.id, el.z]).filter(el => {
             return el[0] !== undefined
           })
           return sortedHTML

src/store/actions.js

@@ -122,6 +122,10 @@ const actions = {
     commit(types.UPDATE_COMPONENT_LAYER, payload);
   },
 
+  [types.updateHTMLLayer]: ({ commit }, payload) => {
+    commit(types.UPDATE_HTML_LAYER, payload);
+  },
+
   [types.updateComponentPosition]: ({ commit }, payload) => {
     commit(types.UPDATE_COMPONENT_POSITION, payload);
   },

src/store/mutations.js

@@ -473,6 +473,7 @@ const mutations = {
     if (payload[0] === "") {
       state.activeHTML = "";
     } else {
+      console.log(payload)
       state.activeHTML = payload[2];
     }
   },
@@ -780,6 +781,16 @@ const mutations = {
     state.componentMap[payload.activeComponent].z = payload.z;
   },
 
+  [types.UPDATE_HTML_LAYER]: (state, payload) => {
+
+    state.componentMap[state.activeComponent].htmlList.forEach((el) => {
+      if (payload.id === el.id) {
+        el.z = payload.z
+      }
+    })
+
+  },
+
   [types.UPDATE_ACTIVE_COMPONENT_CHILDREN_VALUE]: (state, payload) => {
     //temp is the activeComponent's children array
     if (state.activeComponent === payload) { return }

src/store/types.js

@@ -60,6 +60,7 @@ export const UPDATE_COMPONENT_CHILDREN_VALUE = 'UPDATE_COMPONENT_CHILDREN_VALUE'
 export const UPDATE_COMPONENT_POSITION = 'UPDATE_COMPONENT_POSITION'
 export const UPDATE_COLOR = 'UPDATE_COLOR'
 export const UPDATE_COMPONENT_LAYER = 'UPDATE_COMPONENT_LAYER'
+export const UPDATE_HTML_LAYER = 'UPDATE_HTML_LAYER'
 export const UPDATE_COMPONENT_SIZE = 'UPDATE_COMPONENT_SIZE'
 export const UPDATE_OPEN_MODAL = 'UPDATE_OPEN_MODAL'
 export const DELETE_USER_ACTIONS = 'DELETE_USER_ACTIONS'
@@ -158,6 +159,7 @@ export const updateActiveComponentChildrenValue = 'updateActiveComponentChildren
 export const updateComponentChildrenMultiselectValue = 'updateComponentChildrenMultiselectValue'
 export const updateComponentChildrenValue = 'updateComponentChildrenValue'
 export const updateComponentLayer = 'updateComponentLayer'
+export const updateHTMLLayer = 'updateHTMLLayer'
 export const updateComponentNameInputValue = 'updateComponentNameInputValue'
 export const updateComponentPosition = 'updateComponentPosition'
 export const updateComponentSize = 'updateComponentSize'