Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add 2 more nesting levels for toc #1931

Closed
wants to merge 2 commits into from
Closed

feat: add 2 more nesting levels for toc #1931

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b2aaf51
feat: add 2 more nesting levels for toc
regevbr Jul 6, 2020
5da3c08
feat: add 2 more nesting levels for toc
regevbr Jul 12, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
73 changes: 73 additions & 0 deletions client/components/admin/admin-theme.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,75 @@
hint='Select whether the table of contents is shown on the left, right or not at all.'
disabled
)
v-radio-group(
row
outlined
persistent-hint
prepend-icon='mdi-serial-port'
v-model='config.tocLevel'
label='Max Heading Level'
hint='The table of contents will show headings up to the selected level. By default, only heading levels up to H2 are shown.'
)
v-spacer
v-radio(
label='H1'
v-bind:value='1'
)
v-radio(
label='H2'
v-bind:value='2'
)
v-radio(
label='H3'
v-bind:value='3'
)
v-radio(
label='H4'
v-bind:value='4'
)
v-radio(
label='H5'
v-bind:value='5'
)
v-radio(
label='H6'
v-bind:value='6'
)
v-radio-group(
row
outlined
persistent-hint
prepend-icon='mdi-serial-port'
v-model='config.tocCollapseLevel'
label='Collapse Heading Level'
hint='The table of contents will collapse headings starting from the selected level. By default, only heading levels from H2 are collapsed.'
)
v-spacer
v-radio(
label='H1'
v-bind:value='1'
)
v-radio(
label='H2'
v-bind:value='2'
)
v-radio(
label='H3'
v-bind:value='3'
)
v-radio(
label='H4'
v-bind:value='4'
)
v-radio(
label='H5'
v-bind:value='5'
)
v-radio(
label='H6'
v-bind:value='6'
)


