left dropdown menu delete fixed

Author: deanfchung

src/components/ComponentDisplay.vue

@@ -23,8 +23,8 @@
         <li>children: {{ componentMap[componentData.componentName].children }}</li>
          <!-- <p v-for="child in childList" :key="childList.indexOf(child)"> {{ child.text }}</p> -->
       </ul>
-      <q-menu context-menu>
-        <q-list>
+      <q-menu context-menu >
+        <q-list class="menu">
           <q-item clickable v-ripple v-close-popup @click="handleAddChild">
             <q-item-section>Add Children</q-item-section>
             <q-item-section avatar><q-icon color="primary" name="add"/></q-item-section>
@@ -78,6 +78,7 @@ export default {
     window.addEventListener('keyup', event => {
       if (event.key === 'Backspace') {
         if (this.activeComponent && this.activeComponentData.isActive) {
+          // console.log('this:', this)
           this.$store.dispatch('deleteActiveComponent')
         }
       }
@@ -215,6 +216,9 @@ export default {
     #269;
   behavior: url(/pie/PIE.htc);
 }
+.menu {
+  margin-bottom: 0px !important;
+}
 .component-box {
   color: white;
   border: 1.2px dashed rgb(231, 203, 75);

src/components/Footer.vue

@@ -1,6 +1,6 @@
 <template>
   <q-footer reveal class="gradient text-white" :style="{ height: `${height}vh` }">
-    <q-toolbar>
+    <q-toolbar class="toolbar-background">
       <q-btn flat color="subaccent" round @click="openBottomDrawer">
         <i :class="[open ? down : up]" id="btn" ></i>
       </q-btn>
@@ -90,7 +90,7 @@ i {
   transition-timing-function: ease-in;
   transition: 0.2s;
   // background: #313131;
-  background: black;
+  background: #272822;
 }
 // changes the footer toolbar height
 .q-toolbar {
@@ -106,9 +106,9 @@ i {
 // this class selector does not change anything
 .q-tab__label {
   // font-size not changing
-    font-size: 10px !important;
-    line-height: 1.718em;
-    font-weight: 500;
+  font-size: 10px !important;
+  line-height: 1.718em;
+  font-weight: 500;
 }
 // changes the tab label styling
 #label-text {
@@ -129,7 +129,11 @@ i {
 .q-tabs {
   background: #11120F;
 }
+.toolbar-background {
+  background: black;  
+}
 .full-footer {
-  height: 100vh;  
+  // height: 100vh;
+  padding-bottom: 0px;  
 }
 </style>

src/components/HomeSideDropDownItems/ComponentList.vue

@@ -44,14 +44,16 @@ export default {
     }
   },
   methods: {
-    ...mapActions(['setActiveComponent','deleteComponent']),
+    ...mapActions(['setActiveComponent','deleteComponent', 'deleteActiveComponent']),
     onActivated (componentData) {
       this.setActiveComponent(componentData.componentName)
       this.activeComponentData.isActive = true
     },
     handleClick (componentData) {
-      this.deleteComponent(componentData)
-      this.setActiveComponent('')
+   
+        this.setActiveComponent(componentData.componentName)
+        this.deleteActiveComponent(componentData.componentName)
+     
     }
   }
 }

src/components/Tree.vue

@@ -91,7 +91,7 @@ export default {
 /* changes the stroke color */
 .treeclass .linktree {
   stroke: $secondary !important;
-  stroke-opacity: 1;
+  stroke-opacity: 0.4;
   stroke-width: 8px;
 }
 </style>

src/layouts/MyLayout.vue

@@ -6,7 +6,8 @@
           <i :class="[left ? 'fas fa-chevron-left' : 'fas fa-list-ul']" id="btn" ></i>
         </q-btn>
         <q-toolbar-title>
-          <q-avatar></q-avatar>PreVue 2.0
+          <!-- <q-avatar></q-avatar> -->
+          PreVue 2.0
         </q-toolbar-title>
         <OpenProjectComponent />
         <SaveProjectComponent />
@@ -61,7 +62,6 @@ export default {
 <style lang="stylus">
 .q-layout {
   transition-timing-function: ease-in;
-  transition: 0.2s;
 }
 .export-btn {
   margin-left: 0.3rem;