updated icons; updated logo; moved undo redo back up to toolbar; added validation on component name field; added HTML element queue field in create component menu; updated styling

Author: megatera

src-electron/icons/icon.icns

@@ -20,15 +20,11 @@ Description:
         name="detail"
         label="Component Details"
         id="label-text"
-        style="border-right: 3px solid black"
-        ><i class="fas fa-code"></i
-      ></q-tab>
+        ></q-tab>
       <q-tab name="tree" label="Project Tree" id="label-text"
-        ><i class="fas fa-code-branch fa-flip-vertical"
-      /></q-tab>
+        ></q-tab>
       <q-tab name="routes" label="Routes" id="label-text"
-        ><i class="fas fa-project-diagram"></i
-      ></q-tab>
+        ></q-tab>
     </q-tabs>
     <q-tab-panels v-model="tab" animated class="html-bg text-white">
       <q-tab-panel name="detail">
@@ -164,23 +160,23 @@ i {
 // changes the length of the tab panels
 .q-tab-panels {
   padding: 0px !important;
-  border-top: 3px solid black;
+  // border-top: 3px solid black;
 }
 
 .q-tabs {
-  background: #11120f;
+  background: $subprimary;
 }
 
 .toolbar-background {
-  background: black;
+  background: $subprimary;
 }
 
 #dashboard-cards {
   display: flex;
   flex-direction: column;
   height: 100%;
   border-radius: 0px;
-  background: #737578;
+  background: $subprimary;
 }
 .html-bg {
   /* // give html background color of grey */
@@ -191,8 +187,8 @@ i {
   height: 100%;
 }
 
-.bord {
-  border-left: 3px solid black;
-  border-right: 3px solid black;
-}
+// .bord {
+//   border-left: 3px solid black;
+//   border-right: 3px solid black;
+// }
 </style>

src-electron/icons/icon.ico

@@ -20,7 +20,7 @@ Description:
       @dblclick.self="setActiveElement(element)"
       v-for="(element) in renderList" :key="element[1] + Date.now()"
       >
-        <i v-if='activeComponent === "" || exceptions.includes(element[0]) ' class="fas fa fa-angle-double-down fa-md" id="unavailable"></i>
+        <i v-if='activeComponent === "" || exceptions.includes(element[0]) '></i>
         <i v-else 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>

src-electron/icons/icon.png

@@ -236,13 +236,14 @@ export default {
   margin: 6px;
   min-height: 28px;
   color: #FFFFFF;
-  background-color: #289EAD;
+  background-color: $secondary;
   text-align: center;
   line-height: 28px;
 }
 
 .tree-node-active {
-  background-color: #155158;
+  background-color: $accent;
+  color: #155158;
   border: 2px solid rgb(196, 154, 19);
 }
 

src/assets/OverVue_navLogo.png

@@ -39,18 +39,20 @@ export default {
 #store-cards {
   height: 100%;
   border-radius: 0px;
-  background-color: #202122;
+  background-color: $subprimary;
+  
 }
 .q-tab-panel {
   height: 100%;
-  // matchs the code editor bg
+  // matches the code editor bg
   background: $subprimary;
   // changes the length of the tab panels
 }
 .q-tab-panels {
   height: 100%;
 }
 .q-tabs {
-  background: #11120F;
+  background: $subprimary;
+  padding: 20px 0;
 }
 </style>

src/components/dashboard_items/Dashboard.vue

@@ -17,14 +17,16 @@ Description:
           v-if="activeComponent === ''"
           v-on:keyup.delete.stop
           v-model="componentNameInputValue"
-          label="Component Name"
+          label="Set component name *"
           color="accent"
           dark
           dense
           outlined
           item-aligned
           padding="5px"
           class="input-add"
+          reactive-rules
+          :rules="[ val => val.length != 0 || 'Please set a component name', val => !Object.keys(this.componentMap).includes(val) || 'A component with this name already exists' ]"
         ></q-input>
       </form>
 
@@ -39,7 +41,9 @@ Description:
           @activeLayer="addNestedNoActive"
         />
       </div>
-      <div class="componentHTML"></div>
+      <div class="componentHTML">
+        <CreateComponentHTMLQueue></CreateComponentHTMLQueue>
+      </div>
       <br />
 
       <q-btn
@@ -48,7 +52,7 @@ Description:
         color="secondary"
         label="Create Component"
         @click="createComponent"
-        :disabled="!componentNameInputValue.trim()"
+        :disabled="!componentNameInputValue.trim() || Object.keys(this.componentMap).includes(componentNameInputValue.trim())"
       />
     </q-expansion-item>
   </div>
@@ -58,13 +62,15 @@ Description:
 import Icons from "./Icons.vue";
 import ParentMultiselect from "./ParentMultiselect.vue";
 import ImportComponent from "./ImportComponent.vue"
+import CreateComponentHTMLQueue from "./CreateComponentHTMLQueue.vue";
 import { mapState, mapActions } from "vuex";
 export default {
   name: "HomeSidebar",
   components: {
     Icons,
     ParentMultiselect,
-    ImportComponent
+    ImportComponent,
+    CreateComponentHTMLQueue
 },
   computed: {
     ...mapState([
@@ -182,6 +188,7 @@ export default {
   .componentHTML {
     height: 100px;
     margin-top: 20px;
+    background-color: rgba($subsecondary, .5);
     overflow-y: scroll;
     border: 1px solid rgba(245, 245, 245, 0.3);
     border-radius: 5px;
@@ -193,6 +200,10 @@ export default {
   #create-component-btn {
     width: 100%;
   }
+  .q-expansion-item {
+    margin-bottom: 10px;
+  }
+
 // .is-primary {
 //   height: 45px;
 // }

src/components/dashboard_items/HTMLQueue.vue

@@ -0,0 +1,198 @@
+<!--
+Description:
+  Display of HTML elements in dashboard
+  Functionality: delete/set active elements and traverse nested HTML elements
+-->
+
+<template>
+  <section class="html-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 '{{ depth }}' </span>
+    <span class='list-title' v-else-if='!this.activeComponent'></span> -->
+    <!-- <hr> -->
+    <div
+      group="people"
+      class="list-group"
+    >
+      <!-- <p v-if='!this.componentMap[this.activeComponent]?.htmlList.length'>No HTML elements in component</p> -->
+      <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 v-if='activeComponent === "" || exceptions.includes(element[0]) '></i>
+        <i v-else 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>
+
+    </div>
+  </section>
+</template>
+
+<script>
+
+import { mapState, mapActions } from 'vuex'
+import { setSelectedElementList, deleteSelectedElement, deleteFromComponentHtmlList } from '../../../store/types'
+import { breadthFirstSearch } from '../../../utils/search.util'
+
+export default {
+  name: 'HTMLQueue',
+  props: {
+    name: {
+      type: String
+    },
+    listToRender: {
+      type: Array
+    }
+  },
+  data () {
+    return {
+      exceptions: ['input', 'img', 'link']
+    }
+  },
+  computed: {
+    ...mapState(['selectedElementList', 'componentMap', 'activeComponent', 'activeHTML', 'activeLayer']),
+    renderList: {
+      get () {
+        if (this.activeComponent === '') return this.selectedElementList.map((el, index) => [el.text, index, el.id])
+        // change activeComponent's htmlList into an array of arrays ([element/component name, index in state])
+        if (this.activeComponent !== '' && this.activeLayer.id === '') {
+          let sortedHTML = this.componentMap[this.activeComponent].htmlList.map((el, index) => [el.text, index, el.id]).filter(el => {
+            return el[0] !== undefined
+          })
+          return sortedHTML
+        }
+        let activeElement = breadthFirstSearch(this.componentMap[this.activeComponent].htmlList, this.activeLayer.id)
+        let sortedHTML = activeElement.children.map((el, index) => [el.text, index, el.id]).filter(el => {
+          return el[0] !== undefined
+        })
+        return sortedHTML
+      },
+      set (value) {
+        this.$store.dispatch(setSelectedElementList, value)
+      }
+    },
+    depth: function () {
+      let newTitle = ''
+      this.activeLayer.lineage.forEach(el => {
+        newTitle += ` > ${el}`
+      })
+      return newTitle
+    }
+
+  },
+  methods: {
+    ...mapActions(['setActiveHTML', 'setActiveLayer', 'upOneLayer']),
+    deleteElement (id) {
+      if (this.activeComponent === '') this.$store.dispatch(deleteSelectedElement, id[0])
+      else this.$store.dispatch(deleteFromComponentHtmlList, id[1])
+    },
+    setActiveElement (element) {
+      if (this.activeComponent !== '' && !this.exceptions.includes(element[0])) {
+        this.setActiveHTML(element)
+      }
+    },
+    setLayer (element) {
+      this.setActiveLayer(element)
+    },
+    setParentLayer () {
+      if (this.activeLayer.id !== '') {
+        this.upOneLayer(this.activeLayer.id)
+      }
+    }
+  },
+  watch: {
+    activeComponent: function () {
+      if (this.activeComponent !== '') {
+        this.component = true
+      } else {
+        this.component = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.html-queue {
+  padding-bottom: 40px;
+}
+
+li {
+  list-style-type: none;
+}
+
+.list-group {
+  padding: 10px 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.list-group-item {
+  display: inline-block;
+  margin: 2px 1.5%;
+  min-width: 175px;
+  width: 30%;
+  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;
+  background-color: $secondary;
+  height: 35px;
+  padding-top: 6px;
+  text-align: center;
+}
+
+.fa-trash:hover {
+  cursor: pointer;
+  color: #155158;
+}
+
+.fa-trash {
+  position: relative;
+  top: 2px;
+  right: 35px;
+  float: right;
+}
+.fa-angle-double-down {
+  position: relative;
+  top: 2px;
+  left: 35px;
+  float: left;
+}
+
+.fa-angle-double-down:hover {
+  cursor: pointer;
+  color: #41B883;
+}
+
+.fa-chevron-up {
+  position: relative;
+}
+
+.fa-chevron-up:hover {
+  cursor: pointer;
+  color: #41B883;
+}
+
+#unavailable {
+  color: #686868;
+  cursor: default
+}
+
+hr {
+  border: 1px solid grey
+}
+</style>