q-page.admin-theme
.row.q-pa-md.items-center
.col-auto
img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-paint-roller-animated.svg')
.col.q-pl-md
.text-h5.text-primary.animated.fadeInLeft {{ t('admin.theme.title') }}
.text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.theme.subtitle') }}
.col-auto
q-btn.q-mr-sm.acrylic-btn(
icon='las la-question-circle'
flat
color='grey'
type='a'
:href='siteStore.docsBase + `/admin/theme`'
target='_blank'
)
q-btn.q-mr-sm.acrylic-btn(
icon='las la-redo-alt'
flat
color='secondary'
:loading='state.loading > 0'
@click='load'
)
q-btn(
unelevated
icon='mdi-check'
:label='t(`common.actions.apply`)'
color='secondary'
@click='save'
:loading='state.loading > 0'
)
q-separator(inset)
.row.q-pa-md.q-col-gutter-md
.col-6
//- -----------------------
//- Theme Options
//- -----------------------
q-card.shadow-1.q-pb-sm
q-card-section.flex.items-center
.text-subtitle1 {{t('admin.theme.appearance')}}
q-space
q-btn.acrylic-btn(
icon='las la-redo-alt'
:label='t(`admin.theme.resetDefaults`)'
flat
size='sm'
color='pink'
@click='resetColors'
)
q-item(tag='label')
blueprint-icon(icon='light-on')
q-item-section
q-item-label {{t(`admin.theme.darkMode`)}}
q-item-label(caption) {{t(`admin.theme.darkModeHint`)}}
q-item-section(avatar)
q-toggle(
v-model='state.config.dark'
color='primary'
checked-icon='las la-check'
unchecked-icon='las la-times'
:aria-label='t(`admin.theme.darkMode`)'
)
template(v-for='(cl, idx) of colorKeys', :key='cl')
q-separator.q-my-sm(inset)
q-item
blueprint-icon(icon='fill-color')
q-item-section
q-item-label {{t(`admin.theme.` + cl + `Color`)}}
q-item-label(caption) {{t(`admin.theme.` + cl + `ColorHint`)}}
q-item-section(side)
.text-caption.text-grey-6 {{state.config[`color` + startCase(cl)]}}
q-item-section(side)
q-btn.q-mr-sm(
:key='`btnpick-` + cl'
glossy
padding='xs md'
no-caps
size='sm'
:style='`background-color: ` + state.config[`color` + startCase(cl)] + `;`'
text-color='white'
)
q-icon(name='las la-fill', size='xs', left)
span Pick...
q-menu
q-color(
v-model='state.config[`color` + startCase(cl)]'
)
//- -----------------------
//- Theme Layout
//- -----------------------
q-card.shadow-1.q-pb-sm.q-mt-md
q-card-section
.text-subtitle1 {{t('admin.theme.layout')}}
q-item
blueprint-icon(icon='width')
q-item-section
q-item-label {{t(`admin.theme.contentWidth`)}}
q-item-label(caption) {{t(`admin.theme.contentWidthHint`)}}
q-item-section.col-auto
q-btn-toggle(
v-model='state.config.contentWidth'
push
glossy
no-caps
toggle-color='primary'
:options='widthOptions'
)
q-separator.q-my-sm(inset)
q-item
blueprint-icon(icon='right-navigation-toolbar')
q-item-section
q-item-label {{t(`admin.theme.sidebarPosition`)}}
q-item-label(caption) {{t(`admin.theme.sidebarPositionHint`)}}
q-item-section.col-auto
q-btn-toggle(
v-model='state.config.sidebarPosition'
push
glossy
no-caps
toggle-color='primary'
:options='rightLeftOptions'
)
q-separator.q-my-sm(inset)
q-item
blueprint-icon(icon='index')
q-item-section
q-item-label {{t(`admin.theme.tocPosition`)}}
q-item-label(caption) {{t(`admin.theme.tocPositionHint`)}}
q-item-section.col-auto
q-btn-toggle(
v-model='state.config.tocPosition'
push
glossy
no-caps
toggle-color='primary'
:options='rightLeftOptions'
)
q-separator.q-my-sm(inset)
q-item(tag='label')
blueprint-icon(icon='share')
q-item-section
q-item-label {{t(`admin.theme.showSharingMenu`)}}
q-item-label(caption) {{t(`admin.theme.showSharingMenuHint`)}}
q-item-section(avatar)
q-toggle(
v-model='state.config.showSharingMenu'
color='primary'
checked-icon='las la-check'
unchecked-icon='las la-times'
:aria-label='t(`admin.theme.showSharingMenu`)'
)
q-separator.q-my-sm(inset)
q-item(tag='label')
blueprint-icon(icon='print')
q-item-section
q-item-label {{t(`admin.theme.showPrintBtn`)}}
q-item-label(caption) {{t(`admin.theme.showPrintBtnHint`)}}
q-item-section(avatar)
q-toggle(
v-model='state.config.showPrintBtn'
color='primary'
checked-icon='las la-check'
unchecked-icon='las la-times'
:aria-label='t(`admin.theme.showPrintBtn`)'
)
.col-6
//- -----------------------
//- Fonts
//- -----------------------
q-card.shadow-1.q-pb-sm
q-card-section.flex.items-center
.text-subtitle1 {{t('admin.theme.fonts')}}
q-space
q-btn.acrylic-btn(
icon='las la-redo-alt'
:label='t(`admin.theme.resetDefaults`)'
flat
size='sm'
color='pink'
@click='resetFonts'
)
q-item
blueprint-icon(icon='fonts-app')
q-item-section
q-item-label {{t(`admin.theme.baseFont`)}}
q-item-label(caption) {{t(`admin.theme.baseFontHint`)}}
q-item-section
q-select(
outlined
v-model='state.config.baseFont'
:options='fonts'
emit-value
map-options
dense
:aria-label='t(`admin.theme.baseFont`)'
)
q-item
blueprint-icon(icon='fonts-app')
q-item-section
q-item-label {{t(`admin.theme.contentFont`)}}
q-item-label(caption) {{t(`admin.theme.contentFontHint`)}}
q-item-section
q-select(
outlined
v-model='state.config.contentFont'
:options='fonts'
emit-value
map-options
dense
:aria-label='t(`admin.theme.contentFont`)'
)
//- -----------------------
//- Code Injection
//- -----------------------
q-card.shadow-1.q-pb-sm.q-mt-md
q-card-section
.text-subtitle1 {{t('admin.theme.codeInjection')}}
q-item
blueprint-icon(icon='css')
q-item-section
q-item-label {{t(`admin.theme.cssOverride`)}}
q-item-label(caption) {{t(`admin.theme.cssOverrideHint`)}}
q-item
q-item-section
q-no-ssr(:placeholder='t(`common.loading`)')
util-code-editor.admin-theme-cm(
ref='cmCSS'
v-model='state.config.injectCSS'
language='css'
)
q-separator.q-my-sm(inset)
q-item
blueprint-icon(icon='html')
q-item-section
q-item-label {{t(`admin.theme.headHtmlInjection`)}}
q-item-label(caption) {{t(`admin.theme.headHtmlInjectionHint`)}}
q-item
q-item-section
q-no-ssr(:placeholder='t(`common.loading`)')
util-code-editor.admin-theme-cm(
ref='cmHead'
v-model='state.config.injectHead'
language='html'
)
q-separator.q-my-sm(inset)
q-item
blueprint-icon(icon='html')
q-item-section
q-item-label {{t(`admin.theme.bodyHtmlInjection`)}}
q-item-label(caption) {{t(`admin.theme.bodyHtmlInjectionHint`)}}
q-item
q-item-section
q-no-ssr(:placeholder='t(`common.loading`)')
util-code-editor.admin-theme-cm(
ref='cmBody'
v-model='state.config.injectBody'
language='html'
)