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>