Merge pull request #2 from deanfchung/dean

updated version 6/5

Author: deanfchung

package-lock.json

@@ -16,17 +16,20 @@
     "localforage": "^1.7.3",
     "mousetrap": "^1.6.3",
     "quasar": "^1.0.0",
+    "vue-drag-resize": "^1.3.2",
     "vue-draggable-resizable": "^2.0.0-rc2",
     "vue-loader": "^15.7.0",
     "vue-multiselect": "^2.1.6",
-    "vued3tree": "^3.7.1"
+    "vued3tree": "^3.7.1",
+    "vuex": "^3.1.1"
   },
   "devDependencies": {
     "@quasar/app": "^1.0.0",
     "@vue/eslint-config-standard": "^4.0.0",
     "babel-eslint": "^10.0.1",
     "devtron": "^1.4.0",
     "electron": "^5.0.6",
+    "electron-builder": "^20.44.4",
     "electron-debug": "^3.0.1",
     "electron-devtools-installer": "^2.2.4",
     "eslint": "^5.10.0",

package.json

@@ -52,7 +52,10 @@ module.exports = function (ctx) {
         'QTabs',
         'QTab',
         'QRouteTab',
-        'QTabPanels'
+        'QTabPanels',
+        'QTabPanel',
+        'QFab',
+        'QFabAction'
       ],
 
       directives: [
@@ -147,7 +150,7 @@ module.exports = function (ctx) {
     },
 
     electron: {
-      // bundler: 'builder', // or 'packager'
+      bundler: 'builder', // or 'packager'
 
       extendWebpack (cfg) {
         // do something with Electron main process Webpack cfg

quasar.conf.js

@@ -9,11 +9,11 @@
       :w="componentData.w"
       :h="componentData.h"
       :parent="true"
+      class-name-resizable="my-resizable-class"
       @activated="onActivated(componentData)"
       @deactivated="onDeactivated(componentData)"
       @dragging="onDrag"
       @resizing="onResize"
-      @dblclick.native="onDoubleClick(componentData)"
     >
       <h3>{{ componentData.componentName }}</h3>
     </VueDraggableResizable>
@@ -22,6 +22,7 @@
 <script>
 import { mapState, mapActions } from 'vuex'
 import VueDraggableResizable from 'vue-draggable-resizable'
+import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
 
 export default {
   name: 'ComponentDisplay',
@@ -59,7 +60,7 @@ export default {
     }
   },
   methods: {
-    ...mapActions(['setActiveComponent', 'updateOpenModal']),
+    ...mapActions(['setActiveComponent']),
     onResize: function (x, y, width, height) {
       this.activeComponentData.x = x
       this.activeComponentData.y = y
@@ -76,26 +77,54 @@ export default {
     },
     onDeactivated () {
       this.activeComponentData.isActive = false
-    },
-    onDoubleClick (compData) {
-      this.setActiveComponent(compData.componentName)
-      this.activeComponentData.isActive = true
     }
+    //       @dblclick.native="onDoubleClick(componentData)"
+    // onDoubleClick (compData) {
+    //   this.setActiveComponent(compData.componentName)
+    //   this.activeComponentData.isActive = true
+    // }
   }
 }
 </script>
 
 <style scoped>
 .component-display {
-  border: 2px dotted rgb(14, 14, 14);
-  background-color: rgba(242, 234, 228, 0.61);
-  height: 70vh;
-  width: 70vw;
+  /* border: 3px dashed rgb(159, 122, 122); */
+  /* height: 500px; */
+  /* width: 500px; */
+  /* original is 70vh */
+  height: 87vh;
+  width: 100vw;
   position: relative;
+  background-color: rgba(124, 126, 145, 0.44);
+  /* background-color: #269; */
+  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),
+    -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),
+    -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),
+    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,
+    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;
+  behavior: url(/pie/PIE.htc);
 }
 
 .component-box {
   color: white;
-  border: 1px solid salmon;
+  border: 3px dashed rgb(227, 203, 71);
+  background-color: rgba(186, 99, 99, 0.529);
 }
 </style>

src/components/ComponentDisplay.vue

@@ -16,29 +16,23 @@
     <div class="icon-container">
       <Icons @getClickedIcon="addToSelectedElementList" />
     </div>
-    <!-- <ChildrenMultiselect /> -->
+    <ParentMultiselect />
     <br />
-    <!-- <button
-      class="button is-primary"
-      id="add-component-btn"
-      @click="handleClick"
-      :disabled="!componentNameInputValue"
-    >Add Component</button> -->
     <q-btn id="add-component-btn" class="primary" color="secondary" label="Create Component" icon-right="add" @click="handleClick" :disabled="!componentNameInputValue" />
   </div>
 </template>
 
 <script>
 import Icons from './Icons'
-// import ChildrenMultiselect from '@/components/ChildrenMultiselect';
+import ParentMultiselect from '../components/ParentMultiselect'
 import { mapState, mapActions } from 'vuex'
 // import * as types from '../store/types.js'
 
 export default {
   name: 'HomeSidebar',
   components: {
-    // ChildrenMultiselect,
-    Icons
+    Icons,
+    ParentMultiselect
   },
   computed: {
     ...mapState(['componentMap', 'selectedElementList']),

src/components/CreateComponent.vue

@@ -0,0 +1,80 @@
+<template>
+  <q-footer reveal elevated class="gradient text-white" :style="{ height: `${height}vh` }">
+    <q-toolbar>
+      <q-btn flat color="subaccentbtn" round @click="openBottomDrawer">
+        <i :class="[open ? down : up]"></i>
+      </q-btn>
+      <q-toolbar-title>Dashboard</q-toolbar-title>
+    </q-toolbar>
+    <q-card>
+      <q-tabs
+        v-model="tab"
+        dense
+        class="bg-subaccent text-white"
+        active-color="secondary"
+        indicator-color="secondary"
+        align="left"
+      >
+        <q-tab name="code" label="Code" />
+        <q-tab name="tree" label="Tree" />
+        <q-tab name="html" label="HTML Elements" />
+      </q-tabs>
+
+      <q-tab-panels v-model="tab" animated class="bg-primary text-white">
+        <q-tab-panel name="code">
+          <div class="text-h6">Code Snippet</div>Code Snippet Component Here
+          <br />asdfadsfasdf
+        </q-tab-panel>
+
+        <q-tab-panel name="tree">
+          <div class="text-h6">Tree</div>Tree Component Here
+        </q-tab-panel>
+
+        <q-tab-panel name="html">
+          <div class="text-h6">HTML Elements</div>HTML Element Component Here
+        </q-tab-panel>
+      </q-tab-panels>
+    </q-card>
+  </q-footer>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      tab: 'code',
+      open: true,
+      height: 35,
+      up: 'fas fa-chevron-up',
+      down: 'fas fa-chevron-down'
+    }
+  },
+  methods: {
+    openBottomDrawer () {
+      this.height === 35 ? (this.height = 6.5) : (this.height = 35)
+      this.open === true ? this.open = false : this.open = true
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+.q-footer {
+  // height: 35vh;
+  transition-timing-function: ease-in;
+  transition: 0.2s;
+}
+
+.q-tab-panel {
+  background: #454d66;
+}
+
+.q-tab-panels {
+  background: yellow;
+  height: 100%;
+}
+
+.q-tabs {
+  background: #2c384d;
+}
+</style>

src/components/Footer.vue

@@ -3,8 +3,8 @@
     <q-tabs
       v-model="tab"
       dense
-      class="text-grey"
-      active-color="primary"
+      class="text-white"
+      active-color="secondary"
       indicator-color="primary"
       align="justify"
       narrow-indicator
@@ -18,7 +18,10 @@
   <q-list>
     <q-tab-panels v-model="tab" animated>
       <q-tab-panel name="Tree">
-        <div class="text-h6">Tree</div>Lorem ipsum dolor sit amet consectetur adipisicing elit.
+        <div class="text-h6">Tree</div>
+        <q-card>
+          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+        </q-card>
       </q-tab-panel>
 
       <q-tab-panel name="Code">
@@ -35,6 +38,7 @@
 
 <script>
 export default {
+  name: 'FooterTabView.vue',
   data () {
     return {
       tab: 'tree'

src/components/FooterTabView.vue

@@ -22,6 +22,7 @@
               -->
               <a v-for="componentData in activeRouteDisplay"
                 :key="componentData.componentName"
+                 v-on:click="onActivated(componentData)"
                 >
    <q-list bordered separator>
       <q-item clickable v-ripple>
@@ -96,7 +97,7 @@
 </template>
 <script>
 import RouteDisplay from '../components/RouteDisplay'
-import { mapState } from 'vuex'
+import { mapState, mapActions } from 'vuex'
 
 export default {
   components: {
@@ -108,8 +109,22 @@ export default {
     activeRouteDisplay () {
       // console.log('active route array method', this.routes[this.activeRoute])
       let component = this.routes[this.activeRoute]
-      console.log('component:', component)
+      // console.log('component:', component)
       return component
+    },
+    activeComponentData () {
+      // find out what this does
+      return this.activeRouteDisplay.filter(componentData => {
+        return componentData.componentName === this.activeComponent
+      })[0]
+    }
+  },
+  methods: {
+    ...mapActions(['setActiveComponent']),
+    onActivated (componentData) {
+      this.setActiveComponent(componentData.componentName)
+      this.activeComponentData.isActive = true
+      console.log('this.activeComponent', this.activeComponent)
     }
   }
 }

src/components/HomeSideDropDown.vue

@@ -0,0 +1,27 @@
+<template>
+  <ul id="comp-list" class="component-list">
+    <h3>hello world</h3>
+    <li
+      v-for="item in componentMap"
+      :key="item.indexOf()"
+      class="component-container"
+    >{{ component }} </li>
+  </ul>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  el: '#comp-list',
+  computed: {
+    ...mapState(['componentMap']),
+    componentMap () {
+      return Object.keys(this.componentMap)
+    }
+  }
+}
+</script>
+
+<style>
+</style>