Merge pull request #26 from JojuOlaode/stretchHtml

Stretch html

Author: keliphan

src/components/Footer.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-footer reveal class="gradient text-white" :style="{ height: `${height}vh` }">
+  <q-footer reveal class="gradient text-white" :style="{ height: `${height}vh` }" v-on:click="handleHtmlDeselection">
     <q-toolbar class="toolbar-background">
       <q-btn flat color="subaccent" round @click="openBottomDrawer">
         <i :class="[open ? down : up]" id="btn"></i>
@@ -44,7 +44,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState, mapActions } from 'vuex'
 import Tree from './Tree'
 import HomeQueue from './HomeQueue'
 import CodeSnippet from './CodeSnippet'
@@ -56,7 +56,7 @@ export default {
     CodeSnippet
   },
   computed: {
-    ...mapState(['activeComponent', 'componentNameInputValue', 'selectedElementList'])
+    ...mapState(['activeComponent', 'componentNameInputValue', 'selectedElementList', 'activeHTML'])
   },
   data () {
     return {
@@ -68,13 +68,22 @@ export default {
     }
   },
   methods: {
+    ...mapActions(['setActiveHTML']),
     openBottomDrawer () {
       // 15in mb pro - 1027 px 3.75
       // big ass screens 2.5
       let minHeight =
         window.outerHeight < 900 ? 4.5 : window.outerHeight < 1035 ? 3.75 : 2.5
       this.height === 40 ? (this.height = minHeight) : (this.height = 40)
       this.open === true ? (this.open = false) : (this.open = true)
+    },
+    handleHtmlDeselection (event) {
+      // method that will handle deselection from active HTML element
+      // console.log('target html element: ', event.target)
+      if (event.target.className !== 'list-group-item') {
+        // if html element classname is not equal to this string that all html elements have
+        if (!(this.activeHTML === '')) this.setActiveHTML(['']) // if activeHtml is not already deselected, do so
+      }
     }
   },
   // toggles footer to "html" tab when existing component is not in focus

src/components/HomeQueue.vue

@@ -1,16 +1,15 @@
 <template>
-  <section class="home-queue" v-on:click="handleClick">
+  <section class="home-queue">
     <i v-if='this.activeLayer.id !== ""' class="fas fa fa-chevron-up fa-md" @click="setParentLayer"></i>
     <span class='list-title' v-if='this.activeLayer.id !== ""'> Viewing Elements in '{{ this.activeComponent }} {{ this.depth }}' </span>
     <span class='list-title' v-else-if='this.activeComponent !==""'> Viewing Elements in '{{ this.activeComponent }}' </span>
     <span class='list-title' v-else> Elements in Queue </span>
     <hr>
     <div
-      v-model="renderList"
       group="people"
       class="list-group"
     >
-    
+
       <div
       :class="activeHTML === element[2] ? 'list-group-item-selected' : 'list-group-item'"
       @dblclick.self="setActiveElement(element)"
@@ -28,7 +27,6 @@
 </template>
 
 <script>
-import draggable from 'vuedraggable'
 import { mapState, mapActions } from 'vuex'
 import { setSelectedElementList, deleteSelectedElement, deleteFromComponentHtmlList } from '../store/types'
 
@@ -112,12 +110,6 @@ export default {
         newTitle += ` > ${el}`
       })
       this.depth = newTitle
-    },
-    handleClick (event) {
-      // console.log(event.target)
-      if (event.target.className === 'home-queue') {
-        if (!(this.activeHTML === '')) this.setActiveHTML([''])
-      }
     }
   },
   watch: {