fixed merges

Author: LOLDragoon

src/App.vue

@@ -138,7 +138,6 @@ let redoMixin = {
         store: this.$store
       }
       this.$store.commit('EMPTY_STATE', payload)
-      console.log(this.$store)
       this.doneAction.forEach(action => {
         //console.log('In the loop', this.$store)
         // this.$store.commit(`${mutation.type}`, mutation.payload);

src/components/ComponentDisplay.vue

@@ -414,8 +414,8 @@ export default {
   /* height: 500px; */
   /* width: 500px; */
   /* original is 70 */
-  height: 90vh;
-  width: 100%;
+  min-height: 1080px;
+  min-width: 1920px;
   position: relative;
   /* background: rgb(211, 211, 210); */
 }

src/components/ExportProject.vue

@@ -143,14 +143,55 @@ export default {
         input: ['<input />', ''],
         navbar: ['<nav>', '</nav>']
       }
+
+      /* Function to loop through nested elements */
+      function writeNested (childrenArray, indent) {
+        if (!childrenArray.length) {
+          return ''
+        }
+        let indented = indent + '  '
+        let nestedString = ''
+
+        childrenArray.forEach(child => {
+          nestedString += indented
+          // console.log(child)
+          if (!child.text) {
+            nestedString += `<${child}/>\n`
+          } else {
+            if (child.children.length) {
+              nestedString += htmlElementMap[child.text][0]
+              nestedString += '\n'
+              nestedString += writeNested(child.children, indented)
+              nestedString += indented + htmlElementMap[child.text][1]
+              nestedString += '\n'
+            } else {
+              nestedString += htmlElementMap[child.text][0] + htmlElementMap[child.text][1] + '\n'
+            }
+          }
+        })
+        return nestedString
+      }
+
       // loop to iterate through compName arr
       let htmlArr = this.componentMap[compName].htmlList
-      let outputStr = ''
+      let outputStr = ``
       for (let el of htmlArr) {
-        outputStr += '\t\t'
-        outputStr += htmlElementMap[el.text][0]
-        outputStr += htmlElementMap[el.text][1]
-        outputStr += `\n`
+        // console.log(el)
+        if (!el.text) {
+          outputStr += `    <${el}/>\n`
+        } else {
+          outputStr += `    `
+          if (el.children.length) {
+            outputStr += htmlElementMap[el.text][0]
+            outputStr += '\n'
+            outputStr += writeNested(el.children, `    `)
+            outputStr += `    `
+            outputStr += htmlElementMap[el.text][1]
+            outputStr += `  \n`
+          } else {
+            outputStr += htmlElementMap[el.text][0] + htmlElementMap[el.text][1] + '\n'
+          }
+        }
       }
       console.log(`outputStr from writeTemplateTag: ${outputStr}`)
       return outputStr
@@ -199,15 +240,6 @@ export default {
       } else {
         // console.log(`else (if compName === 'App'`);
         str += `<div>\n`
-        children.forEach(name => {
-          str += `\t\t<${
-            // name.componentName
-            name
-          }>\n\t\t</${
-            // name.componentName
-            name
-          }>\n`
-        })
       }
       // writes the html tag boilerplate
       let templateTagStr = this.writeTemplateTag(compName)

src/components/HomeQueue.vue

@@ -158,6 +158,34 @@ 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%;
@@ -170,19 +198,53 @@ 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;
 }
 
 .fa-trash {
   position: relative;
-  left: 20px;
-
+  // left: 20px;
+  top: 2px;
+  right: 35px;
+  float: right;
 }
 .fa-angle-double-down {
   position: relative;
-  right: 20px;
+  // right: 20px;
+  top: 2px;
+  left: 35px;
+  float: left;
 }
 
 .fa-angle-double-down:hover {

src/components/HomeSideDropDownItems/ComponentList.vue

@@ -1,14 +1,15 @@
 <template>
   <div class="home-sidebar">
     <multiselect
-      class='multiselect' 
-      v-model="value" 
-      :options='options' 
-      :searchable="true" 
+      class='multiselect'
+      v-model="value"
+      :options='options'
+      :searchable="true"
       :close-on-select="true"
       :max-height="90"
       :option-height="20"
       @input="handleSelect(value)"
+      @open="resetActiveComponent"
       placeholder="Select a component">
       <span slot='noResult'>No components found.</span>
       </multiselect>
@@ -87,6 +88,11 @@ export default {
       this.setActiveComponent(componentName)
       this.value = ''
       this.activeComponentData.isActive = true
+    },
+    resetActiveComponent () {
+      if (this.activeComponent !== '') {
+        this.setActiveComponent('')
+      }
     }
   }
 }

