changed footer component deets to vuex

Author: deanfchung

quasar.conf.js

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

src/components/CodeSnippet.vue

@@ -7,7 +7,8 @@
       language="js"
       :line-numbers="lineNumbers"
       class="code-editor"
-      :style="{ height: `${height}vh` }"
+      :style="{ height: `${height}vh`}"
+      readonly="true"
     />
   </div>
 </template>
@@ -121,5 +122,6 @@ export default {
 <style lang="stylus" scoped>
 // resize handled by vue lifecycle methods
 .code-editor {
+  font-size: 11px;
 }
 </style>

src/components/ComponentDisplay.vue

@@ -5,7 +5,7 @@
       v-for="componentData in activeRouteArray"
       :key="componentData.componentName"
       :x="componentData.x"
-      :y="componentData.y"
+      :y="componentData.y + 20"
       :w="componentData.w"
       :h="componentData.h"
       :parent="true"
@@ -15,7 +15,14 @@
       @resizing="onResize"
       @dblclick.native="onDoubleClick(componentData)"
     >
-      <h3>{{ componentData.componentName }}</h3>
+     <div class="component-title">
+        <p>{{ componentData.componentName }}</p>
+      </div>
+      <div class="component-children">
+        <p># of children: {{ componentMap[componentData.componentName].children.length }} </p>
+        <p>children: {{ componentMap[componentData.componentName].children }}</p>
+         <!-- <p v-for="child in childList" :key="childList.indexOf(child)"> {{ child.text }}</p> -->
+      </div>
       <q-menu context-menu>
         <q-list>
           <q-item clickable v-ripple v-close-popup @click="handleAddChild">
@@ -80,16 +87,18 @@ export default {
     ...mapState(['routes', 'activeRoute', 'activeComponent', 'componentMap', 'componentChildrenMultiselectValue']),
     // 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
+    }, 
     options () {
       // PROBLEM: the objects on childrenmultiselectvalue are applied
       const routes = Object.keys(this.routes)
@@ -153,6 +162,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; */
@@ -187,13 +214,16 @@ 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: 1px dashed rgb(227, 203, 71);
 }
 </style>

src/components/ExportProject.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-btn class="glossy" color="teal" label="Export Project" @click="exportProject"/>
+  <q-btn class=" export-btn" color="secondary" label="Export Project" @click="exportProject"/>
 </template>
 
 <script>
@@ -10,7 +10,7 @@
 // import path from "path";
 // const ipc = require("electron").ipcRenderer;
 export default {
-  name: "ExportProjectComponent",
+  name: 'ExportProjectComponent'
 }
 //   methods: {
 //     showExportDialog() {
@@ -377,4 +377,10 @@ export default {
 </script>
 
 <style>
+.export-btn {
+  min-height: 10px !important;
+  font-size: 11px;
+  text-transform: capitalize;
+  padding: 3px 8px;
+}
 </style>

src/components/Footer.vue

@@ -15,9 +15,9 @@
         indicator-color="secondary"
         align="left"
       >
-        <q-tab name="code" label="Code" id="label-text"/>
+        <q-tab name="code" label="Code Snippet" id="label-text"/>
         <q-tab name="detail" label="Component Details" id="label-text"/>
-        <q-tab name="tree" label="Tree" id="label-text"/>
+        <q-tab name="tree" label="Project Tree" id="label-text"/>
         <q-tab name="html" label="HTML Elements" id="label-text"/>
       </q-tabs>
 
@@ -27,7 +27,8 @@
         </q-tab-panel>
 
         <q-tab-panel name="detail">
-          <div class="text-h6">Component Deets</div>Component Info Here
+          <div class="text-h6">Vuex</div>
+          Component Info Here
         </q-tab-panel>
 
         <q-tab-panel name="tree">

src/components/HomeSideDropDownItems/ComponentList.vue

@@ -72,6 +72,7 @@ export default {
 .q-list {
   margin-bottom: 0.5rem;
   border-radius: 5px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 3px 6px 0 rgba(0, 0, 0, 0.13);
 }
 .component-info {
   margin: auto 0;

src/components/Routes.vue

@@ -9,22 +9,13 @@
       @click="handleClick(route)"
       v-on:keyup.delete="deleteSelectedRoute(route)"
     >
-<!--
-      <span class="panel-icon">
-        <i class="fas fa-location-arrow" aria-hidden="true"></i>
-      </span>
-      -->
-         <q-list bordered separator>
-      <q-item clickable v-ripple>
-        <q-item-section>{{route}}</q-item-section>
-
-      </q-item>
-
-    </q-list>
-
+      <q-list bordered separator>
+        <q-item clickable v-ripple>
+          <q-item-section>{{route}}</q-item-section>
+        </q-item>
+      </q-list>
     </a>
   </div>
-
 </template>
 
 <script>

src/css/app.styl

@@ -1,9 +1,10 @@
 // app global css
 main {
   background: #f2f6f5;
+  overflow: auto;
 }
 .gradient {
   background: black;
   // background: rgb(22,108,105);
   // background: linear-gradient(36deg, rgba(22,108,105,1) 0%, rgba(20,32,23,1) 100%);
-}
+}

src/layouts/MyLayout.vue

@@ -73,4 +73,16 @@ 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;
+}
 </style>