feat: toc sidebar position
This commit is contained in:
parent
9ac80c1a8f
commit
f3133a72ec
@ -55,20 +55,16 @@
|
||||
v-card.mt-3.animated.fadeInUp.wait-p1s
|
||||
v-toolbar(color='primary', dark, dense, flat)
|
||||
v-toolbar-title.subtitle-1 {{$t(`admin:theme.options`)}}
|
||||
v-spacer
|
||||
v-chip(label, color='white', small).primary--text coming soon
|
||||
v-card-text
|
||||
v-select(
|
||||
:items='[]'
|
||||
:items='tocPositions'
|
||||
outlined
|
||||
prepend-icon='mdi-border-vertical'
|
||||
v-model='config.iconset'
|
||||
v-model='config.tocPosition'
|
||||
label='Table of Contents Position'
|
||||
persistent-hint
|
||||
hint='Select whether the table of contents is shown on the left, right or not at all.'
|
||||
disabled
|
||||
)
|
||||
|
||||
v-flex(lg6 xs12)
|
||||
//- v-card.animated.fadeInUp.wait-p2s
|
||||
//- v-toolbar(color='teal', dark, dense, flat)
|
||||
@ -155,6 +151,7 @@ export default {
|
||||
theme: 'default',
|
||||
darkMode: false,
|
||||
iconset: '',
|
||||
tocPosition: 'left',
|
||||
injectCSS: '',
|
||||
injectHead: '',
|
||||
injectBody: ''
|
||||
@ -184,6 +181,13 @@ export default {
|
||||
width: 100
|
||||
}
|
||||
]
|
||||
},
|
||||
tocPositions () {
|
||||
return [
|
||||
{ text: 'Left (default)', value: 'left' },
|
||||
{ text: 'Right', value: 'right' },
|
||||
{ text: 'Hidden', value: 'off' }
|
||||
]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@ -209,6 +213,7 @@ export default {
|
||||
theme: this.config.theme,
|
||||
iconset: this.config.iconset,
|
||||
darkMode: this.darkMode,
|
||||
tocPosition: this.config.tocPosition,
|
||||
injectCSS: this.config.injectCSS,
|
||||
injectHead: this.config.injectHead,
|
||||
injectBody: this.config.injectBody
|
||||
|
@ -1,6 +1,6 @@
|
||||
mutation($theme: String!, $iconset: String!, $darkMode: Boolean!, $injectCSS: String, $injectHead: String, $injectBody: String) {
|
||||
mutation($theme: String!, $iconset: String!, $darkMode: Boolean!, $tocPosition: String, $injectCSS: String, $injectHead: String, $injectBody: String) {
|
||||
theming {
|
||||
setConfig(theme: $theme, iconset: $iconset, darkMode: $darkMode, injectCSS: $injectCSS, injectHead: $injectHead, injectBody: $injectBody) {
|
||||
setConfig(theme: $theme, iconset: $iconset, darkMode: $darkMode, tocPosition: $tocPosition, injectCSS: $injectCSS, injectHead: $injectHead, injectBody: $injectBody) {
|
||||
responseResult {
|
||||
succeeded
|
||||
errorCode
|
||||
|
@ -4,6 +4,7 @@ query {
|
||||
theme
|
||||
iconset
|
||||
darkMode
|
||||
tocPosition
|
||||
injectCSS
|
||||
injectHead
|
||||
injectBody
|
||||
|
@ -6,6 +6,7 @@ const state = {
|
||||
company: siteConfig.company,
|
||||
contentLicense: siteConfig.contentLicense,
|
||||
dark: siteConfig.darkMode,
|
||||
tocPosition: siteConfig.tocPosition,
|
||||
mascot: true,
|
||||
title: siteConfig.title,
|
||||
logoUrl: siteConfig.logoUrl,
|
||||
|
@ -50,7 +50,14 @@
|
||||
v-divider
|
||||
v-container.grey.pa-0(fluid, :class='$vuetify.theme.dark ? `darken-4-l3` : `lighten-4`')
|
||||
v-row.page-header-section(no-gutters, align-content='center', style='height: 90px;')
|
||||
v-col.page-col-content.is-page-header(offset-xl='2', offset-lg='3', style='margin-top: auto; margin-bottom: auto;', :class='$vuetify.rtl ? `pr-4` : `pl-4`')
|
||||
v-col.page-col-content.is-page-header(
|
||||
:offset-xl='tocPosition === `left` ? 2 : 0'
|
||||
:offset-lg='tocPosition === `left` ? 3 : 0'
|
||||
:xl10='tocPosition === `right`'
|
||||
:lg9='tocPosition === `right`'
|
||||
style='margin-top: auto; margin-bottom: auto;'
|
||||
:class='$vuetify.rtl ? `pr-4` : `pl-4`'
|
||||
)
|
||||
.headline.grey--text(:class='$vuetify.theme.dark ? `text--lighten-2` : `text--darken-3`') {{title}}
|
||||
.caption.grey--text.text--darken-1 {{description}}
|
||||
.page-edit-shortcuts(v-if='editShortcutsObj.editMenuBar')
|
||||
@ -74,7 +81,13 @@
|
||||
v-divider
|
||||
v-container.pl-5.pt-4(fluid, grid-list-xl)
|
||||
v-layout(row)
|
||||
v-flex.page-col-sd(lg3, xl2, v-if='$vuetify.breakpoint.lgAndUp')
|
||||
v-flex.page-col-sd(
|
||||
v-if='tocPosition !== `off` && $vuetify.breakpoint.lgAndUp'
|
||||
:order-xs1='tocPosition !== `right`'
|
||||
:order-xs2='tocPosition === `right`'
|
||||
lg3
|
||||
xl2
|
||||
)
|
||||
v-card.page-toc-card.mb-5(v-if='tocDecoded.length')
|
||||
.overline.pa-5.pb-0(:class='$vuetify.theme.dark ? `blue--text text--lighten-2` : `primary--text`') {{$t('common:page.toc')}}
|
||||
v-list.pb-3(dense, nav, :class='$vuetify.theme.dark ? `darken-3-d3` : ``')
|
||||
@ -181,10 +194,10 @@
|
||||
v-card.page-shortcuts-card(flat)
|
||||
v-toolbar(:color='$vuetify.theme.dark ? `grey darken-4-d3` : `grey lighten-3`', flat, dense)
|
||||
v-spacer
|
||||
v-tooltip(bottom)
|
||||
template(v-slot:activator='{ on }')
|
||||
v-btn(icon, tile, v-on='on', :aria-label='$t(`common:page.bookmark`)'): v-icon(color='grey') mdi-bookmark
|
||||
span {{$t('common:page.bookmark')}}
|
||||
//- v-tooltip(bottom)
|
||||
//- template(v-slot:activator='{ on }')
|
||||
//- v-btn(icon, tile, v-on='on', :aria-label='$t(`common:page.bookmark`)'): v-icon(color='grey') mdi-bookmark
|
||||
//- span {{$t('common:page.bookmark')}}
|
||||
v-menu(offset-y, bottom, min-width='300')
|
||||
template(v-slot:activator='{ on: menu }')
|
||||
v-tooltip(bottom)
|
||||
@ -203,7 +216,13 @@
|
||||
span {{$t('common:page.printFormat')}}
|
||||
v-spacer
|
||||
|
||||
v-flex.page-col-content(xs12, lg9, xl10)
|
||||
v-flex.page-col-content(
|
||||
xs12
|
||||
:lg9='tocPosition !== `off`'
|
||||
:xl10='tocPosition !== `off`'
|
||||
:order-xs1='tocPosition === `right`'
|
||||
:order-xs2='tocPosition !== `right`'
|
||||
)
|
||||
v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='hasAnyPagePermissions && editShortcutsObj.editFab')
|
||||
template(v-slot:activator='{ on: onEditActivator }')
|
||||
v-speed-dial(
|
||||
@ -536,6 +555,7 @@ export default {
|
||||
tocDecoded () {
|
||||
return JSON.parse(Buffer.from(this.toc, 'base64').toString())
|
||||
},
|
||||
tocPosition: get('site/tocPosition'),
|
||||
hasAdminPermission: get('page/effectivePermissions@system.manage'),
|
||||
hasWritePagesPermission: get('page/effectivePermissions@pages.write'),
|
||||
hasManagePagesPermission: get('page/effectivePermissions@pages.manage'),
|
||||
|
@ -59,6 +59,7 @@ defaults:
|
||||
theme: 'default'
|
||||
iconset: 'md'
|
||||
darkMode: false
|
||||
tocPosition: 'left'
|
||||
auth:
|
||||
autoLogin: false
|
||||
enforce2FA: false
|
||||
|
@ -24,6 +24,7 @@ module.exports = {
|
||||
theme: WIKI.config.theming.theme,
|
||||
iconset: WIKI.config.theming.iconset,
|
||||
darkMode: WIKI.config.theming.darkMode,
|
||||
tocPosition: WIKI.config.theming.tocPosition || 'left',
|
||||
injectCSS: new CleanCSS({ format: 'beautify' }).minify(WIKI.config.theming.injectCSS).styles,
|
||||
injectHead: WIKI.config.theming.injectHead,
|
||||
injectBody: WIKI.config.theming.injectBody
|
||||
@ -44,6 +45,7 @@ module.exports = {
|
||||
theme: args.theme,
|
||||
iconset: args.iconset,
|
||||
darkMode: args.darkMode,
|
||||
tocPosition: args.tocPosition || 'left',
|
||||
injectCSS: args.injectCSS || '',
|
||||
injectHead: args.injectHead || '',
|
||||
injectBody: args.injectBody || ''
|
||||
|
@ -28,6 +28,7 @@ type ThemingMutation {
|
||||
theme: String!
|
||||
iconset: String!
|
||||
darkMode: Boolean!
|
||||
tocPosition: String
|
||||
injectCSS: String
|
||||
injectHead: String
|
||||
injectBody: String
|
||||
@ -42,6 +43,7 @@ type ThemingConfig {
|
||||
theme: String!
|
||||
iconset: String!
|
||||
darkMode: Boolean!
|
||||
tocPosition: String
|
||||
injectCSS: String
|
||||
injectHead: String
|
||||
injectBody: String
|
||||
|
@ -149,6 +149,7 @@ module.exports = async () => {
|
||||
title: WIKI.config.title,
|
||||
theme: WIKI.config.theming.theme,
|
||||
darkMode: WIKI.config.theming.darkMode,
|
||||
tocPosition: WIKI.config.theming.tocPosition,
|
||||
lang: WIKI.config.lang.code,
|
||||
rtl: WIKI.config.lang.rtl,
|
||||
company: WIKI.config.company,
|
||||
|
Loading…
Reference in New Issue
Block a user