Merge pull request #24 from drewngyen/master

added some ui changes, set all bg-teal to bg-secondary , added prismJ…

Author: drewngyen

quasar.conf.js

@@ -55,8 +55,7 @@ module.exports = function (ctx) {
         'QTabPanels',
         'QTabPanel',
         'QFab',
-        'QFabAction',
-        'QUploader'
+        'QFabAction'
       ],
 
       directives: [

src/components/CodeSnippet.vue

@@ -1,21 +1,47 @@
 <template>
   <div>
-    codsnypets
-    <PrismEditor
-      language="js"
-      lineNumbers="true"
-    />
+    <!-- <input type="checkbox" v-model="lineNumbers"> Linenumbers -->
+    <prism-editor v-model="code" language="js" :line-numbers="lineNumbers" class="code-editor" :style="{ height: `${height}vh` }"/>
   </div>
 </template>
 
 <script>
 import PrismEditor from 'vue-prism-editor'
 import 'prismjs'
-import 'prismjs/themes/prism.css'
+import 'prismjs/themes/prism-okaidia.css'
+import 'vue-prism-editor/dist/VuePrismEditor.css'
 
 export default {
+  data () {
+    return {
+      code: 'console.log(Hellor world);\naww yis\nsome boilerplate here',
+      lineNumbers: true,
+      height: null
+    }
+  },
   components: {
     PrismEditor
+  },
+  methods: {
+    getWindowHeight (e) {
+      let minHeight = (window.outerHeight < 900) ? 22 : (window.outerHeight < 1035) ? 24 : 27.5
+      this.height = minHeight
+    }
+  },
+  mounted () {
+    this.$nextTick(() => {
+      window.addEventListener('resize', this.getWindowHeight)
+
+      this.getWindowHeight()
+    })
+  },
+  beforeDestroy () {
+    window.removeEventListener('resize', this.getWindowHeight)
   }
 }
 </script>
+
+<style lang="stylus" scoped>
+.code-editor {
+}
+</style>

src/components/CreateComponent.vue

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

src/components/Footer.vue

@@ -113,15 +113,17 @@ i {
   text-transform: capitalize;
 }
 .q-tab-panel {
-  background: rgb(69,77,102);
-  background: linear-gradient(180deg, rgba(69,77,102,1) 0%, rgba(54,60,78,1) 100%);
+  // matchs the code editor bg
+  background: #272822
+  // background: rgb(69,77,102);
+  // background: linear-gradient(180deg, rgba(69,77,102,1) 0%, rgba(54,60,78,1) 100%);
 }
 // changes the length of the tab panels
 .q-tab-panels {
   height: 31vh;
 }
 
 .q-tabs {
-  background: #2c384d;
+  background: #11120F;
 }
 </style>

src/components/HomeSideDropDownItems/VuexForm.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="input-container">
     <q-input
-      standout="bg-teal text-white"
+      standout="bg-secondary text-white"
       bottom-slots
       v-model="text"
       label="Add Vuex"
@@ -13,7 +13,7 @@
       </template>
     </q-input>
     <q-input
-      standout="bg-teal text-white"
+      standout="bg-secondary text-white"
       bottom-slots
       v-model="text"
       label="Add Action"
@@ -25,7 +25,7 @@
       </template>
     </q-input>
     <q-input
-      standout="bg-teal text-white"
+      standout="bg-secondary text-white"
       bottom-slots
       v-model="text"
       label="Add Mutation"

src/components/RouteDisplay.vue

@@ -2,7 +2,7 @@
 <div>
        <q-input
         @keyup.enter.native="handleEnterKeyPress"
-        standout="bg-teal text-white"
+        standout="bg-secondary text-white"
         bottom-slots
         v-model="newRoute"
         label="Enter new route"

src/components/Tree.vue

@@ -66,7 +66,7 @@ export default {
       this.tree = build['App']
     }
   },
-  created () {
+  mounted () {
     this.buildTree()
   }
 }

src/css/quasar.variables.styl

@@ -10,7 +10,7 @@
 // Tip: Use the "Theme Builder" on Quasar's documentation website.
 
 $primary   = #737578
-$secondary = #26A69A
+$secondary = #fd5f00
 $accent    = #9C27B0
 $subaccent = #454d66
 $subaccentbtn = #2c384d

src/layouts/MyLayout.vue

@@ -49,14 +49,18 @@ export default {
 </script>
 
 <style lang="stylus">
+// css styling for the drawer items
 .drawer-menu {
   background: white;
+  // background: #27282268;
 }
+// css styling for the drawer list (not entire bg)
 .q-list {
   // background: gray;
 }
+// css styling for entire drawer
 .q-drawer {
-  background: white;
-  // background: #313131;
+  // background: white;
+  background: #272822;
 }
 </style>