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

109 lines
3.6 KiB
Vue
Raw Normal View History

<template lang='pug'>
v-dialog(v-model='isShown', persistent, max-width='700')
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(xs4)
v-card.radius-7.grey(
hover
light
ripple
2019-08-04 02:51:29 +00:00
disabled
)
2019-08-04 02:51:29 +00:00
v-card-text.text-center(@click='selectEditor("api")')
img(src='/svg/icon-rest-api.svg', alt='API', style='width: 36px;')
.body-2.mt-2.grey--text.text--darken-2 API Docs
.caption.grey--text.text--darken-1 REST / GraphQL
v-flex(xs4)
2019-06-05 01:47:02 +00:00
v-card.radius-7.grey(
hover
light
ripple
2019-08-04 02:51:29 +00:00
disabled
)
2019-08-04 02:51:29 +00:00
v-card-text.text-center(@click='selectEditor("code")')
img(src='/svg/icon-source-code.svg', alt='Code', style='width: 36px;')
2019-06-05 01:47:02 +00:00
.body-2.mt-2.grey--text.text--darken-2 Code
.caption.grey--text.text--darken-1 Raw HTML
v-flex(xs4)
v-card.radius-7(
hover
light
ripple
)
2019-08-04 02:51:29 +00:00
v-card-text.text-center(@click='selectEditor("markdown")')
img(src='/svg/icon-markdown.svg', alt='Markdown', style='width: 36px;')
2019-08-04 02:51:29 +00:00
.primary--text.body-2.mt-2 Markdown
.caption.grey--text Default
v-flex(xs4)
v-card.radius-7.grey(
hover
light
ripple
2019-08-04 02:51:29 +00:00
disabled
)
2019-08-04 02:51:29 +00:00
v-card-text.text-center(@click='selectEditor("tabular")')
img(src='/svg/icon-table.svg', alt='Tabular', style='width: 36px;')
.body-2.grey--text.mt-2.text--darken-2 Tabular
.caption.grey--text.text--darken-1 Excel-like
v-flex(xs4)
v-card.radius-7.grey(
hover
light
ripple
2019-08-04 02:51:29 +00:00
disabled
)
2019-08-04 02:51:29 +00:00
v-card-text.text-center(@click='selectEditor("wysiwyg")')
img(src='/svg/icon-open-in-browser.svg', alt='Visual Builder', style='width: 36px;')
.body-2.mt-2.grey--text.text--darken-2 Visual Builder
.caption.grey--text.text--darken-1 Drag-n-drop
v-flex(xs4)
v-card.radius-7.grey(
hover
light
ripple
2019-08-04 02:51:29 +00:00
disabled
)
2019-08-04 02:51:29 +00:00
v-card-text.text-center(@click='selectEditor("wikitext")')
img(src='/svg/icon-news.svg', alt='WikiText', style='width: 36px;')
.body-2.grey--text.mt-2.text--darken-2 WikiText
.caption.grey--text.text--darken-1 MediaWiki Format
2019-06-15 21:05:56 +00:00
.caption.blue--text.text--lighten-2 {{$t('editor:select.cannotChange')}}
</template>
<script>
import _ from 'lodash'
import { sync } from 'vuex-pathify'
export default {
props: {
value: {
type: Boolean,
default: false
}
},
data() {
return { }
},
computed: {
isShown: {
get() { return this.value },
set(val) { this.$emit('input', val) }
},
2019-06-05 01:47:02 +00:00
currentEditor: sync('editor/editor')
},
methods: {
selectEditor(name) {
this.currentEditor = `editor${_.startCase(name)}`
this.isShown = false
}
}
}
</script>
<style lang='scss'>
</style>