src/components/ParentMultiselect.vue

@@ -8,6 +8,7 @@
       :close-on-select="true"
       :options="options"
       @input="handleSelect"
+      @open="resetActiveComponent"
       :max-height="90"
       :option-height="20"
       :searchable="true"
@@ -44,14 +45,19 @@ export default {
   methods: {
     ...mapActions([
       // 'addParent',
-      'parentSelected'
+      'parentSelected', 'setActiveComponent'
     ]),
     handleSelect (value) {
       // Set Active Component to selected Parent
       // this.setActiveComponent(value)
       // this.addParent(value)
       // Set parentSelected to true IF VALUE IS A VALID PARENT (not null)
       this.parentSelected(value)
+    },
+    resetActiveComponent () {
+      if (this.activeComponent !== '') {
+        this.setActiveComponent('')
+      }
     }
   },
   watch: {

src/components/RouteDisplay.vue

@@ -1,13 +1,14 @@
 <template>
   <div>
     <q-input
-      @keyup.enter.native="handleEnterKeyPress"
+      @keyup.enter.native="handleEnterKeyPress "
       standout="bg-secondary text-white"
       bottom-slots
       v-model="newRoute"
       label="Enter new route"
       :dense="dense"
       class="input-add"
+      @click.native="resetActiveComponent"
     ></q-input>
     <!--<div class="route-display">-->
     <!--
@@ -35,7 +36,7 @@ export default {
     }
   },
   methods: {
-    ...mapActions(['addRouteToRouteMap', 'setRoutes']),
+    ...mapActions(['addRouteToRouteMap', 'setRoutes', 'setActiveComponent']),
     handleEnterKeyPress () {
       const newRouteName = this.newRoute.replace(/[^a-z0-9-_.]/gi, '')
       if (!newRouteName.trim() || this.routes[newRouteName] || this.componentMap[newRouteName]) {
@@ -48,6 +49,11 @@ export default {
         })
 
         .catch(err => console.log(err))
+    },
+    resetActiveComponent () {
+      if (this.activeComponent !== '') {
+        this.setActiveComponent('')
+      }
     }
   }
 }

src/css/app.styl

@@ -1,7 +1,7 @@
 // app global css
 main {
   background: #0e0f0f;
-  overflow: auto;
+  overflow: scroll;
 
 }
 

src/layouts/MyLayout.vue

@@ -9,9 +9,17 @@
           <!-- <q-avatar></q-avatar> -->
           OverVue
         </q-toolbar-title>
+        <div>
+        <!-- <i class="fa fa-undo" aria-hidden="true"></i> -->
+        <!-- <i class="fas fa fa-repeat" aria-hidden="true"></i> -->
+        <i v-if='this.$router.app.$children[0].doneAction.length' class="fa fa-backward" aria-hidden="true" @click="undo"></i>
+        <i v-else class="fa fa-backward" id="unavailable" aria-hidden="true"></i>
+        <i v-if='this.$router.app.$children[0].undoneAction.length' class="fa fa-forward" aria-hidden="true" @click="redo"></i>
+        <i v-else class="fa fa-forward" id="unavailable" aria-hidden="true"></i>
         <OpenProjectComponent />
         <SaveProjectComponent />
         <ExportProjectComponent />
+        </div>
       </q-toolbar>
     </q-header>
 
@@ -55,11 +63,42 @@ export default {
     SaveProjectComponent,
     OpenProjectComponent,
     UploadImage
+  },
+  methods: {
+    undo () {
+      console.log('UNDO FROM BUTTON')
+      console.log('look at me ', this.$router.app.$children[0].doneAction)
+      this.$router.app.$children[0].undo()
+    },
+    redo () {
+      console.log('REDO FROM BUTTON')
+      this.$router.app.$children[0].redo()
+    }
   }
 }
 </script>
 
 <style lang="stylus">
+
+.fa-backward, .fa-forward {
+  padding: 0 5px
+}
+
+.fa-backward:hover, .fa-forward:hover {
+  cursor: pointer;
+  color: #00ffff
+}
+
+#unavailable {
+  color: grey;
+  cursor: default
+}
+
+.fa-backward:active, .fa-forward:active {
+  box-shadow: 0 1px inherit;
+  transform: translateY(1px);
+}
+
 .q-layout {
   transition-timing-function: ease-in;
 }