Merge pull request #36 from drewngyen/master

Fixed some UI bugs

Author: drewngyen

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,9 +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,11 +18,11 @@
      <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>
+      </ul>
       <q-menu context-menu>
         <q-list>
           <q-item clickable v-ripple v-close-popup @click="handleAddChild">
@@ -179,13 +179,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;
@@ -217,13 +218,13 @@ export default {
 .component-box {
   color: white;
   border: 1px dashed rgb(227, 203, 71);
-  background-color: rgba(186, 99, 99, 0.529);
+  background-color: rgba(186, 99, 99, 0.420);
   -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(39, 78, 223, 0.3);
   border: 1px dashed rgb(227, 203, 71);
 }
 </style>

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

@@ -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
     }
   }

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'"

src/components/SaveProjectComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-btn class="glossy mr-sm" color="secondary" label="Save"/>
+  <q-btn class=" export-btn" color="secondary" label="Save"/>
   <!--<q-btn class="glossy mr-sm" color="secondary" label="Save" @click="saveProjectJSON"/>  Uncomment and delete line above for electron build-->
 </template>
 

src/css/app.styl

@@ -2,9 +2,13 @@
 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%);
 }
+// ::-webkit-scrollbar {
+//   width: 2px;
+// }