Merge pull request #485 from IshavSohal/issue-452

Set max width for md editor tooltip, Add untitled key, Add logo alt text to metadata (#485)

src/components/metadata-editor.vue

@@ -923,6 +923,7 @@ export default class MetadataEditorV extends Vue {
         // Generate a new configuration file and populate required fields.
         this.configs[this.configLang] = this.configHelper();
         const config = this.configs[this.configLang] as StoryRampConfig;
+        config.introSlide.logo.altText = this.metadata.logoAltText ?? '';
 
         // Set the source of the product logo
         if (!this.metadata.logoName) {

src/components/slide-editor.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="p-5">
+    <div id="slideEditor" class="p-5">
         <div v-if="!!currentSlide">
             <div class="flex">
                 <div class="flex flex-col w-full">

src/components/text-editor.vue

@@ -158,12 +158,51 @@ export default class TextEditorV extends Vue {
         }
     };
 
+    toolbarTooltipAdjust(toggle): void {
+        const slideEditor = document.querySelector('#slideEditor');
+        const scrollbarVisible =
+            slideEditor.scrollHeight > slideEditor.clientHeight ||
+            document.documentElement.scrollHeight > document.documentElement.clientHeight;
+        const toggleToRightBorder = slideEditor.getBoundingClientRect().right - toggle.getBoundingClientRect().right;
+        const scrollbarOffset = document.documentElement.clientWidth * 1.3 * 0.01;
+        // limit the right position of the toggle's tooltip if the toggle is sufficiently close to the right
+        // border of the screen (only when scrollbar is visible)
+        if (scrollbarVisible && toggleToRightBorder <= 90) {
+            toggle.children[0].style.right = `${Math.max(
+                Math.min(-40, -toggleToRightBorder + scrollbarOffset),
+                -65
+            )}px`;
+        } else {
+            toggle.children[0].style.right = `${-toggleToRightBorder}px`;
+        }
+    }
+
     mounted(): void {
         if (this.centerSlide && this.dynamicSelected) {
             this.panel.customStyles += 'text-align: left !important;';
         } else if (!this.centerSlide && this.dynamicSelected) {
             this.panel.customStyles = (this.panel.customStyles || '').replace('text-align: left !important;', '');
         }
+
+        const rightToolbarToggles = Array.from(
+            document.querySelectorAll('.v-md-editor__toolbar-right > .v-md-editor__toolbar-item')
+        );
+        rightToolbarToggles.forEach((toggle) => {
+            toggle.addEventListener('mouseover', () => {
+                this.toolbarTooltipAdjust(toggle);
+            });
+        });
+    }
+
+    unmounted(): void {
+        const rightToolbarToggles = Array.from(
+            document.querySelectorAll('.v-md-editor__toolbar-right > .v-md-editor__toolbar-item')
+        );
+        rightToolbarToggles.forEach((toggle) => {
+            toggle.removeEventListener('mouseover', () => {
+                this.toolbarTooltipAdjust(toggle);
+            });
+        });
     }
 }
 </script>
@@ -175,4 +214,20 @@ label {
 :deep(.v-md-icon-link::before) {
     content: '\1F517';
 }
+:deep(.v-md-editor__tooltip) {
+    text-wrap: wrap;
+    overflow-wrap: break-word;
+}
+
+:deep(.v-md-editor__toolbar-right > .v-md-editor__toolbar-item > .v-md-editor__tooltip) {
+    max-width: 80px;
+}
+
+:deep(.v-md-editor__toolbar-right) {
+    padding-right: 20px;
+}
+
+:deep(.v-md-icon-preview) {
+    margin-left: 4px;
+}
 </style>

src/lang/lang.csv

@@ -2,6 +2,7 @@ key,enValue,enValid,frValue,frValid
 chapters.title,Chapters,1,Chapitres,1
 chapters.return,Return to top,1,Retournez en haut,1
 chapters.menu,Toggle menu,1,Menu à bascule,1
+chapters.untitled,Untitled Slide,1,Diapositive sans titre,0
 scrollguard.desc,Use ctrl + scroll to zoom the map,1,Utilisez les touches Ctrl et + pour faire un zoom de la carte,1
 story.window.title,RAMP Storylines,1,Scénarios de la PCAR,1
 story.date,Date modified:,1,Date de modification:,1