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

113 lines
3.8 KiB
Vue
Raw Normal View History

<template lang='pug'>
v-dialog(v-model='isShown', persistent, max-width='700', no-click-animation)
v-btn(fab, fixed, bottom, right, color='grey darken-3', dark, @click='goBack', style='width: 50px;'): v-icon mdi-undo-variant
v-card.radius-7(color='blue darken-3', dark)
2019-08-04 02:51:29 +00:00
v-card-text.text-center.py-4
.subtitle-1.white--text {{$t('editor:select.title')}}
v-container(grid-list-lg, fluid)
v-layout(row, wrap, justify-center)
v-flex(xs6)
2019-09-16 03:40:52 +00:00
v-card.radius-7.animated.fadeInUp.wait-p1s(
hover
light
ripple
)
2019-08-04 02:51:29 +00:00
v-card-text.text-center(@click='selectEditor("markdown")')
2020-05-23 03:29:42 +00:00
img(src='/_assets/svg/editor-icon-markdown.svg', alt='Markdown', style='width: 36px;')
.body-2.primary--text.mt-2 Markdown
.caption.grey--text Plain Text Formatting
v-flex(xs6)
v-card.radius-7.animated.fadeInUp.wait-p2s(
hover
light
ripple
)
2019-09-08 16:01:17 +00:00
v-card-text.text-center(@click='selectEditor("ckeditor")')
2020-05-23 03:29:42 +00:00
img(src='/_assets/svg/editor-icon-ckeditor.svg', alt='Visual Editor', style='width: 36px;')
2019-09-08 16:01:17 +00:00
.body-2.mt-2.primary--text Visual Editor
.caption.grey--text Rich-text WYSIWYG
2019-09-10 18:50:16 +00:00
v-flex(xs4)
v-card.radius-7.animated.fadeInUp.wait-p3s(
hover
light
ripple
)
v-card-text.text-center(@click='selectEditor("asciidoc")')
img(src='/_assets/svg/editor-icon-asciidoc.svg', alt='AsciiDoc', style='width: 36px;')
.body-2.primary--text.mt-2 AsciiDoc
.caption.grey--text Plain Text Formatting
2019-09-10 18:50:16 +00:00
v-flex(xs4)
v-card.radius-7.animated.fadeInUp.wait-p4s(
hover
light
ripple
)
v-card-text.text-center(@click='selectEditor("code")')
img(src='/_assets/svg/editor-icon-code.svg', alt='Code', style='width: 36px;')
.body-2.primary--text.mt-2 Code
.caption.grey--text Raw HTML
2019-09-10 18:50:16 +00:00
v-flex(xs4)
v-card.radius-7.animated.fadeInUp.wait-p5s(
hover
light
ripple
)
v-card-text.text-center(@click='fromTemplate')
img(src='/_assets/svg/icon-cube.svg', alt='From Template', style='width: 42px; opacity: .5;')
.body-2.mt-1.teal--text From Template
.caption.grey--text Use an existing page...
2020-05-10 22:43:45 +00:00
page-selector(mode='select', v-model='templateDialogIsShown', :open-handler='fromTemplateHandle', :path='path', :locale='locale', must-exist)
</template>
<script>
import _ from 'lodash'
2020-05-10 22:43:45 +00:00
import { sync, get } from 'vuex-pathify'
export default {
props: {
value: {
type: Boolean,
default: false
}
},
data() {
2020-05-10 22:43:45 +00:00
return {
templateDialogIsShown: false
}
},
computed: {
isShown: {
get() { return this.value },
set(val) { this.$emit('input', val) }
},
2020-05-10 22:43:45 +00:00
currentEditor: sync('editor/editor'),
locale: get('page/locale'),
path: get('page/path')
},
methods: {
2020-05-10 22:43:45 +00:00
selectEditor (name) {
this.currentEditor = `editor${_.startCase(name)}`
this.isShown = false
},
2020-05-10 22:43:45 +00:00
goBack () {
2019-10-14 17:07:49 +00:00
window.history.go(-1)
2020-05-10 22:43:45 +00:00
},
fromTemplate () {
this.templateDialogIsShown = true
},
fromTemplateHandle ({ id }) {
this.templateDialogIsShown = false
this.isShown = false
this.$nextTick(() => {
window.location.assign(`/e/${this.locale}/${this.path}?from=${id}`)
})
}
}
}
</script>
<style lang='scss'>
</style>