From 1151eb7c6690b258c22dd34f03344d8b80fbeae0 Mon Sep 17 00:00:00 2001 From: Mistry Date: Wed, 13 Mar 2024 16:33:14 -0400 Subject: [PATCH] Added option for horizontal table of contents --- .../editor/helpers/metadata-content.vue | 18 ++++++++++++++++++ src/components/editor/metadata-editor.vue | 18 ++++++++++++++++-- src/components/editor/preview.vue | 16 +++++++++++++++- src/definitions.ts | 2 ++ src/lang/lang.csv | 6 +++++- 5 files changed, 56 insertions(+), 4 deletions(-) diff --git a/src/components/editor/helpers/metadata-content.vue b/src/components/editor/helpers/metadata-content.vue index 008137ef..a994039b 100644 --- a/src/components/editor/helpers/metadata-content.vue +++ b/src/components/editor/helpers/metadata-content.vue @@ -71,6 +71,23 @@ {{ $t('editor.contextLabel.info') }}


+ + +
+ +

+ {{ $t('editor.tocOrientation.info') }} +

+


@@ -90,6 +107,7 @@ export default class MetadataEditorV extends Vue { logoAltText: string; contextLink: string; contextLabel: string; + tocOrientation: string; dateModified: string; }; diff --git a/src/components/editor/metadata-editor.vue b/src/components/editor/metadata-editor.vue index b3c84efb..aa0981c2 100644 --- a/src/components/editor/metadata-editor.vue +++ b/src/components/editor/metadata-editor.vue @@ -244,6 +244,7 @@ export default class MetadataEditorV extends Vue { logoAltText: '', contextLink: '', contextLabel: '', + tocOrientation: '', dateModified: '' }; // add more required metadata fields to here as needed @@ -272,6 +273,8 @@ export default class MetadataEditorV extends Vue { const month = (curDate.getMonth() + 1).toString().padStart(2, '0'); const day = curDate.getDate().toString().padStart(2, '0'); this.metadata.dateModified = `${year}-${month}-${day}`; + // set vertical as the default table of contents orientation + this.metadata.tocOrientation = 'vertical'; } // Find which view to render based on route @@ -379,6 +382,7 @@ export default class MetadataEditorV extends Vue { slides: [], contextLabel: this.metadata.contextLabel, contextLink: this.metadata.contextLink, + tocOrientation: this.metadata.tocOrientation, dateModified: this.metadata.dateModified }; } @@ -555,6 +559,7 @@ export default class MetadataEditorV extends Vue { this.metadata.introSubtitle = config.introSlide.subtitle; this.metadata.contextLink = config.contextLink; this.metadata.contextLabel = config.contextLabel; + this.metadata.tocOrientation = config.tocOrientation; this.metadata.dateModified = config.dateModified; // Conversion for individual image panels to slideshow for gallery display @@ -647,7 +652,14 @@ export default class MetadataEditorV extends Vue { } updateMetadata( - key: 'title' | 'introTitle' | 'introSubtitle' | 'contextLink' | 'contextLabel' | 'dateModified', + key: + | 'title' + | 'introTitle' + | 'introSubtitle' + | 'contextLink' + | 'contextLabel' + | 'tocOrientation' + | 'dateModified', value: string ): void { this.metadata[key] = value; @@ -667,6 +679,7 @@ export default class MetadataEditorV extends Vue { config.introSlide.subtitle = this.metadata.introSubtitle; config.contextLink = this.metadata.contextLink; config.contextLabel = this.metadata.contextLabel; + config.tocOrientation = this.metadata.tocOrientation; config.dateModified = this.metadata.dateModified; // If the logo section is missing, create it here before overwriting values. @@ -710,7 +723,8 @@ export default class MetadataEditorV extends Vue { dateModified: '', logoPreview: '', logoName: '', - logoAltText: '' + logoAltText: '', + tocOrientation: '' }; this.configs = { en: undefined, fr: undefined }; this.slides = []; diff --git a/src/components/editor/preview.vue b/src/components/editor/preview.vue index 518607d2..0b3e3c80 100644 --- a/src/components/editor/preview.vue +++ b/src/components/editor/preview.vue @@ -8,7 +8,10 @@
-
+
{{ config.title }}
@@ -22,6 +25,7 @@ :configFileStructure="configFileStructure" :lang="lang" :plugin="true" + :headerHeight="headerHeight" @step="updateActiveIndex" />
@@ -65,6 +69,7 @@ export default class StoryPreviewV extends Vue { loadStatus = 'loading'; activeChapterIndex = -1; lang = 'en'; + headerHeight = 0; uid = ''; created(): void { @@ -100,6 +105,11 @@ export default class StoryPreviewV extends Vue { updateActiveIndex(idx: number): void { this.activeChapterIndex = idx; + //determine header height + const headerH = document.getElementById('story-header'); + if (headerH) { + this.headerHeight = headerH.clientHeight; + } } } @@ -125,6 +135,10 @@ $font-list: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; border-bottom: 0px; } + .story-header { + z-index: 60; + } + .storyramp-modified { max-width: 1536px; margin: 0 auto; diff --git a/src/definitions.ts b/src/definitions.ts index d320b15c..13e23986 100644 --- a/src/definitions.ts +++ b/src/definitions.ts @@ -7,6 +7,7 @@ export interface StoryRampConfig { slides: Slide[]; contextLink: string; contextLabel: string; + tocOrientation: string; dateModified: string; } @@ -38,6 +39,7 @@ export interface MetadataContent { logoAltText: string; contextLink: string; contextLabel: string; + tocOrientation: string; dateModified: string; } diff --git a/src/lang/lang.csv b/src/lang/lang.csv index f564e256..48db8932 100644 --- a/src/lang/lang.csv +++ b/src/lang/lang.csv @@ -111,4 +111,8 @@ editor.slides.select,Please select a slide to edit,1,Veuillez sélectionner une editor.slides.panel.body,Panel body,1,Corps du panneau,1 editor.slides.panel.title,Panel title,1,Titre du panneau,1 editor.slides.intro,Intro subtitle,1,Sous-titre de l’introduction,1 -editor.slides.title,Intro title,1,Titre de l’introduction,1 \ No newline at end of file +editor.slides.title,Intro title,1,Titre de l’introduction,1 +editor.tocOrientation,Table of Contents Orientation,1,Orientation de la table des matières,0 +editor.tocOrientation.info,The table of contents orientation will be set to vertical in mobile view.,1,L'orientation de la table des matières sera définie sur verticale en vue mobile.,0 +editor.tocOrientation.vertical,Vertical,1,Vertical,0 +editor.tocOrientation.horizontal,Horizontal,1,Horizontal,0 \ No newline at end of file