RED-2658: toggle annotation tooltips

apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.ts

@@ -48,6 +48,8 @@ const dataElements = {
     ADD_FALSE_POSITIVE: 'add-false-positive',
     SHAPE_TOOL_GROUP_BUTTON: 'shapeToolGroupButton',
     RECTANGLE_TOOL_DIVIDER: 'rectangleToolDivider',
+    TOGGLE_TOOLTIPS: 'toggle-tooltips',
+    TOGGLE_TOOLTIPS_DIVIDER: 'toggleTooltipsDivider',
     ANNOTATION_POPUP: 'annotationPopup',
     COMPARE_BUTTON: 'compareButton',
     CLOSE_COMPARE_BUTTON: 'closeCompareButton',
@@ -98,6 +100,12 @@ export class PdfViewerComponent implements OnInit, OnChanges {
         readonly multiSelectService: MultiSelectService,
     ) {}
 
+    private get _toggleTooltipsBtnTitle(): string {
+        return this._translateService.instant(_('pdf-viewer.toggle-tooltips'), {
+            active: this._userPreferenceService.getFilePreviewTooltipsPreference(),
+        });
+    }
+
     async ngOnInit() {
         this._setReadyAndInitialState = this._setReadyAndInitialState.bind(this);
         await this.loadViewer();
@@ -212,7 +220,7 @@ export class PdfViewerComponent implements OnInit, OnChanges {
         this.utils = new PdfViewerUtils(this.instance, this.viewModeService);
 
         this._setSelectionMode();
-        this._disableElements();
+        this._configureElements();
         this.utils.disableHotkeys();
         this._configureTextPopup();
 
@@ -322,7 +330,7 @@ export class PdfViewerComponent implements OnInit, OnChanges {
         }
     }
 
-    private _disableElements() {
+    private _configureElements() {
         this.instance.UI.disableElements([
             'pageNavOverlay',
             'menuButton',
@@ -347,6 +355,24 @@ export class PdfViewerComponent implements OnInit, OnChanges {
         ]);
 
         const headerItems = [
+            {
+                type: 'divider',
+                dataElement: dataElements.TOGGLE_TOOLTIPS_DIVIDER,
+            },
+            {
+                type: 'actionButton',
+                element: 'tooltips',
+                dataElement: dataElements.TOGGLE_TOOLTIPS,
+                img: this._convertPath('/assets/icons/general/pdftron-action-toggle-tooltips.svg'),
+                title: this._toggleTooltipsBtnTitle,
+                onClick: async () => {
+                    await this._userPreferenceService.toggleFilePreviewTooltipsPreference();
+                    this._updateTooltipsVisibility();
+                    this.instance.UI.updateElement(dataElements.TOGGLE_TOOLTIPS, {
+                        title: this._toggleTooltipsBtnTitle,
+                    });
+                },
+            },
             {
                 type: 'divider',
                 dataElement: dataElements.RECTANGLE_TOOL_DIVIDER,
@@ -392,7 +418,7 @@ export class PdfViewerComponent implements OnInit, OnChanges {
                     },
                 ];
 
-                originalHeaderItems.splice(11, 0, ...devHeaderItems);
+                originalHeaderItems.splice(9, 0, ...devHeaderItems);
             }
         });
 
@@ -626,6 +652,12 @@ export class PdfViewerComponent implements OnInit, OnChanges {
             this._firstPageChange = true;
             this.viewerReady.emit(this.instance);
             this._setInitialDisplayMode();
+            this._updateTooltipsVisibility();
         });
     }
+
+    private _updateTooltipsVisibility(): void {
+        const current = this._userPreferenceService.getFilePreviewTooltipsPreference();
+        this.instance.UI.setAnnotationContentOverlayHandler(() => (current ? undefined : false));
+    }
 }

apps/red-ui/src/app/services/user-preference.service.ts

@@ -25,10 +25,7 @@ export class UserPreferenceService extends GenericService<UserAttributes> {
 
     getLastOpenedFileForDossier(dossierId: string): string {
         const key = `Dossier-Recent-${dossierId}`;
-        if (this.userAttributes[key]?.length > 0) {
-            return this.userAttributes[key][0];
-        }
-        return '';
+        return this._getAttribute(key);
     }
 
     async saveLastOpenedFileForDossier(dossierId: string, fileId: string): Promise<void> {
@@ -37,6 +34,19 @@ export class UserPreferenceService extends GenericService<UserAttributes> {
         await this.savePreferences([fileId], key).toPromise();
     }
 
+    getFilePreviewTooltipsPreference(): boolean {
+        const key = 'File-Preview-Tooltips';
+        return this._getAttribute(key, 'false') === 'true';
+    }
+
+    async toggleFilePreviewTooltipsPreference(): Promise<void> {
+        const key = 'File-Preview-Tooltips';
+        const currentValue = this.getFilePreviewTooltipsPreference();
+        const nextValue = [(!currentValue).toString()];
+        this.userAttributes[key] = nextValue;
+        await this.savePreferences(nextValue, key).toPromise();
+    }
+
     toggleDevFeatures(): void {
         sessionStorage.setItem('redaction.enable-dev-features', `${!this.areDevFeaturesEnabled}`);
         window.location.reload();
@@ -54,4 +64,11 @@ export class UserPreferenceService extends GenericService<UserAttributes> {
     savePreferences(@RequiredParam() body: List, @RequiredParam() key: string) {
         return this._put(body, `${this._defaultModelPath}/${key}`);
     }
+
+    private _getAttribute(key: string, defaultValue = ''): string {
+        if (this.userAttributes[key]?.length > 0) {
+            return this.userAttributes[key][0];
+        }
+        return defaultValue;
+    }
 }

apps/red-ui/src/assets/i18n/en.json

@@ -1360,7 +1360,8 @@
       "actions": {
         "search": "Search for selection"
       }
-    }
+    },
+    "toggle-tooltips": "{active, select, true{Disable} false{Enable} other{}} annotation tooltips"
   },
   "pending-changes-guard": "WARNING: You have unsaved changes. Press Cancel to go back and save these changes, or OK to lose these changes.",
   "readonly": "Read only",

apps/red-ui/src/assets/icons/general/pdftron-action-toggle-tooltips.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg height="90px" version="1.1" viewBox="-10 -10 110 110" width="90px"
+     xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="comments" stroke="none" stroke-width="1">
+        <path
+            d="M50,0 C25,0 5,20 5,45 C5,55.5 8.5,65 15,73 L15,100 L44,89.5 C46.5,90 48,90 50,90 C75,90 95,70 95,45 C95,20 75,0 50,0 Z M50,80 C48.5,80 46.5,80 44.5,79.5 L43,79.5 L25,86 L25,69.5 L23.5,68 C18,61.5 15,53.5 15,45 C15,25.5 30.5,10 50,10 C69.5,10 85,25.5 85,45 C85,64.5 69.5,80 50,80 Z"
+            fill="#868E96" fill-rule="nonzero" id="Shape"></path>
+    </g>
+</svg>