v-flex(lg6 xs12)
v-card.animated.fadeInUp.wait-p2s
Expand Down Expand Up @@ -154,6 +223,8 @@ export default {
config: {
theme: 'default',
darkMode: false,
tocLevel: 2,
tocCollapseLevel: 2,
iconset: '',
injectCSS: '',
injectHead: '',
Expand Down Expand Up @@ -209,6 +280,8 @@ export default {
theme: this.config.theme,
iconset: this.config.iconset,
darkMode: this.darkMode,
tocLevel: parseInt(this.config.tocLevel, 10),
tocCollapseLevel: parseInt(this.config.tocCollapseLevel, 10),
injectCSS: this.config.injectCSS,
injectHead: this.config.injectHead,
injectBody: this.config.injectBody
Expand Down
28 changes: 27 additions & 1 deletion client/components/editor.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,14 @@ export default {
type: Number,
default: 0
},
tocLevel: {
type: Number,
default: 0
},
tocCollapseLevel: {
type: Number,
default: 0
},
checkoutDate: {
type: String,
default: new Date().toISOString()
Expand Down Expand Up @@ -190,6 +198,8 @@ export default {
this.path !== this.$store.get('page/path'),
this.savedState.title !== this.$store.get('page/title'),
this.savedState.description !== this.$store.get('page/description'),
this.savedState.tocLevel !== this.$store.get('page/tocLevel'),
this.savedState.tocCollapseLevel !== this.$store.get('page/tocCollapseLevel'),
this.savedState.tags !== this.$store.get('page/tags'),
this.savedState.isPublished !== this.$store.get('page/isPublished'),
this.savedState.publishStartDate !== this.$store.get('page/publishStartDate'),
Expand Down Expand Up @@ -223,6 +233,8 @@ export default {
this.$store.set('page/title', this.title)
this.$store.set('page/scriptCss', this.scriptCss)
this.$store.set('page/scriptJs', this.scriptJs)
this.$store.set('page/tocLevel', this.tocLevel)
this.$store.set('page/tocCollapseLevel', this.tocCollapseLevel)

this.$store.set('page/mode', 'edit')

Expand Down Expand Up @@ -303,6 +315,8 @@ export default {
$publishStartDate: Date
$scriptCss: String
$scriptJs: String
$tocLevel: Int!
$tocCollapseLevel: Int!
$tags: [String]!
$title: String!
) {
Expand All @@ -319,6 +333,8 @@ export default {
publishStartDate: $publishStartDate
scriptCss: $scriptCss
scriptJs: $scriptJs
tocLevel: $tocLevel
tocCollapseLevel: $tocCollapseLevel
tags: $tags
title: $title
) {
Expand Down Expand Up @@ -348,6 +364,8 @@ export default {
publishStartDate: this.$store.get('page/publishStartDate') || '',
scriptCss: this.$store.get('page/scriptCss'),
scriptJs: this.$store.get('page/scriptJs'),
tocLevel: this.$store.get('page/tocLevel'),
tocCollapseLevel: this.$store.get('page/tocCollapseLevel'),
tags: this.$store.get('page/tags'),
title: this.$store.get('page/title')
}
Expand Down Expand Up @@ -407,6 +425,8 @@ export default {
$publishStartDate: Date
$scriptCss: String
$scriptJs: String
$tocLevel: Int
$tocCollapseLevel: Int
$tags: [String]
$title: String
) {
Expand All @@ -424,6 +444,8 @@ export default {
publishStartDate: $publishStartDate
scriptCss: $scriptCss
scriptJs: $scriptJs
tocLevel: $tocLevel
tocCollapseLevel: $tocCollapseLevel
tags: $tags
title: $title
) {
Expand Down Expand Up @@ -453,6 +475,8 @@ export default {
publishStartDate: this.$store.get('page/publishStartDate') || '',
scriptCss: this.$store.get('page/scriptCss'),
scriptJs: this.$store.get('page/scriptJs'),
tocLevel: this.$store.get('page/tocLevel'),
tocCollapseLevel: this.$store.get('page/tocCollapseLevel'),
tags: this.$store.get('page/tags'),
title: this.$store.get('page/title')
}
Expand Down Expand Up @@ -535,7 +559,9 @@ export default {
tags: this.$store.get('page/tags'),
title: this.$store.get('page/title'),
css: this.$store.get('page/scriptCss'),
js: this.$store.get('page/scriptJs')
js: this.$store.get('page/scriptJs'),
tocLevel: this.$store.get('page/tocLevel'),
tocCollapseLevel: this.$store.get('page/tocCollapseLevel')
}
},
injectCustomCss: _.debounce(css => {
Expand Down
81 changes: 81 additions & 0 deletions client/components/editor/editor-modal-properties.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,85 @@
@click:append='showPathSelector'
)
v-divider
v-card-text.grey.pt-5(:class='$vuetify.theme.dark ? `darken-3-d3` : `lighten-5`')
.overline.pb-5 Theme Options
v-radio-group(
row
outlined
persistent-hint
prepend-icon='mdi-serial-port'
v-model='tocLevel'
label='Max Heading Level'
hint='The table of contents will show headings up to the selected level. By default, only heading levels up to H2 are shown.'
)
v-spacer
v-radio(
label='Global'
v-bind:value='0'
)
v-radio(
label='H1'
v-bind:value='1'
)
v-radio(
label='H2'
v-bind:value='2'
)
v-radio(
label='H3'
v-bind:value='3'
)
v-radio(
label='H4'
v-bind:value='4'
)
v-radio(
label='H5'
v-bind:value='5'
)
v-radio(
label='H6'
v-bind:value='6'
)
v-radio-group(
row
outlined
persistent-hint
prepend-icon='mdi-serial-port'
v-model='tocCollapseLevel'
label='Collapse Heading Level'
hint='The table of contents will collapse headings starting from the selected level. By default, only heading levels from H2 are collapsed.'
)
v-spacer
v-radio(
label='Global'
v-bind:value='0'
)
v-radio(
label='H1'
v-bind:value='1'
)
v-radio(
label='H2'
v-bind:value='2'
)
v-radio(
label='H3'
v-bind:value='3'
)
v-radio(
label='H4'
v-bind:value='4'
)
v-radio(
label='H5'
v-bind:value='5'
)
v-radio(
label='H6'
v-bind:value='6'
)
v-divider
v-card-text.grey.pt-5(:class='$vuetify.theme.dark ? `darken-3-d5` : `lighten-4`')
.overline.pb-5 {{$t('editor:props.categorization')}}
v-chip-group.radius-5.mb-5(column, v-if='tags && tags.length > 0')
Expand Down Expand Up @@ -289,6 +368,8 @@ export default {
isPublished: sync('page/isPublished'),
publishStartDate: sync('page/publishStartDate'),
publishEndDate: sync('page/publishEndDate'),
tocLevel: sync('page/tocLevel'),
tocCollapseLevel: sync('page/tocCollapseLevel'),
scriptJs: sync('page/scriptJs'),
scriptCss: sync('page/scriptCss'),
hasScriptPermission: get('page/[email protected]'),
Expand Down
4 changes: 2 additions & 2 deletions client/graph/admin/theme/theme-mutation-save.gql
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
mutation($theme: String!, $iconset: String!, $darkMode: Boolean!, $injectCSS: String, $injectHead: String, $injectBody: String) {
mutation($theme: String!, $iconset: String!, $darkMode: Boolean!, $tocLevel: Int!, $tocCollapseLevel: Int!, $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, tocLevel: $tocLevel, tocCollapseLevel: $tocCollapseLevel, injectCSS: $injectCSS, injectHead: $injectHead, injectBody: $injectBody) {
responseResult {
succeeded
errorCode
Expand Down
2 changes: 2 additions & 0 deletions client/graph/admin/theme/theme-query-config.gql
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ query {
theme
iconset
darkMode
tocLevel
tocCollapseLevel
injectCSS
injectHead
injectBody
Expand Down
2 changes: 2 additions & 0 deletions client/store/page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ const state = {
updatedAt: '',
mode: '',
scriptJs: '',
tocLevel: 2,
tocCollapseLevel: 2,
scriptCss: '',
effectivePermissions: {
comments: {
Expand Down
74 changes: 74 additions & 0 deletions client/themes/default/components/page-toc-item.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
<template lang="pug">
div
v-list-item(@click='click(item.anchor)', v-if='(item.children.length === 0 || tocLevel === level) || tocCollapseLevel > level',
:key='item.anchor', :class='isNestedLevel ? `pl-9` : `pl-6`')
v-icon.pl-0(small, color='grey lighten-1') {{ $vuetify.rtl ? `mdi-chevron-left` : `mdi-chevron-right` }}
v-list-item-title.pl-4(v-bind:class='titleClasses') {{item.title}}
v-list-group(sub-group, v-else, v-bind:class='{"pl-3": isNestedLevel}')
template(v-slot:activator)
v-list-item.pl-0(@click='click(item.anchor)', :key='item.anchor')
v-list-item-title(v-bind:class='titleClasses') {{item.title}}
template(v-if='tocLevel > level', v-for='subItem in item.children')
page-toc-item(:item='subItem', :level='level + 1', :tocLevel='tocLevel', :tocCollapseLevel='tocCollapseLevel')
template(v-if='tocCollapseLevel > level', v-for='subItem in item.children')
page-toc-item(:item='subItem', :level='level + 1', :tocLevel='tocLevel', :tocCollapseLevel='tocCollapseLevel')
</template>

<script>

export default {
name: "pageTocItem",
props: {
item: {
type: Object,
default: () => {}
},
tocLevel: {
type: Number,
default: 2
},
tocCollapseLevel: {
type: Number,
default: 2
},
level: {
type: Number,
default: 1
}
},
data() {
return {
scrollOpts: {
duration: 1500,
offset: 0,
easing: 'easeInOutCubic'
}
}
},
computed: {
isNestedLevel() {
return this.level > 1
},
titleClasses() {
return {
"caption": this.isNestedLevel,
"grey--text": this.isNestedLevel,
"text--lighten-1": this.$vuetify.theme.dark && this.isNestedLevel,
"text--darken-1": !this.$vuetify.theme.dark && this.isNestedLevel
}
},
},
methods: {
click (anchor) {
this.$vuetify.goTo(anchor, this.scrollOpts)
}
}
}
</script>

<style lang='scss'>
// Hack to fix animations of multi level nesting v-list-group
.v-list-group--sub-group.v-list-group--active .v-list-item:not(.v-list-item--active) .v-list-item__icon.v-list-group__header__prepend-icon .v-icon {
transform: rotate(0deg)!important;
}
</style>
Loading