Merge pull request #1 from drewngyen/feature-code-snippets

fixed footer for mb pros 15in

Author: drewngyen

package-lock.json

@@ -15,11 +15,13 @@
     "fs-extra": "^8.1.0",
     "localforage": "^1.7.3",
     "mousetrap": "^1.6.3",
+    "prismjs": "^1.16.0",
     "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",
+    "vue-prism-editor": "^0.2.1",
     "vued3tree": "^3.7.1",
     "vuex": "^3.1.1"
   },

package.json

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

quasar.conf.js

@@ -1,26 +1,21 @@
 <template>
-  <div class="snip">
-    <q-editor
-      v-model="editor"
-      :definitions="{
-        bold: {label: 'Bold', icon: null, tip: 'My bold tooltip'}
-      }"
+  <div>
+    codsnypets
+    <PrismEditor
+      language="js"
+      lineNumbers="true"
     />
   </div>
 </template>
 
 <script>
+import PrismEditor from 'vue-prism-editor'
+import 'prismjs'
+import 'prismjs/themes/prism.css'
+
 export default {
-  data () {
-    return {
-      editor: 'Here we are overriding the <b>bold</b> command to include a label instead of an icon and also changing its tooltip.'
-    }
+  components: {
+    PrismEditor
   }
 }
 </script>
-
-<style>
-.snip{
-  height: 150px;
-}
-</style>

src/components/CodeSnippet.vue

@@ -23,9 +23,11 @@
 
       <q-tab-panels v-model="tab" animated class="bg-primary text-white">
         <q-tab-panel name="code">
+          <CodeSnippet />
         </q-tab-panel>
 
         <q-tab-panel name="detail">
+          <div class="text-h6">Component Deets</div>Component Info Here
         </q-tab-panel>
 
         <q-tab-panel name="tree">
@@ -42,12 +44,12 @@
 
 <script>
 import Tree from './Tree'
-// import CodeSnippet from './CodeSnippet'
+import CodeSnippet from './CodeSnippet'
 
 export default {
   components: {
-    Tree
-    // CodeSnippet
+    Tree,
+    CodeSnippet
   },
   data () {
     return {
@@ -60,7 +62,9 @@ export default {
   },
   methods: {
     openBottomDrawer () {
-      let minHeight = (window.outerHeight < 900) ? 4.5 : 2.5
+      // 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.open === true ? this.open = false : this.open = true
     }