richard
/
wiki
mirror of https://github.com/Requarks/wiki.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

feat: vuetify integration + editor-code actions

pull/621/head
NGPixel 7 years ago
parent
1a051f5569
commit
da8b4b662c
10 changed files with 143 additions and 12 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      .babelrc
  2. 1
      client/index.js
  3. 10
      client/js/app.js
  4. 17
      client/js/components/editor-code.vue
  5. 4
      client/svg/icons.svg
  6. 22
      dev/webpack/webpack.common.js
  7. 4
      package.json
  8. 3
      server/views/main/editor.pug
  9. 1
      server/views/master.pug
  10. 85
      yarn.lock

8
.babelrc
View File

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

1
client/index.js
View File

@ -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()

10
client/js/app.js
View File

@ -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

17
client/js/components/editor-code.vue
View File

@ -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');

4
client/svg/icons.svg
View File

@ -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>

22
dev/webpack/webpack.common.js
View File

@ -90,6 +90,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',
@ -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')

4
package.json
View File

@ -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",

3
server/views/main/editor.pug
View File

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

1
server/views/master.pug
View File

@ -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')

85
yarn.lock
View File

@ -1315,6 +1315,15 @@ babel-plugin-transform-exponentiation-operator@^6.22.0, babel-plugin-transform-e
babel-plugin-syntax-exponentiation-operator "^6.8.0"
babel-runtime "^6.22.0"
babel-plugin-transform-imports@1.4.1:
version "1.4.1"
resolved "https://registry.yarnpkg.com/babel-plugin-transform-imports/-/babel-plugin-transform-imports-1.4.1.tgz#b5346b06484601024b73ef34abfc52a950a145d9"
dependencies:
babel-types "^6.6.0"
lodash.camelcase "^4.3.0"
lodash.kebabcase "^4.1.1"
lodash.snakecase "^4.1.1"
babel-plugin-transform-object-rest-spread@^6.22.0:
version "6.26.0"
resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz#0f36692d50fef6b7e2d4b3ac1478137a963b7b06"
@ -1533,7 +1542,7 @@ babel-types@7.0.0-beta.3:
lodash "^4.2.0"
to-fast-properties "^2.0.0"
babel-types@^6.0.19, babel-types@^6.26.0:
babel-types@^6.0.19, babel-types@^6.26.0, babel-types@^6.6.0:
version "6.26.0"
resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497"
dependencies:
@ -2729,6 +2738,10 @@ css-loader@0.28.9:
postcss-value-parser "^3.3.0"
source-list-map "^2.0.0"
css-parse@1.7.x:
version "1.7.0"
resolved "https://registry.yarnpkg.com/css-parse/-/css-parse-1.7.0.tgz#321f6cf73782a6ff751111390fc05e2c657d8c9b"
css-select@~1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858"
@ -2920,6 +2933,12 @@ de-indent@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
debug@*, debug@^3, debug@^3.0, debug@^3.0.1, debug@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
dependencies:
ms "2.0.0"
debug@2.6.7:
version "2.6.7"
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.7.tgz#92bad1f6d05bbb6bba22cca88bcd0ec894c2861e"
@ -2938,12 +2957,6 @@ debug@^2.1.1, debug@^2.1.2, debug@^2.2.0, debug@^2.6.3, debug@^2.6.8:
dependencies:
ms "2.0.0"
debug@^3, debug@^3.0, debug@^3.0.1, debug@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
dependencies:
ms "2.0.0"
debug@^3.0.0:
version "3.0.1"
resolved "https://registry.yarnpkg.com/debug/-/debug-3.0.1.tgz#0564c612b521dc92d9f2988f0549e34f9c98db64"
@ -4312,6 +4325,17 @@ glob-parent@^3.1.0:
is-glob "^3.1.0"
path-dirname "^1.0.0"
glob@7.0.x:
version "7.0.6"
resolved "https://registry.yarnpkg.com/glob/-/glob-7.0.6.tgz#211bafaf49e525b8cd93260d14ab136152b3f57a"
dependencies:
fs.realpath "^1.0.0"
inflight "^1.0.4"
inherits "2"
minimatch "^3.0.2"
once "^1.3.0"
path-is-absolute "^1.0.0"
glob@^6.0.1, glob@^6.0.4:
version "6.0.4"
resolved "https://registry.yarnpkg.com/glob/-/glob-6.0.4.tgz#0f08860f6a155127b2fadd4f9ce24b1aab6e4d22"
@ -6067,6 +6091,10 @@ lodash.isstring@^4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/lodash.isstring/-/lodash.isstring-4.0.1.tgz#d527dfb5456eca7cc9bb95d5daeaf88ba54a5451"
lodash.kebabcase@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz#8489b1cb0d29ff88195cceca448ff6d6cc295c36"
lodash.keys@^4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-4.2.0.tgz#a08602ac12e4fb83f91fc1fb7a360a4d9ba35205"
@ -6115,6 +6143,10 @@ lodash.shuffle@^4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/lodash.shuffle/-/lodash.shuffle-4.2.0.tgz#145b5053cf875f6f5c2a33f48b6e9948c6ec7b4b"
lodash.snakecase@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/lodash.snakecase/-/lodash.snakecase-4.1.1.tgz#39d714a35357147837aefd64b5dcbb16becd8f8d"
lodash.sortby@^4.7.0:
version "4.7.0"
resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
@ -6507,7 +6539,7 @@ mkdirp@0.3.0:
version "0.3.0"
resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.3.0.tgz#1bbf5ab1ba827af23575143490426455f481fe1e"
mkdirp@0.5.1, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
mkdirp@0.5.1, mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
version "0.5.1"
resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
dependencies:
@ -8961,6 +8993,10 @@ sass-resources-loader@1.3.1:
glob "^7.1.1"
loader-utils "^1.0.4"
sax@0.5.x:
version "0.5.8"
resolved "https://registry.yarnpkg.com/sax/-/sax-0.5.8.tgz#d472db228eb331c2506b0e8c15524adb939d12c1"
sax@^1.2.1, sax@~1.2.1:
version "1.2.4"
resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
@ -9313,6 +9349,12 @@ source-map-url@^0.4.0:
version "0.4.0"
resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
source-map@0.1.x:
version "0.1.43"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.43.tgz#c24bc146ca517c1471f5dacbe2571b2b7f9e3346"
dependencies:
amdefine ">=0.0.4"
source-map@0.4.x, source-map@^0.4.2, source-map@^0.4.4:
version "0.4.4"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
@ -9555,6 +9597,25 @@ stylehacks@^4.0.0-rc.2:
postcss "^6.0.0"
postcss-selector-parser "^3.0.0-rc.0"
stylus-loader@3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/stylus-loader/-/stylus-loader-3.0.1.tgz#77f4b34fd030d25b2617bcf5513db5b0730c4089"
dependencies:
loader-utils "^1.0.2"
lodash.clonedeep "^4.5.0"
when "~3.6.x"
stylus@0.54.5:
version "0.54.5"
resolved "https://registry.yarnpkg.com/stylus/-/stylus-0.54.5.tgz#42b9560931ca7090ce8515a798ba9e6aa3d6dc79"
dependencies:
css-parse "1.7.x"
debug "*"
glob "7.0.x"
mkdirp "0.5.x"
sax "0.5.x"
source-map "0.1.x"
supports-color@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
@ -10224,6 +10285,10 @@ vue@2.5.13:
version "2.5.13"
resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.13.tgz#95bd31e20efcf7a7f39239c9aa6787ce8cf578e1"
vuetify@0.17.7:
version "0.17.7"
resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-0.17.7.tgz#068c8210473643d45166ef9c5f6eb0ecf26bb5a5"
vuex-persistedstate@2.4.2:
version "2.4.2"
resolved "https://registry.yarnpkg.com/vuex-persistedstate/-/vuex-persistedstate-2.4.2.tgz#a8caf63b07ce4bdff6d82b29634c051ead382bf3"
@ -10392,6 +10457,10 @@ whatwg-url@^6.3.0:
tr46 "^1.0.0"
webidl-conversions "^4.0.1"
when@~3.6.x:
version "3.6.4"
resolved "https://registry.yarnpkg.com/when/-/when-3.6.4.tgz#473b517ec159e2b85005497a13983f095412e34e"
whet.extend@~0.9.9:
version "0.9.9"
resolved "https://registry.yarnpkg.com/whet.extend/-/whet.extend-0.9.9.tgz#f877d5bf648c97e5aa542fadc16d6a259b9c11a1"

Write Preview
Loading…
Cancel
Save