feat: editor-modal-document UI

.babelrc

@@ -2,13 +2,7 @@
   "comments": true,
   "plugins": [
     "lodash",
-    "graphql-tag",
-    ["transform-imports", {
-      "vuetify": {
-        "transform": "vuetify/es5/components/${member}",
-        "preventFullImport": true
-      }
-    }]
+    "graphql-tag"
   ],
   "presets": [
     ["env"],

client/index.js

 'use strict'
 
-require('vuetify/src/stylus/app.styl')
+require('vuetify/src/stylus/main.styl')
 require('./scss/app.scss')
 require('./js/compatibility.js')
 require('offline-plugin/runtime').install()

client/js/app.js

@@ -13,7 +13,7 @@ import { ApolloLink } from 'apollo-link'
 import { createApolloFetch } from 'apollo-fetch'
 import { BatchHttpLink } from 'apollo-link-batch-http'
 import { InMemoryCache } from 'apollo-cache-inmemory'
-import { Vuetify, VApp, VBtn, VIcon, VList, VMenu, VSpeedDial, VTooltip } from 'vuetify'
+import Vuetify from 'vuetify'
 import Hammer from 'hammerjs'
 import store from './store'
 
@@ -93,17 +93,7 @@ Vue.use(VeeValidate, {
     dirty: 'is-dirty' // control has been interacted with
   }
 })
-Vue.use(Vuetify, {
-  components: {
-    VApp,
-    VBtn,
-    VIcon,
-    VList,
-    VMenu,
-    VSpeedDial,
-    VTooltip
-  }
-})
+Vue.use(Vuetify)
 
 // ====================================
 // Register Vue Components

client/js/components/editor-code.vue

@@ -75,13 +75,13 @@
         v-btn(color='blue', fab, dark, slot='activator')
           v-icon more_horiz
           v-icon close
-        v-btn(color='blue-grey', fab, dark): v-icon sort_by_alpha
+        v-btn(color='blue-grey', fab, dark, @click='documentPropsDialog = !documentPropsDialog'): v-icon sort_by_alpha
         v-btn(color='green', fab, dark): v-icon save
         v-btn(color='red', fab, dark, small): v-icon not_interested
         v-btn(color='orange', fab, dark, small): v-icon vpn_lock
         v-btn(color='indigo', fab, dark, small): v-icon restore
         v-btn(color='brown', fab, dark, small): v-icon archive
-
+    editorModalDocument(:is-opened='documentPropsDialog')
 </template>
 
 <script>
@@ -89,15 +89,12 @@ import { codemirror } from 'vue-codemirror'
 import 'codemirror/lib/codemirror.css'
 
 // Theme
-
 import 'codemirror/theme/base16-dark.css'
 
 // Language
-
 import 'codemirror/mode/markdown/markdown.js'
 
 // Addons
-
 import 'codemirror/addon/selection/active-line.js'
 import 'codemirror/addon/display/fullscreen.js'
 import 'codemirror/addon/display/fullscreen.css'
@@ -109,7 +106,8 @@ import 'codemirror/addon/search/match-highlighter.js'
 
 export default {
   components: {
-    codemirror
+    codemirror,
+    editorModalDocument: () => import(/* webpackChunkName: "editor" */ './editor-modal-document.vue')
   },
   data() {
     return {
@@ -134,7 +132,8 @@ export default {
             if (cm.getOption('fullScreen')) cm.setOption('fullScreen', false)
           }
         }
-      }
+      },
+      documentPropsDialog: false
     }
   },
   computed: {
@@ -281,6 +280,25 @@ export default {
 
 .CodeMirror {
   height: auto;
+
+  .cm-header-1 {
+    font-size: 1.5rem;
+  }
+  .cm-header-2 {
+    font-size: 1.25rem;
+  }
+  .cm-header-3 {
+    font-size: 1.15rem;
+  }
+  .cm-header-4 {
+    font-size: 1.1rem;
+  }
+  .cm-header-5 {
+    font-size: 1.05rem;
+  }
+  .cm-header-6 {
+    font-size: 1.025rem;
+  }
 }
 
 .CodeMirror-focused .cm-matchhighlight {

client/js/components/editor-modal-document.vue

+<template lang='pug'>
+  v-bottom-sheet(v-model='isOpened', inset)
+    v-toolbar(color='blue-grey', flat)
+      v-icon(color='white') sort_by_alpha
+      v-toolbar-title.white--text Document Properties
+      v-spacer
+      v-btn(icon, dark)
+        v-icon close
+    v-card.pa-3(tile)
+      v-card-text
+        v-form
+          v-text-field(label='Title', autofocus, loading='primary')
+          v-text-field(label='Short Description')
+      v-card-actions
+        v-btn(color='green', dark) Save
+        v-btn Cancel
+</template>
+
+<script>
+export default {
+  props: {
+    isOpened: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+
+    }
+  }
+}
+</script>
+
+<style lang='scss'>
+
+</style>