Merge pull request #9 from deanfchung/electron

merge from electron to master

Author: deanfchung

quasar.conf.js

@@ -115,9 +115,9 @@ module.exports = function (ctx) {
       // workboxPluginMode: 'InjectManifest',
       // workboxOptions: {}, // only for NON InjectManifest
       manifest: {
-        // name: 'PreVue 2.0',
-        // short_name: 'PreVue 2.0',
-        // description: 'Vue Prototype DevTool',
+        // name: 'Quasar App',
+        // short_name: 'Quasar App',
+        // description: 'A Quasar Framework app',
         display: 'standalone',
         orientation: 'portrait',
         background_color: '#ffffff',
@@ -158,7 +158,7 @@ module.exports = function (ctx) {
     },
 
     electron: {
-      bundler: 'builder', // or 'packager'
+      // bundler: 'builder', // or 'packager'
 
       extendWebpack (cfg) {
         // do something with Electron main process Webpack cfg
@@ -181,8 +181,8 @@ module.exports = function (ctx) {
       builder: {
         // https://www.electron.build/configuration/configuration
 
-        // appId: 'prevue2'
+        // appId: 'quasar-example'
       }
     }
   }
-}
+}

src/components/CodeSnippet.vue

@@ -1,7 +1,8 @@
 <template>
-  <div>
+  <div class="codesnippet-container">
     <!-- <input type="checkbox" v-model="lineNumbers"> Linenumbers -->
-    {{ `${activeComponent}.vue` }}
+    <div class="top-p" v-if="activeComponent === ''" >Select a component</div>
+    <div v-else >{{ `${activeComponent}.vue` }}</div>
     <prism-editor
       v-model="code"
       language="js"
@@ -23,7 +24,7 @@ import 'vue-prism-editor/dist/VuePrismEditor.css'
 export default {
   data () {
     return {
-      code: `Select a component`,
+      code: `Your component boilerplate will be displayed here.`,
       lineNumbers: true,
       height: null
     }
@@ -44,12 +45,10 @@ export default {
     // calls createTemplate and createBoiler to generate snippet
     createCodeSnippet (componentName, children) {
       let result = `${this.createTemplate(componentName, children)}${this.createBoiler(componentName, children)}`
-      //console.log(`createCodeSnippet result: ${result}`)
       return result
     },
     createTemplate (componentName, children) {
       let output = ``
-      // let htmlArr = this.componentMap[compName].htmlList;
       output += ` <div>\n`
       children.forEach(name => {
         output += `    <${name}>\n    </${name}>\n`
@@ -105,8 +104,6 @@ export default {
 
       this.getWindowHeight()
     })
-    // set code to this new string literal mofo
-    // this.code = `${this.createCodeSnippet(this.activeComponent, this.componentMap[this.activeComponent].children)}`
   },
   // updates code snippet, but broken cause children undefined, shows `function () { [native code] }`
   updated () {
@@ -122,6 +119,13 @@ export default {
 <style lang="stylus" scoped>
 // resize handled by vue lifecycle methods
 .code-editor {
-  font-size: 11px;
+  font-size: 12px;
 }
+.codesnippet-container {
+  margin-bottom: 1rem;  
+}
+::-webkit-scrollbar {
+    display: none;
+}
+
 </style>

src/components/ComponentDisplay.vue

@@ -18,13 +18,13 @@
      <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>
+      <ul class="component-children">
+        <li># of children: {{ componentMap[componentData.componentName].children.length }} </li>
+        <li>children: {{ componentMap[componentData.componentName].children }}</li>
          <!-- <p v-for="child in childList" :key="childList.indexOf(child)"> {{ child.text }}</p> -->
-      </div>
-      <q-menu context-menu>
-        <q-list>
+      </ul>
+      <q-menu context-menu >
+        <q-list class="menu">
           <q-item clickable v-ripple v-close-popup @click="handleAddChild">
             <q-item-section>Add Children</q-item-section>
             <q-item-section avatar><q-icon color="primary" name="add"/></q-item-section>
@@ -78,6 +78,7 @@ export default {
     window.addEventListener('keyup', event => {
       if (event.key === 'Backspace') {
         if (this.activeComponent && this.activeComponentData.isActive) {
+          // console.log('this:', this)
           this.$store.dispatch('deleteActiveComponent')
         }
       }
@@ -179,13 +180,14 @@ export default {
   top: 0rem;
   left: 2px;
   color: black;
+  list-style: none;
 }
 .component-display {
   /* border: 3px dashed rgb(159, 122, 122); */
   /* height: 500px; */
   /* width: 500px; */
-  /* original is 70vh */
-  height: 95vh;
+  /* original is 70 */
+  height: 90vh;
   width: 100%;
   position: relative;
   background: darkslategray;
@@ -214,16 +216,19 @@ export default {
     #269;
   behavior: url(/pie/PIE.htc);
 }
+.menu {
+  margin-bottom: 0px !important;
+}
 .component-box {
   color: white;
-  border: 1px dashed rgb(227, 203, 71);
-  background-color: rgba(186, 99, 99, 0.529);
+  border: 1.2px dashed rgb(231, 203, 75);
+  background-color: rgba(172, 83, 83, 0.42);
   -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);
+  background-color: rgba(105, 179, 190, 0.514);
   border: 1px dashed rgb(227, 203, 71);
 }
 </style>

src/components/CreateComponent.vue

@@ -4,7 +4,7 @@
     <br />
     <form v-on:submit.prevent="handleClick" v-on:click="resetActiveComponent">
       <q-input
-        standout="secondary text-secondary"
+        standout="bg-secondary text-white"
         bottom-slots
         v-model="componentNameInputValue"
         label="Component Name"

src/components/ExportProject.vue

@@ -2,7 +2,7 @@
 <!-- electron build
   <q-btn class="glossy" color="secondary" label="Export Project" @click="exportProject"/>
   -->
-  <q-btn class="glossy" color="secondary" label="Export Project"/>
+  <q-btn class=" export-btn" color="secondary" label="Export Project"/>
 </template>
 
 <script>

src/components/Footer.vue

@@ -1,10 +1,10 @@
 <template>
   <q-footer reveal class="gradient text-white" :style="{ height: `${height}vh` }">
-    <q-toolbar>
+    <q-toolbar class="toolbar-background">
       <q-btn flat color="subaccent" round @click="openBottomDrawer">
         <i :class="[open ? down : up]" id="btn" ></i>
       </q-btn>
-      <q-toolbar-title>Dashboard</q-toolbar-title>
+      <q-toolbar-title >Dashboard</q-toolbar-title>
     </q-toolbar>
     <q-card>
       <q-tabs
@@ -21,7 +21,7 @@
         <q-tab name="html" label="HTML Elements" id="label-text"/>
       </q-tabs>
 
-      <q-tab-panels v-model="tab" animated class="bg-primary text-white">
+      <q-tab-panels v-model="tab" animated class="bg-primary text-white full-footer">
         <q-tab-panel name="code">
           <CodeSnippet />
         </q-tab-panel>
@@ -58,7 +58,7 @@ export default {
     return {
       tab: 'code',
       open: true,
-      height: 35,
+      height: 40,
       up: 'fas fa-chevron-up',
       down: 'fas fa-chevron-down'
     }
@@ -68,7 +68,7 @@ export default {
       // 15in mb pro - 1027 px 3.75
       // big ass screens 2.5
       let minHeight = (window.outerHeight < 900) ? 4.5 : (window.outerHeight < 1035) ? 3.75 : 2.5
-      this.height === 35 ? (this.height = minHeight) : (this.height = 35)
+      this.height === 40 ? (this.height = minHeight) : (this.height = 40)
       this.open === true ? this.open = false : this.open = true
     }
   }
@@ -80,7 +80,7 @@ i {
   font-size: 11px;
 }
 .q-btn {
-  background: $secondary;
+  // background: $secondary;
   font-size: 8px;
   margin: 5px;
 }
@@ -90,7 +90,7 @@ i {
   transition-timing-function: ease-in;
   transition: 0.2s;
   // background: #313131;
-  background: black;
+  background: #272822;
 }
 // changes the footer toolbar height
 .q-toolbar {
@@ -106,9 +106,9 @@ i {
 // this class selector does not change anything
 .q-tab__label {
   // font-size not changing
-    font-size: 10px !important;
-    line-height: 1.718em;
-    font-weight: 500;
+  font-size: 10px !important;
+  line-height: 1.718em;
+  font-weight: 500;
 }
 // changes the tab label styling
 #label-text {
@@ -124,9 +124,16 @@ i {
 // changes the length of the tab panels
 .q-tab-panels {
   height: 31vh;
+  padding: 0px !important;
 }
-
 .q-tabs {
   background: #11120F;
 }
+.toolbar-background {
+  background: black;  
+}
+.full-footer {
+  // height: 100vh;
+  padding-bottom: 0px;  
+}
 </style>

src/components/HomeSideDropDownItems/ComponentList.vue

@@ -44,14 +44,16 @@ export default {
     }
   },
   methods: {
-    ...mapActions(['setActiveComponent','deleteComponent']),
+    ...mapActions(['setActiveComponent','deleteComponent', 'deleteActiveComponent']),
     onActivated (componentData) {
       this.setActiveComponent(componentData.componentName)
       this.activeComponentData.isActive = true
     },
     handleClick (componentData) {
-      this.deleteComponent(componentData)
-      this.setActiveComponent('')
+   
+        this.setActiveComponent(componentData.componentName)
+        this.deleteActiveComponent(componentData.componentName)
+     
     }
   }
 }

src/components/OpenProjectComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-btn class="glossy mr-sm" color="secondary" label="Open Project"/>
+  <q-btn class=" export-btn" color="secondary" label="Open Project"/>
   <!--<q-btn class="glossy mr-sm" color="secondary" label="Open Project" @click="openProjectJSON"/>-->
 </template>
 

src/components/RouteDisplay.vue

@@ -1,16 +1,15 @@
 <template>
-<div>
-       <q-input
-        @keyup.enter.native="handleEnterKeyPress"
-        standout="bg-secondary text-white"
-        bottom-slots
-        v-model="newRoute"
-        label="Enter new route"
-        :dense="dense"
-        class="input-add"
-      >
-      </q-input>
-  <!--<div class="route-display">-->
+  <div>
+    <q-input
+      @keyup.enter.native="handleEnterKeyPress"
+      standout="bg-secondary text-white"
+      bottom-slots
+      v-model="newRoute"
+      label="Enter new route"
+      :dense="dense"
+      class="input-add"
+    ></q-input>
+    <!--<div class="route-display">-->
     <!--
 
     -->
@@ -19,34 +18,34 @@
 </template>
 
 <script>
-import Routes from './Routes'
-import { mapState, mapActions } from 'vuex'
+import Routes from "./Routes";
+import { mapState, mapActions } from "vuex";
 
 export default {
-  name: 'RouteDisplay',
+  name: "RouteDisplay",
   components: {
     Routes
   },
   computed: {
-    ...mapState(['routes'])
+    ...mapState(["routes"])
   },
-  data () {
+  data() {
     return {
-      newRoute: ''
-    }
+      newRoute: ""
+    };
   },
   methods: {
-    ...mapActions(['addRouteToRouteMap', 'setRoutes']),
-    handleEnterKeyPress () {
+    ...mapActions(["addRouteToRouteMap", "setRoutes"]),
+    handleEnterKeyPress() {
       this.addRouteToRouteMap(this.newRoute)
         .then(() => {
-          this.newRoute = ''
+          this.newRoute = "";
         })
 
-        .catch(err => console.log(err))
+        .catch(err => console.log(err));
     }
   }
-}
+};
 </script>
 
 <style scoped>

src/components/Routes.vue

@@ -1,6 +1,6 @@
 <template>
 
-<div>
+<div class="home-sidebar">
   <!--<div class="route-view">-->
     <a
       :class="route === activeRoute ? 'panel-block is-active' : 'panel-block'"