fixed some box styling

Author: drewngyen

package-lock.json

@@ -37,7 +37,8 @@
     "eslint": "^5.10.0",
     "eslint-loader": "^2.1.1",
     "eslint-plugin-vue": "^5.0.0",
-    "strip-ansi": "^3.0.1"
+    "strip-ansi": "^3.0.1",
+    "vue-cli-plugin-electron-builder": "^1.3.6"
   },
   "engines": {
     "node": ">= 8.9.0",

package.json

@@ -79,13 +79,13 @@ module.exports = function (ctx) {
       // extractCSS: false,
       extendWebpack (cfg) {
         cfg.module.rules.push({
-          enforce: 'pre',
-          test: /\.(js|vue)$/,
-          loader: 'eslint-loader',
-          exclude: /node_modules/,
-          options: {
-            formatter: require('eslint').CLIEngine.getFormatter('stylish')
-          }
+        //   enforce: 'pre',
+        //   test: /\.(js|vue)$/,
+        //   loader: 'eslint-loader',
+        //   exclude: /node_modules/,
+        //   options: {
+        //     formatter: require('eslint').CLIEngine.getFormatter('stylish')
+        //   }
         })
       }
     },

quasar.conf.js

@@ -8,6 +8,7 @@
       :line-numbers="lineNumbers"
       class="code-editor"
       :style="{ height: `${height}vh`}"
+      readonly="true"
     />
   </div>
 </template>

src/components/CodeSnippet.vue

@@ -15,7 +15,14 @@
       @dragging="onDrag"
       @resizing="onResize"
     >
-      <h3>{{ componentData.componentName }}</h3>
+
+      <div class="component-title">
+        <p>{{ componentData.componentName }}</p>
+      </div>
+      <div class="component-children">
+        <p>children: </p>
+         <!-- <p v-for="child in childList" :key="childList.indexOf(child)"> {{ child.text }}</p> -->
+      </div>
     </VueDraggableResizable>
   </div>
 </template>
@@ -46,17 +53,18 @@ export default {
   },
   computed: {
     ...mapState(['routes', 'activeRoute', 'activeComponent', 'componentMap']),
-    // used in VueDraggableResizeable component
     activeRouteArray () {
-      // console.log('active route array method', this.routes[this.activeRoute])
+      console.log('active route array method', this.routes[this.activeRoute])
       return this.routes[this.activeRoute]
     },
     // used to delete components
     activeComponentData () {
-      // find out what this does
       return this.activeRouteArray.filter(componentData => {
         return componentData.componentName === this.activeComponent
       })[0]
+    },
+    childList () {
+      return this.componentMap[componentData.componentName].children
     }
   },
   methods: {
@@ -96,6 +104,24 @@ export default {
 </script>
 
 <style scoped>
+.component-title {
+  position: relative;
+  font-size: 16px;
+  top: -18px;
+  left: 2px;
+  color: black;
+  font-weight: 800;
+  /* background: rgba(0, 0, 0, 0.678); */
+  /* width: 1rem; */
+  line-height: 1.2;
+  /* margin: 10px; */
+}
+.component-children {
+  position: absolute;
+  top: 0rem;
+  left: 2px;
+  color: black;
+}
 .component-display {
   /* border: 3px dashed rgb(159, 122, 122); */
   /* height: 500px; */
@@ -130,15 +156,17 @@ export default {
     #269;
   behavior: url(/pie/PIE.htc);
 }
-
 .component-box {
   color: white;
   border: 1px dashed rgb(227, 203, 71);
   background-color: rgba(186, 99, 99, 0.529);
+  -webkit-transition: background-color 200ms linear;
+  -ms-transition: background-color 200ms linear;
+  transition: background-color 200ms linear;
 }
 
 .active {
   background-color: rgba(57, 63, 84, 0.5);
-  border: 10px dashed rgb(227, 203, 71);
+  border: 1px dashed rgb(227, 203, 71);
 }
 </style>