Merge pull request #12 from oslabs-beta/megan/left-sidebar

Sidebar UI Updates

Author: apaparian

package.json

@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "@quasar/extras": "^1.12.5",
+    "@ssthouse/vue3-tree-chart": "^0.2.3",
     "core-js": "^3.21.1",
     "dotenv": "^16.0.0",
     "electron-deeplink": "^1.0.9",

src-electron/icons/icon.icns

@@ -396,7 +396,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .component-title {
   position: relative;
   font-size: 16px;
@@ -430,25 +430,25 @@ export default {
   background-color: rgba(223, 218, 218, 0.886);
   background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
   background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
-  background-image: -webkit-linear-gradient(white 2px, transparent 2px),
-    -webkit-linear-gradient(0, white 2px, transparent 2px),
+  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.8) 1px, transparent 1px),
+    -webkit-linear-gradient(0, rgba(255, 255, 255, 0.8) 1px, transparent 1px),
     -webkit-linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
     -webkit-linear-gradient(0, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
-  background-image: -moz-linear-gradient(white 2px, transparent 2px),
-    -moz-linear-gradient(0, white 2px, transparent 2px),
+  background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.8) 1px, transparent 1px),
+    -moz-linear-gradient(0, rgba(255, 255, 255, 0.8) 1px, transparent 1px),
     -moz-linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
     -moz-linear-gradient(0, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
-  background-image: linear-gradient(white 2px, transparent 2px),
-    linear-gradient(90deg, white 2px, transparent 2px),
+  background-image: linear-gradient(rgba(255, 255, 255, 0.8) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.8) 1px, transparent 1px),
     linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
     linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
-  -pie-background: linear-gradient(white 2px, transparent 2px) -2px -2px / 100px,
-    linear-gradient(90deg, white 2px, transparent 2px) -2px -2px / 100px,
+  -pie-background: linear-gradient(rgba(255, 255, 255, 0.8) 1px, transparent 1px) -2px -2px / 100px,
+    linear-gradient(90deg, rgba(255, 255, 255, 0.8) 1px, transparent 1px) -2px -2px / 100px,
     linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px) -1px -1px /
       20px,
     linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px) -1px -1px /
       20px,
-    #269;
+    $secondary;
   behavior: url(/pie/PIE.htc);
 }
 .menu {
@@ -464,7 +464,7 @@ export default {
   position: absolute;
 }
 .active {
-  background-color: rgba(105, 179, 190, 0.514);
+  background-color: $accent;
   border: 1px dashed rgb(227, 203, 71);
 }
 .btn {

src-electron/icons/icon.ico

@@ -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.png

@@ -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/assets/OverVue_navLogo.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/components/ComponentDisplay.vue

@@ -2,7 +2,6 @@
 Functionality includes: if active component is selected, will switch view to editing mode. If not, it will be in create mode -->
 <template>
   <q-card id="store-cards">
-    <UploadImage v-if="activeComponent === ''"/>
     <CreateComponent v-if="activeComponent === ''"/>
     <EditDeleteComponents v-if="activeComponent !== ''"/>
   </q-card>
@@ -35,23 +34,28 @@ export default {
 <style lang="scss">
 // give html background color of grey
 .html-bg {
-    background-color: #202122;
+    background-color: $subprimary;
 }
 #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;
+}
+
+.q-tab__content{
+  padding: 10px 0;
 }
 </style>

src/components/dashboard_items/Dashboard.vue

@@ -6,57 +6,71 @@ Description:
 <!-- 4.0 adjustment: conditional render to switch between new comp name input and editing active comp name, moved from EditDeleteComponents -->
 
 <template>
-  <div class="inner-div drawer-menu">
-    <br />
-    <form v-on:submit.prevent="createComponent">
-      <!-- will render if creating new component -->
-      <q-input
-        v-if="activeComponent === ''"
-        standout="bg-secondary text-white"
-        bottom-slots
-        v-on:keyup.delete.stop
-        v-model="componentNameInputValue"
-        label="Component Name"
-        dense
-        class="input-add"
-      ></q-input>
-    </form>
-    <div class="icon-container">
-      <Icons
-        class="icons"
-        @getClickedIcon="addToSelectedElementList"
-        @activeElement="addToComponentElementList"
-        @activeHTML="addNestedHTML"
-        @activeLayer="addNestedNoActive"
-      />
-    </div>
-    <ParentMultiselect v-if="activeComponent === ''"></ParentMultiselect>
-    <br />
+  <div class="create-component-div inner-div drawer-menu">
+    <q-expansion-item group="accordion" label="Import Component">
+      <ImportComponent v-if="activeComponent === ''" @imported="createComponent" />
+    </q-expansion-item>
+    <q-expansion-item group="accordion" label="Create Component">
+      <form class="create-component-form" v-on:submit.prevent="createComponent">
+        <!-- will render if creating new component -->
+        <q-input
+          v-if="activeComponent === ''"
+          v-on:keyup.delete.stop
+          v-model="componentNameInputValue"
+          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>
 
-    <q-btn
-      v-if="activeComponent === ''"
-      id="add-component-btn"
-      color="secondary"
-      label="Create Component"
-      @click="createComponent"
-      :disabled="!componentNameInputValue.trim()"
-    />
-    <ImportComponent v-if="activeComponent === ''" @imported="createComponent"/>
+      <ParentMultiselect v-if="activeComponent === ''"></ParentMultiselect>
+      <div class="subsection">HTML Elements</div>
+      <div class="icon-container">
+        <Icons
+          class="icons"
+          @getClickedIcon="addToSelectedElementList"
+          @activeElement="addToComponentElementList"
+          @activeHTML="addNestedHTML"
+          @activeLayer="addNestedNoActive"
+        />
+      </div>
+      <div class="componentHTML">
+        <CreateComponentHTMLQueue></CreateComponentHTMLQueue>
+      </div>
+      <br />
 
+      <q-btn
+        id="create-component-btn"
+        v-if="activeComponent === ''"
+        color="secondary"
+        label="Create Component"
+        @click="createComponent"
+        :disabled="!componentNameInputValue.trim() || Object.keys(this.componentMap).includes(componentNameInputValue.trim())"
+      />
+    </q-expansion-item>
   </div>
 </template>
 
 <script>
 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([
@@ -152,25 +166,63 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.is-primary {
-  height: 45px;
-}
-#add-component-btn {
-  height: 15px;
-  margin: 0.75rem;
-  width: 90%;
-}
-#import-component-btn {
-  height: 15px;
-  margin: 0 0.75rem;
-  width: 90%;
-}
-.inner-div {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  padding-left: 15px;
-  padding-right: 15px;
-  height: 100%;
-}
+  .create-component-div {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    margin: 20px;
+  }
+  .create-component-form {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    padding: -20px;
+  }
+  .subsection {
+    border-top: 1px solid rgba(245, 245, 245, 0.3);
+    padding: 10px 0 0;
+    margin: 20px 0 0;
+  }
+  .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;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  #create-component-btn {
+    width: 100%;
+  }
+  .q-expansion-item {
+    margin-bottom: 10px;
+  }
+
+// .is-primary {
+//   height: 45px;
+// }
+// #add-component-btn {
+//   height: 15px;
+//   margin: 0.75rem;
+//   width: 90%;
+// }
+// #import-component-btn {
+//   height: 15px;
+//   margin: 0 0.75rem;
+//   width: 90%;
+// }
+// .inner-div {
+//   display: flex;
+//   flex-direction: column;
+//   justify-content: flex-start;
+//   padding-left: 15px;
+//   padding-right: 15px;
+//   height: 100%;
+// }
 </style>