msb-public
/
wiki
mirror of https://github.com/requarks/wiki
1
0
Code Issues Projects Releases Wiki Activity

feat: toc sidebar position

Browse Source
pull/3168/merge v2.5.293
NGPixel 2 years ago
parent 9ac80c1a8f
commit f3133a72ec
No known key found for this signature in database
GPG Key ID: 8FDA2F1757F60D63
9 changed files with 48 additions and 15 deletions
Show Stats Download Patch File Download Diff File

17
client/components/admin/admin-theme.vue
Unescape View File

@ -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

4
client/graph/admin/theme/theme-mutation-save.gql
Unescape View File

@ -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

1
client/graph/admin/theme/theme-query-config.gql
Unescape View File

@ -4,6 +4,7 @@ query {
theme
iconset
darkMode
tocPosition
injectCSS
injectHead
injectBody

1
client/store/site.js
Unescape View File

@ -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,

34
client/themes/default/components/page.vue
Unescape View File

@ -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'),

1
server/app/data.yml
Unescape View File

@ -59,6 +59,7 @@ defaults:
theme: 'default'
iconset: 'md'
darkMode: false
tocPosition: 'left'
auth:
autoLogin: false
enforce2FA: false

2
server/graph/resolvers/theming.js
Unescape View File

@ -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 || ''

2
server/graph/schemas/theming.graphql
Unescape View File

@ -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

1
server/master.js
Unescape View File

@ -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,

Write Preview
Loading…
Cancel
Save