Skip to content

Commit f3133a7

Browse files
NGPixelNGPixel
committed
feat: toc sidebar position
1 parent 9ac80c1 commit f3133a7

File tree

9 files changed

+48
-15
lines changed

9 files changed

+48
-15
lines changed

‎client/components/admin/admin-theme.vue

+11-6
Original file line numberDiff line numberDiff line change
@@ -55,20 +55,16 @@
5555
v-card.mt-3.animated.fadeInUp.wait-p1s
5656
v-toolbar(color='primary', dark, dense, flat)
5757
v-toolbar-title.subtitle-1 {{$t(`admin:theme.options`)}}
58-
v-spacer
59-
v-chip(label, color='white', small).primary--text coming soon
6058
v-card-text
6159
v-select(
62-
:items='[]'
60+
:items='tocPositions'
6361
outlined
6462
prepend-icon='mdi-border-vertical'
65-
v-model='config.iconset'
63+
v-model='config.tocPosition'
6664
label='Table of Contents Position'
6765
persistent-hint
6866
hint='Select whether the table of contents is shown on the left, right or not at all.'
69-
disabled
7067
)
71-
7268
v-flex(lg6 xs12)
7369
//- v-card.animated.fadeInUp.wait-p2s
7470
//- v-toolbar(color='teal', dark, dense, flat)
@@ -155,6 +151,7 @@ export default {
155151
theme: 'default',
156152
darkMode: false,
157153
iconset: '',
154+
tocPosition: 'left',
158155
injectCSS: '',
159156
injectHead: '',
160157
injectBody: ''
@@ -184,6 +181,13 @@ export default {
184181
width: 100
185182
}
186183
]
184+
},
185+
tocPositions () {
186+
return [
187+
{ text: 'Left (default)', value: 'left' },
188+
{ text: 'Right', value: 'right' },
189+
{ text: 'Hidden', value: 'off' }
190+
]
187191
}
188192
},
189193
watch: {
@@ -209,6 +213,7 @@ export default {
209213
theme: this.config.theme,
210214
iconset: this.config.iconset,
211215
darkMode: this.darkMode,
216+
tocPosition: this.config.tocPosition,
212217
injectCSS: this.config.injectCSS,
213218
injectHead: this.config.injectHead,
214219
injectBody: this.config.injectBody

‎client/graph/admin/theme/theme-mutation-save.gql

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
mutation($theme: String!, $iconset: String!, $darkMode: Boolean!, $injectCSS: String, $injectHead: String, $injectBody: String) {
1+
mutation($theme: String!, $iconset: String!, $darkMode: Boolean!, $tocPosition: String, $injectCSS: String, $injectHead: String, $injectBody: String) {
22
theming {
3-
setConfig(theme: $theme, iconset: $iconset, darkMode: $darkMode, injectCSS: $injectCSS, injectHead: $injectHead, injectBody: $injectBody) {
3+
setConfig(theme: $theme, iconset: $iconset, darkMode: $darkMode, tocPosition: $tocPosition, injectCSS: $injectCSS, injectHead: $injectHead, injectBody: $injectBody) {
44
responseResult {
55
succeeded
66
errorCode

‎client/graph/admin/theme/theme-query-config.gql

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ query {
44
theme
55
iconset
66
darkMode
7+
tocPosition
78
injectCSS
89
injectHead
910
injectBody

‎client/store/site.js

+1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ const state = {
66
company: siteConfig.company,
77
contentLicense: siteConfig.contentLicense,
88
dark: siteConfig.darkMode,
9+
tocPosition: siteConfig.tocPosition,
910
mascot: true,
1011
title: siteConfig.title,
1112
logoUrl: siteConfig.logoUrl,

‎client/themes/default/components/page.vue

+27-7
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,14 @@
5050
v-divider
5151
v-container.grey.pa-0(fluid, :class='$vuetify.theme.dark ? `darken-4-l3` : `lighten-4`')
5252
v-row.page-header-section(no-gutters, align-content='center', style='height: 90px;')
53-
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`')
53+
v-col.page-col-content.is-page-header(
54+
:offset-xl='tocPosition === `left` ? 2 : 0'
55+
:offset-lg='tocPosition === `left` ? 3 : 0'
56+
:xl10='tocPosition === `right`'
57+
:lg9='tocPosition === `right`'
58+
style='margin-top: auto; margin-bottom: auto;'
59+
:class='$vuetify.rtl ? `pr-4` : `pl-4`'
60+
)
5461
.headline.grey--text(:class='$vuetify.theme.dark ? `text--lighten-2` : `text--darken-3`') {{title}}
5562
.caption.grey--text.text--darken-1 {{description}}
5663
.page-edit-shortcuts(v-if='editShortcutsObj.editMenuBar')
@@ -74,7 +81,13 @@
7481
v-divider
7582
v-container.pl-5.pt-4(fluid, grid-list-xl)
7683
v-layout(row)
77-
v-flex.page-col-sd(lg3, xl2, v-if='$vuetify.breakpoint.lgAndUp')
84+
v-flex.page-col-sd(
85+
v-if='tocPosition !== `off` && $vuetify.breakpoint.lgAndUp'
86+
:order-xs1='tocPosition !== `right`'
87+
:order-xs2='tocPosition === `right`'
88+
lg3
89+
xl2
90+
)
7891
v-card.page-toc-card.mb-5(v-if='tocDecoded.length')
7992
.overline.pa-5.pb-0(:class='$vuetify.theme.dark ? `blue--text text--lighten-2` : `primary--text`') {{$t('common:page.toc')}}
8093
v-list.pb-3(dense, nav, :class='$vuetify.theme.dark ? `darken-3-d3` : ``')
@@ -181,10 +194,10 @@
181194
v-card.page-shortcuts-card(flat)
182195
v-toolbar(:color='$vuetify.theme.dark ? `grey darken-4-d3` : `grey lighten-3`', flat, dense)
183196
v-spacer
184-
v-tooltip(bottom)
185-
template(v-slot:activator='{ on }')
186-
v-btn(icon, tile, v-on='on', :aria-label='$t(`common:page.bookmark`)'): v-icon(color='grey') mdi-bookmark
187-
span {{$t('common:page.bookmark')}}
197+
//- v-tooltip(bottom)
198+
//- template(v-slot:activator='{ on }')
199+
//- v-btn(icon, tile, v-on='on', :aria-label='$t(`common:page.bookmark`)'): v-icon(color='grey') mdi-bookmark
200+
//- span {{$t('common:page.bookmark')}}
188201
v-menu(offset-y, bottom, min-width='300')
189202
template(v-slot:activator='{ on: menu }')
190203
v-tooltip(bottom)
@@ -203,7 +216,13 @@
203216
span {{$t('common:page.printFormat')}}
204217
v-spacer
205218

206-
v-flex.page-col-content(xs12, lg9, xl10)
219+
v-flex.page-col-content(
220+
xs12
221+
:lg9='tocPosition !== `off`'
222+
:xl10='tocPosition !== `off`'
223+
:order-xs1='tocPosition === `right`'
224+
:order-xs2='tocPosition !== `right`'
225+
)
207226
v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='hasAnyPagePermissions && editShortcutsObj.editFab')
208227
template(v-slot:activator='{ on: onEditActivator }')
209228
v-speed-dial(
@@ -536,6 +555,7 @@ export default {
536555
tocDecoded () {
537556
return JSON.parse(Buffer.from(this.toc, 'base64').toString())
538557
},
558+
tocPosition: get('site/tocPosition'),
539559
hasAdminPermission: get('page/[email protected]'),
540560
hasWritePagesPermission: get('page/[email protected]'),
541561
hasManagePagesPermission: get('page/[email protected]'),

‎server/app/data.yml

+1
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ defaults:
5959
theme: 'default'
6060
iconset: 'md'
6161
darkMode: false
62+
tocPosition: 'left'
6263
auth:
6364
autoLogin: false
6465
enforce2FA: false

‎server/graph/resolvers/theming.js

+2
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ module.exports = {
2424
theme: WIKI.config.theming.theme,
2525
iconset: WIKI.config.theming.iconset,
2626
darkMode: WIKI.config.theming.darkMode,
27+
tocPosition: WIKI.config.theming.tocPosition || 'left',
2728
injectCSS: new CleanCSS({ format: 'beautify' }).minify(WIKI.config.theming.injectCSS).styles,
2829
injectHead: WIKI.config.theming.injectHead,
2930
injectBody: WIKI.config.theming.injectBody
@@ -44,6 +45,7 @@ module.exports = {
4445
theme: args.theme,
4546
iconset: args.iconset,
4647
darkMode: args.darkMode,
48+
tocPosition: args.tocPosition || 'left',
4749
injectCSS: args.injectCSS || '',
4850
injectHead: args.injectHead || '',
4951
injectBody: args.injectBody || ''

‎server/graph/schemas/theming.graphql

+2
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ type ThemingMutation {
2828
theme: String!
2929
iconset: String!
3030
darkMode: Boolean!
31+
tocPosition: String
3132
injectCSS: String
3233
injectHead: String
3334
injectBody: String
@@ -42,6 +43,7 @@ type ThemingConfig {
4243
theme: String!
4344
iconset: String!
4445
darkMode: Boolean!
46+
tocPosition: String
4547
injectCSS: String
4648
injectHead: String
4749
injectBody: String

‎server/master.js

+1
Original file line numberDiff line numberDiff line change
@@ -149,6 +149,7 @@ module.exports = async () => {
149149
title: WIKI.config.title,
150150
theme: WIKI.config.theming.theme,
151151
darkMode: WIKI.config.theming.darkMode,
152+
tocPosition: WIKI.config.theming.tocPosition,
152153
lang: WIKI.config.lang.code,
153154
rtl: WIKI.config.lang.rtl,
154155
company: WIKI.config.company,

0 commit comments

Comments
 (0)