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

feat: serve asset from db + editor mobile improvements

Browse Source
This commit is contained in:
Nick 2019-05-18 02:27:30 -04:00
parent d27ffe7ca4
commit 965f0ad2cd
8 changed files with 168 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,9 +1,9 @@
<template lang='pug'>
.editor-markdown
v-toolbar.editor-markdown-toolbar(dense, color='primary', dark, flat)
v-toolbar.editor-markdown-toolbar(dense, color='primary', dark, flat, style='overflow-x: hidden;')
v-btn.animated.fadeInLeft(v-if='isModalShown', flat, @click='closeAllModal')
v-icon(left) chevron_left
span Back
v-icon(left) close
span Back to Editor
template(v-else)
v-tooltip(bottom, color='primary')
v-btn.animated.fadeIn(icon, slot='activator', @click='toggleMarkup({ start: `**` })').mx-0
@ -92,45 +92,42 @@
span Insert Link
v-tooltip(right, color='teal')
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-icon(:color='activeModal === `editorModalMedia` ? `teal` : ``') burst_mode
span Insert Assets
v-tooltip(right, color='teal')
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.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.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.animated.fadeInLeft.wait-p5s(icon, slot='activator', dark, disabled).mx-0
v-btn.animated.fadeInLeft.wait-p4s(icon, slot='activator', dark, disabled).mx-0
v-icon play_circle_outline
span Insert Video / Audio
v-tooltip(right, color='teal')
v-btn.animated.fadeInLeft.wait-p6s(icon, slot='activator', dark, disabled).mx-0
v-btn.animated.fadeInLeft.wait-p5s(icon, slot='activator', dark, disabled).mx-0
v-icon multiline_chart
span Insert Diagram
v-tooltip(right, color='teal')
v-btn.animated.fadeInLeft.wait-p7s(icon, slot='activator', dark, disabled).mx-0
v-btn.animated.fadeInLeft.wait-p6s(icon, slot='activator', dark, disabled).mx-0
v-icon functions
span Insert Math Expression
v-tooltip(right, color='teal')
v-btn.animated.fadeInLeft.wait-p8s(icon, slot='activator', dark, disabled).mx-0
v-btn.animated.fadeInLeft.wait-p7s(icon, slot='activator', dark, disabled).mx-0
v-icon border_outer
span Table Helper
v-spacer
v-tooltip(right, color='teal')
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.animated.fadeInLeft.wait-p10s(icon, slot='activator', dark, @click='toggleHelp').mx-0
v-icon(:color='helpShown ? `teal` : ``') help
span Markdown Formatting Help
template(v-if='$vuetify.breakpoint.mdAndUp')
v-spacer
v-tooltip(right, color='teal')
v-btn.animated.fadeInLeft.wait-p8s(icon, slot='activator', dark, @click='toggleFullscreen').mx-0
v-icon crop_free
span Distraction Free Mode
v-tooltip(right, color='teal')
v-btn.animated.fadeInLeft.wait-p9s(icon, slot='activator', dark, @click='toggleHelp').mx-0
v-icon(:color='helpShown ? `teal` : ``') help
span Markdown Formatting Help
.editor-markdown-editor
.editor-markdown-editor-title(v-if='previewShown', @click='previewShown = false') Editor
.editor-markdown-editor-title(v-else='previewShown', @click='previewShown = true'): v-icon(dark) drag_indicator
@ -143,10 +140,11 @@
v-system-bar.editor-markdown-sysbar(dark, status, color='grey darken-3')
.caption.editor-markdown-sysbar-locale {{locale.toUpperCase()}}
.caption.px-3 /{{path}}
v-spacer
.caption Markdown
v-spacer
.caption Ln {{cursorPos.line + 1}}, Col {{cursorPos.ch + 1}}
template(v-if='$vuetify.breakpoint.mdAndUp')
v-spacer
.caption Markdown
v-spacer
.caption Ln {{cursorPos.line + 1}}, Col {{cursorPos.ch + 1}}
markdown-help(v-if='helpShown')
</template>
@ -329,7 +327,11 @@ export default {
return false
})
cm.setSize(null, 'calc(100vh - 112px - 24px)')
if (this.$vuetify.breakpoint.mdAndUp) {
cm.setSize(null, 'calc(100vh - 112px - 24px)')
} else {
cm.setSize(null, 'calc(100vh - 112px - 16px)')
}
cm.setOption('extraKeys', keyBindings)
cm.on('cursorActivity', cm => {
this.positionSync(cm)
@ -462,6 +464,7 @@ export default {
<style lang='scss'>
$editor-height: calc(100vh - 112px - 24px);
$editor-height-mobile: calc(100vh - 112px - 16px);
.editor-markdown {
&-main {
@ -476,6 +479,10 @@ $editor-height: calc(100vh - 112px - 24px);
height: $editor-height;
position: relative;
@include until($tablet) {
height: $editor-height-mobile;
}
&-title {
background-color: mc('grey', '800');
border-bottom-left-radius: 5px;
@ -531,13 +538,17 @@ $editor-height: calc(100vh - 112px - 24px);
height: $editor-height;
overflow-y: scroll;
padding: 1rem 1rem 1rem 0;
width: calc(100% + 1rem + 17px)
width: calc(100% + 1rem + 17px);
// -ms-overflow-style: none;
// &::-webkit-scrollbar {
// width: 0px;
// background: transparent;
// }
@include until($tablet) {
height: $editor-height-mobile;
}
}
&-title {
@ -588,6 +599,11 @@ $editor-height: calc(100vh - 112px - 24px);
justify-content: flex-start;
align-items: center;
padding: 24px 0;
@include until($tablet) {
padding: 12px 0;
width: 40px;
}
}
&-sysbar {

134
client/components/editor/editor-modal-media.vue
View File

@ -2,36 +2,43 @@
v-card.editor-modal-media.animated.fadeInLeft(flat, tile)
v-container.pa-3(grid-list-lg, fluid)
v-layout(row, wrap)
v-flex(xs9)
v-flex(xs12, xl9)
v-card.radius-7.animated.fadeInLeft.wait-p1s(light)
v-card-text
.d-flex
v-toolbar.radius-7(color='teal lighten-5', dense, flat, height='44')
.body-2.teal--text Images
v-btn.ml-3.my-0.radius-7(outline, large, color='teal', disabled)
v-icon(left) keyboard_arrow_up
span Parent Folder
v-btn.my-0.mr-0.radius-7(outline, large, color='teal')
v-icon(left) add
span New Folder
v-list.mt-3(dense, two-line)
template(v-for='(asset, idx) of assets')
v-list-tile(@click='')
v-list-tile-avatar
v-avatar.radius-7(color='teal')
v-icon(dark) image
v-list-tile-content
v-list-tile-title {{asset.filename}}
v-list-tile-sub-title 1024x768
v-list-tile-action
.caption {{asset.updatedAt | moment('from')}}
v-divider.mx-3(vertical)
v-list-tile-action(style='flex-basis: 80px;')
.caption {{asset.fileSize | prettyBytes}}
v-divider.mx-3(vertical)
v-list-tile-action(style='flex-basis: 60px;')
v-chip.teal--text(label, small, color='teal lighten-5') {{asset.ext.toUpperCase().substring(1)}}
v-list-tile-action
.body-2.teal--text Assets
v-btn.ml-3.my-0.radius-7(outline, large, color='teal', disabled, :icon='$vuetify.breakpoint.xsOnly')
v-icon(:left='$vuetify.breakpoint.mdAndUp') keyboard_arrow_up
span.hidden-sm-and-down Parent Folder
v-btn.my-0.mr-0.radius-7(outline, large, color='teal', :icon='$vuetify.breakpoint.xsOnly')
v-icon(:left='$vuetify.breakpoint.mdAndUp') add
span.hidden-sm-and-down New Folder
v-data-table(
:items='assets'
:headers='headers'
:pagination.sync='pagination'
:rows-per-page-items='[15]'
:loading='loading'
must-sort,
hide-actions
)
template(slot='items', slot-scope='props')
tr.is-clickable(
@click.left='currentFileId = props.item.id'
@click.right=''
:class='currentFileId === props.item.id ? `teal lighten-5` : ``'
)
td.text-xs-right(v-if='$vuetify.breakpoint.smAndUp') {{ props.item.id }}
td
.body-2(:class='currentFileId === props.item.id ? `teal--text` : ``') {{ props.item.filename }}
.caption {{ props.item.description }}
td.text-xs-center(v-if='$vuetify.breakpoint.lgAndUp')
v-chip(small, :color='$vuetify.dark ? `grey darken-4` : `grey lighten-4`')
.caption {{props.item.ext.toUpperCase().substring(1)}}
td(v-if='$vuetify.breakpoint.mdAndUp') {{ props.item.fileSize | prettyBytes }}
td(v-if='$vuetify.breakpoint.mdAndUp') {{ props.item.updatedAt | moment('from') }}
td(v-if='$vuetify.breakpoint.smAndUp')
v-menu(offset-x)
v-btn(icon, slot='activator')
v-icon(color='grey darken-2') more_horiz
@ -41,11 +48,12 @@
v-icon(color='teal') short_text
v-list-tile-content Properties
v-divider
v-list-tile
v-list-tile-avatar
v-icon(color='indigo') crop_rotate
v-list-tile-content Edit
v-divider
template(v-if='props.item.kind === `IMAGE`')
v-list-tile
v-list-tile-avatar
v-icon(color='indigo') crop_rotate
v-list-tile-content Edit
v-divider
v-list-tile
v-list-tile-avatar
v-icon(color='blue') keyboard
@ -55,24 +63,28 @@
v-list-tile-avatar
v-icon(color='red') delete
v-list-tile-content Delete
v-divider(v-if='idx < assets.length - 1')
template(slot='no-data')
v-alert.ma-3(icon='warning', :value='true', outline) No assets to display.
.text-xs-center.py-2(v-if='this.pageTotal > 1')
v-pagination(v-model='pagination.page', :length='pageTotal')
.d-flex.mt-3
v-toolbar.radius-7(flat, color='grey lighten-4', dense, height='44')
.body-2 / #[em root]
v-spacer
.body-1.grey--text.text--darken-1 10 files
v-btn.ml-3.mr-0.my-0.radius-7(color='teal', large, @click='insert', disabled)
template(v-if='$vuetify.breakpoint.smAndUp')
v-spacer
.body-1.grey--text.text--darken-1 {{assets.length}} files
v-btn.ml-3.mr-0.my-0.radius-7(color='teal', large, @click='insert', :disabled='!currentFileId', :dark='currentFileId !== null')
v-icon(left) save_alt
span Insert
v-flex(xs3)
v-flex(xs12, xl3)
v-card.radius-7.animated.fadeInRight.wait-p3s(light)
v-card-text
.d-flex
v-toolbar.radius-7(color='teal lighten-5', dense, flat, height='44')
v-icon.mr-3(color='teal') cloud_upload
.body-2.teal--text Upload Images
v-btn.my-0.ml-3.mr-0.radius-7(outline, large, color='teal', @click='browse')
.body-2.teal--text Upload Assets
v-btn.my-0.ml-3.mr-0.radius-7(outline, large, color='teal', @click='browse', v-if='$vuetify.breakpoint.mdAndUp')
v-icon(left) touch_app
span Browse
file-pond.mt-3(
@ -80,7 +92,6 @@
ref='pond'
label-idle='Browse or Drop files here...'
allow-multiple='true'
:accepted-file-types='[`image/jpeg`, `image/png`, `image/gif`, `image/svg`]'
:files='files'
max-files='10'
server='/u'
@ -116,7 +127,7 @@
v-card-text.pb-0
v-toolbar.radius-7(color='teal lighten-5', dense, flat)
v-icon.mr-3(color='teal') format_align_left
.body-2.teal--text Alignment
.body-2.teal--text Image Alignment
v-select.mt-3(
v-model='imageAlignment'
:items='imageAlignments'
@ -133,11 +144,9 @@ import { sync } from 'vuex-pathify'
import vueFilePond from 'vue-filepond'
import 'filepond/dist/filepond.min.css'
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type'
import listAssetQuery from 'gql/editor/editor-media-query-list.gql'
const FilePond = vueFilePond(FilePondPluginFileValidateType)
const FilePond = vueFilePond()
export default {
components: {
@ -152,6 +161,8 @@ export default {
data() {
return {
files: [],
assets: [],
pagination: {},
remoteImageUrl: '',
imageAlignments: [
{ text: 'None', value: '' },
@ -159,7 +170,9 @@ export default {
{ text: 'Right', value: 'right' },
{ text: 'Absolute Top Right', value: 'abstopright' }
],
imageAlignment: ''
imageAlignment: '',
currentFileId: null,
loading: false
}
},
computed: {
@ -167,7 +180,24 @@ export default {
get() { return this.value },
set(val) { this.$emit('input', val) }
},
activeModal: sync('editor/activeModal')
activeModal: sync('editor/activeModal'),
pageTotal () {
if (this.pagination.rowsPerPage == null || this.pagination.totalItems == null) {
return 0
}
return Math.ceil(this.assets.length / this.pagination.rowsPerPage)
},
headers() {
return _.compact([
this.$vuetify.breakpoint.smAndUp && { text: 'ID', value: 'id', width: 50, align: 'right' },
{ text: 'Title', value: 'title' },
this.$vuetify.breakpoint.lgAndUp && { text: 'Type', value: 'path', width: 50 },
this.$vuetify.breakpoint.mdAndUp && { text: 'File Size', value: 'createdAt', width: 150 },
this.$vuetify.breakpoint.mdAndUp && { text: 'Last Updated', value: 'updatedAt', width: 150 },
this.$vuetify.breakpoint.smAndUp && { text: '', value: '', width: 50, sortable: false }
])
}
},
filters: {
prettyBytes(num) {
@ -198,6 +228,7 @@ export default {
methods: {
insert () {
this.activeModal = ''
},
browse () {
this.$refs.pond.browse()
@ -237,12 +268,13 @@ export default {
assets: {
query: listAssetQuery,
variables: {
kind: 'IMAGE'
kind: 'ALL'
},
throttle: 1000,
fetchPolicy: 'network-only',
update: (data) => data.assets.list,
watchLoading (isLoading) {
this.loading = isLoading
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'editor-media-list-refresh')
}
}
@ -261,6 +293,12 @@ export default {
background-color: rgba(darken(mc('grey', '900'), 3%), .9) !important;
overflow: auto;
@include until($tablet) {
left: 40px;
width: calc(100vw - 40px);
height: calc(100vh - 112px - 24px);
}
.filepond--root {
margin-bottom: 0;
}
@ -272,5 +310,9 @@ export default {
cursor: pointer;
}
}
.v-btn--icon {
padding: 0 20px;
}
}
</style>

1
client/components/editor/editor-modal-properties.vue
View File

@ -4,6 +4,7 @@
persistent
lazy
width='1100'
:fullscreen='$vuetify.breakpoint.smAndDown'
)
.dialog-header
v-icon(color='white') sort_by_alpha

6
client/components/editor/markdown/help.vue
View File

@ -2,7 +2,7 @@
v-card.editor-markdown-help.animated.fadeInLeft(flat, tile)
v-container.pa-3(grid-list-lg, fluid)
v-layout(row, wrap)
v-flex(xs4)
v-flex(xs12, lg6, xl4)
v-card.radius-7.animated.fadeInUp(light)
v-card-text
.d-flex
@ -98,7 +98,7 @@
li Unordered List Item 2
li Unordered List Item 3
v-flex(xs4)
v-flex(xs12, lg6, xl4)
v-card.radius-7.animated.fadeInUp.wait-p1s(light)
v-card-text
.d-flex
@ -196,7 +196,7 @@
v-card-text
blockquote(style='border: 1px solid #263238; border-radius: .5rem; padding: 1rem 24px;') Lorem ipsum#[br]dolor sit amet#[br]consectetur adipiscing elit
v-flex(xs4)
v-flex(xs12, xl4)
v-card.radius-7.animated.fadeInUp.wait-p2s(light)
v-card-text
v-toolbar.radius-7(color='teal lighten-5', dense, flat)

6
client/scss/components/v-dialog.scss
View File

@ -27,3 +27,9 @@
radial-gradient(ellipse at bottom, mc('grey', '800'), mc('grey', '900'));
}
}
.v-dialog--fullscreen {
@include until($tablet) {
padding-top: 56px;
}
}

11
server/graph/resolvers/asset.js
View File

@ -12,10 +12,13 @@ module.exports = {
},
AssetQuery: {
async list(obj, args, context) {
const result = await WIKI.models.assets.query().where({
folderId: null,
kind: args.kind.toLowerCase()
})
let cond = {
folderId: null
}
if (args.kind !== 'ALL') {
cond.kind = args.kind.toLowerCase()
}
const result = await WIKI.models.assets.query().where(cond)
return result.map(a => ({
...a,
kind: a.kind.toUpperCase()

1
server/graph/schemas/asset.graphql
View File

@ -56,4 +56,5 @@ type AssetFolder {
enum AssetKind {
IMAGE
BINARY
ALL
}

25
server/models/assets.js
View File

@ -96,13 +96,9 @@ module.exports = class Asset extends Model {
}
static async getAsset(assetPath, res) {
let asset = await WIKI.models.assets.getAssetFromCache(assetPath, res)
if (!asset) {
// asset = await WIKI.models.assets.getAssetFromDb(assetPath, res)
// if (asset) {
// await WIKI.models.assets.saveAssetToCache(asset)
// }
res.sendStatus(404)
let assetExists = await WIKI.models.assets.getAssetFromCache(assetPath, res)
if (!assetExists) {
await WIKI.models.assets.getAssetFromDb(assetPath, res)
}
}
@ -121,4 +117,19 @@ module.exports = class Asset extends Model {
})
})
}
static async getAssetFromDb(assetPath, res) {
const fileHash = assetHelper.generateHash(assetPath)
const cachePath = path.join(process.cwd(), `data/cache/${fileHash}.dat`)
const asset = await WIKI.models.assets.query().where('hash', fileHash).first()
if (asset) {
const assetData = await WIKI.models.knex('assetData').where('id', asset.id).first()
res.type(asset.ext)
res.send(assetData.data)
await fs.outputFile(cachePath, assetData.data)
} else {
res.sendStatus(404)
}
}
}