wikijs-fork/client/components/editor/editor-modal-media.vue

170 lines
5.5 KiB
Vue
Raw Normal View History

<template lang='pug'>
v-card.editor-modal-media.animated.fadeInLeft(flat, tile)
v-container.pa-3(grid-list-lg, fluid)
v-layout(row, wrap)
2019-04-07 16:12:30 +00:00
v-flex(xs9)
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
2019-04-07 16:12:30 +00:00
span Parent Folder
v-btn.my-0.radius-7(outline, large, color='teal')
2019-04-07 16:12:30 +00:00
v-icon(left) add
span New Folder
v-list.mt-3(dense, two-line)
template(v-for='(item, idx) of [1,2,3,4,5,6,7,8,9,10]')
v-list-tile(@click='')
v-list-tile-avatar
v-avatar.radius-7(color='teal')
2019-04-07 16:12:30 +00:00
v-icon(dark) image
v-list-tile-content
v-list-tile-title Image {{item}}
v-list-tile-sub-title 1024x768, 10 KBs
v-list-tile-action
.caption.pr-3 2019-04-07
v-list-tile-action
v-chip.teal--text(label, small, color='teal lighten-5') JPG
2019-04-07 16:12:30 +00:00
v-divider(v-if='idx < 10 - 1')
.d-flex.mt-3
v-toolbar.radius-7(flat, color='grey lighten-4', dense, height='44')
2019-04-07 16:12:30 +00:00
.body-2 / universe
v-spacer
.body-1.grey--text.text--darken-1 10 files
v-btn.ml-3.my-0.radius-7(color='teal', large, @click='insert', disabled)
2019-04-07 16:12:30 +00:00
v-icon(left) save_alt
span Insert
v-flex(xs3)
v-card.radius-7.animated.fadeInRight.wait-p3s(light)
v-card-text
v-toolbar.radius-7(color='teal lighten-5', dense, flat)
v-icon.mr-3(color='teal') cloud_upload
.body-2.teal--text Upload Images
file-pond.mt-3(
name='mediaUpload'
ref='pond'
2019-04-07 16:12:30 +00:00
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'
)
2019-04-07 16:12:30 +00:00
v-divider
v-card-actions.pa-3
.caption.grey--text.text-darken-2 Max 10 files, 5 MB each
2019-04-07 16:12:30 +00:00
v-spacer
v-btn(color='teal', dark, @click='upload') Upload
2019-04-07 16:12:30 +00:00
v-card.mt-3.radius-7.animated.fadeInRight.wait-p4s(light)
v-card-text.pb-0
v-toolbar.radius-7(color='teal lighten-5', dense, flat)
v-icon.mr-3(color='teal') cloud_download
.body-2.teal--text Fetch Remote Image
v-text-field.mt-3(
v-model='remoteImageUrl'
outline
single-line
background-color='grey lighten-2'
placeholder='https://example.com/image.jpg'
)
v-divider
v-card-actions.pa-3
.caption.grey--text.text-darken-2 Max 5 MB
v-spacer
v-btn(color='teal', dark) Fetch
v-card.mt-3.radius-7.animated.fadeInRight.wait-p4s(light)
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
v-select.mt-3(
v-model='imageAlignment'
:items='imageAlignments'
outline
single-line
background-color='grey lighten-2'
placeholder='None'
)
</template>
<script>
// import _ from 'lodash'
2019-04-07 16:12:30 +00:00
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 uploadFileMutation from 'gql/editor/upload.gql'
const FilePond = vueFilePond(FilePondPluginFileValidateType)
export default {
components: {
FilePond
},
props: {
value: {
type: Boolean,
default: false
}
},
data() {
return {
2019-04-07 16:12:30 +00:00
files: [],
remoteImageUrl: '',
imageAlignments: [
{ text: 'None', value: '' },
{ text: 'Centered', value: 'center' },
{ text: 'Right', value: 'right' },
{ text: 'Absolute Top Right', value: 'abstopright' }
],
imageAlignment: ''
}
},
computed: {
isShown: {
get() { return this.value },
set(val) { this.$emit('input', val) }
2019-04-07 16:12:30 +00:00
},
activeModal: sync('editor/activeModal')
},
methods: {
2019-04-07 16:12:30 +00:00
insert () {
this.activeModal = ''
},
async upload () {
const files = this.$refs.pond.getFiles()
for (let fl of files) {
const resp = await this.$apollo.mutate({
mutation: uploadFileMutation,
variables: {
data: fl.file
},
context: {
hasUpload: true
}
})
console.info(resp)
}
2019-04-07 16:12:30 +00:00
}
}
}
</script>
<style lang='scss'>
.editor-modal-media {
position: fixed;
top: 112px;
left: 64px;
z-index: 10;
width: calc(100vw - 64px - 17px);
height: calc(100vh - 112px - 24px);
background-color: rgba(darken(mc('grey', '900'), 3%), .9) !important;
}
</style>