Merge branch 'dev' into megan/editdeletemenu

Author: megatera

src/components/ComponentDisplay.vue

@@ -208,7 +208,8 @@ export default {
     mockBg() {
       return this.imagePath[this.activeRoute]
         ? {
-            background: `url("${this.userImage}") center/contain no-repeat rgba(223, 218, 218, 0.886)`,
+            background: `url("${this.userImage}") no-repeat rgba(223, 218, 218, 0.886) top left`,
+            "background-size": "contain"
           }
         : {};
     },
@@ -422,9 +423,13 @@ export default {
   list-style: none;
 }
 .component-display {
-  height: 95.4vh;
+  top: 0px;
+  left: 0px;
   width: 100%;
-  position: relative;
+  height: 100%;
+  min-width: 1600px;
+  min-height: 900px;
+  position: absolute;
 }
 .grid-bg {
   background-color: rgba(223, 218, 218, 0.886);

src/components/dashboard_items/Dashboard.vue

@@ -125,10 +125,9 @@ i {
 }
 
 .home-sidebar {
-  margin: 1rem;
+  padding: 1rem;
   justify-content: center;
   border-radius: 5px;
-  padding: 0px;
   background: $subsecondary;
 }
 

src/components/dashboard_items/Tree.vue

@@ -12,24 +12,19 @@ Description:
       :config="treeConfig"
       ref="tree"
       @wheel="zoom">
-      <template v-slot:node="{ node, collapsed }">
+      <template v-slot:node="{ node }">
         <span v-if="this.activeComponent === node.value"
           class="tree-node-active"
-          :style="{ border: collapsed ? '2px solid grey' : '' }"
-          
           >
           {{ node.value }}
         </span>
           <span v-else-if="this.activeRoute === node.value"
           class="tree-node-activeRoute"
-          :style="{ border: collapsed ? '2px solid grey' : '' }"
-          
           >
           {{ node.value }}
         </span>
         <span v-else
           class="tree-node"
-          :style="{ border: collapsed ? '2px solid grey' : '' }"
           @click="activateNode(node.value)"
           >
           {{ node.value }}
@@ -152,7 +147,6 @@ export default {
   watch: {
     componentMap: {
       handler(){
-        console.log(this.componentMap)
         this.treeData = this.buildTree(this.componentMap);
       },
       deep: true,
@@ -161,7 +155,7 @@ export default {
   data() { 
     return {
       treeData: this.buildTree(this.$store.state.componentMap),
-      treeConfig: { nodeWidth: 120, nodeHeight: 80, levelHeight: 200},
+      treeConfig: { nodeWidth: 175, nodeHeight: 100, levelHeight: 200},
       componentData: this.$store.state.componentMap,
     }
   }
@@ -181,15 +175,16 @@ export default {
 
 .tree-node, .tree-node-active, .tree-node-activeRoute {
   display: inline-block;
-  width: 90%;
   padding: 8px;
+  min-width: 80%; 
   margin: 6px;
   min-height: 28px;
   color: $menutext;
   background-color: $secondary;
   text-align: center;
   line-height: 28px;
   border-radius: 4px;
+  word-wrap: break-word;
 }
 
 .tree-node-active {

src/components/home_sidebar_items/ComponentTab/ComponentTab.vue

@@ -2,6 +2,7 @@
 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 />
     <CreateComponent v-if="activeComponent === ''"/>
     <EditDeleteComponents v-if="activeComponent !== ''"/>
   </q-card>
@@ -43,7 +44,7 @@ export default {
   
 }
 .q-tab-panel {
-  height: 100%;
+  height: calc(100% - 30px);
   // matches the code editor bg
   background: $subprimary;
   // changes the length of the tab panels

src/components/home_sidebar_items/ComponentTab/EditDeleteComponents.vue

@@ -168,6 +168,14 @@ export default {
 
     // returns options for component multiselect
     options() {
+      if (this.activeComponent !== '')
+        this.newName = this.activeComponentObj.componentName;
+        if (this.activeComponent !== ''){
+          this.childrenSelected = [];
+          this.childrenSelected = this.componentMap[this.activeComponent].children;
+        } else {
+          this.childrenSelected = [];
+      }
       const compMap = this.componentMap;
       const activeComp = this.activeComponent;
       const val = this.activeRouteDisplay.map(
@@ -277,18 +285,6 @@ export default {
     },
   },
   mixins: [handleExportComponentMixin],
-  watch: {
-    // watches for changes in selected component, changes edit name text to newly selected component
-    activeComponentObj: function () {
-      if (this.activeComponentObj)
-        this.newName = this.activeComponentObj.componentName;
-        if (this.activeComponent !== ''){
-          this.childrenSelected = this.componentMap[this.activeComponent].children;
-        } else {
-          this.childrenSelected = [];
-        }
-    },
-  },
 };
 </script>
 

src/components/home_sidebar_items/ComponentTab/ParentMultiselect.vue

@@ -89,6 +89,11 @@ export default {
   :global(.multiselect__option) {
     color: $menutext;
   }
+  :global(.multiselect__option--selected) {
+    background-color: $accent;
+    color: #155158;
+
+  }
   :global(.multiselect__single) {
     background-color: $subprimary;
     color: $menutext;

src/components/home_sidebar_items/ComponentTab/UploadImage.vue

@@ -150,6 +150,7 @@ export default {
   height: 100%;
   margin: 1rem;
   font-size: 11px;
+
 }
 
 .file-header {
@@ -158,6 +159,7 @@ export default {
 
 .file-content {
   padding: 0em 1em 1em 1em;
+  
 }
 
 .browser-btn {

src/css/app.scss

@@ -48,6 +48,7 @@ main {
 {
     width: 10px;
     background-color: $subsecondary;
+    z-index: 15;
 }
 
 ::-webkit-scrollbar-track

src/layouts/MyLayout.vue

@@ -281,27 +281,29 @@ q-btn > i {
 
 .resizeDrag {
   position: absolute;
-  left: -5px;
-  top: 50vh;
+  left: -20px;
+  top: 50%;
   width: 20px;
   height: 40px;
-  background-color: #202122;
+  background-image: linear-gradient(to right, #202122 50%, rgba(255, 255, 255, 0) 50%);
   border-radius: 4px;
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
   z-index: 10;
   cursor: col-resize;
 }
 
 .resizeDragTwo{
   position: absolute;
-  left: calc(100vw - 10px);
-  top: calc(50vh + 33.59px);
-  width: 10px;
+  left: calc(100vw - 20px);
+  top: calc(50vh + 25px);
+  width: 20px;
   height: 40px;
-  background-color: #202122;
+  background-image: linear-gradient(to right, #202122 50%, rgba(255, 255, 255, 0) 50%);
   border-radius: 4px;
   border-top-right-radius: 0px;
   border-bottom-right-radius: 0px;
-  z-index: 10;
+  z-index: 1;
   cursor: col-resize;
 }
 

src/pages/Index2.vue

@@ -5,7 +5,7 @@ Description:
   -->
 
 <template>
-  <q-page class="flex flex-center">
+  <q-page class="flex flex-center" id="compDisplay">
     <ComponentDisplay />
   </q-page>
 </template>
@@ -23,3 +23,12 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+ #compDisplay{
+   overflow-x: scroll;
+   overflow-y: scroll;
+   margin: 0px;
+   padding: 0px;
+ }
+</style>