feat: vuetify integration + editor-code actions

.babelrc

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

client/index.js

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

client/js/app.js

@@ -12,6 +12,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, VSpeedDial, VTooltip } from 'vuetify'
 import Hammer from 'hammerjs'
 import store from './store'
 
@@ -90,6 +91,15 @@ Vue.use(VeeValidate, {
     dirty: 'is-dirty' // control has been interacted with
   }
 })
+Vue.use(Vuetify, {
+  components: {
+    VApp,
+    VBtn,
+    VIcon,
+    VSpeedDial,
+    VTooltip
+  }
+})
 
 // ====================================
 // Register Vue Components

client/js/components/editor-code.vue

@@ -33,12 +33,26 @@
           svg.icons.is-18(role='img')
             title Link
             use(xlink:href='#fa-link')
+      .editor-code-toolbar-group
+        .editor-code-toolbar-item
+          svg.icons.is-18(role='img')
+            title Horizontal Bar
+            use(xlink:href='#fa-minus')
     .editor-code-main
       .editor-code-editor
         .editor-code-editor-title Editor
         codemirror(ref='cm', v-model='code', :options='cmOptions', @ready="onCmReady")
       .editor-code-preview
         .editor-code-preview-title Preview
+        v-speed-dial(:hover='true', direction='left', transition='slide-y-reverse-transition', :fixed='true', :right='true', :bottom='true')
+          v-btn(color='green', fab, dark, slot='activator')
+            v-icon save
+            v-icon close
+          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
+
 </template>
 
 <script>
@@ -75,7 +89,7 @@ export default {
         tabSize: 2,
         mode: 'text/markdown',
         theme: 'base16-dark',
-        lineNumbers: false,
+        lineNumbers: true,
         lineWrapping: true,
         line: true,
         styleActiveLine: true,
@@ -149,6 +163,7 @@ export default {
     flex: 1 1 50%;
     background-color: mc('grey', '100');
     position: relative;
+    padding: 30px 1rem 1rem 1rem;
 
     &-title {
       background-color: mc('blue', '100');

client/svg/icons.svg

@@ -477,4 +477,8 @@
       <title id="list-ul-title">list-ul</title>
       <path fill="currentColor" d="M96 96c0 26.51-21.49 48-48 48S0 122.51 0 96s21.49-48 48-48 48 21.49 48 48zM48 208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm0 160c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm96-236h352c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H144c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h352c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H144c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h352c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H144c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path>
     </symbol>
+    <symbol id="fa-minus" viewBox="0 0 448 512">
+      <title id="minus-title">minus</title>
+      <path fill="currentColor" d="M424 318.2c13.3 0 24-10.7 24-24v-76.4c0-13.3-10.7-24-24-24H24c-13.3 0-24 10.7-24 24v76.4c0 13.3 10.7 24 24 24h400z"></path>
+    </symbol>
 </svg>

dev/webpack/webpack.common.js

@@ -91,6 +91,26 @@ module.exports = {
         })
       },
       {
+        test: /\.styl$/,
+        use: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: [
+            {
+              loader: 'cache-loader',
+              options: {
+                cacheDirectory: cacheDir
+              }
+            },
+            {
+              loader: 'css-loader'
+            },
+            {
+              loader: 'stylus-loader'
+            }
+          ]
+        })
+      },
+      {
         test: /\.vue$/,
         loader: 'vue-loader',
         options: {
@@ -213,7 +233,7 @@ module.exports = {
     symlinks: true,
     alias: {
       '@': path.join(process.cwd(), 'client'),
-      'vue$': 'vue/dist/vue.common.js',
+      'vue$': 'vue/dist/vue.esm.js',
       // Duplicates fixes:
       'apollo-link': path.join(process.cwd(), 'node_modules/apollo-link'),
       'apollo-utilities': path.join(process.cwd(), 'node_modules/apollo-utilities')

package.json

@@ -143,6 +143,7 @@
     "babel-loader": "7.1.2",
     "babel-plugin-graphql-tag": "1.3.1",
     "babel-plugin-lodash": "3.3.2",
+    "babel-plugin-transform-imports": "1.4.1",
     "babel-preset-env": "1.6.1",
     "babel-preset-es2015": "6.24.1",
     "babel-preset-stage-2": "6.24.1",
@@ -184,6 +185,8 @@
     "sass-resources-loader": "1.3.1",
     "simple-progress-webpack-plugin": "1.0.4",
     "style-loader": "0.20.1",
+    "stylus": "0.54.5",
+    "stylus-loader": "3.0.1",
     "twemoji-awesome": "1.0.6",
     "uglifyjs-webpack-plugin": "1.1.6",
     "vee-validate": "2.0.3",
@@ -194,6 +197,7 @@
     "vue-loader": "13.7.0",
     "vue-simple-breakpoints": "1.0.3",
     "vue-template-compiler": "2.5.13",
+    "vuetify": "0.17.7",
     "vuex": "3.0.1",
     "vuex-persistedstate": "2.4.2",
     "webpack": "3.10.0",

server/views/main/editor.pug

@@ -3,4 +3,5 @@ extends ../master.pug
 block body
   body
     #app
-      editor
+      v-app
+        editor

server/views/master.pug

@@ -23,6 +23,7 @@ html
 
     //- CSS
     link(type='text/css', rel='stylesheet', href=config.site.path + 'css/bundle.css')
+    link(type='text/css', rel='stylesheet', href='https://fonts.googleapis.com/icon?family=Material+Icons')
 
     //- JS
     script(type='text/javascript', src=config.site.path + 'js/runtime.js')