q-page.column
.page-breadcrumbs.q-py-sm.q-px-md.row
.col
q-breadcrumbs(
active-color='grey-7'
separator-color='grey'
)
template(v-slot:separator)
q-icon(
name='las la-angle-right'
)
q-breadcrumbs-el(icon='las la-home', to='/', aria-label='Home')
q-tooltip Home
q-breadcrumbs-el(
v-for='brd of pageStore.breadcrumbs'
:key='brd.id'
:icon='brd.icon'
:label='brd.title'
:aria-label='brd.title'
:to='brd.path'
)
.col-auto.flex.items-center.justify-end
template(v-if='!pageStore.isPublished')
.text-caption.text-accent: strong Unpublished
q-separator.q-mx-sm(vertical)
.text-caption.text-grey-6 Last modified on #[strong {{lastModified}}]
.page-header.row
//- PAGE ICON
.col-auto.q-pl-md.flex.items-center
q-icon.rounded-borders(
:name='pageStore.icon'
size='64px'
color='primary'
)
//- PAGE HEADER
.col.q-pa-md
.text-h4.page-header-title {{pageStore.title}}
.text-subtitle2.page-header-subtitle {{pageStore.description}}
//- PAGE ACTIONS
.col-auto.q-pa-md.flex.items-center.justify-end
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.acrylic-btn(
flat
icon='las la-edit'
color='deep-orange-9'
label='Edit'
aria-label='Edit'
no-caps
:href='editUrl'
)
.page-container.row.no-wrap.items-stretch(style='flex: 1 1 100%;')
.col(style='order: 1;')
q-scroll-area(
:thumb-style='thumbStyle'
:bar-style='barStyle'
style='height: 100%;'
)
.q-pa-md
.page-contents(v-html='pageStore.render')
template(v-if='pageStore.relations && pageStore.relations.length > 0')
q-separator.q-my-lg
.row.align-center
.col.text-left(v-if='relationsLeft.length > 0')
q-btn.q-mr-sm.q-mb-sm(
padding='sm md'
outline
:icon='rel.icon'
no-caps
color='primary'
v-for='rel of relationsLeft'
:key='`rel-id-` + rel.id'
)
.column.text-left.q-pl-md
.text-body2: strong {{rel.label}}
.text-caption {{rel.caption}}
.col.text-center(v-if='relationsCenter.length > 0')
.column
q-btn(
:label='rel.label'
color='primary'
flat
no-caps
:icon='rel.icon'
v-for='rel of relationsCenter'
:key='`rel-id-` + rel.id'
)
.col.text-right(v-if='relationsRight.length > 0')
q-btn.q-ml-sm.q-mb-sm(
padding='sm md'
outline
:icon-right='rel.icon'
no-caps
color='primary'
v-for='rel of relationsRight'
:key='`rel-id-` + rel.id'
)
.column.text-left.q-pr-md
.text-body2: strong {{rel.label}}
.text-caption {{rel.caption}}
.page-sidebar(
v-if='showSidebar'
style='order: 2;'
)
template(v-if='pageStore.showToc')
//- TOC
.q-pa-md.flex.items-center
q-icon.q-mr-sm(name='las la-stream', color='grey')
.text-caption.text-grey-7 Contents
.q-px-md.q-pb-sm
q-tree(
:nodes='state.toc'
node-key='key'
v-model:expanded='state.tocExpanded'
v-model:selected='state.tocSelected'
)
//- Tags
template(v-if='pageStore.showTags')
q-separator(v-if='pageStore.showToc')
.q-pa-md(
@mouseover='state.showTagsEditBtn = true'
@mouseleave='state.showTagsEditBtn = false'
)
.flex.items-center
q-icon.q-mr-sm(name='las la-tags', color='grey')
.text-caption.text-grey-7 Tags
q-space
transition(name='fade')
q-btn(
v-show='state.showTagsEditBtn'
size='sm'
padding='none xs'
icon='las la-pen'
color='deep-orange-9'
flat
label='Edit'
no-caps
@click='state.tagEditMode = !state.tagEditMode'
)
page-tags.q-mt-sm(:edit='state.tagEditMode')
template(v-if='pageStore.allowRatings && pageStore.ratingsMode !== `off`')
q-separator(v-if='pageStore.showToc || pageStore.showTags')
//- Rating
.q-pa-md.flex.items-center
q-icon.q-mr-sm(name='las la-star-half-alt', color='grey')
.text-caption.text-grey-7 Rate this page
.q-px-md
q-rating(
v-if='pageStore.ratingsMode === `stars`'
v-model='state.currentRating'
icon='las la-star'
color='secondary'
size='sm'
)
.flex.items-center(v-else-if='pageStore.ratingsMode === `thumbs`')
q-btn.acrylic-btn(
flat
icon='las la-thumbs-down'
color='secondary'
)
q-btn.acrylic-btn.q-ml-sm(
flat
icon='las la-thumbs-up'
color='secondary'
)
.page-actions.column.items-stretch.order-last
q-btn.q-py-md(
flat
icon='las la-pen-nib'
color='deep-orange-9'
aria-label='Page Properties'
@click='togglePageProperties'
)
q-tooltip(anchor='center left' self='center right') Page Properties
q-btn.q-py-md(
flat
icon='las la-project-diagram'
color='deep-orange-9'
aria-label='Page Data'
@click='togglePageData'
)
q-tooltip(anchor='center left' self='center right') Page Data
q-separator.q-my-sm(inset)
q-btn.q-py-sm(
flat
icon='las la-history'
color='grey'
aria-label='Page History'
)
q-tooltip(anchor='center left' self='center right') Page History
q-btn.q-py-sm(
flat
icon='las la-code'
color='grey'
aria-label='Page Source'
)
q-tooltip(anchor='center left' self='center right') Page Source
q-btn.q-py-sm(
flat
icon='las la-ellipsis-h'
color='grey'
aria-label='Page Actions'
)
q-menu(
anchor='top left'
self='top right'
auto-close
transition-show='jump-left'
)
q-list(padding, style='min-width: 225px;')
q-item(clickable)
q-item-section.items-center(avatar)
q-icon(color='deep-orange-9', name='las la-atom', size='sm')
q-item-section
q-item-label Convert Page
q-item(clickable)
q-item-section.items-center(avatar)
q-icon(color='deep-orange-9', name='las la-magic', size='sm')
q-item-section
q-item-label Re-render Page
q-item(clickable)
q-item-section.items-center(avatar)
q-icon(color='deep-orange-9', name='las la-sun', size='sm')
q-item-section
q-item-label View Backlinks
q-space
q-btn.q-py-sm(
flat
icon='las la-copy'
color='grey'
aria-label='Duplicate Page'
)
q-tooltip(anchor='center left' self='center right') Duplicate Page
q-btn.q-py-sm(
flat
icon='las la-share'
color='grey'
aria-label='Rename / Move Page'
)
q-tooltip(anchor='center left' self='center right') Rename / Move Page
q-btn.q-py-sm(
flat
icon='las la-trash'
color='grey'
aria-label='Delete Page'
@click='savePage'
)
q-tooltip(anchor='center left' self='center right') Delete Page
q-dialog(
v-model='state.showSideDialog'
position='right'
full-height
transition-show='jump-left'
transition-hide='jump-right'
class='floating-sidepanel'
)
component(:is='sideDialogs[state.sideDialogComponent]')
q-dialog(
v-model='state.showGlobalDialog'
transition-show='jump-up'
transition-hide='jump-down'
)
component(:is='globalDialogs[state.globalDialogComponent]')