Merge branch 'master' into README

Author: LOLDragoon

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,32 +1,32 @@
 <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>
-    <draggable
-      v-model="renderList"
+    <div
       group="people"
       class="list-group"
-      ghost-class="ghost"
-      @start="drag = true"
-      @end="drag = false"
     >
-      <div :class="activeHTML === element[2] ? 'list-group-item-selected' : 'list-group-item'" @dblclick.self="setActiveElement(element)" v-for="(element) in renderList" :key="element[1] + Date.now()">
+
+      <div
+      :class="activeHTML === element[2] ? 'list-group-item-selected' : 'list-group-item'"
+      @dblclick.self="setActiveElement(element)"
+      v-for="(element) in renderList" :key="element[1] + Date.now()"
+      >
         <!-- <i class="fas fa fa-angle-double-down fa-md" @click="setLayer({text: element[0], id: element[2]})"></i> -->
         <i v-if='activeComponent === "" ' class="fas fa fa-angle-double-down fa-md" id="unavailable"></i>
         <i v-else class="fas fa fa-angle-double-down fa-md" @click="setLayer({text: element[0], id: element[2]})"></i>
-        <!-- <i class="fas fa fa-angle-double-down fa-md" @click="setLayer({text: element[0], id: element[2]})"></i> -->
         {{ element[0] }}
         <i class="fas fa fa-trash fa-md" @click.self="deleteElement([element[1],element[2]])"></i>
       </div>
-    </draggable>
+
+    </div>
   </section>
 </template>
 
 <script>
-import draggable from 'vuedraggable'
 import { mapState, mapActions } from 'vuex'
 import { setSelectedElementList, deleteSelectedElement, deleteFromComponentHtmlList } from '../store/types'
 
@@ -90,7 +90,9 @@ export default {
       else this.$store.dispatch(deleteFromComponentHtmlList, id[1])
     },
     setActiveElement (element) {
-      this.setActiveHTML(element)
+      if (this.activeComponent !== '') {
+        this.setActiveHTML(element)
+      }
     },
     setLayer (element) {
       this.setActiveLayer(element)
@@ -108,17 +110,8 @@ export default {
         newTitle += ` > ${el}`
       })
       this.depth = newTitle
-    },
-    handleClick (event) {
-      console.log(event.target)
-      if (event.target.className === 'home-queue') {
-        if (!(this.activeHTML === '')) this.setActiveHTML([''])
-      }
     }
   },
-  components: {
-    draggable
-  },
   watch: {
     activeComponent: function () {
       // console.log('watching activeComponent in HomeQueue')
@@ -210,7 +203,7 @@ li {
 }
 
 #unavailable {
-  color: grey;
+  color: #686868;
   cursor: default
 }
 

src/css/app.styl

@@ -27,21 +27,30 @@ main {
   // background: rgb(22,108,105);
   // background: linear-gradient(36deg, rgba(22,108,105,1) 0%, rgba(20,32,23,1) 100%);
 }
-// ::-webkit-scrollbar {
-//   width: 2px;
-// }
 
-::-webkit-scrollbar {
-    width: 12px;
+::-webkit-scrollbar
+{
+	width: 10px;
+	background-color: $subsecondary;
 }
- 
-::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
-    border-radius: 10px;
+
+::-webkit-scrollbar-track
+{
+	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+	border-radius: 10px;
+	background-color: $subsecondary;
 }
- 
-::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
+
+::-webkit-scrollbar-thumb
+{
+	border-radius: 10px;
+	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+	background-color: #303030;
 }
 
+::-webkit-scrollbar-thumb:hover
+{
+	border-radius: 10px;
+	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+	background-color: #404040;
+}