full html element functionality

Author: jeisele2

src/components/CreateComponent.vue

@@ -2,7 +2,7 @@
   <div class="home-sidebar">
     <!-- <p class="panel-heading">Create a component</p> -->
     <br />
-    <form v-on:submit.prevent="handleClick">
+    <form v-on:submit.prevent="handleClick" v-on:click="resetActiveComponent">
       <q-input
         standout="bg-teal text-white"
         bottom-slots
@@ -14,7 +14,7 @@
       </q-input>
     </form>
     <div class="icon-container">
-      <Icons @getClickedIcon="addToSelectedElementList" />
+      <Icons @getClickedIcon="addToSelectedElementList" @activeElement="addToComponentElementList"/>
     </div>
     <ParentMultiselect />
     <br />
@@ -34,7 +34,7 @@ export default {
     ParentMultiselect
   },
   computed: {
-    ...mapState(['componentMap', 'selectedElementList']),
+    ...mapState(['componentMap', 'selectedElementList', 'activeComponent']),
     componentNameInputValue: {
       get () {
         return this.$store.state.componentNameInputValue
@@ -48,7 +48,9 @@ export default {
     ...mapActions([
       'registerComponent',
       'addToSelectedElementList',
-      'updateComponentNameInputValue'
+      'updateComponentNameInputValue',
+      'setActiveComponent',
+      'addToComponentElementList'
     ]),
     handleClick () {
       const component = {
@@ -63,6 +65,13 @@ export default {
       }
 
       this.registerComponent(component)
+    },
+    resetActiveComponent () {
+      this.setActiveComponent('')
+    },
+    handleIconClick () {
+      if (this.activeComponent === '') this.setClickedElementList()
+      else this.setComponentHtmlList()
     }
   }
 }

src/components/HomeQueue.vue

@@ -1,6 +1,5 @@
 <template>
   <section class="home-queue">
-    <p class="panel-heading">Selected Elements</p>
     <draggable
       v-model="renderList"
       group="people"
@@ -57,27 +56,29 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="stylus" scoped>
 .home-queue {
-  border: 1px solid white;
-  background-color: hsl(222, 15%, 26%);
   height: 100%;
 }
 li {
   list-style-type: none;
 }
 .list-group-item {
-  margin: 2px;
-  border: 1px solid black;
+  display: inline-block;
+  margin: 2px 1.5%;
+  width: 30%;
   border-radius: 0.5cm;
-  background-color: #e7d5bc;
+  background-color: $secondary;
   height: 35px;
-  padding-top: 2px;
+  padding-top: 6px;
   text-align: center;
 }
-
 .fa-trash:hover {
   cursor: pointer;
   color: red;
 }
+.fa-trash {
+  position: relative;
+  left: 20px;
+}
 </style>

src/components/Icons.vue

@@ -18,11 +18,12 @@ import { mapState } from 'vuex'
 export default {
   name: 'Icons',
   computed: {
-    ...mapState(['icons'])
+    ...mapState(['icons', 'activeComponent'])
   },
   methods: {
     changeState (elementName) {
-      this.$emit('getClickedIcon', elementName)
+      if (this.activeComponent === '') this.$emit('getClickedIcon', elementName)
+      else this.$emit('activeElement', elementName)
     }
   }
 }