added upload mockup

Author: drewngyen

quasar.conf.js

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

src/components/CodeSnippet.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="snip">
+    <q-editor
+      v-model="editor"
+      :definitions="{
+        bold: {label: 'Bold', icon: null, tip: 'My bold tooltip'}
+      }"
+    />
+  </div>
+</template>
+
+<script>
+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.'
+    }
+  }
+}
+</script>
+
+<style>
+.snip{
+  height: 150px;
+}
+</style>

src/components/CreateComponent.vue

@@ -26,7 +26,6 @@
 import Icons from './Icons'
 import ParentMultiselect from '../components/ParentMultiselect'
 import { mapState, mapActions } from 'vuex'
-// import * as types from '../store/types.js'
 
 export default {
   name: 'HomeSidebar',

src/components/Footer.vue

@@ -22,8 +22,6 @@
 
       <q-tab-panels v-model="tab" animated class="bg-primary text-white">
         <q-tab-panel name="code">
-          <div class="text-h6">Code Snippet</div>Code Snippet Component Here
-          <br />asdfadsfasdf
         </q-tab-panel>
 
         <q-tab-panel name="tree">
@@ -40,10 +38,12 @@
 
 <script>
 import Tree from './Tree'
+// import CodeSnippet from './CodeSnippet'
 
 export default {
   components: {
     Tree
+    // CodeSnippet
   },
   data () {
     return {

src/components/ParentMultiselect.vue

@@ -2,7 +2,7 @@
   <div id="parent-select">
     <br />
     <multiselect
-      placeholder="Choose Parent (if applicable)"
+      placeholder="Parent Component"
       :multiple="false"
       :close-on-select="true"
       :options="options"
@@ -52,5 +52,9 @@ export default {
 
 <style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
 <style scoped>
-
+  #parent-select{
+    height: 30px;
+    margin: 0.75rem;
+    width: 90%;
+  }
 </style>

src/components/Toolbar.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="home-sidebar">
+    <q-btn-group>
+      <q-btn color="secondary" icon="timeline" />
+      <q-btn color="secondary" icon="visibility" />
+      <q-btn color="secondary" icon="update" />
+    </q-btn-group>
+  </div>
+</template>
+
+<style>
+.home-sidebar {
+  margin: 1rem;
+  border-radius: 5px;
+}
+</style>

src/components/UploadImage.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="home-sidebar">
+    <q-uploader
+      url="http://localhost:4444/upload"
+      label="Upload Image Mockups"
+      color="teal"
+      flat
+      bordered
+      style="max-width: 100%"
+    />
+  </div>
+</template>
+
+<style>
+.home-sidebar {
+  margin: 1rem;
+  border-radius: 5px;
+}
+</style>

src/layouts/MyLayout.vue

@@ -13,6 +13,7 @@
     <q-drawer v-model="left" side="left" behavior="desktop" bordered>
       <!-- drawer content -->
       <q-list>
+        <UploadImage />
         <HomeSideDropDown />
         <CreateComponent />
       </q-list>
@@ -29,6 +30,7 @@
 import HomeSideDropDown from '../components/HomeSideDropDown'
 import Footer from '../components/Footer'
 import CreateComponent from '../components/CreateComponent'
+import UploadImage from '../components/UploadImage'
 
 export default {
   data () {
@@ -40,7 +42,8 @@ export default {
   components: {
     HomeSideDropDown,
     Footer,
-    CreateComponent
+    CreateComponent,
+    UploadImage
   }
 }
 </script>