Merge branch 'master' into windows

Author: LOLDragoon

src/components/ComponentDisplay.vue

@@ -18,7 +18,6 @@
       @deactivated="onDeactivated(componentData)"
       @dragging="onDrag"
       @resizing="onResize"
-      @dblclick.native="onDoubleClick(componentData)"
       @dragstop="finishedDrag"
       @resizestop="finishedResize"
       :onDragStart="recordInitialPosition"
@@ -177,7 +176,7 @@ export default {
       console.log('mockBg is working', this.imagePath[this.activeRoute])
       return this.imagePath[this.activeRoute]
         ? {
-          background: `url("${this.userImage}") center/contain no-repeat`
+          background: `url("${this.userImage}") center/contain no-repeat rgba(223, 218, 218, 0.886)`,
         }
         : {}
     }
@@ -346,12 +345,6 @@ export default {
       //   console.log("We just clicked without making a new active component")
       // }
     },
-    onDoubleClick (compData) {
-      if (!(componentData.componentName === this.activeComponent)) {
-        this.setActiveComponent(componentData.componentName)
-      }
-      this.activeComponentData.isActive = true
-    },
     handleAddChild () {
       // render modal with childrenmultiselect in it
       this.modalOpen = true
@@ -374,11 +367,6 @@ export default {
       if (e.target.innerText === '-' && payload.z > 0) payload.z--
       this.updateComponentLayer(payload)
     },
-    //       @dblclick.native="onDoubleClick(componentData)"
-    // onDoubleClick (compData) {
-    //   this.setActiveComponent(compData.componentName)
-    //   this.activeComponentData.isActive = true
-    // }
     handleClick (event) {
       if (event.target.className === 'component-display grid-bg') {
         if (!(this.activeComponent === '')) this.setActiveComponent('')
@@ -395,11 +383,9 @@ export default {
   top: -18px;
   left: 2px;
   color: black;
+  -webkit-text-stroke: 0.4px white;
   font-weight: 800;
-  /* background: rgba(0, 0, 0, 0.678); */
-  /* width: 1rem; */
   line-height: 1.2;
-  /* margin: 10px; */
   z-index: -1;
 }
 .component-children {

src/components/Footer.vue

@@ -22,7 +22,7 @@
         <q-tab name="html" label="HTML Elements" id="label-text" />
       </q-tabs>
 
-      <q-tab-panels v-model="tab" animated class="bg-primary text-white full-footer">
+      <q-tab-panels v-model="tab" animated class="html-bg text-white" >
         <q-tab-panel name="code">
           <CodeSnippet />
         </q-tab-panel>
@@ -35,7 +35,7 @@
           <Tree />
         </q-tab-panel>
 
-        <q-tab-panel name="html">
+        <q-tab-panel name="html" :style="{height: `${height}vh`}">
           <HomeQueue />
         </q-tab-panel>
       </q-tab-panels>
@@ -172,14 +172,18 @@ i {
   background: black;
 }
 
-.full-footer {
-  // height: 100vh;
-  padding-bottom: 0px;
-}
+// .full-footer {
+//   // height: 100vh;
+
+// }
 
 #footer-cards {
   height: 100%;
   border-radius: 0px;
   background: #737578;
 }
+.html-bg {
+  // give html background color of grey
+  background-color: #202122;
+}
 </style>

src/components/HomeQueue.vue

@@ -14,7 +14,10 @@
       @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()">
-        <i 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> -->
+        <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>
@@ -137,7 +140,7 @@ export default {
 
 <style lang="stylus" scoped>
 .home-queue {
-  height: 100%;
+  padding-bottom: 40px;
 }
 li {
   list-style-type: none;
@@ -149,6 +152,7 @@ li {
 .list-group-item {
   display: inline-block;
   margin: 2px 1.5%;
+  min-width: 175px;
   width: 30%;
   border-radius: 0.5cm;
   border: 2px solid $secondary;
@@ -158,37 +162,10 @@ li {
   text-align: center;
 }
 
-@media (max-width: 900px) {
-  .list-group-item {
-    display: inline-block;
-    margin: 2px 1.5%;
-    width: 45%;
-    border-radius: 0.5cm;
-    border: 2px solid $secondary;
-    background-color: $secondary;
-    height: 35px;
-    padding-top: 6px;
-    text-align: center;
-  }
-}
-
-@media (max-width: 700px) {
-  .list-group-item {
-    display: inline-block;
-    margin: 2px 1.5%;
-    width: 90%;
-    border-radius: 0.5cm;
-    border: 2px solid $secondary;
-    background-color: $secondary;
-    height: 35px;
-    padding-top: 6px;
-    text-align: center;
-  }
-}
-
 .list-group-item-selected {
   display: inline-block;
   margin: 2px 1.5%;
+  min-width: 175px;
   width: 30%;
   border-radius: 0.5cm;
   border: 2px solid white;
@@ -198,35 +175,6 @@ li {
   text-align: center;
 }
 
-@media (max-width: 900px) {
-  .list-group-item-selected {
-  display: inline-block;
-  margin: 2px 1.5%;
-  width: 45%;
-  border-radius: 0.5cm;
-  border: 2px solid white;
-  background-color: $secondary;
-  height: 35px;
-  padding-top: 6px;
-  text-align: center;
-  }
-}
-
-@media (max-width: 700px) {
-  .list-group-item-selected {
-  display: inline-block;
-  margin: 2px 1.5%;
-  width: 90%;
-  border-radius: 0.5cm;
-  border: 2px solid white;
-  background-color: $secondary;
-  height: 35px;
-  padding-top: 6px;
-  text-align: center;
-  }
-}
-
-
 .fa-trash:hover {
   cursor: pointer;
   color: red;
@@ -261,6 +209,11 @@ li {
   color: #41B883;
 }
 
+#unavailable {
+  color: grey;
+  cursor: default
+}
+
 hr {
   border: 1px solid grey
 }

src/components/HomeSideDropDown.vue

@@ -2,18 +2,18 @@
   <div class="q-pa-md" style="max-width: 350px">
     <q-list padding bordered class="rounded-borders drawer-menu">
       <q-expansion-item dense dense-toggle expand-separator label="Components">
-        <q-card>
-          <q-card-section>
-            <div class="input-container">
-              <ComponentList />
-            </div>
-          </q-card-section>
-        </q-card>
+          <q-card>
+            <q-card-section>
+              <div class="input-container" style='height: 130px'>
+                <ComponentList />
+              </div>
+            </q-card-section>
+          </q-card>
       </q-expansion-item>
       <q-expansion-item dense dense-toggle expand-separator label="Routes">
         <q-card>
           <q-card-section>
-            <div class="input-container">
+            <div class="input-container" style='height: 150px'>
               <RouteDisplay />
               <br />
             </div>
@@ -48,13 +48,15 @@ export default {
 </script>
 
 <style lang="stylus">
+
 .input-add {
   margin: 0em 1em 0em 1em;
 }
 
 .input-container {
   margin-top: 1rem;
   background: $subsecondary;
+  overflow-y: auto;
 }
 
 .red {

src/components/HomeSideDropDownItems/ComponentList.vue

@@ -56,7 +56,7 @@ export default {
     ...mapState(['routes', 'activeRoute', 'activeComponent']),
     activeRouteDisplay () {
       let component = this.routes[this.activeRoute]
-      console.log(component)
+      console.log('component', component)
       return component
     },
     activeComponentData () {

src/css/app.styl

@@ -29,4 +29,19 @@ main {
 }
 // ::-webkit-scrollbar {
 //   width: 2px;
-// }
+// }
+
+::-webkit-scrollbar {
+    width: 12px;
+}
+ 
+::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
+    border-radius: 10px;
+}
+ 
+::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
+}
+

src/layouts/MyLayout.vue

@@ -142,7 +142,7 @@ export default {
   // background: #272822;
 }
 
-::-webkit-scrollbar {
-  display: none;
-}
+// ::-webkit-scrollbar {
+//   display: none;
+//   }
 </style>

src/store/mutations.js

@@ -379,25 +379,33 @@ const mutations = {
     state.parentSelected = payload
   },
   [types.DELETE_ROUTE]: (state, payload) => {
+    const newRoutes = { ...state.routes }
+    const newMap = { ...state.componentMap }
+    const newImagePath = { ...state.imagePath }
+
     const deleteChildren = (child) => {
-        if (state.componentMap[child.componentName].children.length) {
-          child.children.forEach((grandchild) => {
-            deleteChildren(grandchild)
-          })
-        }
-        delete state.componentMap[child.componentName]
+      if (newMap[child.componentName].children.length) {
+        child.children.forEach((grandchild) => {
+          deleteChildren(grandchild)
+        })
+      }
+      delete newMap[child.componentName]
     }
-    state.routes[payload].forEach((child => {
+    newRoutes[payload].forEach(child => {
       deleteChildren(child)
-    }))
+    })
 
-    delete state.routes[payload]
-    delete state.componentMap[payload]
+    delete newRoutes[payload]
+    delete newMap[payload]
+    delete newImagePath[payload]
 
-    state.componentMap.App.children = state.componentMap.App.children.filter((route) => {
-      return route !== payload;
+    newMap.App.children = newMap.App.children.filter((route) => {
+      return route !== payload
     })
-    if (!state.routes[state.activeRoute]) state.activeRoute = 'HomeView'
+    if (!newRoutes[state.activeRoute]) state.activeRoute = 'HomeView'
+    state.routes = newRoutes
+    state.componentMap = newMap
+    state.imagePath = newImagePath
   },
   [types.DELETE_COMPONENT]: (state, payload) => {
     const stateCopy = state
@@ -422,7 +430,7 @@ const mutations = {
     // state.imagePath[payload.route] = payload.img
   },
   [types.CLEAR_IMAGE]: (state, payload) => {
-    console.log(`clear image invoked`)
+    console.log(`clear image invoked`, payload)
     // console.log('current routes img url: ', state.imagePath[payload.route])
     if (state.imagePath[payload.route]) state.imagePath[payload.route] = ''
     // console.log('after removal', state.imagePath[payload.route])

test/jest/__tests__/App.spec.js

@@ -70,7 +70,7 @@ describe("Adding actions and state to components", () => {
   });
 });
 
-describe("userActions mutation", () => {
+xdescribe("userActions mutation", () => {
   let actions;
   let store;
   beforeEach(() => {
@@ -88,7 +88,7 @@ describe("userActions mutation", () => {
   });
 });
 
-describe("userStore mutation", () => {
+xdescribe("userStore mutation", () => {
   let actions;
   let store;
   store = {
@@ -126,7 +126,7 @@ describe("userStore mutation", () => {
  *  `userStore` holds the user defined state objects
  */
 
-describe("Delete state in userStore/componentMap", () => {
+xdescribe("Delete state in userStore/componentMap", () => {
   let state;
   beforeEach(() => {
     state = {
@@ -143,7 +143,7 @@ describe("Delete state in userStore/componentMap", () => {
       userStore: { state1: true, state2: [] }
     };
   });
-  describe('"DELETE_USER_STATE" should delete property from "userStore" object', () => {
+  xdescribe('"DELETE_USER_STATE" should delete property from "userStore" object', () => {
     it("should delete a single state property", () => {
       mutations.DELETE_USER_STATE(state, "state1");
       expect(state.userStore).toEqual({ state2: [] });