Merge pull request #34 from jeisele2/master

Tree rerender, styling

Author: dnohashi

src/components/CodeSnippet.vue

@@ -124,4 +124,7 @@ export default {
 .code-editor {
   font-size: 11px;
 }
+::-webkit-scrollbar {
+    display: none;
+}
 </style>

src/components/Tree.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <tree
-      :data="tree"
+      :data="computedTree"
       node-text="name"
       layoutType="euclidean"
       type="tree"
@@ -21,10 +21,8 @@ export default {
   },
   computed: {
     ...mapState(['componentMap']),
-    componentMap: {
-      get () {
-        return this.$store.state.componentMap
-      }
+    computedTree () {
+      return this.buildTree()
     }
   },
   data () {
@@ -34,6 +32,7 @@ export default {
   },
   methods: {
     formatComponentMap (compMap) {
+      console.log('compMap', compMap)
       let result = []
       Object.values(compMap).forEach(compData => {
         result.push({
@@ -62,15 +61,13 @@ export default {
     },
     buildTree () {
       let build = this.transformToTree(this.componentMap)
-      this.tree = build['App']
+      return build['App']
     }
-  },
-  created () {
-    this.buildTree()
   }
 }
 </script>
-<style>
+
+<style lang="stylus">
 .container {
   height: 100%;
   width: 100%;
@@ -89,12 +86,12 @@ export default {
 }
   /* changes the circle node color */
 .treeclass .nodetree circle {
-  fill: rgb(232, 225, 16);
+  fill: #A2D9FF;
 }
 /* changes the stroke color */
 .treeclass .linktree {
-  stroke: rgb(232, 225, 16) !important;
-  stroke-opacity: .4;
-  stroke-width: 2px;
+  stroke: $secondary !important;
+  stroke-opacity: 1;
+  stroke-width: 8px;
 }
 </style>

src/css/quasar.variables.styl

@@ -10,7 +10,7 @@
 // Tip: Use the "Theme Builder" on Quasar's documentation website.
 
 $primary   = #737578
-$secondary = #00FFFF
+$secondary = #2D95CD
 $accent    = #9C27B0
 $subaccent = #454d66
 $subaccentbtn = #2c384d

src/layouts/MyLayout.vue

@@ -79,16 +79,7 @@ export default {
   // background: white;
   background: #272822;
 }
-body::-webkit-scrollbar {
-    width: 1em;
-}
-
-body::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-}
-
-body::-webkit-scrollbar-thumb {
-  background-color: darkgrey;
-  outline: 1px solid slategrey;
+::-webkit-scrollbar {
+  display: none;
 }
 </style>