feat: vuetify integration + editor-code actions

client/index.js

@@ -1,5 +1,6 @@
 '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>