.editor
nav-header(dense)
template(slot='actions')
v-btn(
outline
color='green'
@click.native.stop='save'
:class='{ "is-icon": $vuetify.breakpoint.mdAndDown }'
)
v-icon(color='green', :left='$vuetify.breakpoint.lgAndUp') check
span.white--text(v-if='$vuetify.breakpoint.lgAndUp') {{ mode === 'create' ? $t('common:actions.create') : $t('common:actions.save') }}
v-btn.mx-0(
outline
color='red'
:class='{ "is-icon": $vuetify.breakpoint.mdAndDown }'
)
v-icon(color='red', :left='$vuetify.breakpoint.lgAndUp') close
span.white--text(v-if='$vuetify.breakpoint.lgAndUp') {{ $t('common:actions.discard') }}
v-btn(
outline
color='blue'
@click.native.stop='openModal(`properties`)'
:class='{ "is-icon": $vuetify.breakpoint.mdAndDown }'
)
v-icon(color='blue', :left='$vuetify.breakpoint.lgAndUp') sort_by_alpha
span.white--text(v-if='$vuetify.breakpoint.lgAndUp') {{ $t('editor:page') }}
v-content
component(:is='currentEditor')
component(:is='currentModal')
v-dialog(v-model='dialogProgress', persistent, max-width='350')
v-card(color='blue darken-3', dark)
v-card-text.text-xs-center.py-4
atom-spinner.is-inline(
:animation-duration='1000'
:size='60'
color='#FFF'
)
.subheading {{ $t('editor:save.processing') }}
.caption.blue--text.text--lighten-3 {{ $t('editor:save.pleaseWait') }}
v-dialog(v-model='dialogEditorSelector', persistent, max-width='550')
v-card(color='blue darken-3', dark)
v-card-text.text-xs-center.py-4
.subheading Which editor do you want to use?
v-container(grid-list-lg, fluid)
v-layout(row, wrap, justify-center)
v-flex(xs4)
v-card(
hover
light
ripple
)
v-card-text.text-xs-center(@click='selectEditor("code")')
v-icon(large, color='primary') code
.body-2.mt-2 Code
v-flex(xs4)
v-card(
hover
light
ripple
)
v-card-text.text-xs-center(@click='selectEditor("markdown")')
v-icon(large, color='primary') list_alt
.body-2.mt-2 Markdown
v-flex(xs4)
v-card.grey(
hover
light
ripple
)
v-card-text.text-xs-center(@click='selectEditor("wysiwyg")')
v-icon(large, color='grey darken-1') web
.body-2.mt-2.grey--text.text--darken-2 Visual Builder
v-snackbar(
:color='notification.style'
bottom,
right,
multi-line,
v-model='notificationState'
)
.text-xs-left
v-icon.mr-3(dark) {{ notification.icon }}
span {{ notification.message }}