feat: editor-code toolbar dropdowns

client/js/app.js

@@ -12,7 +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 { Vuetify, VApp, VBtn, VIcon, VList, VMenu, VSpeedDial, VTooltip } from 'vuetify'
 import Hammer from 'hammerjs'
 import store from './store'
 
@@ -96,6 +96,8 @@ Vue.use(Vuetify, {
     VApp,
     VBtn,
     VIcon,
+    VList,
+    VMenu,
     VSpeedDial,
     VTooltip
   }

client/js/components/editor-code.vue

@@ -15,10 +15,15 @@
             title Strikethrough
             use(xlink:href='#fa-strikethrough')
       .editor-code-toolbar-group
-        .editor-code-toolbar-item.is-dropdown
+        v-menu(offset-y, open-on-hover)
+          .editor-code-toolbar-item.is-dropdown(slot='activator')
             svg.icons.is-18(role='img')
               title Heading
               use(xlink:href='#fa-heading')
+          v-list
+            v-list-tile(v-for='(n, idx) in 6', @click='')
+              v-list-tile-action: v-icon format_size
+              v-list-tile-title Heading {{n}}
       .editor-code-toolbar-group
         .editor-code-toolbar-item
           svg.icons.is-18(role='img')
@@ -33,6 +38,15 @@
           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 Inline Code
+            use(xlink:href='#fa-terminal')
+        .editor-code-toolbar-item
+          svg.icons.is-18(role='img')
+            title Code Block
+            use(xlink:href='#fa-code')
       .editor-code-toolbar-group
         .editor-code-toolbar-item
           svg.icons.is-18(role='img')

client/svg/icons.svg

@@ -478,7 +478,15 @@
       <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>
+      <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>
+    <symbol id="fa-terminal" viewBox="0 0 640 512">
+      <title id="terminal-title">Terminal</title>
+      <path fill="currentColor" d="M257.981 272.971L63.638 467.314c-9.373 9.373-24.569 9.373-33.941 0L7.029 444.647c-9.357-9.357-9.375-24.522-.04-33.901L161.011 256 6.99 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L257.981 239.03c9.373 9.372 9.373 24.568 0 33.941zM640 456v-32c0-13.255-10.745-24-24-24H312c-13.255 0-24 10.745-24 24v32c0 13.255 10.745 24 24 24h304c13.255 0 24-10.745 24-24z"></path>
+    </symbol>
+    <symbol id="fa-code" viewBox="0 0 640 512">
+      <title id="code-title">Code</title>
+      <path fill="currentColor" d="M278.9 511.5l-61-17.7c-6.4-1.8-10-8.5-8.2-14.9L346.2 8.7c1.8-6.4 8.5-10 14.9-8.2l61 17.7c6.4 1.8 10 8.5 8.2 14.9L293.8 503.3c-1.9 6.4-8.5 10.1-14.9 8.2zm-114-112.2l43.5-46.4c4.6-4.9 4.3-12.7-.8-17.2L117 256l90.6-79.7c5.1-4.5 5.5-12.3.8-17.2l-43.5-46.4c-4.5-4.8-12.1-5.1-17-.5L3.8 247.2c-5.1 4.7-5.1 12.8 0 17.5l144.1 135.1c4.9 4.6 12.5 4.4 17-.5zm327.2.6l144.1-135.1c5.1-4.7 5.1-12.8 0-17.5L492.1 112.1c-4.8-4.5-12.4-4.3-17 .5L431.6 159c-4.6 4.9-4.3 12.7.8 17.2L523 256l-90.6 79.7c-5.1 4.5-5.5 12.3-.8 17.2l43.5 46.4c4.5 4.9 12.1 5.1 17 .6z"></path>
+    </symbol>
 </svg>