Browse Source

feat: editor-code toolbar dropdowns

pull/621/head
NGPixel 6 years ago
parent
commit
c6e8120912
3 changed files with 30 additions and 6 deletions
  1. 4
      client/js/app.js
  2. 22
      client/js/components/editor-code.vue
  3. 10
      client/svg/icons.svg

4
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
}

22
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
svg.icons.is-18(role='img')
title Heading
use(xlink:href='#fa-heading')
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')

10
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>
Loading…
Cancel
Save