liz/wikijs-fork
liz/wikijs-fork
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: session knex connector + editor UI improvements

Browse Source
This commit is contained in:
Nick 2019-05-11 01:23:32 -04:00
parent 4552c6d2b0
commit 6041b1697a
7 changed files with 122 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
client/components/editor.vue
View File

@ -6,25 +6,25 @@
.subheading.grey--text {{currentPageTitle}}
v-spacer
template(slot='actions')
v-btn(
outline
v-btn.animated.fadeInDown(
flat
color='green'
@click.native.stop='save'
:class='{ "is-icon": $vuetify.breakpoint.mdAndDown }'
)
v-icon(color='green', :left='$vuetify.breakpoint.lgAndUp') check
span.white--text(v-if='$vuetify.breakpoint.lgAndUp') {{ mode === 'create' ? $t('common:actions.create') : $t('common:actions.save') }}
v-btn(
outline
v-btn.animated.fadeInDown.wait-p1s(
flat
color='blue'
@click.native.stop='openPropsModal'
:class='{ "is-icon": $vuetify.breakpoint.mdAndDown, "mx-0": !welcomeMode, "ml-0": welcomeMode }'
)
v-icon(color='blue', :left='$vuetify.breakpoint.lgAndUp') sort_by_alpha
span.white--text(v-if='$vuetify.breakpoint.lgAndUp') {{ $t('editor:page') }}
v-btn(
v-btn.animated.fadeInDown.wait-p2s(
v-if='!welcomeMode'
outline
flat
color='red'
:class='{ "is-icon": $vuetify.breakpoint.mdAndDown }'
@click.native.stop='exit'

59
client/components/editor/editor-markdown.vue
View File

@ -1,20 +1,24 @@
<template lang='pug'>
.editor-markdown
v-toolbar.editor-markdown-toolbar(dense, color='primary', dark, flat)
v-btn.animated.fadeInLeft(v-if='isModalShown', flat, @click='closeAllModal')
v-icon(left) chevron_left
span Back
template(v-else)
v-tooltip(bottom, color='primary')
v-btn(icon, slot='activator', @click='toggleMarkup({ start: `**` })').mx-0
v-btn.animated.fadeIn(icon, slot='activator', @click='toggleMarkup({ start: `**` })').mx-0
v-icon format_bold
span Bold
v-tooltip(bottom, color='primary')
v-btn(icon, slot='activator', @click='toggleMarkup({ start: `*` })').mx-0
v-btn.animated.fadeIn.wait-p1s(icon, slot='activator', @click='toggleMarkup({ start: `*` })').mx-0
v-icon format_italic
span Italic
v-tooltip(bottom, color='primary')
v-btn(icon, slot='activator', @click='toggleMarkup({ start: `~~` })').mx-0
v-btn.animated.fadeIn.wait-p2s(icon, slot='activator', @click='toggleMarkup({ start: `~~` })').mx-0
v-icon format_strikethrough
span Strikethrough
v-menu(offset-y, open-on-hover)
v-btn(icon, slot='activator').mx-0
v-btn.animated.fadeIn.wait-p3s(icon, slot='activator').mx-0
v-icon text_fields
v-list.py-0
template(v-for='(n, idx) in 6')
@ -24,15 +28,15 @@
v-list-tile-title Heading {{n}}
v-divider(v-if='idx < 5')
v-tooltip(bottom, color='primary')
v-btn(icon, slot='activator', @click='toggleMarkup({ start: `~` })').mx-0
v-btn.animated.fadeIn.wait-p4s(icon, slot='activator', @click='toggleMarkup({ start: `~` })').mx-0
v-icon vertical_align_bottom
span Subscript
v-tooltip(bottom, color='primary')
v-btn(icon, slot='activator', @click='toggleMarkup({ start: `^` })').mx-0
v-btn.animated.fadeIn.wait-p5s(icon, slot='activator', @click='toggleMarkup({ start: `^` })').mx-0
v-icon vertical_align_top
span Superscript
v-menu(offset-y, open-on-hover)
v-btn(icon, slot='activator').mx-0
v-btn.animated.fadeIn.wait-p6s(icon, slot='activator').mx-0
v-icon format_quote
v-list.py-0
v-list-tile(@click='insertBeforeEachLine({ content: `> `})')
@ -61,70 +65,70 @@
v-list-tile-title Error Blockquote
v-divider
v-tooltip(bottom, color='primary')
v-btn(icon, slot='activator', @click='insertBeforeEachLine({ content: `- `})').mx-0
v-btn.animated.fadeIn.wait-p7s(icon, slot='activator', @click='insertBeforeEachLine({ content: `- `})').mx-0
v-icon format_list_bulleted
span Unordered List
v-tooltip(bottom, color='primary')
v-btn(icon, slot='activator', @click='insertBeforeEachLine({ content: `1. `})').mx-0
v-btn.animated.fadeIn.wait-p8s(icon, slot='activator', @click='insertBeforeEachLine({ content: `1. `})').mx-0
v-icon format_list_numbered
span Ordered List
v-tooltip(bottom, color='primary')
v-btn(icon, slot='activator', @click='toggleMarkup({ start: "`" })').mx-0
v-btn.animated.fadeIn.wait-p9s(icon, slot='activator', @click='toggleMarkup({ start: "`" })').mx-0
v-icon space_bar
span Inline Code
v-tooltip(bottom, color='primary')
v-btn(icon, slot='activator', @click='toggleMarkup({ start: `<kbd>`, end: `</kbd>` })').mx-0
v-btn.animated.fadeIn.wait-p10s(icon, slot='activator', @click='toggleMarkup({ start: `<kbd>`, end: `</kbd>` })').mx-0
v-icon font_download
span Keyboard Key
v-tooltip(bottom, color='primary')
v-btn(icon, slot='activator', @click='insertAfter({ content: `---`, newLine: true })').mx-0
v-btn.animated.fadeIn.wait-p11s(icon, slot='activator', @click='insertAfter({ content: `---`, newLine: true })').mx-0
v-icon remove
span Horizontal Bar
.editor-markdown-main
.editor-markdown-sidebar
v-tooltip(right, color='teal')
v-btn(icon, slot='activator', dark, disabled).mx-0
v-btn.animated.fadeInLeft(icon, slot='activator', dark, disabled).mx-0
v-icon link
span Insert Link
v-tooltip(right, color='teal')
v-btn(icon, slot='activator', dark, @click='toggleModal(`editorModalMedia`)').mx-0
v-btn.animated.fadeInLeft.wait-p1s(icon, slot='activator', dark, @click='toggleModal(`editorModalMedia`)').mx-0
v-icon(:color='activeModal === `editorModalMedia` ? `teal` : ``') image
span Insert Image
v-tooltip(right, color='teal')
v-btn(icon, slot='activator', dark, @click='toggleModal(`editorModalBlocks`)').mx-0
v-btn.animated.fadeInLeft.wait-p2s(icon, slot='activator', dark, @click='toggleModal(`editorModalBlocks`)').mx-0
v-icon(:color='activeModal === `editorModalBlocks` ? `teal` : ``') dashboard
span Insert Block
v-tooltip(right, color='teal')
v-btn(icon, slot='activator', dark, disabled).mx-0
v-btn.animated.fadeInLeft.wait-p3s(icon, slot='activator', dark, disabled).mx-0
v-icon insert_drive_file
span Insert File
v-tooltip(right, color='teal')
v-btn(icon, slot='activator', dark, disabled).mx-0
v-btn.animated.fadeInLeft.wait-p4s(icon, slot='activator', dark, disabled).mx-0
v-icon code
span Insert Code Block
v-tooltip(right, color='teal')
v-btn(icon, slot='activator', dark, disabled).mx-0
v-btn.animated.fadeInLeft.wait-p5s(icon, slot='activator', dark, disabled).mx-0
v-icon play_circle_outline
span Insert Video / Audio
v-tooltip(right, color='teal')
v-btn(icon, slot='activator', dark, disabled).mx-0
v-btn.animated.fadeInLeft.wait-p6s(icon, slot='activator', dark, disabled).mx-0
v-icon multiline_chart
span Insert Diagram
v-tooltip(right, color='teal')
v-btn(icon, slot='activator', dark, disabled).mx-0
v-btn.animated.fadeInLeft.wait-p7s(icon, slot='activator', dark, disabled).mx-0
v-icon functions
span Insert Math Expression
v-tooltip(right, color='teal')
v-btn(icon, slot='activator', dark, disabled).mx-0
v-btn.animated.fadeInLeft.wait-p8s(icon, slot='activator', dark, disabled).mx-0
v-icon border_outer
span Table Helper
v-spacer
v-tooltip(right, color='teal')
v-btn(icon, slot='activator', dark, @click='toggleFullscreen').mx-0
v-btn.animated.fadeInLeft.wait-p9s(icon, slot='activator', dark, @click='toggleFullscreen').mx-0
v-icon crop_free
span Distraction Free Mode
v-tooltip(right, color='teal')
v-btn(icon, slot='activator', dark, @click='toggleHelp').mx-0
v-btn.animated.fadeInLeft.wait-p10s(icon, slot='activator', dark, @click='toggleHelp').mx-0
v-icon(:color='helpShown ? `teal` : ``') help
span Markdown Formatting Help
.editor-markdown-editor
@ -275,6 +279,9 @@ export default {
isMobile() {
return this.$vuetify.breakpoint.smAndDown
},
isModalShown() {
return this.helpShown || this.activeModal !== ''
},
locale: get('page/locale'),
path: get('page/path'),
activeModal: sync('editor/activeModal')
@ -282,6 +289,11 @@ export default {
methods: {
toggleModal(key) {
this.activeModal = (this.activeModal === key) ? '' : key
this.helpShown = false
},
closeAllModal() {
this.activeModal = ''
this.helpShown = false
},
onCmReady(cm) {
const keyBindings = {
@ -438,6 +450,7 @@ export default {
}, 500),
toggleHelp () {
this.helpShown = !this.helpShown
this.activeModal = ''
},
toggleFullscreen () {
this.cm.setOption('fullScreen', true)

2
client/scss/base/animation.scss
View File

@ -5,7 +5,7 @@ $use-bounce: true;
@import "~animate-sass/animate";
@for $i from 1 to 9 {
@for $i from 1 to 12 {
.wait-p#{$i}s {
animation-delay: $i * .1s !important;
}

4
client/themes/default/scss/app.scss
View File

@ -274,6 +274,10 @@
padding: 1rem 1rem 1rem 3rem;
margin: 1rem 24px;
@at-root .theme--dark & {
background-color: darken(mc('grey', '900'), 5%);
}
> code {
background-color: transparent;
padding: 0;

1
package.json
View File

@ -57,6 +57,7 @@
"chokidar": "2.1.5",
"clean-css": "4.2.1",
"compression": "1.7.4",
"connect-session-knex": "1.4.0",
"cookie-parser": "1.4.4",
"cors": "2.8.5",
"custom-error-instance": "2.1.1",

6
server/master.js
View File

@ -5,6 +5,7 @@ const cookieParser = require('cookie-parser')
const cors = require('cors')
const express = require('express')
const session = require('express-session')
const KnexSessionStore = require('connect-session-knex')(session)
const favicon = require('serve-favicon')
const fs = require('fs-extra')
const http = require('http')
@ -69,7 +70,10 @@ module.exports = async () => {
app.use(session({
secret: WIKI.config.sessionSecret,
resave: false,
saveUninitialized: false
saveUninitialized: false,
store: new KnexSessionStore({
knex: WIKI.models.knex
})
}))
app.use(WIKI.auth.passport.initialize())
app.use(WIKI.auth.authenticate)

3
server/models/editors.js
View File

@ -88,6 +88,9 @@ module.exports = class Editor extends Model {
} catch (err) {
WIKI.logger.error(`Failed to scan or load new editors: [ FAILED ]`)
WIKI.logger.error(err)
if (trx) {
trx.rollback()
}
}
}