.page-header.row
//- PAGE ICON
.col-auto.q-pl-md.flex.items-center
q-btn.rounded-borders(
v-if='editorStore.isActive'
padding='none'
size='37px'
:icon='pageStore.icon'
color='primary'
flat
)
q-badge(color='grey' floating rounded)
q-icon(name='las la-pen', size='xs', padding='xs xs')
q-menu(content-class='shadow-7')
icon-picker-dialog(v-model='pageStore.icon')
q-icon.rounded-borders(
v-else
:name='pageStore.icon'
size='64px'
color='primary'
)
//- PAGE HEADER
.col.q-pa-md
.text-h4.page-header-title
span {{pageStore.title}}
template(v-if='editorStore.isActive')
span.text-grey(v-if='!pageStore.title') {{ t(`editor.props.title`)}}
q-btn.acrylic-btn.q-ml-md(
icon='las la-pen'
flat
padding='xs'
size='sm'
)
q-popup-edit(
v-model='pageStore.title'
auto-save
v-slot='scope'
)
q-input(
outlined
style='width: 450px;'
v-model='scope.value'
dense
autofocus
@keyup.enter='scope.set'
:label='t(`editor.props.title`)'
)
.text-subtitle2.page-header-subtitle
span {{ pageStore.description }}
template(v-if='editorStore.isActive')
span.text-grey(v-if='!pageStore.description') {{ t(`editor.props.shortDescription`)}}
q-btn.acrylic-btn.q-ml-md(
icon='las la-pen'
flat
padding='none xs'
size='xs'
)
q-popup-edit(
v-model='pageStore.description'
auto-save
v-slot='scope'
)
q-input(
outlined
style='width: 450px;'
v-model='scope.value'
dense
autofocus
@keyup.enter='scope.set'
:label='t(`editor.props.shortDescription`)'
)
//- PAGE ACTIONS
.col-auto.q-pa-md.flex.items-center.justify-end
template(v-if='!editorStore.isActive')
q-btn.q-mr-md(
flat
dense
icon='las la-bell'
color='grey'
aria-label='Watch Page'
)
q-tooltip Watch Page
q-btn.q-mr-md(
flat
dense
icon='las la-bookmark'
color='grey'
aria-label='Bookmark Page'
)
q-tooltip Bookmark Page
q-btn.q-mr-md(
flat
dense
icon='las la-share-alt'
color='grey'
aria-label='Share'
)
q-tooltip Share
social-sharing-menu
q-btn.q-mr-md(
flat
dense
icon='las la-print'
color='grey'
aria-label='Print'
)
q-tooltip Print
q-btn.q-mr-sm.acrylic-btn(
v-if='editorStore.isActive'
icon='las la-question-circle'
flat
color='grey'
:href='siteStore.docsBase + `/editor/${editorStore.editor}`'
target='_blank'
type='a'
)
template(v-if='editorStore.isActive || editorStore.hasPendingChanges')
q-btn.acrylic-btn.q-mr-sm(
flat
icon='las la-times'
color='negative'
label='Discard'
aria-label='Discard'
no-caps
@click='discardChanges'
)
q-btn.acrylic-btn(
flat
icon='las la-check'
color='positive'
label='Save Changes'
aria-label='Save Changes'
no-caps
@click='saveChanges'
)
template(v-else)
q-btn.acrylic-btn(
flat
icon='las la-edit'
color='deep-orange-9'
label='Edit'
aria-label='Edit'
no-caps
@click='editPage'
)