merge conf

Author: Dean Ohashi

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/CreateComponent.vue

@@ -4,7 +4,7 @@
     <br />
     <form v-on:submit.prevent="handleClick" v-on:click="resetActiveComponent">
       <q-input
-        standout="bg-secondary text-white"
+        standout="secondary text-secondary"
         bottom-slots
         v-model="componentNameInputValue"
         label="Component Name"
@@ -14,11 +14,13 @@
       </q-input>
     </form>
     <div class="icon-container">
-      <Icons @getClickedIcon="addToSelectedElementList" @activeElement="addToComponentElementList"/>
+      <Icons class = 'icons' @getClickedIcon="addToSelectedElementList" @activeElement="addToComponentElementList"/>
     </div>
     <ParentMultiselect />
     <br />
-    <q-btn id="add-component-btn" class="glossy" color="teal" label="Create Component" icon-right="add" @click="handleClick" :disabled="!componentNameInputValue" />
+
+    <q-btn id="add-component-btn" color="secondary" label="Create Component" @click="handleClick" :disabled="!componentNameInputValue" />
+
   </div>
 </template>
 

src/components/ExportProject.vue

@@ -1,17 +1,22 @@
 <template>
-  <q-btn class=" export-btn" color="secondary" label="Export Project" @click="exportProject"/>
+<!-- electron build
+  <q-btn class="glossy" color="secondary" label="Export Project" @click="exportProject"/>
+  -->
+  <q-btn class="glossy" color="secondary" label="Export Project"/>
 </template>
 
 <script>
 // Where all of the boilerplate is exported
 import { mapState } from "vuex";
-const { remote } = require("electron");
-import fs from "fs-extra";
-import path from "path";
-const ipc = require("electron").ipcRenderer;
+//const { remote } = require("electron");
+//import fs from "fs-extra";
+//import path from "path";
+//const ipc = require("electron").ipcRenderer;
 export default {
-  name: 'ExportProjectComponent'
+
+  name: "ExportProjectComponent",
 }
+
 //   methods: {
 //     showExportDialog() {
 //       remote.dialog.showSaveDialog({
@@ -374,13 +379,20 @@ export default {
 //     ...mapState(["componentMap"])
 //   }
 // };
+
+
+
 </script>
 
 <style>
+
 .export-btn {
   min-height: 10px !important;
   font-size: 11px;
   text-transform: capitalize;
   padding: 3px 8px;
 }
+
 </style>
+
+

src/components/Footer.vue

@@ -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/Icons.vue

@@ -43,6 +43,7 @@ export default {
     grid-template-columns: 50% 50%;
     grid-row-gap: 1em;
     width: 100%;
+
   }
 }
 
@@ -52,9 +53,10 @@ button {
 }
 button:hover {
   cursor: pointer;
-  color: #00d1b2;
+  color: #00FFFF
 }
 button:focus {
   outline: none;
 }
+
 </style>

src/components/OpenProjectComponent.vue

@@ -1,57 +1,59 @@
 <template>
-  <q-btn class="glossy mr-sm" color="teal" label="Open Project" @click="openProjectJSON"/>
+  <q-btn class="glossy mr-sm" color="secondary" label="Open Project"/>
+  <!--<q-btn class="glossy mr-sm" color="secondary" label="Open Project" @click="openProjectJSON"/>-->
 </template>
 
 <script>
 import localforage from 'localforage';
-import fs from 'fs-extra';
+//import fs from 'fs-extra';
 import { addProject } from '../store/types';
-const { remote } = require("electron");
+//const { remote } = require("electron");
 import { mapState, mapActions } from 'vuex'
 
 export default {
   name: 'OpenProjectComponent',
-  methods: {
-    ...mapActions([
-      'setComponentMap',
-      'setRoutes',
-    ]),
-    parseFileName(file) { 
-      //Obtains json file name from file path
-      return file.split('/').pop();
-    },
-    openJSONFile(data){
-      const jsonFile = JSON.parse(fs.readFileSync(data[0], 'utf8'))
-      this.setComponentMap(jsonFile.componentMap)
-      this.setRoutes(jsonFile.routes)
-    },
-    showOpenJSONDialog(){
-      remote.dialog.showOpenDialog({
-        properties: ['openFile'],
-        filters: [{
-          name: 'JSON Files',
-          extensions: ['json']
-        }]},
-        result => {
-          // 'result' is the filepath of the .json file being opened
-          this.openJSONFile(result);
-        }
-      );
-    },
-    openProjectJSON(){
-      this.showOpenJSONDialog();
-    }
-  },
-  created(){
-    Mousetrap.bind(['command+o', 'ctrl+o'], () => {
-      this.openProjectJSON();
-    });
-  }
 }
-</script>
+//   methods: {
+//     ...mapActions([
+//       'setComponentMap',
+//       'setRoutes',
+//     ]),
+//     parseFileName(file) { 
+//       //Obtains json file name from file path
+//       return file.split('/').pop();
+//     },
+//     openJSONFile(data){
+//       const jsonFile = JSON.parse(fs.readFileSync(data[0], 'utf8'))
+//       this.setComponentMap(jsonFile.componentMap)
+//       this.setRoutes(jsonFile.routes)
+//     },
+//     showOpenJSONDialog(){
+//       remote.dialog.showOpenDialog({
+//         properties: ['openFile'],
+//         filters: [{
+//           name: 'JSON Files',
+//           extensions: ['json']
+//         }]},
+//         result => {
+//           // 'result' is the filepath of the .json file being opened
+//           this.openJSONFile(result);
+//         }
+//       );
+//     },
+//     openProjectJSON(){
+//       this.showOpenJSONDialog();
+//     }
+//   },
+//   created(){
+//     Mousetrap.bind(['command+o', 'ctrl+o'], () => {
+//       this.openProjectJSON();
+//     });
+//   }
+// }
+ </script>
 
-<style scoped>
-  .mr-sm {
-    margin-right: 0.2rem;
-  }
-</style>
+ <style scoped>
+   .mr-sm {
+     margin-right: 0.2rem;
+   }
+ </style>