feat: editor media modal UI for ckeditor
This commit is contained in:
@@ -183,8 +183,8 @@
|
||||
v-list-item-title {{$t('common:header.profile')}}
|
||||
v-list-item-subtitle.overline Coming soon
|
||||
v-list-item(href='/a', v-if='isAuthenticated && isAdmin')
|
||||
v-list-item-action.btn-animate-rotate: v-icon(color='blue-grey') mdi-settings
|
||||
v-list-item-title.blue-grey--text {{$t('common:header.admin')}}
|
||||
v-list-item-action.btn-animate-rotate: v-icon(:color='$vuetify.theme.dark ? `blue-grey lighten-3` : `blue-grey`') mdi-settings
|
||||
v-list-item-title(:class='$vuetify.theme.dark ? `blue-grey--text text--lighten-3` : `blue-grey--text`') {{$t('common:header.admin')}}
|
||||
v-list-item(@click='logout')
|
||||
v-list-item-action: v-icon(color='red') mdi-logout
|
||||
v-list-item-title.red--text {{$t('common:header.logout')}}
|
||||
|
@@ -31,7 +31,7 @@
|
||||
)
|
||||
v-icon(color='red', :left='$vuetify.breakpoint.lgAndUp') mdi-close
|
||||
span.white--text(v-if='$vuetify.breakpoint.lgAndUp') {{ $t('common:actions.close') }}
|
||||
v-divider(vertical)
|
||||
v-divider.ml-3(vertical)
|
||||
v-content
|
||||
component(:is='currentEditor', :save='save')
|
||||
editor-modal-properties(v-model='dialogProps')
|
||||
|
@@ -8,13 +8,13 @@
|
||||
v-flex(xs4)
|
||||
v-hover
|
||||
template(v-slot:default='{ hover }')
|
||||
v-card.radius-7.grey(
|
||||
v-card.radius-7.grey.animated.fadeInUp(
|
||||
hover
|
||||
light
|
||||
ripple
|
||||
)
|
||||
v-card-text.text-center(@click='')
|
||||
img(src='/svg/icon-rest-api.svg', alt='API', style='width: 36px;')
|
||||
img(src='/svg/editor-icon-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-fade-transition
|
||||
@@ -24,17 +24,17 @@
|
||||
color='primary'
|
||||
opacity='.8'
|
||||
)
|
||||
.body-2 Coming Soon
|
||||
.body-2.mt-7 Coming Soon
|
||||
v-flex(xs4)
|
||||
v-hover
|
||||
template(v-slot:default='{ hover }')
|
||||
v-card.radius-7.grey(
|
||||
v-card.radius-7.grey.animated.fadeInUp.wait-p1s(
|
||||
hover
|
||||
light
|
||||
ripple
|
||||
)
|
||||
v-card-text.text-center(@click='')
|
||||
img(src='/svg/icon-source-code.svg', alt='Code', style='width: 36px;')
|
||||
img(src='/svg/editor-icon-code.svg', alt='Code', style='width: 36px;')
|
||||
.body-2.mt-2.grey--text.text--darken-2 Code
|
||||
.caption.grey--text.text--darken-1 Raw HTML
|
||||
v-fade-transition
|
||||
@@ -44,27 +44,27 @@
|
||||
color='primary'
|
||||
opacity='.8'
|
||||
)
|
||||
.body-2 Coming Soon
|
||||
.body-2.mt-7 Coming Soon
|
||||
v-flex(xs4)
|
||||
v-card.radius-7(
|
||||
v-card.radius-7.animated.fadeInUp.wait-p2s(
|
||||
hover
|
||||
light
|
||||
ripple
|
||||
)
|
||||
v-card-text.text-center(@click='selectEditor("markdown")')
|
||||
img(src='/svg/icon-markdown.svg', alt='Markdown', style='width: 36px;')
|
||||
.primary--text.body-2.mt-2 Markdown
|
||||
.caption.grey--text Default
|
||||
img(src='/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(xs4)
|
||||
v-hover
|
||||
template(v-slot:default='{ hover }')
|
||||
v-card.radius-7.grey(
|
||||
v-card.radius-7.grey.animated.fadeInUp.wait-p3s(
|
||||
hover
|
||||
light
|
||||
ripple
|
||||
)
|
||||
v-card-text.text-center(@click='')
|
||||
img(src='/svg/icon-table.svg', alt='Tabular', style='width: 36px;')
|
||||
img(src='/svg/editor-icon-tabular.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-fade-transition
|
||||
@@ -74,7 +74,7 @@
|
||||
color='primary'
|
||||
opacity='.8'
|
||||
)
|
||||
.body-2 Coming Soon
|
||||
.body-2.mt-7 Coming Soon
|
||||
//- v-flex(xs4)
|
||||
//- v-card.radius-7.grey(
|
||||
//- hover
|
||||
@@ -87,25 +87,25 @@
|
||||
//- .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(
|
||||
v-card.radius-7.animated.fadeInUp.wait-p4s(
|
||||
hover
|
||||
light
|
||||
ripple
|
||||
)
|
||||
v-card-text.text-center(@click='selectEditor("ckeditor")')
|
||||
img(src='/svg/icon-open-in-browser.svg', alt='Visual Editor', style='width: 36px;')
|
||||
img(src='/svg/editor-icon-ckeditor.svg', alt='Visual Editor', style='width: 36px;')
|
||||
.body-2.mt-2.primary--text Visual Editor
|
||||
.caption.grey--text Rich-text WYSIWYG
|
||||
v-flex(xs4)
|
||||
v-hover
|
||||
template(v-slot:default='{ hover }')
|
||||
v-card.radius-7.grey(
|
||||
v-card.radius-7.grey.animated.fadeInUp.wait-p5s(
|
||||
hover
|
||||
light
|
||||
ripple
|
||||
)
|
||||
v-card-text.text-center(@click='')
|
||||
img(src='/svg/icon-news.svg', alt='WikiText', style='width: 36px;')
|
||||
img(src='/svg/editor-icon-wikitext.svg', alt='WikiText', style='width: 36px;')
|
||||
.body-2.grey--text.mt-2.text--darken-2 WikiText
|
||||
.caption.grey--text.text--darken-1 MediaWiki Format
|
||||
v-fade-transition
|
||||
@@ -115,7 +115,7 @@
|
||||
color='primary'
|
||||
opacity='.8'
|
||||
)
|
||||
.body-2 Coming Soon
|
||||
.body-2.mt-7 Coming Soon
|
||||
.caption.blue--text.text--lighten-2 {{$t('editor:select.cannotChange')}}
|
||||
|
||||
v-card.radius-7.mt-3(color='teal darken-3', dark)
|
||||
@@ -126,7 +126,7 @@
|
||||
v-flex(xs4)
|
||||
v-hover
|
||||
template(v-slot:default='{ hover }')
|
||||
v-card.radius-7.grey(
|
||||
v-card.radius-7.grey.animated.fadeInUp(
|
||||
hover
|
||||
light
|
||||
ripple
|
||||
@@ -142,17 +142,17 @@
|
||||
color='teal'
|
||||
opacity='.8'
|
||||
)
|
||||
.body-2 Coming Soon
|
||||
.body-2.mt-7 Coming Soon
|
||||
v-flex(xs4)
|
||||
v-hover
|
||||
template(v-slot:default='{ hover }')
|
||||
v-card.radius-7.grey(
|
||||
v-card.radius-7.grey.animated.fadeInUp.wait-p1s(
|
||||
hover
|
||||
light
|
||||
ripple
|
||||
)
|
||||
v-card-text.text-center(@click='')
|
||||
img(src='/svg/icon-hierarchy.svg', alt='Code', style='width: 42px;')
|
||||
img(src='/svg/icon-tree-structure.svg', alt='Tree View', style='width: 42px;')
|
||||
.body-2.mt-1.grey--text.text--darken-2 Tree View
|
||||
.caption.grey--text.text--darken-1 List children pages
|
||||
v-fade-transition
|
||||
@@ -162,11 +162,11 @@
|
||||
color='teal'
|
||||
opacity='.8'
|
||||
)
|
||||
.body-2 Coming Soon
|
||||
.body-2.mt-7 Coming Soon
|
||||
v-flex(xs4)
|
||||
v-hover
|
||||
template(v-slot:default='{ hover }')
|
||||
v-card.radius-7.grey(
|
||||
v-card.radius-7.grey.animated.fadeInUp.wait-p2s(
|
||||
hover
|
||||
light
|
||||
ripple
|
||||
@@ -182,7 +182,14 @@
|
||||
color='teal'
|
||||
opacity='.8'
|
||||
)
|
||||
.body-2 Coming Soon
|
||||
.body-2.mt-7 Coming Soon
|
||||
v-card.radius-7.mt-3(color='grey darken-3', dark)
|
||||
v-toolbar(dense, flat)
|
||||
v-spacer
|
||||
v-btn(text, @click='goBack')
|
||||
v-icon(left) mdi-undo-variant
|
||||
span Cancel
|
||||
v-spacer
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -210,6 +217,9 @@ export default {
|
||||
selectEditor(name) {
|
||||
this.currentEditor = `editor${_.startCase(name)}`
|
||||
this.isShown = false
|
||||
},
|
||||
goBack() {
|
||||
window.history.go(-2)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@@ -1,5 +1,5 @@
|
||||
<template lang='pug'>
|
||||
v-card.editor-modal-media.animated.fadeInLeft(flat, tile)
|
||||
v-card.editor-modal-media.animated.fadeInLeft(flat, tile, :class='`is-editor-` + editorKey')
|
||||
v-container.pa-3(grid-list-lg, fluid)
|
||||
v-layout(row, wrap)
|
||||
v-flex(xs12, lg9)
|
||||
@@ -117,6 +117,9 @@
|
||||
.d-flex.mt-3
|
||||
v-toolbar.radius-7(flat, :color='$vuetify.theme.dark ? `grey darken-2` : `grey lighten-4`', dense, height='44')
|
||||
.body-2(:class='$vuetify.theme.dark ? `grey--text text--lighten-1` : `grey--text text--darken-1`') {{$t('editor:assets.fileCount', { count: assets.length })}}
|
||||
v-btn.ml-3.mr-0.my-0.radius-7(color='red darken-2', large, @click='cancel', dark)
|
||||
v-icon(left) mdi-close
|
||||
span {{$t('common:actions.cancel')}}
|
||||
v-btn.ml-3.mr-0.my-0.radius-7(color='teal', large, @click='insert', :disabled='!currentFileId', :dark='currentFileId !== null')
|
||||
v-icon(left) mdi-playlist-plus
|
||||
span {{$t('common:actions.insert')}}
|
||||
@@ -280,6 +283,7 @@ export default {
|
||||
get() { return this.value },
|
||||
set(val) { this.$emit('input', val) }
|
||||
},
|
||||
editorKey: get('editor/editorKey'),
|
||||
activeModal: sync('editor/activeModal'),
|
||||
folderTree: get('editor/media@folderTree'),
|
||||
currentFolderId: sync('editor/media@currentFolderId'),
|
||||
@@ -494,6 +498,9 @@ export default {
|
||||
}
|
||||
this.deleteAssetLoading = false
|
||||
this.$store.commit(`loadingStop`, 'editor-media-deleteasset')
|
||||
},
|
||||
cancel () {
|
||||
this.activeModal = ''
|
||||
}
|
||||
},
|
||||
apollo: {
|
||||
@@ -547,6 +554,20 @@ export default {
|
||||
height: calc(100vh - 112px - 24px);
|
||||
}
|
||||
|
||||
&.is-editor-ckeditor {
|
||||
top: 64px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: calc(100vh - 64px - 26px);
|
||||
|
||||
@include until($tablet) {
|
||||
top: 56px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: calc(100vh - 56px - 24px);
|
||||
}
|
||||
}
|
||||
|
||||
.filepond--root {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
Reference in New Issue
Block a user