feat: editor media modal UI for ckeditor

This commit is contained in:
Nick
2019-09-14 15:35:47 -04:00
parent 26842ab62b
commit 1717f7a8d3
12 changed files with 201 additions and 29 deletions

View File

@@ -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')}}

View File

@@ -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')

View File

@@ -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)
}
}
}

View File

@@ -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;
}